hover-recalc.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
.test { width: 100px; height: 100px }
.test:hover { background-color: green }
.over { width: 150px }
</style>
<div id="t1" class="test"></div>
<div id="t2" class="test"><div></div></div>
<div id="t3" class="test" onmouseover="this.firstChild.className='over'"><div></div></div>
<script>
description("Check that mousemove does not recalc style synchronously.");

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");

shouldBe("getComputedStyle(t1, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(t2, null).backgroundColor", "transparent");

var x1 = t1.offsetLeft + 1;
var y1 = t1.offsetTop + 1;

eventSender.mouseMoveTo(x1, y1);
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(t1, null).backgroundColor", "green");

var x2 = t2.offsetLeft + 1;
var y2 = t2.offsetTop + 1;

eventSender.mouseMoveTo(0, 0);
eventSender.mouseMoveTo(x2, y2);
t2.firstChild.className = "over";
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBe("getComputedStyle(t2, null).backgroundColor", "green");
shouldBe("getComputedStyle(t2.firstChild, null).width", "'150px'");

var x3 = t3.offsetLeft + 1;
var y3 = t3.offsetTop + 1;
eventSender.mouseMoveTo(0, 0);
eventSender.mouseMoveTo(x3, y3);
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBe("getComputedStyle(t3, null).backgroundColor", "green");
shouldBe("getComputedStyle(t3.firstChild, null).width", "'150px'");
</script>
chromium/third_party/blink/web_tests/fast/css/hover-recalc.html
