[@layer] Ensure layer establishment behavior on failed/unmatched imports

As per w3c/csswg-drafts#6776: 1. @import with unmatched media query shouldn't establish layer 2. @import that fails to load should still establish layer This patch adds test cases for it and also fixes our behavior on 1. Bug: 1095765 Change-Id: Ia7d2c9921b4b93173546cbd78ab243dac3f92420 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3272669 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/main@{#940505}
web-platform-tests · Nov 10, 2021 · e204571 · e204571
1 parent 76ecf19
commit e204571
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/css/css-cascade/layer-import.html b/css/css-cascade/layer-import.html
@@ -252,6 +252,18 @@
             }
         `
     },
+    {
+        title: 'E1 Named imports establish layer even with network errors',
+        style: `
+            @import "nonexist.css" layer(A);
+            @layer B {
+                target { color: green; }
+            }
+            @layer A {
+                target { color: red; }
+            }
+        `,
+    },
 ];
 
 for (let testCase of testCases) {
@@ -264,6 +276,7 @@
 
         await new Promise(resolve => {
             styleElement.onload = resolve;
+            styleElement.onerror = resolve;
             document.head.append(styleElement);
         });
 

diff --git a/css/css-cascade/layer-media-query.html b/css/css-cascade/layer-media-query.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <title>CSS Cascade Layers: Media queries</title>
-<meta name="assert" content="Import functionality of CSS Cascade Layers">
+<meta name="assert" content="CSS Cascade Layers nested in Media Queries">
 <link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
 <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering">
 <script src="/resources/testharness.js"></script>
@@ -20,6 +20,7 @@
     "basic-red.css": `
         target { color: red; }
     `,
+    "empty.css": "",
 };
 
 // For 300px wide iframe the target should be red and for 500px green.
@@ -118,6 +119,21 @@
             }
         `
     },
+    {
+        title: 'C4 Reordering',
+        style: `
+            @import url(empty.css) layer(B) (max-width: 300px);
+            @import url(empty.css) layer(A) (max-width: 300px);
+            @import url(empty.css) layer(A) (min-width: 500px);
+            @import url(empty.css) layer(B) (min-width: 500px);
+            @layer A {
+                target { color: red; }
+            }
+            @layer B {
+                target { color: green; }
+            }
+        `
+    },
 ];
 
 let iframe = document.querySelector("iframe");