diff options
| author | Adam Hodgen <ant1441@gmail.com> | 2021-04-18 22:41:15 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2021-04-19 12:26:05 +0200 |
| commit | 3cfab83e7e87ec062c717259e0f1c16f3b579a89 (patch) | |
| tree | 43b331d2bd3360993d1bfba056d62bb6983396c0 /Base | |
| parent | b9c60599849354154d985cd76064d44f7c8d802f (diff) | |
| download | serenity-3cfab83e7e87ec062c717259e0f1c16f3b579a89.zip | |
Base: Add HTML test page for cursor & table
This page is useful for testing the CSS 'cursor' property, as well as
HTML tables
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/res/html/misc/cursor.html | 278 |
1 files changed, 278 insertions, 0 deletions
diff --git a/Base/res/html/misc/cursor.html b/Base/res/html/misc/cursor.html new file mode 100644 index 0000000000..78b941daba --- /dev/null +++ b/Base/res/html/misc/cursor.html @@ -0,0 +1,278 @@ +<!DOCTYPE html> +<html> + <head> + <title>Cursor Test Page</title> + <style> + table { + table-layout: fixed; + border-collapse: collapse; + border: 3px solid gray; + } + + thead { + text-align: left; + } + + thead th { + border: 3px solid; + } + + tbody td { + border: 3px solid gray; + width: 300px; + } + </style> + </head> + <body> + <h1>Cursor test page</h1> + + <h2>Title attribute</h2> + <p title="Title on text">This is a paragraph with a title attribute. + <br /> + <a title="Title on link" href="http://serenityos.org">This is a link with a title</a> + </p> + + <h2>Cursors</h2> + <p style="cursor: wait">This is a paragraph with a custom cursor. + <br /> + <a style="cursor: cell" href="http://serenityos.org">This is a link with a custom cursor</a> + </p> + + <table> + <thead> + <tr> + <th>Cursor Name</th> + <th>Text</th> + <th>Button</th> + <th>Block</th> + </tr> + </thead> + + <tbody> + <tr> + <td><span style="cursor: auto">auto</span></td> + <td><span style="cursor: auto">auto</span></td> + <td><button style="cursor: auto">auto</button></td> + <td width="100px" style="background-color: gray; cursor: wait"> </td> + </tr> + <tr> + <td><span style="cursor: default">default</span></td> + <td><span style="cursor: default">default</span></td> + <td><button style="cursor: default">default</button></td> + <td style="background-color: darkgray; cursor: default"> </td> + </tr> + <tr> + <td><span style="cursor: none">none</span></td> + <td><span style="cursor: none">none</span></td> + <td><button style="cursor: none">none</button></td> + <td style="background-color: gray; cursor: none"> </td> + </tr> + <tr> + <td><span style="cursor: text">text</span></td> + <td><span style="cursor: text">text</span></td> + <td><button style="cursor: text">text</button></td> + <td style="background-color: darkgray; cursor: text"> </td> + </tr> + <tr> + <td><span style="cursor: context-menu">context-menu</span></td> + <td><span style="cursor: context-menu">context-menu</span></td> + <td><button style="cursor: context-menu">context-menu</button></td> + <td style="background-color: gray; cursor: context-menu"> </td> + </tr> + <tr> + <td><span style="cursor: help">help</span></td> + <td><span style="cursor: help">help</span></td> + <td><button style="cursor: help">help</button></td> + <td style="background-color: darkgray; cursor: help"> </td> + </tr> + <tr> + <td><span style="cursor: pointer">pointer</span></td> + <td><span style="cursor: pointer">pointer</span></td> + <td><button style="cursor: pointer">pointer</button></td> + <td style="background-color: gray; cursor: pointer"> </td> + </tr> + <tr> + <td><span style="cursor: progress">progress</span></td> + <td><span style="cursor: progress">progress</span></td> + <td><button style="cursor: progress">progress</button></td> + <td style="background-color: darkgray; cursor: progress"> </td> + </tr> + <tr> + <td><span style="cursor: wait">wait</span></td> + <td><span style="cursor: wait">wait</span></td> + <td><button style="cursor: wait">wait</button></td> + <td style="background-color: gray; cursor: wait"> </td> + </tr> + <tr> + <td><span style="cursor: cell">cell</span></td> + <td><span style="cursor: cell">cell</span></td> + <td><button style="cursor: cell">cell</button></td> + <td style="background-color: darkgray; cursor: cell"> </td> + </tr> + <tr> + <td><span style="cursor: crosshair">crosshair</span></td> + <td><span style="cursor: crosshair">crosshair</span></td> + <td><button style="cursor: crosshair">crosshair</button></td> + <td style="background-color: gray; cursor: crosshair"> </td> + </tr> + <tr> + <td><span style="cursor: text">text</span></td> + <td><span style="cursor: text">text</span></td> + <td><button style="cursor: text">text</button></td> + <td style="background-color: darkgray; cursor: text"> </td> + </tr> + <tr> + <td><span style="cursor: vertical-text">vertical-text</span></td> + <td><span style="cursor: vertical-text">vertical-text</span></td> + <td><button style="cursor: vertical-text">vertical-text</button></td> + <td style="background-color: gray; cursor: vertical-text"> </td> + </tr> + <tr> + <td><span style="cursor: alias">alias</span></td> + <td><span style="cursor: alias">alias</span></td> + <td><button style="cursor: alias">alias</button></td> + <td style="background-color: darkgray; cursor: alias"> </td> + </tr> + <tr> + <td><span style="cursor: copy">copy</span></td> + <td><span style="cursor: copy">copy</span></td> + <td><button style="cursor: copy">copy</button></td> + <td style="background-color: gray; cursor: copy"> </td> + </tr> + <tr> + <td><span style="cursor: move">move</span></td> + <td><span style="cursor: move">move</span></td> + <td><button style="cursor: move">move</button></td> + <td style="background-color: darkgray; cursor: move"> </td> + </tr> + <tr> + <td><span style="cursor: no-drop">no-drop</span></td> + <td><span style="cursor: no-drop">no-drop</span></td> + <td><button style="cursor: no-drop">no-drop</button></td> + <td style="background-color: gray; cursor: no-drop"> </td> + </tr> + <tr> + <td><span style="cursor: not-allowed">not-allowed</span></td> + <td><span style="cursor: not-allowed">not-allowed</span></td> + <td><button style="cursor: not-allowed">not-allowed</button></td> + <td style="background-color: darkgray; cursor: not-allowed"> </td> + </tr> + <tr> + <td><span style="cursor: grab">grab</span></td> + <td><span style="cursor: grab">grab</span></td> + <td><button style="cursor: grab">grab</button></td> + <td style="background-color: gray; cursor: grab"> </td> + </tr> + <tr> + <td><span style="cursor: grabbing">grabbing</span></td> + <td><span style="cursor: grabbing">grabbing</span></td> + <td><button style="cursor: grabbing">grabbing</button></td> + <td style="background-color: darkgray; cursor: grabbing"> </td> + </tr> + <tr> + <td><span style="cursor: e-resize">e-resize</span></td> + <td><span style="cursor: e-resize">e-resize</span></td> + <td><button style="cursor: e-resize">e-resize</button></td> + <td style="background-color: gray; cursor: e-resize"> </td> + </tr> + <tr> + <td><span style="cursor: n-resize">n-resize</span></td> + <td><span style="cursor: n-resize">n-resize</span></td> + <td><button style="cursor: n-resize">n-resize</button></td> + <td style="background-color: darkgray; cursor: n-resize"> </td> + </tr> + <tr> + <td><span style="cursor: ne-resize">ne-resize</span></td> + <td><span style="cursor: ne-resize">ne-resize</span></td> + <td><button style="cursor: ne-resize">ne-resize</button></td> + <td style="background-color: gray; cursor: ne-resize"> </td> + </tr> + <tr> + <td><span style="cursor: nw-resize">nw-resize</span></td> + <td><span style="cursor: nw-resize">nw-resize</span></td> + <td><button style="cursor: nw-resize">nw-resize</button></td> + <td style="background-color: darkgray; cursor: nw-resize"> </td> + </tr> + <tr> + <td><span style="cursor: s-resize">s-resize</span></td> + <td><span style="cursor: s-resize">s-resize</span></td> + <td><button style="cursor: s-resize">s-resize</button></td> + <td style="background-color: gray; cursor: s-resize"> </td> + </tr> + <tr> + <td><span style="cursor: se-resize">se-resize</span></td> + <td><span style="cursor: se-resize">se-resize</span></td> + <td><button style="cursor: se-resize">se-resize</button></td> + <td style="background-color: darkgray; cursor: se-resize"> </td> + </tr> + <tr> + <td><span style="cursor: sw-resize">sw-resize</span></td> + <td><span style="cursor: sw-resize">sw-resize</span></td> + <td><button style="cursor: sw-resize">sw-resize</button></td> + <td style="background-color: gray; cursor: sw-resize"> </td> + </tr> + <tr> + <td><span style="cursor: w-resize">w-resize</span></td> + <td><span style="cursor: w-resize">w-resize</span></td> + <td><button style="cursor: w-resize">w-resize</button></td> + <td style="background-color: darkgray; cursor: w-resize"> </td> + </tr> + <tr> + <td><span style="cursor: ew-resize">ew-resize</span></td> + <td><span style="cursor: ew-resize">ew-resize</span></td> + <td><button style="cursor: ew-resize">ew-resize</button></td> + <td style="background-color: gray; cursor: ew-resize"> </td> + </tr> + <tr> + <td><span style="cursor: ns-resize">ns-resize</span></td> + <td><span style="cursor: ns-resize">ns-resize</span></td> + <td><button style="cursor: ns-resize">ns-resize</button></td> + <td style="background-color: darkgray; cursor: ns-resize"> </td> + </tr> + <tr> + <td><span style="cursor: nesw-resize">nesw-resize</span></td> + <td><span style="cursor: nesw-resize">nesw-resize</span></td> + <td><button style="cursor: nesw-resize">nesw-resize</button></td> + <td style="background-color: gray; cursor: nesw-resize"> </td> + </tr> + <tr> + <td><span style="cursor: nwse-resize">nwse-resize</span></td> + <td><span style="cursor: nwse-resize">nwse-resize</span></td> + <td><button style="cursor: nwse-resize">nwse-resize</button></td> + <td style="background-color: darkgray; cursor: nwse-resize"> </td> + </tr> + <tr> + <td><span style="cursor: col-resize">col-resize</span></td> + <td><span style="cursor: col-resize">col-resize</span></td> + <td><button style="cursor: col-resize">col-resize</button></td> + <td style="background-color: gray; cursor: col-resize"> </td> + </tr> + <tr> + <td><span style="cursor: row-resize">row-resize</span></td> + <td><span style="cursor: row-resize">row-resize</span></td> + <td><button style="cursor: row-resize">row-resize</button></td> + <td style="background-color: darkgray; cursor: row-resize"> </td> + </tr> + <tr> + <td><span style="cursor: all-scroll">all-scroll</span></td> + <td><span style="cursor: all-scroll">all-scroll</span></td> + <td><button style="cursor: all-scroll">all-scroll</button></td> + <td style="background-color: gray; cursor: all-scroll"> </td> + </tr> + <tr> + <td><span style="cursor: zoom-in">zoom-in</span></td> + <td><span style="cursor: zoom-in">zoom-in</span></td> + <td><button style="cursor: zoom-in">zoom-in</button></td> + <td style="background-color: darkgray; cursor: zoom-in"> </td> + </tr> + <tr> + <td><span style="cursor: zoom-out">zoom-out</span></td> + <td><span style="cursor: zoom-out">zoom-out</span></td> + <td><button style="cursor: zoom-out">zoom-out</button></td> + <td style="background-color: gray; cursor: zoom-out"> </td> + </tr> + + </tbody> + </table> + </body> +</html> |