supports-import-parsing.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-cascade/parsing/supports-import-parsing.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8">

<title>@import rule with supports parsing / serialization</title>

<link rel="author" href="mailto:oj@oojmed.com">

<link rel="help" href="https://drafts.csswg.org/css-cascade-4/#at-import">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

  function setupSheet(rule) {

    const style = document.createElement("style");

    document.head.append(style);

    const {sheet} = style;

    const {cssRules} = sheet;

    assert_equals(cssRules.length, 0, "Sheet should have no rules");

    sheet.insertRule(rule);

    assert_equals(cssRules.length, 1, "Sheet should have 1 rule");

    return {sheet, cssRules};

  function test_valid_supports_import(rule, serialized) {

    if (serialized === undefined)

        serialized = rule;

    test(function() {

      const {sheet, cssRules} = setupSheet(rule);

      const serialization = cssRules[0].cssText;

      assert_equals(serialization, serialized, 'serialization should be canonical');

      sheet.deleteRule(0);

      assert_equals(cssRules.length, 0, 'Sheet should have no rule');

      sheet.insertRule(serialization);

      assert_equals(cssRules.length, 1, 'Sheet should have 1 rule');

      assert_equals(cssRules[0].cssText, serialization, 'serialization should round-trip');

    }, rule + ' should be a valid supports() import rule');

  function test_unsupported_supports_import(rule) {

    test(function() {

      const {sheet, cssRules} = setupSheet(rule);

      sheet.deleteRule(0);

      assert_equals(cssRules.length, 0, 'Sheet should have no rule');

    }, rule + ' should still be a valid import rule with an invalid supports() declaration');

  function test_invalid_supports_import(rule) {

    test(function() {

      const style = document.createElement("style");

      document.head.append(style);

      const {sheet} = style;

      const {cssRules} = sheet;

      assert_equals(cssRules.length, 0, "Sheet should have no rules");

    }, rule + ' should be an invalid import rule due to an invalid supports() declaration');

  test_invalid_supports_import('@import url("nonexist.css") supports();');

  test_invalid_supports_import('@import url("nonexist.css") supports(foo: bar);');

  test_valid_supports_import('@import url("nonexist.css") supports(display:block);');

  test_valid_supports_import('@import url("nonexist.css") supports((display:flex));');

  test_valid_supports_import('@import url("nonexist.css") supports(not (display: flex));');

  test_valid_supports_import('@import url("nonexist.css") supports((display: flex) and (display: block));');

  test_valid_supports_import('@import url("nonexist.css") supports((display: flex) or (display: block));');

  test_valid_supports_import('@import url("nonexist.css") supports((display: flex) or (foo: bar));');

  test_valid_supports_import('@import url("nonexist.css") supports(display: block !important);');

  test_invalid_supports_import('@import url("nonexist.css") layer supports();');

  test_invalid_supports_import('@import url("nonexist.css") layer supports(foo: bar);');

  test_valid_supports_import('@import url("nonexist.css") layer(A) supports((display: flex) or (foo: bar));');

  test_valid_supports_import('@import url("nonexist.css") layer(A.B) supports((display: flex) and (foo: bar));');

  test_valid_supports_import('@import url("nonexist.css") supports(selector(a));');

  test_valid_supports_import('@import url("nonexist.css") supports(selector(p a));');

  test_valid_supports_import('@import url("nonexist.css") supports(selector(p > a));');

  test_valid_supports_import('@import url("nonexist.css") supports(selector(p + a));');

  test_valid_supports_import('@import url("nonexist.css") supports(font-tech(color-colrv1));');

  test_valid_supports_import('@import url("nonexist.css") supports(font-format(opentype));');

  test_valid_supports_import('@import url(nonexist.css) supports(display:block);',

                             '@import url("nonexist.css") supports(display:block);');

  test_valid_supports_import('@import "nonexist.css" supports(display:block);',

                             '@import url("nonexist.css") supports(display:block);');

  // “supports” gets parsed as an (unsupported) media query.

  test_unsupported_supports_import('@import url("nonexist.css") supports;');

</script>