test_hit-testing-and-viewbox.xhtml (2830B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=1486952 4 --> 5 <head> 6 <title>Test that hit-testing works after a viewBox update</title> 7 8 <style> 9 :hover { fill: lime; } 10 </style> 11 12 <script src="/tests/SimpleTest/SimpleTest.js"></script> 13 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 14 </head> 15 16 <body onload="run()"> 17 <script class="testbody" type="text/javascript"> 18 <![CDATA[ 19 20 SimpleTest.waitForExplicitFinish(); 21 22 function run() { 23 const div = $("div"); 24 const offsetX = div.offsetLeft; 25 const offsetY = div.offsetTop; 26 const outerRect = $("outerRect"); 27 const innerRect = $("innerRect"); 28 const outerSVG = $("outerSVG"); 29 const innerSVG = $("innerSVG"); 30 let got; 31 32 // Update the inner SVG viewBox to "move" the inner rectangle off its current 33 // position on screen: 34 innerSVG.setAttribute("viewBox", "-25 0 50 50"); 35 got = document.elementFromPoint(offsetX + 150, offsetY + 25); 36 is(got, innerRect, "Should hit inner rectangle (1)"); 37 38 // Update the inner SVG viewBox again. (At the time of writing, a reflow is 39 // triggered the first time you change viewBox on an inner svg, so the 40 // previous test is expected to always pass. This next test will fail if we're 41 // updating overflows on the inner svg frame instead of its children). 42 innerSVG.setAttribute("viewBox", "0 -25 50 50"); 43 got = document.elementFromPoint(offsetX + 100, offsetY + 75); 44 is(got, innerRect, "Should hit inner rectangle (2)"); 45 46 // Now update the outer SVG viewBox and confirm that both rectangles are 47 // registered. (Note that in this case the overflow rectangle of the inner 48 // svg is the inner svg's viewport, so be sure to "move" the outer svg so that 49 // the "new" outer rectangle and inner svg are off the current outerRect 50 // union inner svg viewport - hit testing still works in that union.) 51 outerSVG.setAttribute("viewBox", "-200 0 400 100"); 52 // Outer: 53 got = document.elementFromPoint(offsetX + 250, offsetY + 50); 54 is(got, outerRect, "Should hit outer rectangle"); 55 // Inner: 56 got = document.elementFromPoint(offsetX + 300, offsetY + 75); 57 is(got, innerRect, "Should hit inner rectangle (3)"); 58 59 SimpleTest.finish(); 60 } 61 62 ]]> 63 </script> 64 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1486952">Mozilla Bug 1486952</a> 65 <p id="display"></p> 66 <div id="content"> 67 68 <div width="100%" height="1" id="div"></div> 69 <svg xmlns="http://www.w3.org/2000/svg" id="outerSVG" width="400" height="100" 70 viewBox="0 0 400 100"> 71 <rect x="25" y="25" width="50" height="50" fill="red" id="outerRect" /> 72 <svg x="75" width="100" height="100" viewBox="0 0 50 50" id="innerSVG"> 73 <rect width="25" height="25" fill="red" id="innerRect" /> 74 </svg> 75 </svg> 76 77 </div> 78 <pre id="test"> 79 </pre> 80 </body> 81 </html>