third_party/WebKit/LayoutTests/fast/css/invalidation/compound.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/testharness.js"></script>
   3 <script src="../../../resources/testharnessreport.js"></script>
   4 <style>
   5 .t1 span.c#r1,
   6 .t2 *.c#r2,
   7 .t3 span.c,
   8 .t4 *.ca.cb,
   9 .t5 :-webkit-any(div.ca.cb, *.cc.cd#r5b),
  10 .t6 ~ div > span.c#r6,
  11 .t7 ~ div > span.c,
  12 .t8 + * ~ div.c#p8 span,
  13 .t9 + * ~ div.c span,
  14 .t10 + div > :-webkit-any(div.ca.cb, *.cc.cd#r10b) { background-color: rgb(0, 128, 0); }
  15 </style>
  16 <div>
  17     <div id="t1">
  18         <div></div>
  19         <div class="c"></div>
  20         <span></span>
  21         <span class="c"></span>
  22         <span class="c" id="r1"></span>
  23     </div>
  24 </div>
  25 <div>
  26     <div id="t2">
  27         <span></span>
  28         <span class="c"></span>
  29         <span class="c" id="r2"></span>
  30     </div>
  31 </div>
  32 <div>
  33     <div id="t3">
  34         <div></div>
  35         <div class="c"></div>
  36         <span></span>
  37         <span class="c" id="r3"></span>
  38     </div>
  39 </div>
  40 <div>
  41     <div id="t4">
  42         <span></span>
  43         <span class="ca"></span>
  44         <span class="cb"></span>
  45         <span class="ca cb" id="r4"></span>
  46     </div>
  47 </div>
  48 <div>
  49     <div id="t5">
  50         <div></div>
  51         <span></span>
  52         <fieldset></fieldset>
  53         <fieldset class="ca"></fieldset>
  54         <fieldset class="cc cd"></fieldset>
  55         <div class="ca cb" id="r5a"></div>
  56         <span class="cc cd" id="r5b"></span>
  57     </div>
  58 </div>
  59 <div>
  60     <div id="t6"></div>
  61     <div>
  62         <div class="c"></div>
  63         <span></span>
  64         <span class="c"></span>
  65         <span class="c" id="r6"></span>
  66     </div>
  67 </div>
  68 <div>
  69     <div id="t7"></div>
  70     <div>
  71         <div class="c"></div>
  72         <span></span>
  73         <span class="c" id="r7"></span>
  74     </div>
  75 </div>
  76 <div>
  77     <div id="t8"></div>
  78     <span>
  79         <span></span>
  80     </span>
  81     <span class="c">
  82         <span></span>
  83     </span>
  84     <div>
  85         <span></span>
  86     </div>
  87     <div class="c">
  88         <span></span>
  89     </div>
  90     <div class="c" id="p8">
  91         <span id="r8"></span>
  92     </div>
  93 </div>
  94 <div>
  95     <div id="t9"></div>
  96     <span>
  97         <span></span>
  98     </span>
  99     <span class="c">
 100         <span></span>
 101     </span>
 102     <div>
 103         <span></span>
 104     </div>
 105     <div class="c">
 106         <span id="r9"></span>
 107     </div>
 108 </div>
 109 <div>
 110     <div id="t10"></div>
 111     <div>
 112         <div></div>
 113         <span></span>
 114         <fieldset></fieldset>
 115         <fieldset class="ca"></fieldset>
 116         <fieldset class="cc cd"></fieldset>
 117         <div class="ca cb" id="r10a"></div>
 118         <span class="cc cd" id="r10b"></span>
 119     </div>
 120 </div>
 121
 122 <script>
 123 document.body.offsetTop;
 124
 125 test(function() {
 126     assert_true(!!window.internals, "This test only works with internals exposed present");
 127 }, "internals are exposed");
 128
 129 test(function() {
 130     assert_equals(getComputedStyle(r1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 131
 132     t1.className = "t1";
 133     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 4, "Subtree style recalc");
 134     assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 135 }, "Descendant with compound selector containing id");
 136
 137 test(function() {
 138     assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 139
 140     t2.className = "t2";
 141     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Subtree style recalc");
 142     assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 143 }, "Descendant with compound selector containing universal and id");
 144
 145 test(function() {
 146     assert_equals(getComputedStyle(r3).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 147
 148     t3.className = "t3";
 149     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
 150     assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 151 }, "Descendant with compound selector");
 152
 153 test(function() {
 154     assert_equals(getComputedStyle(r4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 155
 156     t4.className = "t4";
 157     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Subtree style recalc");
 158     assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 159 }, "Descendant with compound selector containing universal");
 160
 161 test(function() {
 162     assert_equals(getComputedStyle(r5a).backgroundColor, "rgba(0, 0, 0, 0)", "Background color a should initially be transparent");
 163     assert_equals(getComputedStyle(r5b).backgroundColor, "rgba(0, 0, 0, 0)", "Background color b should initially be transparent");
 164
 165     t5.className = "t5";
 166     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 5, "Subtree style recalc");
 167     assert_equals(getComputedStyle(r5a).backgroundColor, "rgb(0, 128, 0)", "Background color a is green after class change");
 168     assert_equals(getComputedStyle(r5b).backgroundColor, "rgb(0, 128, 0)", "Background color b is green after class change");
 169 }, "Descendant with :-webkit-any containing compound selector");
 170
 171 test(function() {
 172     assert_equals(getComputedStyle(r6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 173
 174     t6.className = "t6";
 175     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 6, "Subtree style recalc");
 176     assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 177 }, "Sibling with compound descendant containing id");
 178
 179 test(function() {
 180     assert_equals(getComputedStyle(r7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 181
 182     t7.className = "t7";
 183     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1, "Subtree style recalc");
 184     // TODO(ericwilligers): Update Blink's implementation of sibling selector invalidation, so the following passes:
 185     assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 186 }, "Sibling with compound descendant");
 187
 188 test(function() {
 189     assert_equals(getComputedStyle(r8).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 190
 191     t8.className = "t8";
 192     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 11, "Subtree style recalc");
 193     assert_equals(getComputedStyle(r8).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 194 }, "Compound sibling selector containing id");
 195
 196 test(function() {
 197     assert_equals(getComputedStyle(r9).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent");
 198
 199     t9.className = "t9";
 200     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 9, "Subtree style recalc");
 201     assert_equals(getComputedStyle(r9).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change");
 202 }, "Compound sibling selector");
 203
 204 test(function() {
 205     assert_equals(getComputedStyle(r10a).backgroundColor, "rgba(0, 0, 0, 0)", "Background color a should initially be transparent");
 206     assert_equals(getComputedStyle(r10b).backgroundColor, "rgba(0, 0, 0, 0)", "Background color b should initially be transparent");
 207
 208     t10.className = "t10";
 209     assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 9, "Subtree style recalc");
 210     assert_equals(getComputedStyle(r10a).backgroundColor, "rgb(0, 128, 0)", "Background color a is green after class change");
 211     assert_equals(getComputedStyle(r10b).backgroundColor, "rgb(0, 128, 0)", "Background color b is green after class change");
 212 }, "Sibling with descendant :-webkit-any containing compound selector");
 213
 214 </script>