dom/svg/test/test_stroke-hit-testing.xhtml

   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>