scope-visited-cssom.html (10036B)
1 <!DOCTYPE html> 2 <title>@scope - :visited and CSSOM</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles"> 4 <link rel="help" href="https://drafts.csswg.org/selectors-4/#link"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <main id=main></main> 8 9 <style> 10 :where(:visited, :link), :where(div) { 11 background-color: white; 12 } 13 </style> 14 15 <!-- 16 Both #visited and #unvisited should appear to be in an unvisited state 17 through getComputedStyle. 18 --> 19 20 <!-- :visited/:link in scoped selector --> 21 22 <template id=test_link> 23 <style> 24 @scope (main) { 25 :link { background-color: green; } 26 } 27 </style> 28 <a id=visited href=""></a> 29 <a id=unvisited href="x"></a> 30 </template> 31 <script> 32 test((t) => { 33 main.append(test_link.content.cloneNode(true)); 34 t.add_cleanup(() => main.replaceChildren()); 35 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(0, 128, 0)'); 36 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(0, 128, 0)'); 37 }, ':link as scoped selector'); 38 </script> 39 40 <template id=test_visited> 41 <style> 42 @scope (main) { 43 :visited { background-color: green; } 44 } 45 </style> 46 <a id=visited href=""></a> 47 <a id=unvisited href="x"></a> 48 </template> 49 <script> 50 test((t) => { 51 main.append(test_visited.content.cloneNode(true)); 52 t.add_cleanup(() => main.replaceChildren()); 53 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(255, 255, 255)', 'visited'); 54 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(255, 255, 255)', 'unvisited'); 55 }, ':visited as scoped selector'); 56 </script> 57 58 <template id=test_not_link> 59 <style> 60 @scope (main) { 61 :not(:link) { background-color: green; } 62 } 63 </style> 64 <a id=visited href=""></a> 65 <a id=unvisited href="x"></a> 66 </template> 67 <script> 68 test((t) => { 69 main.append(test_not_link.content.cloneNode(true)); 70 t.add_cleanup(() => main.replaceChildren()); 71 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(255, 255, 255)', 'visited'); 72 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(255, 255, 255)', 'unvisited'); 73 }, ':not(:link) as scoped selector'); 74 </script> 75 76 <template id=test_not_visited> 77 <style> 78 @scope (main) { 79 :not(:visited) { background-color: green; } 80 } 81 </style> 82 <a id=visited href=""></a> 83 <a id=unvisited href="x"></a> 84 </template> 85 <script> 86 test((t) => { 87 main.append(test_not_visited.content.cloneNode(true)); 88 t.add_cleanup(() => main.replaceChildren()); 89 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(0, 128, 0)', 'visited'); 90 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(0, 128, 0)', 'unvisited'); 91 }, ':not(:visited) as scoped selector'); 92 </script> 93 94 <!-- :visited/:link in root --> 95 96 <template id=test_link_root> 97 <style> 98 @scope (main :link) { 99 div { background-color: green; } 100 } 101 </style> 102 <a id=visited href=""><div></div></a> 103 <a id=unvisited href="x"><div></div></a> 104 </template> 105 <script> 106 test((t) => { 107 main.append(test_link_root.content.cloneNode(true)); 108 t.add_cleanup(() => main.replaceChildren()); 109 assert_equals(getComputedStyle(visited.firstElementChild).backgroundColor, 'rgb(0, 128, 0)', 'visited'); 110 assert_equals(getComputedStyle(unvisited.firstElementChild).backgroundColor, 'rgb(0, 128, 0)', 'unvisited'); 111 }, ':link as scoping root'); 112 </script> 113 114 <template id=test_visited_root> 115 <style> 116 @scope (main :visited) { 117 div { background-color: green; } 118 } 119 </style> 120 <a id=visited href=""><div></div></a> 121 <a id=unvisited href="x"><div></div></a> 122 </template> 123 <script> 124 test((t) => { 125 main.append(test_visited_root.content.cloneNode(true)); 126 t.add_cleanup(() => main.replaceChildren()); 127 assert_equals(getComputedStyle(visited.firstElementChild).backgroundColor, 'rgb(255, 255, 255)', 'visited'); 128 assert_equals(getComputedStyle(unvisited.firstElementChild).backgroundColor, 'rgb(255, 255, 255)', 'unvisited'); 129 }, ':visited as scoping root'); 130 </script> 131 132 <template id=test_not_visited_root> 133 <style> 134 @scope (main :not(:visited)) { 135 div { background-color: green; } 136 } 137 </style> 138 <a id=visited href=""><div></div></a> 139 <a id=unvisited href="x"><div></div></a> 140 </template> 141 <script> 142 test((t) => { 143 main.append(test_not_visited_root.content.cloneNode(true)); 144 t.add_cleanup(() => main.replaceChildren()); 145 assert_equals(getComputedStyle(visited.firstElementChild).backgroundColor, 'rgb(0, 128, 0)', 'visited'); 146 assert_equals(getComputedStyle(unvisited.firstElementChild).backgroundColor, 'rgb(0, 128, 0)', 'unvisited'); 147 }, ':not(:visited) as scoping root'); 148 </script> 149 150 <template id=test_not_link_root> 151 <style> 152 @scope (main :not(:link)) { 153 div { background-color: green; } 154 } 155 </style> 156 <a id=visited href=""><div></div></a> 157 <a id=unvisited href="x"><div></div></a> 158 </template> 159 <script> 160 test((t) => { 161 main.append(test_not_link_root.content.cloneNode(true)); 162 t.add_cleanup(() => main.replaceChildren()); 163 assert_equals(getComputedStyle(visited.firstElementChild).backgroundColor, 'rgb(255, 255, 255)', 'visited'); 164 assert_equals(getComputedStyle(unvisited.firstElementChild).backgroundColor, 'rgb(255, 255, 255)', 'unvisited'); 165 }, ':not(:link) as scoping root'); 166 </script> 167 168 <!-- :visited/:link in scoping root, with inner :scope --> 169 170 <template id=test_link_root_scope> 171 <style> 172 @scope (main :link) { 173 :scope { background-color: green; } 174 } 175 </style> 176 <a id=visited href=""></a> 177 <a id=unvisited href="x"></a> 178 </template> 179 <script> 180 test((t) => { 181 main.append(test_link_root_scope.content.cloneNode(true)); 182 t.add_cleanup(() => main.replaceChildren()); 183 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(0, 128, 0)', 'visited'); 184 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(0, 128, 0)', 'unvisited'); 185 }, ':link as scoping root, :scope'); 186 </script> 187 188 <template id=test_visited_root_scope> 189 <style> 190 @scope (main :visited) { 191 :scope { background-color: green; } 192 } 193 </style> 194 <a id=visited href=""></a> 195 <a id=unvisited href="x"></a> 196 </template> 197 <script> 198 test((t) => { 199 main.append(test_visited_root_scope.content.cloneNode(true)); 200 t.add_cleanup(() => main.replaceChildren()); 201 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(255, 255, 255)', 'visited'); 202 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(255, 255, 255)', 'unvisited'); 203 }, ':visited as scoping root, :scope'); 204 </script> 205 206 <template id=test_not_visited_root_scope> 207 <style> 208 @scope (main :not(:visited)) { 209 :scope { background-color: green; } 210 } 211 </style> 212 <a id=visited href=""></a> 213 <a id=unvisited href="x"></a> 214 </template> 215 <script> 216 test((t) => { 217 main.append(test_not_visited_root_scope.content.cloneNode(true)); 218 t.add_cleanup(() => main.replaceChildren()); 219 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(0, 128, 0)', 'visited'); 220 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(0, 128, 0)', 'unvisited'); 221 }, ':not(:visited) as scoping root, :scope'); 222 </script> 223 224 <template id=test_not_link_root_scope> 225 <style> 226 @scope (main :not(:link)) { 227 :scope { background-color: green; } 228 } 229 </style> 230 <a id=visited href=""></a> 231 <a id=unvisited href="x"></a> 232 </template> 233 <script> 234 test((t) => { 235 main.append(test_not_link_root_scope.content.cloneNode(true)); 236 t.add_cleanup(() => main.replaceChildren()); 237 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(255, 255, 255)', 'visited'); 238 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(255, 255, 255)', 'unvisited'); 239 }, ':not(:link) as scoping root, :scope'); 240 </script> 241 242 <!-- :visited/:link in scoping limit --> 243 244 <template id=test_link_scoping_limit> 245 <style> 246 @scope (main) to (:link) { 247 * { background-color: green; } 248 } 249 </style> 250 <a id=visited href=""></a> 251 <a id=unvisited href="x"></a> 252 </template> 253 <script> 254 test((t) => { 255 main.append(test_link_scoping_limit.content.cloneNode(true)); 256 t.add_cleanup(() => main.replaceChildren()); 257 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(255, 255, 255)', 'visited'); 258 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(255, 255, 255)', 'unvisited'); 259 }, ':link as scoping limit'); 260 </script> 261 262 <template id=test_visited_scoping_limit> 263 <style> 264 @scope (main) to (:visited) { 265 * { background-color: green; } 266 } 267 </style> 268 <a id=visited href=""></a> 269 <a id=unvisited href="x"></a> 270 </template> 271 <script> 272 test((t) => { 273 main.append(test_visited_scoping_limit.content.cloneNode(true)); 274 t.add_cleanup(() => main.replaceChildren()); 275 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(0, 128, 0)', 'visited'); 276 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(0, 128, 0)', 'unvisited'); 277 }, ':visited as scoping limit'); 278 </script> 279 280 <template id=test_not_link_scoping_limit> 281 <style> 282 @scope (main) to (:not(:link)) { 283 * { background-color: green; } 284 } 285 </style> 286 <a id=visited href=""></a> 287 <a id=unvisited href="x"></a> 288 </template> 289 <script> 290 test((t) => { 291 main.append(test_not_link_scoping_limit.content.cloneNode(true)); 292 t.add_cleanup(() => main.replaceChildren()); 293 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(0, 128, 0)', 'visited'); 294 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(0, 128, 0)', 'unvisited'); 295 }, ':not(:link) as scoping limit'); 296 </script> 297 298 <template id=test_not_visited_scoping_limit> 299 <style> 300 @scope (main) to (:not(:visited)) { 301 * { background-color: green; } 302 } 303 </style> 304 <a id=visited href=""></a> 305 <a id=unvisited href="x"></a> 306 </template> 307 <script> 308 test((t) => { 309 main.append(test_not_visited_scoping_limit.content.cloneNode(true)); 310 t.add_cleanup(() => main.replaceChildren()); 311 assert_equals(getComputedStyle(visited).backgroundColor, 'rgb(255, 255, 255)', 'visited'); 312 assert_equals(getComputedStyle(unvisited).backgroundColor, 'rgb(255, 255, 255)', 'unvisited'); 313 }, ':not(:visited) as scoping limit'); 314 </script>