hover-sibling-reattach.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
#outer {
    position: absolute;
    left: 0;
    top: 0
}

#outer div {
    width: 100px;
    height: 100px
}

#hover:hover + #test {
    background-color: black
}
</style>
<div id="outer">
    <div id="hover"></div>
    <div id="test"></div>
</div>
<script>
description("Check that childrenAffectedByHover is intact after a re-attach.");

function mouseOver(x, y) {
    if (window.eventSender)
        eventSender.mouseMoveTo(x, y);
    document.body.offsetTop; // force style recalc
}

var black = "rgb(0, 0, 0)";
var transparent = "rgba(0, 0, 0, 0)";

var test = document.getElementById('test');

shouldBe("getComputedStyle(test, '').backgroundColor", "transparent");

// Hover #hover
mouseOver(50, 50);
shouldBe("getComputedStyle(test, '').backgroundColor", "black");

// Hover body
mouseOver(0, 200);
shouldBe("getComputedStyle(test, '').backgroundColor", "transparent");

// Force re-attach
document.getElementById("hover").style.display = "inline-block";

// Hover #hover
mouseOver(50, 50);
shouldBe("getComputedStyle(test, '').backgroundColor", "black");
</script>
chromium/third_party/blink/web_tests/fast/dynamic/hover-sibling-reattach.html
