| <!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('size(width)'); |
| test_query_known('size(min-width: 0px)'); |
| test_query_known('size(max-width: 0px)'); |
| test_query_known('size(height)'); |
| test_query_known('size(min-height: 0px)'); |
| test_query_known('size(max-height: 0px)'); |
| test_query_known('size(aspect-ratio)'); |
| test_query_known('size(min-aspect-ratio: 1/2)'); |
| test_query_known('size(max-aspect-ratio: 1/2)'); |
| test_query_known('size(orientation: portrait)'); |
| test_query_known('size(inline-size)'); |
| test_query_known('size(min-inline-size: 0px)'); |
| test_query_known('size(max-inline-size: 0px)'); |
| test_query_known('size(block-size)'); |
| test_query_known('size(min-block-size: 0px)'); |
| test_query_known('size(max-block-size: 0px)'); |
| |
| test_query_known('size(width: 100px)'); |
| test_query_known('size((width: 100px))'); |
| test_query_known('size(not (width: 100px))'); |
| test_query_known('size((width: 100px) and (height: 100px))'); |
| test_query_known('size((width: 50px) or (height: 100px))'); |
| test_query_known('size(width < 100px)'); |
| test_query_known('size(100px < width)'); |
| test_query_known('size(100px < width < 200px)'); |
| |
| test_query_unknown('foo(width)'); |
| test_query_unknown('size(asdf)'); |
| test_query_unknown('size(resolution > 100dpi)'); |
| test_query_unknown('size(resolution: 150dpi)'); |
| test_query_unknown('size(color)'); |
| test_query_unknown('size(min-color: 1)'); |
| test_query_unknown('size(color-index >= 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('name(foo)'); |
| test_container_selector_valid('name( foo )'); |
| test_container_selector_valid('type(size)'); |
| test_container_selector_valid('type( size )'); |
| test_container_selector_valid('type(inline-size)'); |
| |
| test_container_selector_invalid('foo foo'); |
| test_container_selector_invalid('1px'); |
| test_container_selector_invalid('50gil'); |
| test_container_selector_invalid('name(1px)'); |
| test_container_selector_invalid('type(1px)'); |
| test_container_selector_invalid('type(red)'); |
| test_container_selector_invalid('type(size) type(size)'); |
| test_container_selector_invalid('type(inline-size) type(block-size)'); |
| test_container_selector_invalid('name(foo) name(bar)'); |
| test_container_selector_invalid('type(inline-size) name(foo) type(block-size)'); |
| test_container_selector_invalid('name(foo) type(size) name(bar)'); |
| test_container_selector_invalid('name(type(size))'); |
| test_container_selector_invalid('type(name(bar))'); |
| test_container_selector_invalid('type(block-size)'); |
| test_container_selector_invalid('name(bar) type(block-size)'); |
| test_container_selector_invalid('type(block-size) name(bar)'); |
| test_container_selector_invalid('"foo"'); |
| test_container_selector_invalid('"inherit"'); |
| test_container_selector_invalid('name("foo")'); |
| </script> |
