diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-contain/container-queries/container-selection.html | |
parent | Initial commit. (diff) | |
download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-contain/container-queries/container-selection.html')
-rw-r--r-- | testing/web-platform/tests/css/css-contain/container-queries/container-selection.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-selection.html b/testing/web-platform/tests/css/css-contain/container-queries/container-selection.html new file mode 100644 index 0000000000..cef20f85a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/container-queries/container-selection.html @@ -0,0 +1,183 @@ +<!doctype html> +<title>@container: selection using name and implicit selection</title> +<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/cq-testcommon.js"></script> +<style> + + main { background-color: lightgray; } + main > div { background-color: skyblue; } + main > div > div { background-color: seagreen; } + main > div > div > div { background-color: tomato; } + + main { + width: 64px; + height: 64px; + } + + main div { + width: 50%; + height: 50%; + } + + .inline { container-type: inline-size; } + .size { container-type: size; } + + .a-inline { container: a / inline-size; } + .a-size { container: a / size; } + + .b-size { container: inline- b / size; } + .b-size { container: b / size; } + + .ab-size { container: a b / size; } + + .a { container-name: a; contain: strict; } + +</style> + +<main> + <div class="inline"> + <div class="size"> + <span></span> + </div> + </div> +</main> + +<main> + <div class="size"> + <div class="inline"> + <span></span> + </div> + </div> +</main> + +<main> + <div class="inline"> + <div class="inline"> + <span></span> + </div> + </div> +</main> + +<main> + <div class="a-size"> + <div class="b-size"> + <span></span> + </div> + </div> +</main> + +<main> + <div class="a-size"> + <div class="a-size"> + <span></span> + </div> + </div> +</main> + +<main> + <div class="a-size"> + <div class="a"> + <span></span> + </div> + </div> +</main> + +<main> + <div class="a-size"> + <div class="b-size"> + <div class="a-inline"> + <span></span> + </div> + </div> + </div> +</main> + +<main> + <div class="a-inline"> + <div class="b-size"> + <span></span> + </div> + </div> +</main> + +<main> + <div class="ab-size"> + <div class="size"> + <span></span> + </div> + </div> +</main> + +<script> + setup(() => assert_implements_container_queries()); + + function test_query(prelude, selector, expected) { + test(t => { + let elements = document.querySelectorAll(selector); + assert_equals(elements.length, 1); + let element = elements[0]; + + let style = document.createElement('style'); + t.add_cleanup(() => { style.remove(); }); + style.innerText = `@container ${prelude} { span { --match:true; } } `; + document.body.append(style); + + assert_equals(getComputedStyle(element).getPropertyValue('--match'), expected); + }, `${prelude} for ${selector}`); + } + + // Test that a given container query applies to the specified element. + // The provided selector must unique identify the element. + function test_applied(prelude, selector) { + test_query(prelude, selector, 'true'); + } + + function test_rejected(prelude, selector) { + test_query(prelude, selector, ''); + } + + // For the following tests, the inner container has a size of 16x16px, + // and the outer container has a size of 32x32px. + + // Implicit selection: + test_applied('(width: 16px)', '.size > .inline > span'); + test_applied('(height: 16px)', '.inline > .size > span'); + test_applied('(width: 16px)', '.inline > .size > span'); + test_applied('(height: 32px)', '.size > .inline > span'); + test_rejected('(height: 16px)', '.size > .inline > span'); + + // Name selection: + test_applied('a (width: 32px)', '.a-size > .b-size > span'); + test_applied('b (width: 16px)', '.a-size > .b-size > span'); + test_rejected('c (width)', '.a-size > .b-size > span'); + test_applied('a (width: 16px)', '.a-size > .a-size > span'); + + // container-name alone does not establish a container: + test_applied('a (width: 32px)', '.a-size > .a > span'); + + // Can query container with multiple names: + test_applied('a (width: 32px)', '.ab-size > .size > span'); + test_applied('b (width: 32px)', '.ab-size > .size > span'); + test_rejected('c (width)', '.ab-size > .size > span'); + + // The following tests have three containers: + // + // outer -> 32x32px + // middle -> 16x16px + // inner -> 8x8px + + // Combinations of name and implicit selection: + test_applied('a (width: 8px)', '.a-size > .b-size > .a-inline > span'); + test_applied('b (width: 16px)', '.a-size > .b-size > .a-inline > span'); + test_applied('a (height: 32px)', '.a-size > .b-size > .a-inline > span'); + test_rejected('a (height)', '.a-inline > .b-size'); + + // Same tests as above, but logical versions: + test_applied('a (inline-size: 8px)', '.a-size > .b-size > .a-inline > span'); + test_applied('b (inline-size: 16px)', '.a-size > .b-size > .a-inline > span'); + test_applied('a (block-size: 32px)', '.a-size > .b-size > .a-inline > span'); + test_rejected('a (block-size)', '.a-inline > .b-size'); + +</script> |