layer-basic.html (12555B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Cascade Layers: Basic functionality</title> 5 <meta name="assert" content="Basic functionality of CSS Cascade Layers"> 6 <link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com"> 7 <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <target class="first"></target> 13 <target class="second"></target> 14 <div id="log"></div> 15 <script> 16 17 // In all test cases, the rule specified as "color: green" should win. 18 var testCases = [ 19 { 20 title: 'A1 Anonymous layers', 21 style: ` 22 @layer { } 23 target { color: green; } 24 `, 25 }, 26 { 27 title: 'A2 Anonymous layers', 28 style: ` 29 target { color: green; } 30 @layer { 31 target { color: red; } 32 } 33 `, 34 }, 35 { 36 title: 'A3 Anonymous layers', 37 style: ` 38 @layer { 39 target { color: red; } 40 } 41 target { color: green; } 42 `, 43 }, 44 { 45 title: 'A4 Anonymous layers', 46 style: ` 47 @layer { 48 target { color: red; } 49 } 50 @layer { 51 target { color: green; } 52 } 53 `, 54 }, 55 { 56 title: 'A5 Anonymous layers', 57 style: ` 58 @layer { 59 target { color: green; } 60 @layer { 61 target { color: red; } 62 } 63 } 64 `, 65 }, 66 { 67 title: 'A6 Anonymous layers', 68 style: ` 69 @layer { 70 @layer { 71 target { color: red; } 72 } 73 target { color: green; } 74 } 75 `, 76 }, 77 { 78 title: 'A7 Anonymous layers', 79 style: ` 80 @layer { 81 @layer { 82 target { color: red; } 83 } 84 target { color: red; } 85 } 86 @layer { 87 @layer { 88 target { color: red; } 89 } 90 target { color: green; } 91 } 92 `, 93 }, 94 { 95 title: 'A8 Anonymous layers', 96 style: ` 97 @layer { 98 @layer { 99 @layer { 100 target { color: red; } 101 } 102 } 103 target { color: red; } 104 } 105 @layer { 106 @layer { 107 target { color: red; } 108 } 109 target { color: green; } 110 } 111 `, 112 }, 113 { 114 title: 'A9 Anonymous layers', 115 style: ` 116 @layer { 117 @layer { 118 target { color: red; } 119 } 120 target { color: red; } 121 } 122 @layer { 123 @layer { 124 @layer { 125 target { color: red; } 126 } 127 } 128 target { color: green; } 129 } 130 `, 131 }, 132 { 133 title: 'B1 Named layers', 134 style: ` 135 @layer A { 136 } 137 target { color: green; } 138 `, 139 }, 140 { 141 title: 'B2 Named layers', 142 style: ` 143 @layer A { 144 target { color: red; } 145 } 146 target { color: green; } 147 `, 148 }, 149 { 150 title: 'B3 Named layers', 151 style: ` 152 @layer A { 153 target { color: red; } 154 } 155 @layer A { 156 target { color: green; } 157 } 158 `, 159 }, 160 { 161 title: 'B4 Named layers', 162 style: ` 163 @layer A { 164 target { color: red; } 165 } 166 @layer B { 167 target { color: green; } 168 } 169 @layer A { 170 target { color: red; } 171 } 172 `, 173 }, 174 { 175 title: 'B5 Named layers', 176 style: ` 177 @layer A { 178 target { color: green; } 179 @layer A { 180 target { color: red; } 181 } 182 } 183 `, 184 }, 185 { 186 title: 'B6 Named layers', 187 style: ` 188 @layer A { 189 @layer A { 190 target { color: red; } 191 } 192 } 193 @layer A { 194 @layer A { 195 target { color: green; } 196 } 197 } 198 `, 199 }, 200 { 201 title: 'B7 Named layers', 202 style: ` 203 @layer A { 204 target { color: red; } 205 @layer A { 206 target { color: red; } 207 } 208 } 209 @layer B { 210 target { color: green; } 211 } 212 @layer A { 213 @layer A { 214 target { color: red; } 215 } 216 } 217 `, 218 }, 219 { 220 title: 'B8 Named layers', 221 style: ` 222 @layer A { 223 @layer A { 224 target { color: red; } 225 } 226 } 227 @layer B { 228 @layer A { 229 target { color: green; } 230 } 231 } 232 `, 233 }, 234 { 235 title: 'B9 Named layers', 236 style: ` 237 @layer A { 238 @layer A { 239 target { color: red; } 240 } 241 } 242 @layer B { 243 @layer A { 244 target.first { color: green; } 245 } 246 } 247 @layer A { 248 @layer A { 249 target.first { color: red; } 250 target.second { color: green; } 251 } 252 } 253 `, 254 }, 255 { 256 title: 'B10 Named layers', 257 style: ` 258 @layer A { 259 @layer A { 260 target { color: red; } 261 } 262 } 263 @layer B { 264 @layer A { 265 target.first { color: green; } 266 } 267 } 268 @layer A { 269 @layer B { 270 target.first { color: red; } 271 target.second { color: green; } 272 } 273 } 274 `, 275 }, 276 { 277 title: 'C1 Named layers shorthand', 278 style: ` 279 @layer A.A { 280 target { color: red; } 281 } 282 @layer B.A { 283 target { color: green; } 284 } 285 `, 286 }, 287 { 288 title: 'C2 Named layers shorthand', 289 style: ` 290 @layer A.A { 291 target { color: red; } 292 } 293 @layer B.A { 294 target.first { color: green; } 295 } 296 @layer A.A { 297 target.first { color: red; } 298 target.second { color: green; } 299 } 300 `, 301 }, 302 { 303 title: 'C3 Named layers shorthand', 304 style: ` 305 @layer A.A { 306 target { color: red; } 307 } 308 @layer B.A { 309 target.first { color: green; } 310 } 311 @layer A.B { 312 target.first { color: red; } 313 target.second { color: green; } 314 } 315 `, 316 }, 317 { 318 title: 'C4 Named layers shorthand', 319 style: ` 320 @layer A { 321 @layer A { 322 target { color: red; } 323 } 324 } 325 @layer B.A { 326 target { color: green; } 327 } 328 @layer A.A 329 target { color: red; } 330 } 331 `, 332 }, 333 { 334 title: 'C5 Named layers shorthand', 335 style: ` 336 @layer A { 337 @layer A { 338 target { color: red; } 339 } 340 } 341 @layer B.A { 342 target { color: green; } 343 } 344 @layer A.B { 345 target { color: red; } 346 } 347 `, 348 }, 349 { 350 title: 'D1 Mixed named and anonymous layers', 351 style: ` 352 @layer A { 353 target { color: red; } 354 } 355 @layer { 356 target { color: green; } 357 } 358 `, 359 }, 360 { 361 title: 'D2 Mixed named and anonymous layers', 362 style: ` 363 @layer A { 364 @layer { 365 target { color: red; } 366 } 367 } 368 @layer A { 369 target { color: green; } 370 } 371 `, 372 }, 373 { 374 title: 'D3 Mixed named and anonymous layers', 375 style: ` 376 @layer A { 377 @layer { 378 target { color: red; } 379 } 380 } 381 @layer A { 382 @layer { 383 target { color: green; } 384 } 385 } 386 `, 387 }, 388 { 389 title: 'D4 Mixed named and anonymous layers', 390 style: ` 391 @layer A { 392 @layer { 393 target { color: red; } 394 } 395 } 396 @layer { 397 target { color: green; } 398 } 399 @layer A { 400 @layer { 401 target { color: red; } 402 } 403 } 404 `, 405 }, 406 { 407 title: 'D5 Mixed named and anonymous layers', 408 style: ` 409 @layer { 410 @layer A { 411 target { color: red; } 412 } 413 } 414 @layer { 415 target { color: green; } 416 } 417 `, 418 }, 419 { 420 title: 'E1 Statement syntax', 421 style: ` 422 @layer A, B, C; 423 @layer A { 424 target.first { color: red; } 425 target.second { color: red; } 426 } 427 @layer B { 428 target.first { color: red; } 429 } 430 @layer C { 431 target.first { color: green; } 432 target.second { color: green; } 433 } 434 `, 435 }, 436 { 437 title: 'E2 Statement syntax', 438 style: ` 439 @layer A, C, B; 440 @layer A { 441 target.first { color: red; } 442 target.second { color: red; } 443 } 444 @layer B { 445 target.first { color: green; } 446 } 447 @layer C { 448 target.first { color: red; } 449 target.second { color: green; } 450 } 451 `, 452 }, 453 { 454 title: 'E3 Statement syntax', 455 style: ` 456 @layer C, B, A; 457 @layer A { 458 target.first { color: green; } 459 target.second { color: green; } 460 } 461 @layer B { 462 target.first { color: red; } 463 } 464 @layer C { 465 target.first { color: red; } 466 target.second { color: red; } 467 } 468 `, 469 }, 470 { 471 title: 'E4 Statement syntax', 472 style: ` 473 @layer B, A.B, A.A; 474 @layer A { 475 @layer A { 476 target.first { color: green; } 477 } 478 @layer B { 479 target.first { color: red; } 480 target.second { color: green; } 481 } 482 } 483 @layer B { 484 target { color: red; } 485 } 486 `, 487 }, 488 { 489 title: 'E5 Statement syntax', 490 style: ` 491 @layer A.B, B, A.A; 492 @layer A { 493 @layer A { 494 target.first { color: red; } 495 } 496 @layer B { 497 target.first { color: red; } 498 target.second { color: red; } 499 } 500 } 501 @layer B { 502 target { color: green; } 503 } 504 `, 505 }, 506 ]; 507 508 for (let testCase of testCases) { 509 const styleElement = document.createElement('style'); 510 styleElement.textContent = testCase['style']; 511 document.head.append(styleElement); 512 513 test(function () { 514 var targets = document.querySelectorAll('target'); 515 for (target of targets) 516 assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)', 517 testCase['title'] + ", target '" + target.classList[0] + "'"); 518 }, testCase['title']); 519 520 styleElement.remove(); 521 } 522 </script> 523 </body> 524 </html>