dom/svg/test/test_pointer-events-6.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <!--
   3 https://bugzilla.mozilla.org/show_bug.cgi?id=500174
   4 -->
   5 <head>
   6   <title>Test pointer events for clip-path on non-SVG elements</title>
   7   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   8   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
   9 </head>
  10 <body onload="run()">
  11 <script class="testbody" type="text/javascript">
  12 <![CDATA[
  13
  14 SimpleTest.waitForExplicitFinish();
  15
  16 function run() {
  17   var div = document.getElementById("div");
  18   // Get the coords of the origin of the SVG canvas:
  19   var originX = div.offsetLeft;
  20   var originY = div.offsetTop;
  21   var elementFromPoint;
  22
  23   elementFromPoint = document.elementFromPoint(originX + 18, originY + 30);
  24   isnot(elementFromPoint, div, "Outside left edge of clipped area");
  25
  26   elementFromPoint = document.elementFromPoint(originX + 22, originY + 30);
  27   is(elementFromPoint, div, "Inside left edge of clipped area");
  28
  29   elementFromPoint = document.elementFromPoint(originX + 30, originY + 18);
  30   isnot(elementFromPoint, div, "Outside top edge of clipped area");
  31
  32   elementFromPoint = document.elementFromPoint(originX + 30, originY + 22);
  33   is(elementFromPoint, div, "Inside top edge of clipped area");
  34
  35   elementFromPoint = document.elementFromPoint(originX + 42, originY + 30);
  36   isnot(elementFromPoint, div, "Outside right edge of clipped area");
  37
  38   elementFromPoint = document.elementFromPoint(originX + 38, originY + 30);
  39   is(elementFromPoint, div, "Inside right edge of clipped area");
  40
  41   elementFromPoint = document.elementFromPoint(originX + 30, originY + 42);
  42   isnot(elementFromPoint, div, "Outside bottom edge of clipped area");
  43
  44   elementFromPoint = document.elementFromPoint(originX + 30, originY + 38);
  45   is(elementFromPoint, div, "Inside bottom edge of clipped area");
  46
  47   SimpleTest.finish();
  48 }
  49
  50 ]]>
  51 </script>
  52 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=500174">Mozilla Bug 500174</a>
  53 <p id="display"></p>
  54 <div id="content">
  55
  56   <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg">
  57     <defs>
  58       <clipPath id="clip">
  59         <rect x="20" y="20" width="20" height="20"/>
  60       </clipPath>
  61     </defs>
  62   </svg>
  63   <div id="div" style="width:100px; height:100px; clip-path:url(#clip)"></div>
  64
  65 </div>
  66 <pre id="test">
  67 </pre>
  68 </body>
  69 </html>