inert-pseudo-element-hittest.html (2556B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Hit-testing on pseudo elements of inert nodes</title> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <style> 11 #target::before { 12 content: ""; 13 width: 50px; 14 height: 50px; 15 background-color: green; 16 display: inline-block; 17 } 18 19 #target:hover::before, 20 #target:active::before { 21 background-color: red; 22 } 23 </style> 24 <p>Manual test: hover the green square, pass if it does not turn red.</p> 25 <div id="target" inert></div> 26 <script> 27 const events = [ 28 "mousedown", "mouseenter", "mousemove", "mouseover", 29 "pointerdown", "pointerenter", "pointermove", "pointerover", 30 ]; 31 async function mouseDownAndGetEvents(test) { 32 const receivedEvents = []; 33 for (let event of events) { 34 target.addEventListener(event, () => { 35 receivedEvents.push(event); 36 }, { once: true, capture: true }); 37 } 38 39 let targetRect = target.getBoundingClientRect(); 40 await new test_driver.Actions() 41 .pointerMove(targetRect.x + 1, targetRect.y + 1, { origin: "viewport" }) 42 .pointerDown() 43 .send(); 44 test.add_cleanup(() => test_driver.click(document.body)); 45 46 // Exact order of events is not interoperable. 47 receivedEvents.sort(); 48 return receivedEvents; 49 } 50 promise_test(async function() { 51 const receivedEvents = await mouseDownAndGetEvents(this); 52 assert_array_equals(receivedEvents, [], "target got no event"); 53 assert_false(target.matches(":active"), "target is not active"); 54 assert_false(target.matches(":hover"), "target is not hovered"); 55 assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(0, 128, 0)", "#target::before has no hover style"); 56 }, "Hit-testing cannot reach pseudo elements of inert nodes"); 57 58 promise_test(async function() { 59 target.inert = false; 60 const receivedEvents = await mouseDownAndGetEvents(this); 61 assert_array_equals(receivedEvents, events, "target got all events"); 62 assert_true(target.matches(":active"), "target is active"); 63 assert_true(target.matches(":hover"), "target is hovered"); 64 assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(255, 0, 0)", "#target::before has hover style"); 65 }, "Hit-testing can reach pseudo elements of non-inert nodes"); 66 </script>