Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (281916 => 281917)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-09-02 10:04:58 UTC (rev 281916)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-09-02 10:42:04 UTC (rev 281917)
@@ -1,3 +1,14 @@
+2021-09-02 Antti Koivisto <[email protected]>
+
+ [CSS Cascade Layers] Import @import WPT tests
+ https://bugs.webkit.org/show_bug.cgi?id=229796
+
+ Reviewed by Youenn Fablet.
+
+ * web-platform-tests/css/css-cascade/layer-import-expected.txt: Added.
+ * web-platform-tests/css/css-cascade/layer-import.html: Added.
+ * web-platform-tests/css/css-cascade/w3c-import.log:
+
2021-09-01 Alex Christensen <[email protected]>
PerformanceNavigationTiming should be instantiated before scripts run then updated when response finishes
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import-expected.txt (0 => 281917)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import-expected.txt 2021-09-02 10:42:04 UTC (rev 281917)
@@ -0,0 +1,25 @@
+
+PASS A1 Layer rules with import
+PASS A2 Layer rules with import
+PASS A3 Layer rules with import
+PASS A4 Layer rules with import
+FAIL B1 Anonymous imports assert_equals: B1 Anonymous imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL B2 Anonymous imports assert_equals: B2 Anonymous imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+PASS B3 Anonymous imports
+FAIL B4 Anonymous imports assert_equals: B4 Anonymous imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL C1 Named imports assert_equals: C1 Named imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL C2 Named imports assert_equals: C2 Named imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+PASS C3 Named imports
+FAIL C4 Named imports assert_equals: C4 Named imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+PASS C5 Named imports
+PASS C6 Named imports
+FAIL C7 Named imports assert_equals: C7 Named imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL C8 Named imports assert_equals: C8 Named imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL C9 Named imports assert_equals: C9 Named imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL D1 Layer statement with imports assert_equals: D1 Layer statement with imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL D2 Layer statement with imports assert_equals: D2 Layer statement with imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL D3 Layer statement with imports assert_equals: D3 Layer statement with imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL D4 Layer statement with imports assert_equals: D4 Layer statement with imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL D5 Layer statement with imports assert_equals: D5 Layer statement with imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+FAIL D6 Layer statement with imports assert_equals: D6 Layer statement with imports, target 'first' expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import.html (0 => 281917)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import.html 2021-09-02 10:42:04 UTC (rev 281917)
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Cascade Layers: Imports</title>
+<meta name="assert" content="Import 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>
+<div id="log"></div>
+<script>
+
+// In all test cases, the rule specified as "color: green" should win.
+const imports = {
+ "basic-green.css": `
+ target { color: green; }
+ `,
+ "basic-red.css": `
+ target { color: red; }
+ `,
+ "layer-green.css": `
+ @layer {
+ target { color: green; }
+ }
+ `,
+ "layer-red.css": `
+ @layer {
+ target { color: red; }
+ }
+ `,
+ "layer-A-green.css": `
+ @layer A {
+ target { color: green; }
+ }
+ `,
+ "layer-A-red.css": `
+ @layer A {
+ target { color: red; }
+ }
+ `,
+ "layer-B-green.css": `
+ @layer B {
+ target { color: green; }
+ }
+ `,
+ "layer-B-red.css": `
+ @layer B {
+ target { color: red; }
+ }
+ `,
+};
+
+const testCases = [
+ {
+ title: 'A1 Layer rules with import',
+ style: `
+ @import url(basic-red.css);
+ @layer {
+ target { color: green; }
+ }
+ `
+ },
+ {
+ title: 'A2 Layer rules with import',
+ style: `
+ @import url(layer-green.css);
+ target { color: red; }
+ `
+ },
+ {
+ title: 'A3 Layer rules with import',
+ style: `
+ @import url(layer-green.css);
+ @import url(basic-red.css);
+ `
+ },
+ {
+ title: 'A4 Layer rules with import',
+ style: `
+ @import url(layer-A-red.css);
+ @layer B {
+ target { color: green; }
+ }
+ @layer A {
+ target { color: red; }
+ }
+ `
+ },
+ {
+ title: 'B1 Anonymous imports',
+ style: `
+ @import url(basic-green.css) layer;
+ target { color: red; }
+ `
+ },
+ {
+ title: 'B2 Anonymous imports',
+ style: `
+ @import url(basic-red.css) layer;
+ @import url(basic-green.css) layer;
+ `
+ },
+ {
+ title: 'B3 Anonymous imports',
+ style: `
+ @import url(basic-red.css) layer;
+ @layer {
+ target { color: green; }
+ }
+ `
+ },
+ {
+ title: 'B4 Anonymous imports',
+ style: `
+ @import url(layer-red.css);
+ @import url(basic-green.css) layer;
+ `
+ },
+ {
+ title: 'C1 Named imports',
+ style: `
+ @import url(basic-green.css) layer(A);
+ target { color: red; }
+ `
+ },
+ {
+ title: 'C2 Named imports',
+ style: `
+ @import url(basic-red.css) layer(A);
+ @import url(basic-green.css) layer(A);
+ `
+ },
+ {
+ title: 'C3 Named imports',
+ style: `
+ @import url(basic-red.css) layer(A);
+ @layer A {
+ target { color: green; }
+ }
+ `
+ },
+ {
+ title: 'C4 Named imports',
+ style: `
+ @import url(layer-green.css) layer(A);
+ @layer A {
+ target { color: red; }
+ }
+ `
+ },
+ {
+ title: 'C5 Named imports',
+ style: `
+ @import url(layer-A-red.css) layer(A);
+ @layer A.A {
+ target { color: green; }
+ }
+ `
+ },
+ {
+ title: 'C6 Named imports',
+ style: `
+ @import url(layer-A-red.css) layer(A);
+ @layer B {
+ target { color: green; }
+ }
+ @layer A.B {
+ target { color: red; }
+ }
+ `
+ },
+ {
+ title: 'C7 Named imports',
+ style: `
+ @import url(basic-green.css) layer(A);
+ @import url(basic-red.css) layer(B);
+ @import url(basic-green.css) layer(C);
+ `
+ },
+ {
+ title: 'C8 Named imports',
+ style: `
+ @import url(basic-red.css) layer(A);
+ @import url(basic-green.css) layer(B);
+ @import url(basic-red.css) layer(A);
+ `
+ },
+ {
+ title: 'C9 Named imports',
+ style: `
+ @import url(basic-red.css) layer(A);
+ @import url(basic-green.css) layer(B.A);
+ @import url(basic-red.css) layer(B);
+ `
+ },
+ {
+ title: 'D1 Layer statement with imports',
+ style: `
+ @import url(basic-red.css) layer(A);
+ @import url(basic-green.css) layer(B);
+ @layer B, A;
+ `
+ },
+ {
+ title: 'D2 Layer statement with imports',
+ style: `
+ @layer B;
+ @import url(basic-green.css) layer(A);
+ @layer B {
+ target { color: red; }
+ }
+ `
+ },
+ {
+ title: 'D3 Layer statement with imports',
+ style: `
+ @layer B;
+ @import url(basic-green.css) layer(A);
+ @import url(basic-red.css) layer(B);
+ `
+ },
+ {
+ title: 'D4 Layer statement with imports',
+ style: `
+ @layer C, B, A;
+ @import url(basic-green.css) layer(A);
+ @import url(basic-red.css) layer(B);
+ @layer C {
+ target { color: red; }
+ }
+ `
+ },
+ {
+ title: 'D5 Layer statement with imports',
+ style: `
+ @layer A.B, A.A;
+ @import url(basic-green.css) layer(A.A);
+ @import url(layer-B-red.css) layer(A);
+ `
+ },
+ {
+ title: 'D6 Layer statement with imports',
+ style: `
+ @layer B, A;
+ @import url(layer-A-red.css) layer(A);
+ @import url(layer-A-red.css) layer(B);
+ @layer A.B {
+ target { color: green; }
+ }
+ `
+ },
+];
+
+for (let testCase of testCases) {
+ promise_test(async t => {
+ const styleElement = document.createElement('style');
+ const styleText = testCase['style'].replaceAll(/url\((.+?)\)/g, (match, p1) => {
+ return `url(data:text/css,${ encodeURI(imports[p1]) })`;
+ });
+ styleElement.appendChild(document.createTextNode(styleText));
+
+ await new Promise(resolve => {
+ styleElement._onload_ = resolve;
+ document.head.appendChild(styleElement);
+ });
+
+ const targets = document.querySelectorAll('target');
+ for (target of targets)
+ assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)', testCase['title'] + ", target '" + target.classList[0] + "'");
+
+ document.head.removeChild(styleElement);
+ }, testCase['title']);
+}
+</script>
+</body>
+</html>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/w3c-import.log (281916 => 281917)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/w3c-import.log 2021-09-02 10:04:58 UTC (rev 281916)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/w3c-import.log 2021-09-02 10:42:04 UTC (rev 281917)
@@ -44,6 +44,7 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/initial-color-background-001-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/initial-color-background-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-basic.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/layer-import.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-val-001-expected.xht
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-val-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/revert-val-002-expected.xht
