diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html b/testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html new file mode 100644 index 0000000000..2fbd4b8b6f --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html @@ -0,0 +1,206 @@ +<!doctype html> +<title>@container: parsing</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> +<div style="container-name:name;container-type:size; width:100px; height:100px"> + <main id=main></main> +</div> +<script> + setup(() => assert_implements_container_queries()); + + function cleanup_main() { + while (main.firstChild) + main.firstChild.remove(); + } + + function set_style(text) { + let style = document.createElement('style'); + style.innerText = text; + main.append(style); + return style; + } + + function test_rule_valid(query) { + test(t => { + t.add_cleanup(cleanup_main); + let style = set_style(`@container ${query} {}`); + assert_equals(style.sheet.rules.length, 1); + }, query); + } + + function test_condition_invalid(condition) { + test(t => { + t.add_cleanup(cleanup_main); + let style = set_style(`@container name ${condition} {}`); + assert_equals(style.sheet.rules.length, 0); + }, condition); + } + + // Tests that 1) the condition parses, and 2) is either "unknown" or not, as + // specified. + function test_condition_valid(condition, unknown) { + test(t => { + t.add_cleanup(cleanup_main); + let style = set_style(` + @container name ${condition} {} + @container name (${condition}) or (not (${condition})) { main { --match:true; } } + `); + assert_equals(style.sheet.rules.length, 2); + const expected = unknown ? '' : 'true'; + assert_equals(getComputedStyle(main).getPropertyValue('--match'), expected); + }, condition); + } + + function test_condition_known(condition) { + test_condition_valid(condition, false /* unknown */); + } + + function test_condition_unknown(condition) { + test_condition_valid(condition, true /* unknown */); + } + + function test_container_name_invalid(container_name) { + test(t => { + t.add_cleanup(cleanup_main); + let style = set_style(`@container ${container_name} not (width) {}`); + assert_equals(style.sheet.rules.length, 0); + }, `Container name: ${container_name}`); + } + + function test_container_name_valid(container_name) { + test(t => { + t.add_cleanup(cleanup_main); + let style = set_style(`@container ${container_name} not (width) {}`); + assert_equals(style.sheet.rules.length, 1); + }, `Container name: ${container_name}`); + } + + test_condition_known('(width)'); + test_condition_known('(min-width: 0px)'); + test_condition_known('(max-width: 0px)'); + test_condition_known('(height)'); + test_condition_known('(min-height: 0px)'); + test_condition_known('(max-height: 0px)'); + test_condition_known('(aspect-ratio)'); + test_condition_known('(min-aspect-ratio: 1/2)'); + test_condition_known('(max-aspect-ratio: 1/2)'); + test_condition_known('(orientation: portrait)'); + test_condition_known('(inline-size)'); + test_condition_known('(min-inline-size: 0px)'); + test_condition_known('(max-inline-size: 0px)'); + test_condition_known('(block-size)'); + test_condition_known('(min-block-size: 0px)'); + test_condition_known('(max-block-size: 0px)'); + + test_condition_known('(width: 100px)'); + test_condition_known('((width: 100px))'); + test_condition_known('(not (width: 100px))'); + test_condition_known('((width: 100px) and (height: 100px))'); + test_condition_known('(((width: 40px) or (width: 50px)) and (height: 100px))'); + test_condition_known('((width: 100px) and ((height: 40px) or (height: 50px)))'); + test_condition_known('(((width: 40px) and (height: 50px)) or (height: 100px))'); + test_condition_known('((width: 50px) or ((width: 40px) and (height: 50px)))'); + test_condition_known('((width: 100px) and (not (height: 100px)))'); + test_condition_known('(width < 100px)'); + test_condition_known('(width <= 100px)'); + test_condition_known('(width = 100px)'); + test_condition_known('(width > 100px)'); + test_condition_known('(width >= 100px)'); + test_condition_known('(100px < width)'); + test_condition_known('(100px <= width)'); + test_condition_known('(100px = width)'); + test_condition_known('(100px > width)'); + test_condition_known('(100px >= width)'); + test_condition_known('(100px < width < 200px)'); + test_condition_known('(100px < width <= 200px)'); + test_condition_known('(100px <= width < 200px)'); + test_condition_known('(100px > width > 200px)'); + test_condition_known('(100px > width >= 200px)'); + test_condition_known('(100px >= width > 200px)'); + + test_condition_known('(width: calc(10px))'); + test_condition_known('(width: calc(10em))'); + test_condition_known('(width: calc(10px + 10em))'); + test_condition_known('(width < calc(10px + 10em))'); + test_condition_known('(width < max(10px, 10em))'); + test_condition_known('(calc(10px + 10em) < width)'); + test_condition_known('(calc(10px + 10em) < width < max(30px, 30em))'); + test_condition_known('(width: 100px) and (height: 100px)'); + test_condition_known('(width: 100px) or (height: 100px)'); + test_condition_known('not (width: 100px)'); + + test_condition_unknown('foo(width)'); + test_condition_unknown('size(width)'); + test_condition_unknown('(asdf)'); + test_condition_unknown('(resolution > 100dpi)'); + test_condition_unknown('(resolution: 150dpi)'); + test_condition_unknown('(color)'); + test_condition_unknown('(min-color: 1)'); + test_condition_unknown('(color-index >= 1)'); + test_condition_unknown('size(grid)'); + test_condition_unknown('(grid)'); + test_condition_unknown('(width == 100px)'); + test_condition_unknown('(100px == width)'); + test_condition_unknown('(100px = width = 200px)'); + test_condition_unknown('(100px < width > 200px)'); + test_condition_unknown('(100px <= width >= 200px)'); + test_condition_unknown('(100px <= width > 200px)'); + test_condition_unknown('(100px < width >= 200px)'); + test_condition_unknown('(100px : width : 200px)'); + + test_condition_invalid('screen'); + test_condition_invalid('print'); + test_condition_invalid('not print'); + test_condition_invalid('only print'); + test_condition_invalid('screen and (width: 100px)'); + test_condition_invalid('screen or (width: 100px)'); + test_condition_invalid('not screen and (width: 100px)'); + test_condition_invalid('not screen or (width: 100px)'); + test_condition_invalid('(width: 100px), (height: 100px)'); + test_condition_invalid('foo (width: 100px)'); + + test_rule_valid('name not (width <= 500px)'); + test_rule_valid('not (width <= 500px)'); + + test_container_name_valid('foo'); + test_container_name_valid(' foo'); + test_container_name_valid(' foo '); + test_container_name_valid('normal'); + test_container_name_valid('Normal'); + test_container_name_valid('auto'); + test_container_name_valid('Auto'); + + test_container_name_invalid('foo foo'); + test_container_name_invalid('1px'); + test_container_name_invalid('50gil'); + test_container_name_invalid('name(foo)'); + test_container_name_invalid('type(inline-size)'); + test_container_name_invalid('"foo"'); + test_container_name_invalid('"inherit"'); + test_container_name_invalid('inherit'); + test_container_name_invalid('INITIAL'); + test_container_name_invalid('Unset'); + test_container_name_invalid('deFAULT'); + test_container_name_invalid('none'); + test_container_name_invalid('None'); + test_container_name_invalid('and'); + test_container_name_invalid('or'); + test_container_name_invalid('not'); + test_container_name_invalid('And'); + test_container_name_invalid('oR'); + test_container_name_invalid('nOt'); + + test_condition_known('style(--my-prop: foo)'); + test_condition_known('style(--my-prop: foo - bar ())'); + test_condition_known('style(not ((--foo: calc(10px + 2em)) and ((--foo: url(x)))))'); + test_condition_known('style((--foo: bar) or (--bar: 10px))'); + test_condition_known('style(--my-prop:)'); + test_condition_known('style(--my-prop: )'); + test_condition_known('style(--foo: bar !important)'); + + test_condition_unknown('style(--foo: bar;)'); + test_condition_unknown('style(--foo)'); + test_condition_unknown('style(style(--foo: bar))'); +</script> |