diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-cascade/layer-media-query.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-cascade/layer-media-query.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-cascade/layer-media-query.html | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/layer-media-query.html b/testing/web-platform/tests/css/css-cascade/layer-media-query.html new file mode 100644 index 0000000000..92a0f55a6a --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/layer-media-query.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Cascade Layers: Media queries</title> +<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> +<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; } + `, + "empty.css": "", +}; + +// 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; } + } + ` + }, + { + 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"); + +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> |