Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/pseudo-element-removal.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Pseudos Test: Removing pseudo element under mouse</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
#target {
width: 100px;
height: 100px;
background: green;
}
#target.has-pseudo::before {
content: "PSEUDO";
display: block;
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="target" class="has-pseudo"></div>
<script>
promise_test(async t => {
const target = document.getElementById("target");
// Move mouse to the pseudo element (top-left of #target).
await new test_driver.Actions()
.pointerMove(10, 10, {origin: target})
.send();
// Remove the pseudo element.
target.classList.remove("has-pseudo");
// Force layout/reflow to ensure the pseudo element is removed.
document.body.offsetTop;
// Move mouse again to set new element under the mouse.
await new test_driver.Actions()
.pointerMove(20, 20, {origin: target})
.send();
const rect = target.getBoundingClientRect();
const elementAtPoint = document.elementFromPoint(rect.left + 10, rect.top + 10);
assert_equals(elementAtPoint, target, 'Target element should be under the mouse');
}, "Removing pseudo element under mouse should not crash");
</script>