src/third_party/WebKit/LayoutTests/fast/css/invalidation/targeted-hover-invalidation.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 .test { width: 50px; height: 50px; }
   5 #t1:hover { background-color: green }
   6 #t2:hover .class { background-color: green }
   7 #t3:hover span { background-color: green }
   8 </style>
   9 <div id="t1" class="test">
  10     <div></div>
  11     <div></div>
  12     <div></div>
  13     <div></div>
  14 </div>
  15 <div id="t2" class="test">
  16     <div></div>
  17     <div></div>
  18     <div class="class"></div>
  19     <div></div>
  20 </div>
  21 <div id="t3" class="test">
  22     <div></div>
  23     <div></div>
  24     <div><span></span></div>
  25     <div><span></span></div>
  26 </div>
  27 <script>
  28 description("Check that invalidation sets work for :hover changes.");
  29
  30 function hoverElement(element) {
  31     eventSender.mouseMoveTo(0, 0);
  32     document.body.offsetLeft; // force recalc.
  33     var x = element.offsetLeft + 1;
  34     var y = element.offsetTop + 1;
  35     eventSender.mouseMoveTo(x, y);
  36 }
  37
  38 shouldBeDefined("window.internals");
  39 shouldBeDefined("window.eventSender");
  40
  41 var transparent = "rgba(0, 0, 0, 0)";
  42 var green = "rgb(0, 128, 0)";
  43
  44 var t1 = document.getElementById("t1");
  45 var t2 = document.getElementById("t2");
  46 var t3 = document.getElementById("t3");
  47
  48 var r1 = t1;
  49 var r2 = t2.querySelector(".class");
  50 var r3 = t3.querySelectorAll("span");
  51
  52 shouldBe("getComputedStyle(r1, null).backgroundColor", "transparent");
  53 shouldBe("getComputedStyle(r2, null).backgroundColor", "transparent");
  54 shouldBe("r3.length", "2");
  55 shouldBe("getComputedStyle(r3[0], null).backgroundColor", "transparent");
  56 shouldBe("getComputedStyle(r3[1], null).backgroundColor", "transparent");
  57
  58 hoverElement(t1);
  59 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  60 shouldBe("getComputedStyle(r1, null).backgroundColor", "green");
  61
  62 hoverElement(t2);
  63 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
  64 shouldBe("getComputedStyle(r2, null).backgroundColor", "green");
  65
  66 hoverElement(t3);
  67 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");
  68 shouldBe("getComputedStyle(r3[0], null).backgroundColor", "green");
  69 shouldBe("getComputedStyle(r3[1], null).backgroundColor", "green");
  70
  71 </script>