Add tests for @layer with media queries (#31366)
diff --git a/css/css-cascade/layer-media-query.html b/css/css-cascade/layer-media-query.html
new file mode 100644
index 0000000..da20733
--- /dev/null
+++ b/css/css-cascade/layer-media-query.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Cascade Layers: Media queries</title>
+<meta name="assert" content="Import functionality of CSS Cascade Layers">
+<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>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<iframe width=300 height=300 frameborder=0></iframe>
+<div id="log"></div>
+<script>
+
+const imports = {
+ "basic-green.css": `
+ target { color: green; }
+ `,
+ "basic-red.css": `
+ target { color: red; }
+ `,
+};
+
+// For 300px wide iframe the target should be red and for 500px green.
+const testCases = [
+ {
+ title: 'A1 Basic',
+ style: `
+ @layer { target { color: red } }
+ @media (min-width: 500px) {
+ @layer {
+ target { color: green; }
+ }
+ }
+ `
+ },
+ {
+ title: 'A2 Basic',
+ style: `
+ @media (min-width: 500px) {
+ @layer {
+ target { color: green; }
+ }
+ }
+ @media (max-width: 300px) {
+ @layer {
+ target { color: red; }
+ }
+ }
+ `
+ },
+ {
+ title: 'B1 Basic import',
+ style: `
+ @import url(basic-red.css) layer;
+ @import url(basic-green.css) layer (min-width: 500px);
+ `
+ },
+ {
+ title: 'B2 Basic import',
+ style: `
+ @import url(basic-green.css) layer (min-width: 500px);
+ @import url(basic-red.css) layer (max-width: 300px);
+ `
+ },
+ {
+ title: 'C1 Reordering',
+ style: `
+ @media (max-width: 300px) {
+ @layer B {
+ target { color: green; }
+ }
+ @layer A {
+ target { color: red; }
+ }
+ }
+ @media (min-width: 500px) {
+ @layer A {
+ target { color: red; }
+ }
+ @layer B {
+ target { color: green; }
+ }
+ }
+ `
+ },
+ {
+ title: 'C2 Reordering',
+ style: `
+ @media (max-width: 300px) {
+ @layer B { }
+ @layer A { target { color: red; } }
+ }
+ @media (min-width: 500px) {
+ @layer A { target { color: red; } }
+ @layer B { }
+ }
+ @layer B {
+ target { color: green; }
+ }
+ `
+ },
+ {
+ title: 'C3 Reordering',
+ style: `
+ @media (max-width: 300px) {
+ @layer B, A;
+ }
+ @media (min-width: 500px) {
+ @layer A, B;
+ }
+ @layer A {
+ target { color: red; }
+ }
+ @layer B {
+ target { color: green; }
+ }
+ `
+ },
+];
+
+let iframe = document.querySelector("iframe");
+
+for (let testCase of testCases) {
+ promise_test(async t => {
+ const styleText = testCase['style'].replaceAll(/url\((.+?)\)/g, (match, p1) => {
+ return `url(data:text/css,${ encodeURI(imports[p1]) })`;
+ });
+
+ iframe.width = 300;
+
+ await new Promise(resolve => {
+ iframe.onload = resolve;
+ iframe.srcdoc = `
+ <style>
+ ${styleText}
+ </style>
+ <target></target>
+ `;
+ });
+
+ const target = iframe.contentDocument.querySelector('target');
+ assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)', testCase['title']);
+
+ iframe.width = 500;
+
+ assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)', testCase['title']);
+ }, testCase['title']);
+}
+</script>
+</body>
+</html>
