has-sibling-insertion-removal.html (7244B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>:has() invalidation for sibling insertion and removal</title> 4 <link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 8 <style> 9 div, main { color: grey } 10 #subject1:has(+ #sibling1_1 + #sibling1_2) { color: red } 11 #subject2:has(+ #sibling2_2) { color: green } 12 #subject3:has(+ #sibling3_1 + #sibling3_2 > #siblingchild3_2_1) { color: blue } 13 #subject4:has(+ #sibling4_2 > #siblingchild4_2_1) { color: yellow } 14 #subject5:has(+ #sibling5_1 + #sibling5_2) { color: red } 15 #subject6:has(+ #sibling6_2) { color: green } 16 #subject7:has(+ #sibling7_1 + #sibling7_2 > #siblingchild7_2_1) { color: blue } 17 #subject8:has(+ #sibling8_2 > #siblingchild8_2_1) { color: yellow } 18 #subject9:has(+ #sibling9_1 + #sibling9_2 ~ #sibling9_3) { color: red } 19 #subject10:has(+ #sibling10_2 ~ #sibling10_3) { color: green } 20 #subject11:has(+ #sibling11_1 + #sibling11_2 ~ #sibling11_3 > #siblingchild11_3_1) { color: blue } 21 #subject12:has(+ #sibling12_2 ~ #sibling12_3 > #siblingchild12_3_1) { color: yellow } 22 .sibling13:has(~ .sibling13) { color: green } 23 #subject14:has(~ #sibling14_1 ~ #sibling14_2 ~ #sibling14_3) { color: green } 24 </style> 25 26 <main id="main"> 27 <div id="parent1"> 28 <div id="subject1"></div> 29 <div id="sibling1_2"></div> 30 <div id="sibling1_3"></div> 31 </div> 32 <div id="parent2"> 33 <div id="subject2"></div> 34 <div id="sibling2_1"></div> 35 <div id="sibling2_2"></div> 36 <div id="sibling2_3""></div> 37 </div> 38 <div id="parent3"> 39 <div id="subject3"></div> 40 <div id="sibling3_2"> 41 <div id="siblingchild3_2_1"></div> 42 </div> 43 <div id="sibling3_3"></div> 44 </div> 45 <div id="parent4"> 46 <div id="subject4"></div> 47 <div id="sibling4_1"></div> 48 <div id="sibling4_2"> 49 <div id="siblingchild4_2_1"></div> 50 </div> 51 <div id="sibling4_3"></div> 52 </div> 53 <div id="parent5"> 54 <div id="subject5"></div> 55 <div id="sibling5_1"></div> 56 <div id="sibling5_2"></div> 57 <div id="sibling5_3""></div> 58 </div> 59 <div id="parent6"> 60 <div id="subject6"></div> 61 <div id="sibling6_2"></div> 62 <div id="sibling6_3"></div> 63 </div> 64 <div id="parent7"> 65 <div id="subject7"></div> 66 <div id="sibling7_1"></div> 67 <div id="sibling7_2"> 68 <div id="siblingchild7_2_1"></div> 69 </div> 70 <div id="sibling7_3"></div> 71 <div id="parent8"> 72 <div id="subject8"></div> 73 <div id="sibling8_2"> 74 <div id="siblingchild8_2_1"></div> 75 </div> 76 <div id="sibling8_3"></div> 77 </div> 78 <div id="parent9"> 79 <div id="subject9"></div> 80 <div id="sibling9_2"></div> 81 <div id="sibling9_3"></div> 82 <div id="sibling9_4"></div> 83 </div> 84 <div id="parent10"> 85 <div id="subject10"></div> 86 <div id="sibling10_1"></div> 87 <div id="sibling10_2"></div> 88 <div id="sibling10_3""></div> 89 <div id="sibling10_4""></div> 90 </div> 91 <div id="parent11"> 92 <div id="subject11"></div> 93 <div id="sibling11_2"></div> 94 <div id="sibling11_3"> 95 <div id="siblingchild11_3_1"></div> 96 </div> 97 <div id="sibling11_4"></div> 98 </div> 99 <div id="parent12"> 100 <div id="subject12"></div> 101 <div id="sibling12_1"></div> 102 <div id="sibling12_2"></div> 103 <div id="sibling12_3"> 104 <div id="siblingchild12_3_1"></div> 105 </div> 106 <div id="sibling12_4"></div> 107 </div> 108 <div id="parent13"> 109 <div class="sibling13"></div> 110 <div id="subject13" class="sibling13"></div> 111 </div> 112 <div id="parent14"> 113 <div id="subject14"></div> 114 <div id="sibling14_1"></div> 115 <div id="sibling14_2"></div> 116 <div id="sibling14_3"></div> 117 </div> 118 </main> 119 <script> 120 121 const grey = 'rgb(128, 128, 128)'; 122 const red = 'rgb(255, 0, 0)'; 123 const green = 'rgb(0, 128, 0)'; 124 const blue = 'rgb(0, 0, 255)'; 125 const yellow = 'rgb(255, 255, 0)'; 126 127 function testColor(test_name, element, color) { 128 test(function() { 129 assert_equals(getComputedStyle(element).color, color); 130 }, test_name); 131 } 132 133 function insertBefore(parent, reference, child_id) { 134 var child = document.createElement("div"); 135 child.id = child_id; 136 parent.insertBefore(child, reference); 137 } 138 139 testColor(`subject1: initial color should be ${grey}`, subject1, grey); 140 insertBefore(parent1, sibling1_2, "sibling1_1"); 141 testColor(`subject1: color after #sibling1_1 inserted should be ${red}`, 142 subject1, red); 143 144 testColor(`subject2: initial color should be ${grey}`, subject2, grey); 145 sibling2_1.remove(); 146 testColor(`subject2: color after #sibling2_1 removed should be ${green}`, 147 subject2, green); 148 149 testColor(`subject3: initial color should be ${grey}`, subject3, grey); 150 insertBefore(parent3, sibling3_2, "sibling3_1"); 151 testColor(`subject3: color after #sibling3_1 inserted should be ${blue}`, 152 subject3, blue); 153 154 testColor(`subject4: initial color should be ${grey}`, subject4, grey); 155 sibling4_1.remove(); 156 testColor(`subject4: color after #sibling4_1 removed should be ${yellow}`, 157 subject4, yellow); 158 159 testColor(`subject5: initial color should be ${red}`, subject5, red); 160 sibling5_1.remove(); 161 testColor(`subject5: color after #sibling5_1 removed should be ${grey}`, 162 subject5, grey); 163 164 testColor(`subject6: initial color should be ${green}`, subject6, green); 165 insertBefore(parent6, sibling6_2, "sibling6_1"); 166 testColor(`subject6: color after #sibling6_1 inserted should be ${grey}`, 167 subject6, grey); 168 169 testColor(`subject7: initial color should be ${blue}`, subject7, blue); 170 sibling7_1.remove(); 171 testColor(`subject7: color after #sibling7_1 removed should be ${grey}`, 172 subject7, grey); 173 174 testColor(`subject8: initial color should be ${yellow}`, subject8, yellow); 175 insertBefore(parent8, sibling8_2, "sibling8_1"); 176 testColor(`subject8: color after #sibling8_1 inserted should be ${grey}`, 177 subject8, grey); 178 179 testColor(`subject9: initial color should be ${grey}`, subject9, grey); 180 insertBefore(parent9, sibling9_2, "sibling9_1"); 181 testColor(`subject9: color after #sibling9_1 inserted should be ${red}`, 182 subject1, red); 183 184 testColor(`subject10: initial color should be ${grey}`, subject10, grey); 185 sibling10_1.remove(); 186 testColor(`subject10: color after #sibling10_1 removed should be ${green}`, 187 subject10, green); 188 189 testColor(`subject11: initial color should be ${grey}`, subject11, grey); 190 insertBefore(parent11, sibling11_2, "sibling11_1"); 191 testColor(`subject11: color after #sibling11_1 inserted should be ${blue}`, 192 subject11, blue); 193 194 testColor(`subject12: initial color should be ${grey}`, subject12, grey); 195 sibling12_1.remove(); 196 testColor(`subject12: color after #sibling12_1 removed should be ${yellow}`, 197 subject12, yellow); 198 199 testColor(`subject13: initial color should be ${grey}`, subject13, grey); 200 const d = document.createElement("div"); 201 d.classList.add("sibling13"); 202 parent13.appendChild(d); 203 testColor(`subject13: color after #sibling12_1 removed should be ${green}`, 204 subject13, green); 205 206 testColor(`subject14: initial color should be ${green}`, subject14, green); 207 sibling14_2.remove(); 208 testColor(`subject14: color after #sibling14_2 removed should be ${grey}`, subject14, grey); 209 </script>