inert-svg-hittest.html (2351B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Hit-testing with SVG made inert by modal dialog</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 made inert by modal dialog 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 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> 15 <rect width="500" height="500" id="target" fill="red"> 16 </svg> 17 </div> 18 19 <dialog id="dialog">Content behind the open modal dialog should not be clickable</dialog> 20 21 <style> 22 dialog::backdrop { 23 display: none; 24 } 25 </style> 26 27 <script> 28 const dialog = document.getElementById("dialog"); 29 const wrapper = document.getElementById("wrapper"); 30 const target = document.getElementById("target"); 31 32 promise_test(async function() { 33 dialog.showModal(); 34 this.add_cleanup(() => dialog.close()); 35 36 let reachedTarget = false; 37 target.addEventListener("mousedown", () => { 38 reachedTarget = true; 39 }, { once: true }); 40 41 let wrapperRect = wrapper.getBoundingClientRect(); 42 await new test_driver.Actions() 43 .pointerMove(wrapperRect.x + 1, wrapperRect.y + 1, { origin: "viewport" }) 44 .pointerDown() 45 .send(); 46 47 assert_false(target.matches(":active"), "target is not active"); 48 assert_false(target.matches(":hover"), "target is not hovered"); 49 assert_false(reachedTarget, "target didn't get event"); 50 }, "Hit-testing doesn't reach contents of an inert SVG"); 51 52 promise_test(async function() { 53 assert_false(dialog.open, "dialog is closed"); 54 55 let reachedTarget = false; 56 target.addEventListener("mousedown", () => { 57 reachedTarget = true; 58 }, { once: true }); 59 60 await new test_driver.Actions() 61 .pointerMove(0, 0, { origin: wrapper }) 62 .pointerDown() 63 .send(); 64 65 assert_true(target.matches(":active"), "target is active"); 66 assert_true(reachedTarget, "target got event"); 67 }, "Hit-testing can reach contents of a no longer inert SVG"); 68 </script>