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

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <!--
   3 https://bugzilla.mozilla.org/show_bug.cgi?id=820506
   4 -->
   5 <head>
   6   <title>Test pointer events with clipPath</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 r1 = document.getElementById("r1");
  22   var r2 = document.getElementById("r2");
  23   var element;
  24   var background = document.getElementById("background");
  25
  26   // Test r1 just outsite the clip area:
  27
  28   element = document.elementFromPoint(originX + 19, originY + 19);
  29   is(element, background, "Should not hit top-left of r1");
  30
  31   element = document.elementFromPoint(originX + 101, originY + 19);
  32   is(element, background, "Should not hit top-right of r1");
  33
  34   element = document.elementFromPoint(originX + 101, originY + 101);
  35   is(element, background, "Should not hit bottom-right of r1");
  36
  37   element = document.elementFromPoint(originX + 19, originY + 101);
  38   is(element, background, "Should not hit bottom-left of r1");
  39
  40   // Test r1 just inside the clip area:
  41
  42   element = document.elementFromPoint(originX + 21, originY + 21);
  43   is(element, r1, "Should hit top-left of r1");
  44
  45   element = document.elementFromPoint(originX + 99, originY + 21);
  46   is(element, r1, "Should hit top-right of r1");
  47
  48   element = document.elementFromPoint(originX + 99, originY + 99);
  49   is(element, r1, "Should hit bottom-right of r1");
  50
  51   element = document.elementFromPoint(originX + 21, originY + 99);
  52   is(element, r1, "Should hit bottom-left of r1");
  53
  54   // Test r2 just outsite the clip area:
  55
  56   element = document.elementFromPoint(originX + 109, originY + 19);
  57   is(element, background, "Should not hit top-left of r2");
  58
  59   element = document.elementFromPoint(originX + 201, originY + 19);
  60   is(element, background, "Should not hit top-right of r2");
  61
  62   element = document.elementFromPoint(originX + 201, originY + 101);
  63   is(element, background, "Should not hit bottom-right of r2");
  64
  65   element = document.elementFromPoint(originX + 109, originY + 101);
  66   is(element, background, "Should not hit bottom-left of r2");
  67
  68   // Test r2 just inside the clip area:
  69
  70   element = document.elementFromPoint(originX + 121, originY + 21);
  71   is(element, r2, "Should hit top-left of r2");
  72
  73   element = document.elementFromPoint(originX + 199, originY + 21);
  74   is(element, r2, "Should hit top-right of r2");
  75
  76   element = document.elementFromPoint(originX + 199, originY + 99);
  77   is(element, r2, "Should hit bottom-right of r2");
  78
  79   element = document.elementFromPoint(originX + 121, originY + 99);
  80   is(element, r2, "Should hit bottom-left of r2");
  81
  82   SimpleTest.finish();
  83 }
  84
  85 ]]>
  86 </script>
  87 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=500174">Mozilla Bug 500174</a>
  88 <p id="display"></p>
  89 <div id="content">
  90
  91   <div width="100%" height="1" id="div">
  92   </div>
  93   <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg">
  94     <clipPath id="cp1" clipPathUnits="userSpaceOnUse">
  95       <rect x="20" y="20" width="80" height="80"/>
  96     </clipPath>
  97     <clipPath id="cp2" clipPathUnits="objectBoundingBox">
  98       <rect x="0.1" y="0.1" width="0.8" height="0.8"/>
  99     </clipPath>
 100     <rect id="background" width="100%" height="100%" fill="blue"/>
 101     <rect id="r1" x="10" y="10" width="100" height="100" clip-path="url(#cp1)"/>
 102     <rect id="r2" x="110" y="10" width="100" height="100" clip-path="url(#cp2)"/>
 103   </svg>
 104
 105 </div>
 106 <pre id="test">
 107 </pre>
 108 </body>
 109 </html>