[@layer] Ensure layer establishment behavior on failed/unmatched imports
As per https://github.com/w3c/csswg-drafts/issues/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}
diff --git a/css/css-cascade/layer-import.html b/css/css-cascade/layer-import.html
index 0406f02..821bc7d 100644
--- 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
index da20733..92a0f55 100644
--- 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");
