keyframes-name-valid.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/external/wpt/css/css-animations/parsing/keyframes-name-valid.html
