third_party/WebKit/LayoutTests/fast/css/hover-recalc.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4 .test { width: 100px; height: 100px }
   5 .test:hover { background-color: green }
   6 .over { width: 150px }
   7 </style>
   8 <div id="t1" class="test"></div>
   9 <div id="t2" class="test"><div></div></div>
  10 <div id="t3" class="test" onmouseover="this.firstChild.className='over'"><div></div></div>
  11 <script>
  12 description("Check that mousemove does not recalc style synchronously.");
  13
  14 shouldBeDefined("window.internals");
  15 shouldBeDefined("window.eventSender");
  16
  17 var transparent = "rgba(0, 0, 0, 0)";
  18 var green = "rgb(0, 128, 0)";
  19
  20 var t1 = document.getElementById("t1");
  21 var t2 = document.getElementById("t2");
  22 var t3 = document.getElementById("t3");
  23
  24 shouldBe("getComputedStyle(t1, null).backgroundColor", "transparent");
  25 shouldBe("getComputedStyle(t2, null).backgroundColor", "transparent");
  26
  27 var x1 = t1.offsetLeft + 1;
  28 var y1 = t1.offsetTop + 1;
  29
  30 eventSender.mouseMoveTo(x1, y1);
  31 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  32 shouldBe("getComputedStyle(t1, null).backgroundColor", "green");
  33
  34 var x2 = t2.offsetLeft + 1;
  35 var y2 = t2.offsetTop + 1;
  36
  37 eventSender.mouseMoveTo(0, 0);
  38 eventSender.mouseMoveTo(x2, y2);
  39 t2.firstChild.className = "over";
  40 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
  41 shouldBe("getComputedStyle(t2, null).backgroundColor", "green");
  42 shouldBe("getComputedStyle(t2.firstChild, null).width", "'150px'");
  43
  44 var x3 = t3.offsetLeft + 1;
  45 var y3 = t3.offsetTop + 1;
  46 eventSender.mouseMoveTo(0, 0);
  47 eventSender.mouseMoveTo(x3, y3);
  48 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
  49 shouldBe("getComputedStyle(t3, null).backgroundColor", "green");
  50 shouldBe("getComputedStyle(t3.firstChild, null).width", "'150px'");
  51 </script>