66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>Hit-testing on pseudo elements of inert nodes</title>
|
|
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
|
<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>
|
|
<style>
|
|
#target::before {
|
|
content: "";
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: green;
|
|
display: inline-block;
|
|
}
|
|
|
|
#target:hover::before,
|
|
#target:active::before {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
<p>Manual test: hover the green square, pass if it does not turn red.</p>
|
|
<div id="target" inert></div>
|
|
<script>
|
|
const events = [
|
|
"mousedown", "mouseenter", "mousemove", "mouseover",
|
|
"pointerdown", "pointerenter", "pointermove", "pointerover",
|
|
];
|
|
async function mouseDownAndGetEvents(test) {
|
|
const receivedEvents = [];
|
|
for (let event of events) {
|
|
target.addEventListener(event, () => {
|
|
receivedEvents.push(event);
|
|
}, { once: true, capture: true });
|
|
}
|
|
|
|
let targetRect = target.getBoundingClientRect();
|
|
await new test_driver.Actions()
|
|
.pointerMove(targetRect.x + 1, targetRect.y + 1, { origin: "viewport" })
|
|
.pointerDown()
|
|
.send();
|
|
test.add_cleanup(() => test_driver.click(document.body));
|
|
|
|
// Exact order of events is not interoperable.
|
|
receivedEvents.sort();
|
|
return receivedEvents;
|
|
}
|
|
promise_test(async function() {
|
|
const receivedEvents = await mouseDownAndGetEvents(this);
|
|
assert_array_equals(receivedEvents, [], "target got no event");
|
|
assert_false(target.matches(":active"), "target is not active");
|
|
assert_false(target.matches(":hover"), "target is not hovered");
|
|
assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(0, 128, 0)", "#target::before has no hover style");
|
|
}, "Hit-testing cannot reach pseudo elements of inert nodes");
|
|
|
|
promise_test(async function() {
|
|
target.inert = false;
|
|
const receivedEvents = await mouseDownAndGetEvents(this);
|
|
assert_array_equals(receivedEvents, events, "target got all events");
|
|
assert_true(target.matches(":active"), "target is active");
|
|
assert_true(target.matches(":hover"), "target is hovered");
|
|
assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(255, 0, 0)", "#target::before has hover style");
|
|
}, "Hit-testing can reach pseudo elements of non-inert nodes");
|
|
</script>
|