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