test_stroke-hit-testing.xhtml (1875B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=676001 4 --> 5 <head> 6 <title>Test hit-testing of stroke</title> 7 <style> 8 9 :hover { stroke: lime; } 10 11 </style> 12 <script src="/tests/SimpleTest/SimpleTest.js"></script> 13 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 14 </head> 15 <body onload="run()"> 16 <script class="testbody" type="text/javascript"> 17 <![CDATA[ 18 19 SimpleTest.waitForExplicitFinish(); 20 21 function run() { 22 var div = document.getElementById("div"); 23 var line = document.getElementById("line"); 24 var circle = document.getElementById("circle"); 25 var offsetX = div.offsetLeft; 26 var offsetY = div.offsetTop; 27 var got; 28 29 // line 30 got = document.elementFromPoint(offsetX + 116, offsetY + 103); 31 is(got, line, "Should hit line (1)"); 32 33 got = document.elementFromPoint(offsetX + 123, offsetY + 108); 34 is(got, line, "Should hit line (2)"); 35 36 // circle 37 got = document.elementFromPoint(offsetX + 188, offsetY + 158); 38 is(got, circle, "Should hit circle (1)"); 39 40 got = document.elementFromPoint(offsetX + 185, offsetY + 162); 41 is(got, circle, "Should hit circle (2)"); 42 43 SimpleTest.finish(); 44 } 45 46 ]]> 47 </script> 48 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=676001">Mozilla Bug 676001</a> 49 <p id="display"></p> 50 <div id="content"> 51 52 <div width="100%" height="1" id="div"></div> 53 <svg xmlns="http://www.w3.org/2000/svg" id="svg" width="500" height="300"> 54 <line id="line" x1="100" y1="100" x2="600" y2="180" 55 stroke="red" stroke-width="40"/> 56 <!-- the circle test points need to be within the mochitest test harness 57 viewport for test content in order for elementFromPoint to work --> 58 <circle id="circle" cx="100" cy="150" r="100" 59 fill="none" stroke="red" stroke-width="40"/> 60 </svg> 61 62 </div> 63 <pre id="test"> 64 </pre> 65 </body> 66 </html>