cursor-x-y-002

cursor hotspot coordinates clamping

WeasyPrint

This browser

Flags
dom, interact
Assertion
The coordinates of the hotspot must be clamped if they fall outside of the range of the image.

Source

 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." 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>green 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>