testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html

   1 <!doctype html>
   2 <title>@container: parsing</title>
   3 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
   4 <script src="/resources/testharness.js"></script>
   5 <script src="/resources/testharnessreport.js"></script>
   6 <script src="support/cq-testcommon.js"></script>
   7 <div style="container-name:name;container-type:size; width:100px; height:100px">
   8   <main id=main></main>
   9 </div>
  10 <script>
  11   setup(() => assert_implements_container_queries());
  12
  13   function cleanup_main() {
  14     while (main.firstChild)
  15       main.firstChild.remove();
  16   }
  17
  18   function set_style(text) {
  19     let style = document.createElement('style');
  20     style.innerText = text;
  21     main.append(style);
  22     return style;
  23   }
  24
  25   function test_query_invalid(query) {
  26     test(t => {
  27       t.add_cleanup(cleanup_main);
  28       let style = set_style(`@container name ${query} {}`);
  29       assert_equals(style.sheet.rules.length, 0);
  30     }, query);
  31   }
  32
  33   // Tests that 1) the query parses, and 2) is either "unknown" or not, as
  34   // specified.
  35   function test_query_valid(query, unknown) {
  36     test(t => {
  37       t.add_cleanup(cleanup_main);
  38       let style = set_style(`
  39         @container name ${query} {}
  40         @container name (${query} or (not ${query})) { main { --match:true; } }
  41       `);
  42       assert_equals(style.sheet.rules.length, 2);
  43       const expected = unknown ? '' : 'true';
  44       assert_equals(getComputedStyle(main).getPropertyValue('--match'), expected);
  45     }, query);
  46   }
  47
  48   function test_query_known(query) {
  49     test_query_valid(query, false /* unknown */);
  50   }
  51
  52   function test_query_unknown(query) {
  53     test_query_valid(query, true /* unknown */);
  54   }
  55
  56   function test_container_selector_invalid(container_selector) {
  57     test(t => {
  58       t.add_cleanup(cleanup_main);
  59       let style = set_style(`@container ${container_selector} (width) {}`);
  60       assert_equals(style.sheet.rules.length, 0);
  61     }, `Container selector: ${container_selector}`);
  62   }
  63
  64   function test_container_selector_valid(container_selector) {
  65     test(t => {
  66       t.add_cleanup(cleanup_main);
  67       let style = set_style(`@container ${container_selector} (width) {}`);
  68       assert_equals(style.sheet.rules.length, 1);
  69     }, `Container selector: ${container_selector}`);
  70   }
  71
  72   test_query_known('(width)');
  73   test_query_known('(min-width: 0px)');
  74   test_query_known('(max-width: 0px)');
  75   test_query_known('(height)');
  76   test_query_known('(min-height: 0px)');
  77   test_query_known('(max-height: 0px)');
  78   test_query_known('(aspect-ratio)');
  79   test_query_known('(min-aspect-ratio: 1/2)');
  80   test_query_known('(max-aspect-ratio: 1/2)');
  81   test_query_known('(orientation: portrait)');
  82   test_query_known('(inline-size)');
  83   test_query_known('(min-inline-size: 0px)');
  84   test_query_known('(max-inline-size: 0px)');
  85   test_query_known('(block-size)');
  86   test_query_known('(min-block-size: 0px)');
  87   test_query_known('(max-block-size: 0px)');
  88
  89   test_query_known('(width: 100px)');
  90   test_query_known('((width: 100px))');
  91   test_query_known('(not (width: 100px))');
  92   test_query_known('((width: 100px) and (height: 100px))');
  93   test_query_known('(((width: 40px) or (width: 50px)) and (height: 100px))');
  94   test_query_known('((width: 100px) and ((height: 40px) or (height: 50px)))');
  95   test_query_known('(((width: 40x) and (height: 50px)) or (height: 100px))');
  96   test_query_known('((width: 50px) or ((width: 40px) and (height: 50px)))');
  97   test_query_known('((width: 100px) and (not (height: 100px)))');
  98   test_query_known('(width < 100px)');
  99   test_query_known('(width <= 100px)');
 100   test_query_known('(width = 100px)');
 101   test_query_known('(width > 100px)');
 102   test_query_known('(width >= 100px)');
 103   test_query_known('(100px < width)');
 104   test_query_known('(100px <= width)');
 105   test_query_known('(100px = width)');
 106   test_query_known('(100px > width)');
 107   test_query_known('(100px >= width)');
 108   test_query_known('(100px < width < 200px)');
 109   test_query_known('(100px < width <= 200px)');
 110   test_query_known('(100px <= width < 200px)');
 111   test_query_known('(100px > width > 200px)');
 112   test_query_known('(100px > width >= 200px)');
 113   test_query_known('(100px >= width > 200px)');
 114
 115   test_query_known('(width: calc(10px))');
 116   test_query_known('(width: calc(10em))');
 117   test_query_known('(width: calc(10px + 10em))');
 118   test_query_known('(width < calc(10px + 10em))');
 119   test_query_known('(width < max(10px, 10em))');
 120   test_query_known('(calc(10px + 10em) < width)');
 121   test_query_known('(calc(10px + 10em) < width < max(30px, 30em))');
 122
 123   test_query_unknown('foo(width)');
 124   test_query_unknown('size(width)');
 125   test_query_unknown('(asdf)');
 126   test_query_unknown('(resolution > 100dpi)');
 127   test_query_unknown('(resolution: 150dpi)');
 128   test_query_unknown('(color)');
 129   test_query_unknown('(min-color: 1)');
 130   test_query_unknown('(color-index >= 1)');
 131   test_query_unknown('size(grid)');
 132   test_query_unknown('(grid)');
 133   test_query_unknown('(width == 100px)');
 134   test_query_unknown('(100px == width)');
 135   test_query_unknown('(100px = width = 200px)');
 136   test_query_unknown('(100px < width > 200px)');
 137   test_query_unknown('(100px <= width >= 200px)');
 138   test_query_unknown('(100px <= width > 200px)');
 139   test_query_unknown('(100px < width >= 200px)');
 140   test_query_unknown('(100px : width : 200px)');
 141
 142   test_query_invalid('screen');
 143   test_query_invalid('print');
 144   test_query_invalid('not print');
 145   test_query_invalid('only print');
 146   test_query_invalid('screen and (width: 100px)');
 147   test_query_invalid('screen or (width: 100px)');
 148   test_query_invalid('not screen and (width: 100px)');
 149   test_query_invalid('not screen or (width: 100px)');
 150   test_query_invalid('(width: 100px), (height: 100px)');
 151   test_query_invalid('(width: 100px) and (height: 100px)');
 152   test_query_invalid('(width: 100px) or (height: 100px)');
 153   test_query_invalid('not (width: 100px)');
 154   test_query_invalid('foo (width: 100px)');
 155
 156   test_container_selector_valid('foo');
 157   test_container_selector_valid(' foo');
 158   test_container_selector_valid(' foo ');
 159
 160   test_container_selector_invalid('foo foo');
 161   test_container_selector_invalid('1px');
 162   test_container_selector_invalid('50gil');
 163   test_container_selector_invalid('name(foo)');
 164   test_container_selector_invalid('type(inline-size)');
 165   test_container_selector_invalid('"foo"');
 166   test_container_selector_invalid('"inherit"');
 167   test_container_selector_invalid('none');
 168   test_container_selector_invalid('None');
 169   test_container_selector_invalid('normal');
 170   test_container_selector_invalid('Normal');
 171   test_container_selector_invalid('auto');
 172   test_container_selector_invalid('Auto');
 173   test_container_selector_invalid('and');
 174   test_container_selector_invalid('or');
 175   test_container_selector_invalid('not');
 176   test_container_selector_invalid('And');
 177   test_container_selector_invalid('oR');
 178   test_container_selector_invalid('nOt');
 179
 180   test_query_known('style(--my-prop: foo)');
 181   test_query_known('style(--my-prop: foo - bar ())');
 182   test_query_known('style(not ((--foo: calc(10px + 2em)) and ((--foo: url(x)))))');
 183   test_query_known('style((--foo: bar) or (--bar: 10px))');
 184   test_query_known('style(--foo: bar !important)');
 185   test_query_known('style(--my-prop:)');
 186   test_query_known('style(--my-prop: )');
 187
 188   test_query_unknown('style(--foo: bar;)');
 189   test_query_unknown('style(--foo)');
 190   test_query_unknown('style(style(--foo: bar))');
 191 </script>