101 lines
3.0 KiB
HTML
101 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html id="html">
|
|
<head>
|
|
<style>
|
|
* {
|
|
background-color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
:hover {
|
|
background-color: rgb(50, 100, 150) !important;
|
|
}
|
|
#prime-ancestor div {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
#target {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: green;
|
|
position: absolute;
|
|
left: 100px;
|
|
}
|
|
#interceptor {
|
|
position: absolute;
|
|
left: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<body id="body">
|
|
<div id="prime-ancestor">
|
|
<div id="interceptor">
|
|
</div>
|
|
<div id="group">
|
|
<div id="element-to-remove">
|
|
<div id="target">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="console">
|
|
</div>
|
|
<script>
|
|
description("Verify the hovered state is updated correctly when an ancestor of the hovered element is detached from the document's tree");
|
|
window.jsTestIsAsync = true;
|
|
|
|
function elementsWithHoverStyle() {
|
|
let elements = [];
|
|
for (let element of document.querySelectorAll("*")) {
|
|
if (getComputedStyle(element).backgroundColor === "rgb(50, 100, 150)")
|
|
elements.push(element.id);
|
|
}
|
|
return elements;
|
|
}
|
|
function elementsMatchingHoverSelector(root = document) {
|
|
let elements = [];
|
|
for (let element of root.querySelectorAll(":hover")) {
|
|
elements.push(element.id);
|
|
}
|
|
return elements;
|
|
}
|
|
|
|
if (!window.eventSender) {
|
|
debug("This test requires eventSender");
|
|
}
|
|
eventSender.mouseMoveTo(300, 50);
|
|
{
|
|
// See https://bugs.webkit.org/show_bug.cgi?id=74264
|
|
eventSender.mouseDown()
|
|
eventSender.mouseUp()
|
|
}
|
|
|
|
debug("Initial state");
|
|
shouldBe('elementsWithHoverStyle()', '["html", "body", "prime-ancestor"]');
|
|
shouldBe('elementsMatchingHoverSelector()', '["html", "body", "prime-ancestor"]');
|
|
|
|
debug("Moving over #target")
|
|
eventSender.mouseMoveTo(150, 50);
|
|
shouldBe('elementsWithHoverStyle()', '["html", "body", "prime-ancestor", "group", "element-to-remove", "target"]');
|
|
shouldBe('elementsMatchingHoverSelector()', '["html", "body", "prime-ancestor", "group", "element-to-remove", "target"]');
|
|
|
|
debug("Removing the renderer of #element-to-remove");
|
|
var elementToRemove = document.getElementById("element-to-remove");
|
|
elementToRemove.parentElement.removeChild(elementToRemove);
|
|
shouldBe('elementsMatchingHoverSelector(elementToRemove)', '[]');
|
|
|
|
// Force layout.
|
|
offsetTop = elementToRemove.offsetTop;
|
|
|
|
// hover updates happen on timer.
|
|
setTimeout(function() {
|
|
shouldBe('elementsWithHoverStyle()', '["html", "body", "prime-ancestor", "interceptor"]');
|
|
shouldBe('elementsMatchingHoverSelector()', '["html", "body", "prime-ancestor", "interceptor"]');
|
|
finishJSTest();
|
|
}, 17);
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|