at-container-parsing.html | Explore in Territory

<!doctype html>
<title>@container: parsing</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#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>
chromium/third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/at-container-parsing.html
