Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-basic-expected.txt (0 => 281514)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-basic-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-basic-expected.txt 2021-08-24 20:36:58 UTC (rev 281514)
@@ -0,0 +1,36 @@
+
+PASS A1 Anonymous layers
+FAIL A2 Anonymous layers assert_equals: A2 Anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL A3 Anonymous layers assert_equals: A3 Anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL A4 Anonymous layers assert_equals: A4 Anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL A5 Anonymous layers assert_equals: A5 Anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL A6 Anonymous layers assert_equals: A6 Anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL A7 Anonymous layers assert_equals: A7 Anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL A8 Anonymous layers assert_equals: A8 Anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL A9 Anonymous layers assert_equals: A9 Anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+PASS B1 Named layers
+FAIL B2 Named layers assert_equals: B2 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL B3 Named layers assert_equals: B3 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL B4 Named layers assert_equals: B4 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL B5 Named layers assert_equals: B5 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL B6 Named layers assert_equals: B6 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL B7 Named layers assert_equals: B7 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL B8 Named layers assert_equals: B8 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL B9 Named layers assert_equals: B9 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL B10 Named layers assert_equals: B10 Named layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL C1 Named layers shorthand assert_equals: C1 Named layers shorthand, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL C2 Named layers shorthand assert_equals: C2 Named layers shorthand, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL C3 Named layers shorthand assert_equals: C3 Named layers shorthand, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL C4 Named layers shorthand assert_equals: C4 Named layers shorthand, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL C5 Named layers shorthand assert_equals: C5 Named layers shorthand, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL D1 Mixed named and anonymous layers assert_equals: D1 Mixed named and anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL D2 Mixed named and anonymous layers assert_equals: D2 Mixed named and anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL D3 Mixed named and anonymous layers assert_equals: D3 Mixed named and anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL D4 Mixed named and anonymous layers assert_equals: D4 Mixed named and anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL D5 Mixed named and anonymous layers assert_equals: D5 Mixed named and anonymous layers, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL E1 Statement syntax assert_equals: E1 Statement syntax, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL E2 Statement syntax assert_equals: E2 Statement syntax, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL E3 Statement syntax assert_equals: E3 Statement syntax, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL E4 Statement syntax assert_equals: E4 Statement syntax, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+FAIL E5 Statement syntax assert_equals: E5 Statement syntax, target 'first' expected "rgb(0, 128, 0)" but got "rgb(0, 0, 0)"
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-basic.html (0 => 281514)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-basic.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-basic.html 2021-08-24 20:36:58 UTC (rev 281514)
@@ -0,0 +1,528 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Cascade Layers: Basic functionality</title>
+<meta name="assert" content="Basic functionality of CSS Cascade Layers">
+<link rel="author" title="Antti Koivisto" href=""
+<link rel="help" href=""
+<script src=""
+<script src=""
+</head>
+<body>
+<target class="first"></target>
+<target class="second"></target>
+<div id="log"></div>
+<script>
+
+// In all test cases, the rule specified as "color: green" should win.
+var testCases = [
+ {
+ title: 'A1 Anonymous layers',
+ style: `
+ @layer { }
+ target { color: green; }
+ `,
+ },
+ {
+ title: 'A2 Anonymous layers',
+ style: `
+ target { color: red; }
+ @layer {
+ target { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'A3 Anonymous layers',
+ style: `
+ @layer {
+ target { color: green; }
+ }
+ target { color: red; }
+ `,
+ },
+ {
+ title: 'A4 Anonymous layers',
+ style: `
+ @layer {
+ target { color: red; }
+ }
+ @layer {
+ target { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'A5 Anonymous layers',
+ style: `
+ @layer {
+ target { color: red; }
+ @layer {
+ target { color: green; }
+ }
+ }
+ target { color: red; }
+ `,
+ },
+ {
+ title: 'A6 Anonymous layers',
+ style: `
+ @layer {
+ @layer {
+ target { color: green; }
+ }
+ target { color: red; }
+ }
+ target { color: red; }
+ `,
+ },
+ {
+ title: 'A7 Anonymous layers',
+ style: `
+ @layer {
+ @layer {
+ target { color: red; }
+ }
+ target { color: red; }
+ }
+ @layer {
+ @layer {
+ target { color: green; }
+ }
+ target { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'A8 Anonymous layers',
+ style: `
+ @layer {
+ @layer {
+ @layer {
+ target { color: red; }
+ }
+ }
+ target { color: red; }
+ }
+ @layer {
+ @layer {
+ target { color: green; }
+ }
+ target { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'A9 Anonymous layers',
+ style: `
+ @layer {
+ @layer {
+ target { color: red; }
+ }
+ target { color: red; }
+ }
+ @layer {
+ @layer {
+ @layer {
+ target { color: green; }
+ }
+ }
+ target { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'B1 Named layers',
+ style: `
+ @layer A {
+ }
+ target { color: green; }
+ `,
+ },
+ {
+ title: 'B2 Named layers',
+ style: `
+ @layer A {
+ target { color: green; }
+ }
+ target { color: red; }
+ `,
+ },
+ {
+ title: 'B3 Named layers',
+ style: `
+ @layer A {
+ target { color: red; }
+ }
+ @layer A {
+ target { color: green; }
+ }
+ target { color: red; }
+ `,
+ },
+ {
+ title: 'B4 Named layers',
+ style: `
+ @layer A {
+ target { color: red; }
+ }
+ @layer B {
+ target { color: green; }
+ }
+ @layer A {
+ target { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'B5 Named layers',
+ style: `
+ @layer A {
+ target { color: red; }
+ @layer A {
+ target { color: green; }
+ }
+ }
+ `,
+ },
+ {
+ title: 'B6 Named layers',
+ style: `
+ @layer A {
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @layer A {
+ @layer A {
+ target { color: green; }
+ }
+ }
+ `,
+ },
+ {
+ title: 'B7 Named layers',
+ style: `
+ @layer A {
+ target { color: red; }
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @layer B {
+ target { color: green; }
+ }
+ @layer A {
+ @layer A {
+ target { color: red; }
+ }
+ }
+ `,
+ },
+ {
+ title: 'B8 Named layers',
+ style: `
+ @layer A {
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @layer B {
+ @layer A {
+ target { color: green; }
+ }
+ }
+ `,
+ },
+ {
+ title: 'B9 Named layers',
+ style: `
+ @layer A {
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @layer B {
+ @layer A {
+ target.first { color: green; }
+ }
+ }
+ @layer A {
+ @layer A {
+ target.first { color: red; }
+ target.second { color: green; }
+ }
+ }
+ `,
+ },
+ {
+ title: 'B10 Named layers',
+ style: `
+ @layer A {
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @layer B {
+ @layer A {
+ target.first { color: green; }
+ }
+ }
+ @layer A {
+ @layer B {
+ target.first { color: red; }
+ target.second { color: green; }
+ }
+ }
+ `,
+ },
+ {
+ title: 'C1 Named layers shorthand',
+ style: `
+ @layer A.A {
+ target { color: red; }
+ }
+ @layer B.A {
+ target { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'C2 Named layers shorthand',
+ style: `
+ @layer A.A {
+ target { color: red; }
+ }
+ @layer B.A {
+ target.first { color: green; }
+ }
+ @layer A.A {
+ target.first { color: red; }
+ target.second { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'C3 Named layers shorthand',
+ style: `
+ @layer A.A {
+ target { color: red; }
+ }
+ @layer B.A {
+ target.first { color: green; }
+ }
+ @layer A.B {
+ target.first { color: red; }
+ target.second { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'C4 Named layers shorthand',
+ style: `
+ @layer A {
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @layer B.A {
+ target { color: green; }
+ }
+ @layer A.A
+ target { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'C5 Named layers shorthand',
+ style: `
+ @layer A {
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @layer B.A {
+ target { color: green; }
+ }
+ @layer A.B {
+ target { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'D1 Mixed named and anonymous layers',
+ style: `
+ @layer A {
+ target { color: red; }
+ }
+ @layer {
+ target { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'D2 Mixed named and anonymous layers',
+ style: `
+ @layer A {
+ @layer {
+ target { color: green; }
+ }
+ }
+ @layer A {
+ target { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'D3 Mixed named and anonymous layers',
+ style: `
+ @layer A {
+ @layer {
+ target { color: red; }
+ }
+ }
+ @layer A {
+ @layer {
+ target { color: green; }
+ }
+ }
+ `,
+ },
+ {
+ title: 'D4 Mixed named and anonymous layers',
+ style: `
+ @layer A {
+ @layer {
+ target { color: red; }
+ }
+ }
+ @layer {
+ target { color: green; }
+ }
+ @layer A {
+ @layer {
+ target { color: red; }
+ }
+ }
+ `,
+ },
+ {
+ title: 'D5 Mixed named and anonymous layers',
+ style: `
+ @layer {
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @layer {
+ target { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'E1 Statement syntax',
+ style: `
+ @layer A, B, C;
+ @layer A {
+ target.first { color: red; }
+ target.second { color: red; }
+ }
+ @layer B {
+ target.first { color: red; }
+ }
+ @layer C {
+ target.first { color: green; }
+ target.second { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'E2 Statement syntax',
+ style: `
+ @layer A, C, B;
+ @layer A {
+ target.first { color: red; }
+ target.second { color: red; }
+ }
+ @layer B {
+ target.first { color: green; }
+ }
+ @layer C {
+ target.first { color: red; }
+ target.second { color: green; }
+ }
+ `,
+ },
+ {
+ title: 'E3 Statement syntax',
+ style: `
+ @layer C, B, A;
+ @layer A {
+ target.first { color: green; }
+ target.second { color: green; }
+ }
+ @layer B {
+ target.first { color: red; }
+ }
+ @layer C {
+ target.first { color: red; }
+ target.second { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'E4 Statement syntax',
+ style: `
+ @layer B, A.B, A.A;
+ @layer A {
+ @layer A {
+ target.first { color: green; }
+ }
+ @layer B {
+ target.first { color: red; }
+ target.second { color: green; }
+ }
+ }
+ @layer B {
+ target { color: red; }
+ }
+ `,
+ },
+ {
+ title: 'E5 Statement syntax',
+ style: `
+ @layer A.B, B, A.A;
+ @layer A {
+ @layer A {
+ target.first { color: red; }
+ }
+ @layer B {
+ target.first { color: red; }
+ target.second { color: red; }
+ }
+ }
+ @layer B {
+ target { color: green; }
+ }
+ `,
+ },
+];
+
+for (var i = 0; i < testCases.length; ++i) {
+ var testCase = testCases[i];
+ var documentStyle = document.createElement('style');
+ documentStyle.appendChild(document.createTextNode(testCase['style']));
+ document.head.appendChild(documentStyle);
+
+ test(function () {
+ var targets = document.querySelectorAll('target');
+ for (target of targets)
+ assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)',
+ testCase['title'] + ", target '" + target.classList[0] + "'");
+ }, testCase['title']);
+
+ document.head.removeChild(documentStyle)
+}
+</script>
+</body>
+</html>
