third_party/WebKit/LayoutTests/fast/css/invalidation/class-sibling-universal.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/testharness.js"></script>
   3 <script src="../../../resources/testharnessreport.js"></script>
   4 <style>
   5 .t1 .sibling + *,
   6 .t2 .sibling ~ *,
   7 .t3 .sibling + :hover,
   8 .t4 + .sibling,
   9 .t5 + *,
  10 .t6 ~ .sibling,
  11 .t7 + * + * .child,
  12 .t8 + :-webkit-any(.sibling) * { background-color: rgb(0, 128, 0); }
  13
  14 #r3 { width: 10px; height: 10px }
  15 </style>
  16 <div>
  17     <div id="t1">
  18         <div class="sibling"></div>
  19         <div id="r1"></div>
  20     </div>
  21 </div>
  22 <div>
  23     <div id="t2">
  24         <div class="sibling"></div>
  25         <div></div>
  26         <div id="r2"></div>
  27     </div>
  28 </div>
  29 <div>
  30     <div id="t3">
  31         <div class="sibling"></div>
  32         <div id="r3"></div>
  33     </div>
  34 </div>
  35 <div>
  36     <div id="t4"></div>
  37     <div id="r4" class="sibling">
  38         <div></div>
  39         <div></div>
  40     </div>
  41     <div class="sibling"></div>
  42 </div>
  43 <div>
  44     <div id="t5"></div>
  45     <div id="r5">
  46         <div></div>
  47         <div></div>
  48     </div>
  49     <div></div>
  50 </div>
  51 <div>
  52     <div id="t6"></div>
  53     <div></div>
  54     <div id="r6" class="sibling">
  55         <div></div>
  56         <div></div>
  57     </div>
  58     <div></div>
  59 </div>
  60 <div>
  61     <div id="t7">
  62         <div class="child"></div>
  63     </div>
  64     <div>
  65         <div class="child"></div>
  66         <div></div>
  67     </div>
  68     <div>
  69         <div id="r7" class="child"></div>
  70         <div></div>
  71     </div>
  72     <div>
  73         <div class="child"></div>
  74     </div>
  75 </div>
  76 <div>
  77     <div id="t8"></div>
  78     <div class="sibling">
  79         <div id="r8"></div>
  80     </div>
  81 </div>
  82 <script>
  83 document.body.offsetTop;
  84
  85 test(function() {
  86     assert_true(!!window.internals, "This test only works with internals exposed present");
  87 }, "internals are exposed");
  88
  89 test(function() {
  90     assert_equals(getComputedStyle(r1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
  91
  92     t1.className = "t1";
  93     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
  94     assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
  95 }, "Adjacent with universal selector");
  96
  97 test(function() {
  98     assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
  99
 100     t2.className = "t2";
 101     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 4, "Subtree style recalc");
 102     assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 103 }, "Indirect adjacent with universal selector");
 104
 105 test(function() {
 106     assert_true(!!window.eventSender, "This test only works with eventSender present");
 107
 108     eventSender.mouseMoveTo(r3.offsetLeft + 1, r3.offsetTop + 1);
 109     assert_equals(getComputedStyle(r3).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 110
 111     t3.className = "t3";
 112     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
 113     assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 114 }, "Adjacent with universal :hover selector");
 115
 116 test(function() {
 117     assert_equals(getComputedStyle(r4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 118
 119     t4.className = "t4";
 120     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 5, "Subtree style recalc");
 121     assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 122 }, "Class change affecting selector for sibling class");
 123
 124 test(function() {
 125     assert_equals(getComputedStyle(r5).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 126
 127     t5.className = "t5";
 128     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 5, "Subtree style recalc");
 129     assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 130 }, "Class change affecting all sibling subtrees through a universal selector");
 131
 132 test(function() {
 133     assert_equals(getComputedStyle(r6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 134
 135     t6.className = "t6";
 136     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 6, "Subtree style recalc");
 137     assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 138 }, "Class change affecting all sibling subtrees through an indirect adjacent combinator");
 139
 140 test(function() {
 141     assert_equals(getComputedStyle(r7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 142
 143     t7.className = "t7";
 144     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 8, "Subtree style recalc");
 145     assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 146 }, "Class change affecting sibling descendants through a universal selector");
 147
 148 test(function() {
 149     assert_equals(getComputedStyle(r8).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 150
 151     t8.className = "t8";
 152     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
 153     assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 154 }, "Class change affecting universal descendants of webkit-any sibling");
 155
 156 </script>