<!DOCTYPE html> <meta charset="utf-8"> <title>Hit-testing with inert SVG</title> <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert"> <meta assert="assert" content="SVG inside element with inert attribute should be unreachable with hit-testing"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/resources/testdriver.js"></script> <script src="/resources/testdriver-vendor.js"></script> <script src="/resources/testdriver-actions.js"></script> <div id="wrapper"> <div inert id="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <rect width="500" height="500" id="target" fill="red"> </svg> </div> </div> <script> const wrapper = document.getElementById("wrapper"); const target = document.getElementById("target"); promise_test(async function() { let reachedTarget = false; target.addEventListener("mousedown", () => { reachedTarget = true; }, { once: true }); let reachedWrapper = false; wrapper.addEventListener("mousedown", () => { reachedWrapper = true; }, { once: true }); await new test_driver.Actions() .pointerMove(0, 0, { origin: wrapper }) .pointerDown() .send(); this.add_cleanup(() => test_driver.click(document.body)); assert_false(target.matches(":active"), "target is not active"); assert_false(target.matches(":hover"), "target is not hovered"); assert_false(reachedTarget, "target didn't get event"); assert_true(wrapper.matches(":hover"), "wrapper is hovered"); assert_true(reachedWrapper, "wrapper got event"); }, "Hit-testing doesn't reach contents of an inert SVG"); promise_test(async function() { document.querySelector("#svg-container").inert = false; let reachedTarget = false; target.addEventListener("mousedown", () => { reachedTarget = true; }, { once: true }); await new test_driver.Actions() .pointerMove(0, 0, { origin: wrapper }) .pointerDown() .send(); this.add_cleanup(() => test_driver.click(document.body)); assert_true(target.matches(":active"), "target is active"); assert_true(target.matches(":hover"), "target is hovered"); assert_true(reachedTarget, "target got event"); assert_true(wrapper.matches(":hover"), "wrapper is hovered"); }, "Hit-testing can reach contents of a no longer inert SVG"); </script>