| <!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('(resolution: calc(2x))'); |
| 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'); |
| </script> |
