is-pseudo-containing-sibling-relationship-in-has.html (13268B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Selectors Test: :has(:is()) invalidation for sibling change</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 7 <style> 8 #test-container > div { background-color: green; } 9 #target1:has(:is(.item + .item + .item)) { background-color: red; } 10 #target2:has(:is(.invalid .item, .item + .item + .item)) { background-color: red; } 11 #target3:has(:is(.item + .item + .item > .child + .child + .child)) { background-color: red; } 12 #target4:has(:is(.item + .item + .item > .child):is(.child + .child + .child)) { background-color: red; } 13 #target5:has(:is(.item + .item + .item > .child)) { background-color: red; } 14 #target6:has(:is(.invalid .item, .item + .item + .item > .child)) { background-color: red; } 15 #target7:has(:is(.item + .item + .item > .child + .child + .child)) { background-color: red; } 16 #target8:has(:is(.child + .child + .child):is(.item + .item + .item > .child)) { background-color: red; } 17 #target9:has(:is(:where(:is(.item + .item + .item) > .child) + .child + .child)) { background-color: red; } 18 #target10:has(:is(.item:nth-child(3))) { background-color: red; } 19 #target11:has(:is(.item:nth-child(3) > .child:nth-child(3))) { background-color: red; } 20 #target12:has(:is(.item:nth-last-child(3))) { background-color: red; } 21 #target13:has(:is(.item:nth-last-child(3) > .child:nth-last-child(3))) { background-color: red; } 22 #target14:has(:is(.item:nth-child(3) > .child)) { background-color: red; } 23 #target15:has(:is(.item:nth-child(3) > .child:nth-child(3))) { background-color: red; } 24 #target16:has(:is(.item:nth-last-child(3) > .child)) { background-color: red; } 25 #target17:has(:is(.item:nth-last-child(3) > .child:nth-last-child(3))) { background-color: red; } 26 .item + .item + .item { 27 #target18:has(&) { background-color: red; } 28 #target19:has(:is(& > .child + .child + .child)) { background-color: red; } 29 } 30 .item + .item + .item > .child { 31 #target20:has(:is(& + .child + .child)) { background-color: red; } 32 } 33 </style> 34 <div id="test-container"> 35 <div id="target1"> 36 <div class="item" id="item1">FAIL if you see this text</div> 37 <div class="item"></div> 38 <div class="item">This text should have a green background</div> 39 </div> 40 <div id="target2"> 41 <div class="item" id="item2">FAIL if you see this text</div> 42 <div class="item"></div> 43 <div class="item">This text should have a green background</div> 44 </div> 45 <div id="target3"> 46 <div class="item"></div> 47 <div class="item"></div> 48 <div class="item"> 49 <span class="child" id="item3">(FAIL if you see this text)</span> 50 <span class="child"></span> 51 <span class="child">This text should have a green background</span> 52 </div> 53 </div> 54 <div id="target4"> 55 <div class="item"></div> 56 <div class="item"></div> 57 <div class="item"> 58 <span class="child" id="item4">(FAIL if you see this text)</span> 59 <span class="child"></span> 60 <span class="child">This text should have a green background</span> 61 </div> 62 </div> 63 <div id="target5"> 64 <div class="item" id="item5">FAIL if you see this text</div> 65 <div class="item"></div> 66 <div class="item"> 67 <span class="child">This text should have a green background</span> 68 </div> 69 </div> 70 <div id="target6"> 71 <div class="item" id="item6">FAIL if you see this text</div> 72 <div class="item"></div> 73 <div class="item"> 74 <span class="child">This text should have a green background</span> 75 </div> 76 </div> 77 <div id="target7"> 78 <div class="item"></div> 79 <div class="item" id="item7">FAIL if you see this text</div> 80 <div class="item"> 81 <span class="child"></span> 82 <span class="child"></span> 83 <span class="child">This text should have a green background</span> 84 </div> 85 </div> 86 <div id="target8"> 87 <div class="item"></div> 88 <div class="item" id="item8">FAIL if you see this text</div> 89 <div class="item"> 90 <span class="child"></span> 91 <span class="child"></span> 92 <span class="child">This text should have a green background</span> 93 </div> 94 </div> 95 <div id="target9"> 96 <div class="item"></div> 97 <div class="item" id="item9">FAIL if you see this text</div> 98 <div class="item"> 99 <span class="child"></span> 100 <span class="child"></span> 101 <span class="child">This text should have a green background</span> 102 </div> 103 </div> 104 <div id="target10"> 105 <div class="item" id="item10">FAIL if you see this text</div> 106 <div class="item"></div> 107 <div class="item">This text should have a green background</div> 108 </div> 109 <div id="target11"> 110 <div class="item"></div> 111 <div class="item"></div> 112 <div class="item"> 113 <span class="child" id="item11">(FAIL if you see this text)</span> 114 <span class="child"></span> 115 <span class="child">This text should have a green background</span> 116 </div> 117 </div> 118 <div id="target12"> 119 <div class="item">This text should have a green background</div> 120 <div class="item"></div> 121 <div class="item" id="item12">FAIL if you see this text</div> 122 </div> 123 <div id="target13"> 124 <div class="item"> 125 <span class="child">This text should have a green background</span> 126 <span class="child"></span> 127 <span class="child" id="item13">(FAIL if you see this text)</span> 128 </div> 129 <div class="item"></div> 130 <div class="item"></div> 131 </div> 132 <div id="target14"> 133 <div class="item" id="item14">FAIL if you see this text</div> 134 <div class="item"></div> 135 <div class="item"> 136 <span class="child">This text should have a green background</span> 137 </div> 138 </div> 139 <div id="target15"> 140 <div class="item" id="item15">FAIL if you see this text</div> 141 <div class="item"></div> 142 <div class="item"> 143 <span class="child"></span> 144 <span class="child"></span> 145 <span class="child">This text should have a green background</span> 146 </div> 147 </div> 148 <div id="target16"> 149 <div class="item"> 150 <span class="child">This text should have a green background</span> 151 </div> 152 <div class="item"></div> 153 <div class="item" id="item16">FAIL if you see this text</div> 154 </div> 155 <div id="target17"> 156 <div class="item"> 157 <span class="child">This text should have a green background</span> 158 <span class="child"></span> 159 <span class="child"></span> 160 </div> 161 <div class="item"></div> 162 <div class="item" id="item17">FAIL if you see this text</div> 163 </div> 164 <div id="target18"> 165 <div class="item" id="item18">FAIL if you see this text</div> 166 <div class="item"></div> 167 <div class="item">This text should have a green background</div> 168 </div> 169 <div id="target19"> 170 <div class="item"></div> 171 <div class="item" id="item19">FAIL if you see this text</div> 172 <div class="item"> 173 <span class="child"></span> 174 <span class="child"></span> 175 <span class="child">This text should have a green background</span> 176 </div> 177 </div> 178 <div id="target20"> 179 <div class="item"></div> 180 <div class="item" id="item20">FAIL if you see this text</div> 181 <div class="item"> 182 <span class="child"></span> 183 <span class="child"></span> 184 <span class="child">This text should have a green background</span> 185 </div> 186 </div> 187 </div> 188 <script> 189 test(() => { 190 assert_equals(getComputedStyle(target1).backgroundColor, "rgb(255, 0, 0)"); 191 assert_equals(getComputedStyle(target2).backgroundColor, "rgb(255, 0, 0)"); 192 assert_equals(getComputedStyle(target3).backgroundColor, "rgb(255, 0, 0)"); 193 assert_equals(getComputedStyle(target4).backgroundColor, "rgb(255, 0, 0)"); 194 assert_equals(getComputedStyle(target5).backgroundColor, "rgb(255, 0, 0)"); 195 assert_equals(getComputedStyle(target6).backgroundColor, "rgb(255, 0, 0)"); 196 assert_equals(getComputedStyle(target7).backgroundColor, "rgb(255, 0, 0)"); 197 assert_equals(getComputedStyle(target8).backgroundColor, "rgb(255, 0, 0)"); 198 assert_equals(getComputedStyle(target9).backgroundColor, "rgb(255, 0, 0)"); 199 assert_equals(getComputedStyle(target10).backgroundColor, "rgb(255, 0, 0)"); 200 assert_equals(getComputedStyle(target11).backgroundColor, "rgb(255, 0, 0)"); 201 assert_equals(getComputedStyle(target12).backgroundColor, "rgb(255, 0, 0)"); 202 assert_equals(getComputedStyle(target13).backgroundColor, "rgb(255, 0, 0)"); 203 assert_equals(getComputedStyle(target14).backgroundColor, "rgb(255, 0, 0)"); 204 assert_equals(getComputedStyle(target15).backgroundColor, "rgb(255, 0, 0)"); 205 assert_equals(getComputedStyle(target16).backgroundColor, "rgb(255, 0, 0)"); 206 assert_equals(getComputedStyle(target17).backgroundColor, "rgb(255, 0, 0)"); 207 assert_equals(getComputedStyle(target18).backgroundColor, "rgb(255, 0, 0)"); 208 assert_equals(getComputedStyle(target19).backgroundColor, "rgb(255, 0, 0)"); 209 assert_equals(getComputedStyle(target20).backgroundColor, "rgb(255, 0, 0)"); 210 }, "Initially red"); 211 212 test(() => { 213 item1.remove(); 214 assert_equals(getComputedStyle(target1).backgroundColor, "rgb(0, 128, 0)"); 215 }, "sibling selector enclosed by :is() no longer matching after removal (1)"); 216 217 test(() => { 218 item2.remove(); 219 assert_equals(getComputedStyle(target2).backgroundColor, "rgb(0, 128, 0)"); 220 }, "sibling selector enclosed by :is() no longer matching after removal (2)"); 221 222 test(() => { 223 item3.remove(); 224 assert_equals(getComputedStyle(target3).backgroundColor, "rgb(0, 128, 0)"); 225 }, "sibling selector enclosed by :is() no longer matching after removal (3)"); 226 227 test(() => { 228 item4.remove(); 229 assert_equals(getComputedStyle(target4).backgroundColor, "rgb(0, 128, 0)"); 230 }, "sibling selector enclosed by :is() no longer matching after removal (4)"); 231 232 test(() => { 233 item5.remove(); 234 assert_equals(getComputedStyle(target5).backgroundColor, "rgb(0, 128, 0)"); 235 }, "sibling selector in non-subject enclosed by :is() no longer matching after removal (1)"); 236 237 test(() => { 238 item6.remove(); 239 assert_equals(getComputedStyle(target6).backgroundColor, "rgb(0, 128, 0)"); 240 }, "sibling selector in non-subject enclosed by :is() no longer matching after removal (2)"); 241 242 test(() => { 243 item7.remove(); 244 assert_equals(getComputedStyle(target7).backgroundColor, "rgb(0, 128, 0)"); 245 }, "sibling selector in non-subject enclosed by :is() no longer matching after removal (3)"); 246 247 test(() => { 248 item8.remove(); 249 assert_equals(getComputedStyle(target8).backgroundColor, "rgb(0, 128, 0)"); 250 }, "sibling selector in non-subject enclosed by :is() no longer matching after removal (4)"); 251 252 test(() => { 253 item9.remove(); 254 assert_equals(getComputedStyle(target9).backgroundColor, "rgb(0, 128, 0)"); 255 }, "sibling selector in non-subject enclosed by :is() no longer matching after removal (5)"); 256 257 test(() => { 258 item10.remove(); 259 assert_equals(getComputedStyle(target10).backgroundColor, "rgb(0, 128, 0)"); 260 }, ":nth-child() enclosed by :is() no longer matching after removal (1)"); 261 262 test(() => { 263 item11.remove(); 264 assert_equals(getComputedStyle(target11).backgroundColor, "rgb(0, 128, 0)"); 265 }, ":nth-child() enclosed by :is() no longer matching after removal (2)"); 266 267 test(() => { 268 item12.remove(); 269 assert_equals(getComputedStyle(target12).backgroundColor, "rgb(0, 128, 0)"); 270 }, ":nth-last-child() enclosed by :is() no longer matching after removal (1)"); 271 272 test(() => { 273 item13.remove(); 274 assert_equals(getComputedStyle(target13).backgroundColor, "rgb(0, 128, 0)"); 275 }, ":nth-last-child() enclosed by :is() no longer matching after removal (2)"); 276 277 test(() => { 278 item14.remove(); 279 assert_equals(getComputedStyle(target14).backgroundColor, "rgb(0, 128, 0)"); 280 }, ":nth-child() in non-subject enclosed by :is() no longer matching after removal (1)"); 281 282 test(() => { 283 item15.remove(); 284 assert_equals(getComputedStyle(target15).backgroundColor, "rgb(0, 128, 0)"); 285 }, ":nth-child() in non-subject enclosed by :is() no longer matching after removal (2)"); 286 287 test(() => { 288 item16.remove(); 289 assert_equals(getComputedStyle(target16).backgroundColor, "rgb(0, 128, 0)"); 290 }, ":nth-last-child() in non-subject enclosed by :is() no longer matching after removal (1)"); 291 292 test(() => { 293 item17.remove(); 294 assert_equals(getComputedStyle(target17).backgroundColor, "rgb(0, 128, 0)"); 295 }, ":nth-last-child() in non-subject enclosed by :is() no longer matching after removal (2)"); 296 297 test(() => { 298 item18.remove(); 299 assert_equals(getComputedStyle(target18).backgroundColor, "rgb(0, 128, 0)"); 300 }, "sibling selector in parent selector enclosed by :is() no longer matching after removal"); 301 302 test(() => { 303 item19.remove(); 304 assert_equals(getComputedStyle(target19).backgroundColor, "rgb(0, 128, 0)"); 305 }, "sibling selector in parent selector non-subject position enclosed by :is() no longer matching after removal (1)"); 306 307 test(() => { 308 item20.remove(); 309 assert_equals(getComputedStyle(target20).backgroundColor, "rgb(0, 128, 0)"); 310 }, "sibling selector in parent selector non-subject position enclosed by :is() no longer matching after removal (2)"); 311 </script>