forked from SerenityOS/serenity
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Base: Add HTML test page for cursor & table
This page is useful for testing the CSS 'cursor' property, as well as HTML tables
- Loading branch information
1 parent
b9c6059
commit 3cfab83
Showing
1 changed file
with
278 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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:https://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:https://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> |