mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-12-03 21:10:30 +00:00
Base: Add HTML test page for cursor & table
This page is useful for testing the CSS 'cursor' property, as well as HTML tables
This commit is contained in:
Adam Hodgen
Andreas Kling
parent
b9c6059984
commit
3cfab83e7e
Notes:
sideshowbarker
2024-07-18 19:24:13 +09:00
Author: https://github.com/ant1441 Commit: https://github.com/SerenityOS/serenity/commit/3cfab83e7e8 Pull-request: https://github.com/SerenityOS/serenity/pull/6464
1 changed files with 278 additions and 0 deletions
278
Base/res/html/misc/cursor.html
Normal file
278
Base/res/html/misc/cursor.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue