supports-at-rule.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 13 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/js/supports-at-rule.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);

  // At-rules with special positioning requirements.

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

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

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

  // @charset is not an at-rule.

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

  // Descriptors are not accepted.

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

  // Combining at-rule() with <supports-decl> using 'and'.

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

  test_supports("at-rule(@media) and (display: flex)", true);

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

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

  // Combining at-rule() with <supports-decl> using 'or'.

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

  test_supports("at-rule(@doesnotexist) or (color: red)", true);

  test_supports("at-rule(@supports) or (doesnotexist: red)", true);

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

  // 'not' with at-rule().

  test_supports("not at-rule(@supports)", false);

  test_supports("not at-rule(@doesnotexist)", true);

  // <supports-decl> first, at-rule() second.

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

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

  test_supports("(color: red) or at-rule(@doesnotexist)", true);

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

</script>