RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 17:12:43 +00:00
Code Issues Activity Actions
serenity/Base/res/html/misc/cursor.html
Adam Hodgen 3cfab83e7e Base: Add HTML test page for cursor & table 
This page is useful for testing the CSS 'cursor' property, as well as
HTML tables
2021-04-19 12:26:05 +02:00

278 lines
12 KiB
HTML
Raw Blame History

<!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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>
Reference in a new issue View git blame Copy permalink