sibling.html (5076B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Selectors Invalidation: sibling</title> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#adjacent-sibling-combinators"> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#general-sibling-combinators"> 7 <meta name="assert" content="This tests that the + next-sibling selector is effective"> 8 <meta name="assert" content="This tests that the ~ subsequent-sibling selector is effective"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <style> 12 13 * { background-color: inherit; } 14 15 body { background-color: rgba(0, 0, 0, 0); } 16 17 .t1 .sibling + *, 18 .t2 .sibling ~ *, 19 .t3 + .sibling + *, 20 .t4 + .sibling, 21 .t5 + *, 22 .t6 ~ .sibling, 23 .t7 + * + * .child { background-color: rgb(0, 128, 0); } 24 25 </style> 26 </head> 27 <body> 28 29 <div> 30 <div id="t1"> 31 <div class="sibling"></div> 32 <div id="r1"></div> 33 <div id="u1"></div> 34 </div> 35 </div> 36 <div> 37 <div id="t2"> 38 <div class="sibling"></div> 39 <div></div> 40 <div id="r2"></div> 41 </div> 42 </div> 43 <div> 44 <div id="t3"></div> 45 <div class="sibling"></div> 46 <div id="r3"></div> 47 </div> 48 <div> 49 <div id="t4"></div> 50 <div id="r4" class="sibling"></div> 51 <div id="u4" class="sibling"></div> 52 </div> 53 <div> 54 <div id="t5"></div> 55 <div id="r5"></div> 56 <div id="u5"></div> 57 </div> 58 <div> 59 <div id="t6"></div> 60 <div></div> 61 <div id="r6" class="sibling"> 62 <div id="r6b"></div> 63 </div> 64 <div id="u6"></div> 65 </div> 66 <div> 67 <div id="t7"> 68 <div class="child"></div> 69 </div> 70 <div></div> 71 <div> 72 <div id="r7" class="child"></div> 73 </div> 74 <div> 75 <div id="u7" class="child"></div> 76 </div> 77 </div> 78 79 <script> 80 81 test(function() { 82 assert_equals(getComputedStyle(r1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); 83 84 t1.className = "t1"; 85 assert_equals(getComputedStyle(r1).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); 86 assert_equals(getComputedStyle(u1).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent"); 87 }, "Adjacent with universal selector"); 88 89 test(function() { 90 assert_equals(getComputedStyle(r2).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); 91 92 t2.className = "t2"; 93 assert_equals(getComputedStyle(r2).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); 94 }, "Indirect adjacent with universal selector"); 95 96 test(function() { 97 assert_equals(getComputedStyle(r3).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); 98 99 t3.className = "t3"; 100 assert_equals(getComputedStyle(r3).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); 101 }, "Indirect adjacent with two adjacent selectors"); 102 103 test(function() { 104 assert_equals(getComputedStyle(r4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); 105 106 t4.className = "t4"; 107 assert_equals(getComputedStyle(r4).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); 108 assert_equals(getComputedStyle(u4).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent"); 109 }, "Adjacent class"); 110 111 test(function() { 112 assert_equals(getComputedStyle(r5).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); 113 114 t5.className = "t5"; 115 assert_equals(getComputedStyle(r5).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); 116 assert_equals(getComputedStyle(u5).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent"); 117 }, "Adjacent universal"); 118 119 test(function() { 120 assert_equals(getComputedStyle(r6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); 121 assert_equals(getComputedStyle(r6b).backgroundColor, "rgba(0, 0, 0, 0)", "Child's background color should initially be transparent"); 122 123 t6.className = "t6"; 124 assert_equals(getComputedStyle(r6).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); 125 assert_equals(getComputedStyle(r6b).backgroundColor, "rgb(0, 128, 0)", "Child's background color is green after class change"); 126 assert_equals(getComputedStyle(u6).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent"); 127 }, "Sibling subtree through an indirect adjacent combinator"); 128 129 test(function() { 130 assert_equals(getComputedStyle(r7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color should initially be transparent"); 131 132 t7.className = "t7"; 133 assert_equals(getComputedStyle(r7).backgroundColor, "rgb(0, 128, 0)", "Background color is green after class change"); 134 assert_equals(getComputedStyle(u7).backgroundColor, "rgba(0, 0, 0, 0)", "Background color remains transparent"); 135 }, "Sibling descendant through a universal selector"); 136 137 </script> 138 </body> 139 </html>