1 <!DOCTYPE html>
2 <html onclick="fail()"><head><title>CSS Basic User Interface Test: cursor hotspot coordinates clamping</title>
3 <link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
4 <link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help">
5 <meta content="interact dom" name="flags">
6 <meta charset="UTF-8">
7 <meta content="The coordinates of the hotspot must be clamped if they fall outside of the range of the image, including negative numbers." name="assert">
8 <style>
9 body, html {
10 cursor: url("support/cursors/arrows.png") -100 -100, url("support/cursors/arrows.ico") -100 -100, help;
11 }
12 div {
13 margin: 30px;
14 width: 15px;
15 height: 15px;
16 background: green;
17 }
18 #fail, #pass { display: none; }
19 </style>
20
21 </head><body><p>If you are on a device without a cursor, skip this test.
22 </p><p>Otherwise, if the cursor does not look like a red and a green arrow, the test has failed.
23 </p><p>Place the cursor so that the tip of the <strong>red arrow</strong> is on the <strong>green box</strong>, then click.
24 </p><p>If nothing happens when you click, the test has failed.
25 </p><div onclick="pass(event)"></div>
26 <p id="fail">The test has failed.
27 </p><p id="pass">The test passes.
28
29 <script>
30 function pass(e) {
31 document.getElementById("pass").style.display="block";
32 e.stopPropagation();
33 }
34 function fail() {
35 document.getElementById("fail").style.display="block";
36 }
37 </script>
38 </p></body></html>