inert-svg-hittest.html (2562B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Hit-testing with inert SVG</title> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert"> 6 <meta assert="assert" content="SVG inside element with inert attribute should be unreachable with hit-testing"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 13 <div id="wrapper"> 14 <div inert id="svg-container"> 15 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> 16 <rect width="500" height="500" id="target" fill="red"> 17 </svg> 18 </div> 19 </div> 20 21 <script> 22 const wrapper = document.getElementById("wrapper"); 23 const target = document.getElementById("target"); 24 25 promise_test(async function() { 26 let reachedTarget = false; 27 target.addEventListener("mousedown", () => { 28 reachedTarget = true; 29 }, { once: true }); 30 31 let reachedWrapper = false; 32 wrapper.addEventListener("mousedown", () => { 33 reachedWrapper = true; 34 }, { once: true }); 35 36 await new test_driver.Actions() 37 .pointerMove(0, 0, { origin: wrapper }) 38 .pointerDown() 39 .send(); 40 this.add_cleanup(() => test_driver.click(document.body)); 41 42 assert_false(target.matches(":active"), "target is not active"); 43 assert_false(target.matches(":hover"), "target is not hovered"); 44 assert_false(reachedTarget, "target didn't get event"); 45 46 assert_true(wrapper.matches(":hover"), "wrapper is hovered"); 47 assert_true(reachedWrapper, "wrapper got event"); 48 }, "Hit-testing doesn't reach contents of an inert SVG"); 49 50 promise_test(async function() { 51 document.querySelector("#svg-container").inert = false; 52 53 let reachedTarget = false; 54 target.addEventListener("mousedown", () => { 55 reachedTarget = true; 56 }, { once: true }); 57 58 await new test_driver.Actions() 59 .pointerMove(0, 0, { origin: wrapper }) 60 .pointerDown() 61 .send(); 62 this.add_cleanup(() => test_driver.click(document.body)); 63 64 assert_true(target.matches(":active"), "target is active"); 65 assert_true(target.matches(":hover"), "target is hovered"); 66 assert_true(reachedTarget, "target got event"); 67 68 assert_true(wrapper.matches(":hover"), "wrapper is hovered"); 69 }, "Hit-testing can reach contents of a no longer inert SVG"); 70 </script>