| <!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: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_query_invalid(query) { |
| test(t => { |
| t.add_cleanup(cleanup_main); |
| let style = set_style(`@container ${query} {}`); |
| assert_equals(style.sheet.rules.length, 0); |
| }, query); |
| } |
| |
| // Tests that 1) the query parses, and 2) is either "unknown" or not, as |
| // specified. |
| function test_query_valid(query, unknown) { |
| test(t => { |
| t.add_cleanup(cleanup_main); |
| let style = set_style(` |
| @container ${query} {} |
| @container (${query} or (not ${query})) { main { --match:true; } } |
| `); |
| assert_equals(style.sheet.rules.length, 2); |
| const expected = unknown ? '' : 'true'; |
| assert_equals(getComputedStyle(main).getPropertyValue('--match'), expected); |
| }, query); |
| } |
| |
| function test_query_known(query) { |
| test_query_valid(query, false /* unknown */); |
| } |
| |
| function test_query_unknown(query) { |
| test_query_valid(query, true /* unknown */); |
| } |
| |
| function test_container_selector_invalid(container_selector) { |
| test(t => { |
| t.add_cleanup(cleanup_main); |
| let style = set_style(`@container ${container_selector} (width) {}`); |
| assert_equals(style.sheet.rules.length, 0); |
| }, `Container selector: ${container_selector}`); |
| } |
| |
| function test_container_selector_valid(container_selector) { |
| test(t => { |
| t.add_cleanup(cleanup_main); |
| let style = set_style(`@container ${container_selector} (width) {}`); |
| assert_equals(style.sheet.rules.length, 1); |
| }, `Container selector: ${container_selector}`); |
| } |
| |
| test_query_known('(width)'); |
| test_query_known('(min-width: 0px)'); |
| test_query_known('(max-width: 0px)'); |
| test_query_known('(height)'); |
| test_query_known('(min-height: 0px)'); |
| test_query_known('(max-height: 0px)'); |
| test_query_known('(aspect-ratio)'); |
| test_query_known('(min-aspect-ratio: 1/2)'); |
| test_query_known('(max-aspect-ratio: 1/2)'); |
| test_query_known('(orientation: portrait)'); |
| test_query_known('(inline-size)'); |
| test_query_known('(min-inline-size: 0px)'); |
| test_query_known('(max-inline-size: 0px)'); |
| test_query_known('(block-size)'); |
| test_query_known('(min-block-size: 0px)'); |
| test_query_known('(max-block-size: 0px)'); |
| |
| test_query_known('(width: 100px)'); |
| test_query_known('((width: 100px))'); |
| test_query_known('(not (width: 100px))'); |
| test_query_known('((width: 100px) and (height: 100px))'); |
| test_query_known('((width: 50px) or (height: 100px))'); |
| test_query_known('(width < 100px)'); |
| test_query_known('(100px < width)'); |
| test_query_known('(100px < width < 200px)'); |
| |
| test_query_unknown('foo(width)'); |
| test_query_unknown('size(width)'); |
| test_query_unknown('(asdf)'); |
| test_query_unknown('(resolution > 100dpi)'); |
| test_query_unknown('(resolution: 150dpi)'); |
| test_query_unknown('(color)'); |
| test_query_unknown('(min-color: 1)'); |
| test_query_unknown('(color-index >= 1)'); |
| test_query_unknown('size(grid)'); |
| test_query_unknown('(grid)'); |
| |
| test_query_invalid('screen'); |
| test_query_invalid('print'); |
| test_query_invalid('not print'); |
| test_query_invalid('only print'); |
| test_query_invalid('screen and (width: 100px)'); |
| test_query_invalid('screen or (width: 100px)'); |
| test_query_invalid('not screen and (width: 100px)'); |
| test_query_invalid('not screen or (width: 100px)'); |
| test_query_invalid('(width: 100px), (height: 100px)'); |
| |
| test_container_selector_valid('foo'); |
| test_container_selector_valid(' foo'); |
| test_container_selector_valid(' foo '); |
| |
| test_container_selector_invalid('foo foo'); |
| test_container_selector_invalid('1px'); |
| test_container_selector_invalid('50gil'); |
| test_container_selector_invalid('name(foo)'); |
| test_container_selector_invalid('type(inline-size)'); |
| test_container_selector_invalid('"foo"'); |
| test_container_selector_invalid('"inherit"'); |
| test_container_selector_invalid('none'); |
| test_container_selector_invalid('None'); |
| </script> |
