test_pointer-events-4.xhtml (3773B)
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>