keyframes-name-valid.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-animations/parsing/keyframes-name-valid.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>CSS Animations: parsing @keyframes name with valid values</title>

    <link rel="author" title="yisibl(一丝)" href="https://github.com/yisibl"/>

    <link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframes-name">

    <meta name="assert" content="@keyframes name supports the full grammar '<custom-ident> | <string>'.">

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

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

    <script src="/css/support/parsing-testcommon.js"></script>

</head>

<body>

    <div>

        <main id="main"></main>

    </div>

    <script>

        // Test <custom-ident>

        test_keyframes_name_valid(' foo ');

        test_keyframes_name_valid('  foo');

        test_keyframes_name_valid('-foo');

        test_keyframes_name_valid('_bar');

        test_keyframes_name_valid('__bar');

        test_keyframes_name_valid('__bar__');

        test_keyframes_name_valid('ease-out');

        test_keyframes_name_valid('example');

        test_keyframes_name_valid('EXAMPLE');

        test_keyframes_name_valid('not');

        test_keyframes_name_valid('and');

        test_keyframes_name_valid('all');

        test_keyframes_name_valid('or');

        // <custom-ident> may disable the `auto/normal` keywords in the future

        // https://github.com/w3c/csswg-drafts/issues/7431

        test_keyframes_name_valid('auto');

        test_keyframes_name_valid('normal');

        // Test <string>

        test_keyframes_name_valid('" foo "');

        test_keyframes_name_valid('"  foo"');

        test_keyframes_name_valid('"-foo"');

        test_keyframes_name_valid('"_bar"');

        test_keyframes_name_valid('"__bar"');

        test_keyframes_name_valid('"__bar__"');

        test_keyframes_name_valid('"ease-out"');

        test_keyframes_name_valid('"example"');

        test_keyframes_name_valid('"EXAMPLE"');

        test_keyframes_name_valid('"one two"');

        test_keyframes_name_valid('"one, two"');

        test_keyframes_name_valid('"not"');

        test_keyframes_name_valid('"and"');

        test_keyframes_name_valid('"all"');

        test_keyframes_name_valid('"or"');

        test_keyframes_name_valid('"auto"');

        test_keyframes_name_valid('"normal"');

        test_keyframes_name_valid('"none"');

        test_keyframes_name_valid('"default"');

        test_keyframes_name_valid('"initial"');

        test_keyframes_name_valid('"inherit"');

        test_keyframes_name_valid('"unset"');

        test_keyframes_name_valid('"revert"');

        test_keyframes_name_valid('"revert-layer"');

    </script>

</body>

</html>