third_party/WebKit/LayoutTests/fast/css/invalidation/empty-pseudo.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 :empty { background-color: green }
   5 #empty + div, #not-empty + div { color: pink }
   6 </style>
   7 <div id="empty"></div>
   8 <div>
   9     <div></div>
  10     <div></div>
  11     <div></div>
  12     <div></div>
  13 </div>
  14 <div id="notEmpty"><div id="child"></div></div>
  15 <div>
  16     <div></div>
  17     <div></div>
  18     <div></div>
  19     <div></div>
  20 </div>
  21 <script>
  22 description("Use descendant invalidation set for :empty pseudo class.")
  23
  24 var transparent = "rgba(0, 0, 0, 0)";
  25 var green = "rgb(0, 128, 0)";
  26
  27 shouldBe("getComputedStyle(empty, '').backgroundColor", "green");
  28
  29 empty.offsetTop; // force recalc
  30 empty.appendChild(document.createElement("div"));
  31
  32 if (window.internals)
  33     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
  34
  35 shouldBe("getComputedStyle(empty, '').backgroundColor", "transparent");
  36
  37 shouldBe("getComputedStyle(notEmpty, '').backgroundColor", "transparent");
  38
  39 notEmpty.offsetTop; // force recalc
  40 notEmpty.removeChild(child);
  41
  42 if (window.internals)
  43     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  44
  45 shouldBe("getComputedStyle(notEmpty, '').backgroundColor", "green");
  46 </script>