mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
279 lines
12 KiB
HTML
279 lines
12 KiB
HTML
<!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 style="background-color: gray; cursor: auto" width="100px"> </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>
|