supports-at-rule.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 40 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/js/supports-at-rule.tentative.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>@supports at-rule</title>

<link rel="help" href="https://www.w3.org/TR/css-conditional-4/#the-css-namespace">

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

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

<script>

  function test_supports(rule, expected, desc) {

    test(() => {

      assert_equals(CSS.supports(rule), expected, 'CSS.supports(' + rule + ')');

    }, desc);

  // Basic at-rule support.

  test_supports("at-rule(@supports)", true);

  test_supports("at-rule( @supports)", true);

  test_supports("at-rule(@supports )", true);

  test_supports("at-rule(@media)", true);

  test_supports("at-rule(@counter-style)", true);

  test_supports("at-rule(@doesnotexist)", false);

  // With descriptors.

  test_supports("at-rule(@counter-style; system: fixed)", true);

  test_supports("at-rule(@counter-style;system: fixed )", true);

  test_supports("at-rule(@counter-style;system:  fixed )", true);

  test_supports("at-rule(@counter-style; system:)", false, "missing value 1");

  test_supports("at-rule(@counter-style; system: )", false, "missing value 2");

  test_supports("at-rule(@counter-style; system: doesnotexist)", false, "invalid value");

  test_supports("at-rule(@counter-style; system: fixed junk)", false, "junk after value");

  test_supports("at-rule(@counter-style; system)", false, "missing value 3");

  test_supports("at-rule(@counter-style! system: fixed)", false, "invalid separator");

  test_supports("at-rule(@counter-style; suffix: \"abc\")", true, "quoted value is OK");

  test_supports("at-rule(@counter-style; suffix: \"abc\";)", false, "semicolon after value");

  test_supports("at-rule(@counter-style; suffix: \"abc\"", true, "implicit end parenthesis");

  test_supports("at-rule(@counter-style; system: fixed; system: fixed)", false, "multiple descriptors");

  test_supports("at-rule(@supports; system: fixed)", false, "descriptor invalid in context");

  // Properties are not descriptors.

  test_supports("at-rule(@supports; color: red)", false);

  test_supports("at-rule(@media; color: red)", false);

  test_supports("at-rule(@counter-style; color: red)", false);

  test_supports("at-rule(@font-fact; color: red)", false);

  test_supports("at-rule(@property; color: red)", false);

  test_supports("at-rule(@font-palette-values; color: red)", false);

  test_supports("at-rule(@view-transition; color: red)", false);

  // More descriptors.

  test_supports("at-rule(@font-face; font-family: 'Ariana Grande')", true);

  test_supports("at-rule(@font-face; font-style: italic)", true);

  test_supports("at-rule(@font-face; font-weight: normal)", true);

  test_supports("at-rule(@font-face; font-feature-settings: \"kern\" 1)", true);

  test_supports("at-rule(@font-face; font-display: swap)", true);

  test_supports("at-rule(@font-face; font-variant: small-caps)", true);

  test_supports("at-rule(@font-face; src: url(/foo.ttf))", true);

  test_supports("at-rule(@font-face; unicode-range: U+41-5A)", true);

  test_supports("at-rule(@font-face; ascent-override: 80%)", true);

  test_supports("at-rule(@font-face; descent-override: 20%)", true);

  test_supports("at-rule(@font-face; line-gap-override: normal)", true);

  test_supports("at-rule(@font-face; size-adjust: 150%)", true);

  test_supports("at-rule(@property; syntax: \"*\")", true);

  test_supports("at-rule(@property; syntax: \"<unknown>\")", false);

  test_supports("at-rule(@property; initial-value: #fff)", true);

  test_supports("at-rule(@property; inherits: true)", true);

  test_supports("at-rule(@counter-style; system: extends upper-roman)", true);

  test_supports("at-rule(@counter-style; negative: '(' ')'", true);

  test_supports("at-rule(@counter-style; prefix: \"a\")", true);

  test_supports("at-rule(@counter-style; suffix: \"b\")", true);

  test_supports("at-rule(@counter-style; range: infinite infinite", true);

  test_supports("at-rule(@counter-style; pad: 3 '0')", true);

  test_supports("at-rule(@counter-style; fallback: foo)", true);

  test_supports("at-rule(@counter-style; symbols: 'X')", true);

  test_supports("at-rule(@counter-style; additive-symbols: 1 'I', calc(-1) 'X')", true);

  test_supports("at-rule(@counter-style; speak-as: words)", true);

  test_supports("at-rule(@font-palette-values; font-family: 'Fontfontfont')", true);

  test_supports("at-rule(@font-palette-values; base-palette: 7)", true);

  test_supports("at-rule(@font-palette-values; override-colors: 3 blue, 1 brown)", true);

  test_supports("at-rule(@view-transition; navigation: auto)", true);

  test_supports("at-rule(@view-transition; types: check)", true);

  // TODO: Should we include e.g. @page; page-orientation?

</script>