attribute.html (5204B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Selectors Invalidation: attribute</title> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-selectors"> 6 <meta name="assert" content="This tests that the attribute selectors are effective"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 div { 11 color: gray; 12 } 13 14 #a1[style] { 15 color: blue; 16 } 17 #a1[style] > #b1 { 18 color: green; 19 } 20 #a1[style] #c1 { 21 color: red; 22 } 23 #a1[style] + #d1 { 24 color: yellow; 25 } 26 27 [id=a2] { 28 color: blue; 29 } 30 [id=a2] > #b2 { 31 color: green; 32 } 33 [id=a2] #c2 { 34 color: red; 35 } 36 [id=a2] + #d2 { 37 color: yellow; 38 } 39 40 #a3[class~=q] { 41 color: blue; 42 } 43 #a3[class~=q] > #b3 { 44 color: green; 45 } 46 #a3[class~=q] #c3 { 47 color: red; 48 } 49 #a3[class~=q] + #d3 { 50 color: yellow; 51 } 52 53 #a4[run|=one] { 54 color: blue; 55 } 56 #a4[run|=one] > #b4 { 57 color: green; 58 } 59 #a4[run|=one] #c4 { 60 color: red; 61 } 62 #a4[run|=one] + #d4 { 63 color: yellow; 64 } 65 66 #a5 { 67 color: blue; 68 } 69 #a5 > #b5 { 70 color: green; 71 } 72 #a5 #c5 { 73 color: red; 74 } 75 #a5 + #d5 { 76 color: yellow; 77 } 78 79 #a6.q { 80 color: blue; 81 } 82 #a6.q > #b6 { 83 color: green; 84 } 85 #a6.q #c6 { 86 color: red; 87 } 88 #a6.q + #d6 { 89 color: yellow; 90 } 91 92 </style> 93 </head> 94 <body> 95 96 <div id="a1"> 97 <div id="b1"> 98 <div id="c1"> 99 </div> 100 </div> 101 </div> 102 <div id="d1"> 103 </div> 104 105 <div> 106 <div id="b2"> 107 <div id="c2"> 108 </div> 109 </div> 110 </div> 111 <div id="d2"> 112 </div> 113 114 <div id="a3"> 115 <div id="b3"> 116 <div id="c3"> 117 </div> 118 </div> 119 </div> 120 <div id="d3"> 121 </div> 122 123 <div id="a4"> 124 <div id="b4"> 125 <div id="c4"> 126 </div> 127 </div> 128 </div> 129 <div id="d4"> 130 </div> 131 132 <div> 133 <div id="b5"> 134 <div id="c5"> 135 </div> 136 </div> 137 </div> 138 <div id="d5"> 139 </div> 140 141 <div id="a6"> 142 <div id="b6"> 143 <div id="c6"> 144 </div> 145 </div> 146 </div> 147 <div id="d6"> 148 </div> 149 150 <script> 151 const gray = "rgb(128, 128, 128)"; 152 const blue = "rgb(0, 0, 255)"; 153 const green = "rgb(0, 128, 0)"; 154 const red = "rgb(255, 0, 0)"; 155 const yellow = "rgb(255, 255, 0)"; 156 157 function assertGray(a, b, c, d) { 158 assert_equals(getComputedStyle(a).color, gray); 159 assert_equals(getComputedStyle(b).color, gray); 160 assert_equals(getComputedStyle(c).color, gray); 161 assert_equals(getComputedStyle(d).color, gray); 162 } 163 164 function assertColorful(a, b, c, d) { 165 assert_equals(getComputedStyle(a).color, blue); 166 assert_equals(getComputedStyle(b).color, green); 167 assert_equals(getComputedStyle(c).color, red); 168 assert_equals(getComputedStyle(d).color, yellow); 169 } 170 171 test(() => { 172 assertGray(a1, b1, c1, d1); 173 a1.style.visibility = "visible"; 174 assertColorful(a1, b1, c1, d1); 175 a1.removeAttribute('style'); 176 assertGray(a1, b1, c1, d1); 177 }, "[att] selector is effective"); 178 179 test(() => { 180 const a2 = b2.parentElement; 181 assertGray(a2, b2, c2, d2); 182 a2.id = 'x-a2'; 183 assertGray(a2, b2, c2, d2); 184 a2.id = 'a2'; 185 assertColorful(a2, b2, c2, d2); 186 a2.id = 'a2-y'; 187 assertGray(a2, b2, c2, d2); 188 }, "[att=val] selector is effective"); 189 190 test(() => { 191 assertGray(a3, b3, c3, d3); 192 a3.setAttribute('class', 'p q r'); 193 assertColorful(a3, b3, c3, d3); 194 a3.setAttribute('class', 'q-r'); 195 assertGray(a3, b3, c3, d3); 196 }, "[att~=val] selector is effective"); 197 198 test(() => { 199 assertGray(a4, b4, c4, d4); 200 a4.setAttribute('run', 'one'); 201 assertColorful(a4, b4, c4, d4); 202 a4.setAttribute('run', 'one two three'); 203 assertGray(a4, b4, c4, d4); 204 a4.setAttribute('run', 'one-two-three'); 205 assertColorful(a4, b4, c4, d4); 206 a4.setAttribute('run', 'zero-one'); 207 assertGray(a4, b4, c4, d4); 208 }, "[att|=val] selector is effective"); 209 210 test(() => { 211 const a5 = b5.parentElement; 212 assertGray(a5, b5, c5, d5); 213 a5.setAttribute('id', 'x-a5'); 214 assertGray(a5, b5, c5, d5); 215 a5.setAttribute('id', 'a5'); 216 assertColorful(a5, b5, c5, d5); 217 a5.setAttribute('id', 'a5-y'); 218 assertGray(a5, b5, c5, d5); 219 }, "#id selector is effective"); 220 221 test(() => { 222 assertGray(a6, b6, c6, d6); 223 a6.classList.add('p'); 224 a6.classList.add('q'); 225 a6.classList.add('r'); 226 assertColorful(a6, b6, c6, d6); 227 a6.classList.remove('q'); 228 a6.classList.add('q-r'); 229 assertGray(a6, b6, c6, d6); 230 }, ".class selector is effective"); 231 232 </script> 233 </body> 234 </html>