feat: add @keyframes name parsing

I and @CGQAQ are working on implementing interoperability of `<keyframes-name>` across browsers The Chromium patch[1] requires this test [1]: https://chromium-review.googlesource.com/c/chromium/src/+/3865188
web-platform-tests · Sep 15, 2022 · ce1a1d1 · ce1a1d1
1 parent 4fce7b2
commit ce1a1d1
Show file tree

Hide file tree

Showing 2 changed files with 161 additions and 0 deletions.
diff --git a/css/css-animations/parsing/keyframes-name-invalid.html b/css/css-animations/parsing/keyframes-name-invalid.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <title>CSS Animations: parsing @keyframes name with invalid 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>
+        function cleanup_main() {
+            while (main.firstChild)
+                main.firstChild.remove();
+        }
+
+        function set_style(text) {
+            let style = document.createElement('style');
+            style.innerText = text;
+            main.append(style);
+            return style;
+        }
+
+        function test_keyframes_name_invalid(keyframes_name) {
+            test(t => {
+                t.add_cleanup(cleanup_main);
+                let style = set_style(`@keyframes ${keyframes_name} {}`);
+                assert_equals(style.sheet.rules.length, 0);
+            }, `invalid: @keyframes ${keyframes_name} { }`);
+        }
+
+        function test_keyframes_name_valid(keyframes_name) {
+            test(t => {
+                t.add_cleanup(cleanup_main);
+                let style = set_style(`@keyframes ${keyframes_name} {}`);
+                assert_equals(style.sheet.rules.length, 1);
+            }, `valid: @keyframes ${keyframes_name} { }`);
+        }
+
+        test_keyframes_name_invalid('none');
+
+        // The CSS-wide keywords are not valid <custom-ident>s. The default keyword is reserved and is also not a valid <custom-ident>.
+        // Spec: https://drafts.csswg.org/css-values-4/#identifier-value
+        test_keyframes_name_invalid('default');
+        test_keyframes_name_invalid('initial');
+        test_keyframes_name_invalid('inherit');
+        test_keyframes_name_invalid('unset');
+        test_keyframes_name_invalid('revert');
+        test_keyframes_name_invalid('revert-layer');        
+        test_keyframes_name_invalid('12');
+        test_keyframes_name_invalid('-12');
+        test_keyframes_name_invalid('12foo');
+        test_keyframes_name_invalid('foo.bar');
+        test_keyframes_name_invalid('one two');
+        test_keyframes_name_invalid('one, initial');
+        test_keyframes_name_invalid('one, inherit');
+        test_keyframes_name_invalid('one, unset');
+        test_keyframes_name_invalid('default, two');
+        test_keyframes_name_invalid('revert, three');
+        test_keyframes_name_invalid('revert-layer, four');
+        // TODO: https://bugs.chromium.org/p/chromium/issues/detail?id=1342609
+        // test_keyframes_name_invalid('--foo');
+    </script>
+</body>
+</html>
diff --git a/css/css-animations/parsing/keyframes-name-valid.html b/css/css-animations/parsing/keyframes-name-valid.html
@@ -0,0 +1,91 @@
+<!DOCTYPE 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>
+        function cleanup_main() {
+            while (main.firstChild)
+                main.firstChild.remove();
+        }
+
+        function set_style(text) {
+            let style = document.createElement('style');
+            style.innerText = text;
+            main.append(style);
+            return style;
+        }
+
+        function test_keyframes_name_invalid(keyframes_name) {
+            test(t => {
+                t.add_cleanup(cleanup_main);
+                let style = set_style(`@keyframes ${keyframes_name} {}`);
+                assert_equals(style.sheet.rules.length, 0);
+            }, `invalid: @keyframes ${keyframes_name} { }`);
+        }
+
+        function test_keyframes_name_valid(keyframes_name) {
+            test(t => {
+                t.add_cleanup(cleanup_main);
+                let style = set_style(`@keyframes ${keyframes_name} {}`);
+                assert_equals(style.sheet.rules.length, 1);
+            }, `valid: @keyframes ${keyframes_name} { }`);
+        }
+
+        // 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('"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>