blob: f6e290a909f5e3b2864293bca96c96caeb32ec1f [file] [log] [blame]
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.test { width: 50px; height: 50px; }
#t1:hover { background-color: green }
#t2:hover .class { background-color: green }
#t3:hover span { background-color: green }
</style>
<div id="t1" class="test">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="t2" class="test">
<div></div>
<div></div>
<div class="class"></div>
<div></div>
</div>
<div id="t3" class="test">
<div></div>
<div></div>
<div><span></span></div>
<div><span></span></div>
</div>
<script>
description("Check that invalidation sets work for :hover changes.");
function hoverElement(element) {
eventSender.mouseMoveTo(0, 0);
document.body.offsetLeft; // force recalc.
var x = element.offsetLeft + 1;
var y = element.offsetTop + 1;
eventSender.mouseMoveTo(x, y);
}
shouldBeDefined("window.internals");
shouldBeDefined("window.eventSender");
var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var r1 = t1;
var r2 = t2.querySelector(".class");
var r3 = t3.querySelectorAll("span");
shouldBe("getComputedStyle(r1, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(r2, null).backgroundColor", "transparent");
shouldBe("r3.length", "2");
shouldBe("getComputedStyle(r3[0], null).backgroundColor", "transparent");
shouldBe("getComputedStyle(r3[1], null).backgroundColor", "transparent");
hoverElement(t1);
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(r1, null).backgroundColor", "green");
hoverElement(t2);
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBe("getComputedStyle(r2, null).backgroundColor", "green");
hoverElement(t3);
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");
shouldBe("getComputedStyle(r3[0], null).backgroundColor", "green");
shouldBe("getComputedStyle(r3[1], null).backgroundColor", "green");
</script>