Bug 1582913 [wpt PR 19195] - [css-animations] [css-transitions] parse shorthand, a=testonly
authorEric Willigers <ewilligers@users.noreply.github.com>
Mon, 23 Sep 2019 12:27:06 +0000
changeset 494870 1d5ed75d31d62e1fa274573e076eefceecdbeea6
parent 494869 9776e7344b9b2a4d3288647afc4b99554fc99a05
child 494871 c0cc0921d9761a95b7ddbd454a9ed98c580f377f
push id36615
push usercsabou@mozilla.com
push dateWed, 25 Sep 2019 09:50:53 +0000
treeherdermozilla-central@c31591e0b66f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1582913, 19195
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1582913 [wpt PR 19195] - [css-animations] [css-transitions] parse shorthand, a=testonly Automatic update from web-platform-tests [css-animations] [css-transitions] parse shorthand (#19195) Parsing tests for animation and transition shorthands. https://drafts.csswg.org/css-animations/#animation https://drafts.csswg.org/css-transitions/#transition-shorthand-property Open issues: https://github.com/w3c/csswg-drafts/issues/2031 https://github.com/w3c/csswg-drafts/issues/4034 https://github.com/w3c/csswg-drafts/issues/4223 -- wpt-commits: edffcf9ef316c6906591e734cea5bb42c8a60fdf wpt-pr: 19195
testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html
testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html
testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html
testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html
testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html
testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html
testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html
testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html
testing/web-platform/tests/css/css-animations/parsing/animation-timing-function-invalid.html
testing/web-platform/tests/css/css-animations/parsing/animation-valid.html
testing/web-platform/tests/css/css-transitions/parsing/transition-delay-invalid.html
testing/web-platform/tests/css/css-transitions/parsing/transition-duration-invalid.html
testing/web-platform/tests/css/css-transitions/parsing/transition-invalid.html
testing/web-platform/tests/css/css-transitions/parsing/transition-property-invalid.html
testing/web-platform/tests/css/css-transitions/parsing/transition-shorthand.html
testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-invalid.html
testing/web-platform/tests/css/css-transitions/parsing/transition-valid.html
testing/web-platform/tests/css/support/shorthand-testcommon.js
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-invalid.html
@@ -9,11 +9,14 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("animation-delay", "infinite");
 test_invalid_value("animation-delay", "0");
 test_invalid_value("animation-delay", "1s 2s");
+
+test_invalid_value("animation-delay", "initial, -3s");
+test_invalid_value("animation-delay", "-3s, initial");
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-direction-invalid.html
@@ -8,11 +8,14 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("animation-direction", "auto");
 test_invalid_value("animation-direction", "normal reverse");
+
+test_invalid_value("animation-direction", "reverse, initial");
+test_invalid_value("animation-direction", "initial, reverse");
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-duration-invalid.html
@@ -10,11 +10,14 @@
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("animation-duration", '-3s');
 test_invalid_value("animation-duration", '0');
 test_invalid_value("animation-duration", 'infinite');
 test_invalid_value("animation-duration", '1s 2s');
+
+test_invalid_value("animation-duration", 'initial, 1s');
+test_invalid_value("animation-duration", '1s, initial');
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-fill-mode-invalid.html
@@ -8,11 +8,14 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("animation-fill-mode", "auto");
 test_invalid_value("animation-fill-mode", "forwards backwards");
+
+test_invalid_value("animation-fill-mode", "both, initial");
+test_invalid_value("animation-fill-mode", "initial, both");
 </script>
 </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation">
+<meta name="assert" content="animation supports only the grammar '<single-animation> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation", "1s 2s 3s");
+test_invalid_value("animation", "-1s -2s");
+
+test_invalid_value("animation", "steps(1) steps(2)");
+
+test_invalid_value("animation", "1 2");
+
+test_invalid_value("animation", "reverse alternate anim");
+
+test_invalid_value("animation", "both backwards anim");
+
+test_invalid_value("animation", "paused running anim");
+
+test_invalid_value("animation", "anim1 anim2");
+</script>
+</body>
+</html>
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-iteration-count-invalid.html
@@ -9,11 +9,14 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("animation-iteration-count", "auto");
 test_invalid_value("animation-iteration-count", "-2");
 test_invalid_value("animation-iteration-count", "3 4");
+
+test_invalid_value("animation-iteration-count", "initial, 4");
+test_invalid_value("animation-iteration-count", "4, initial");
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-play-state-invalid.html
@@ -8,11 +8,14 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("animation-play-state", "auto");
 test_invalid_value("animation-play-state", "paused running");
+
+test_invalid_value("animation-play-state", "paused, initial");
+test_invalid_value("animation-play-state", "initial, paused");
 </script>
 </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-shorthand.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: animation sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation">
+<meta name="assert" content="animation supports the full grammar '<single-animation> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('animation', 'anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)', {
+  'animation-duration': '1s',
+  'animation-timing-function': 'cubic-bezier(0, -2, 1, 3)',
+  'animation-delay': '-3s',
+  'animation-iteration-count': '4',
+  'animation-direction': 'reverse',
+  'animation-fill-mode': 'both',
+  'animation-play-state': 'paused',
+  'animation-name': 'anim'
+});
+
+test_shorthand_value('animation', 'anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)', {
+  'animation-duration': '0s, 1s',
+  'animation-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)',
+  'animation-delay': '0s, -3s',
+  'animation-iteration-count': '1, 4',
+  'animation-direction': 'reverse, normal',
+  'animation-fill-mode': 'both, none',
+  'animation-play-state': 'paused, running',
+  'animation-name': 'anim, none'
+});
+
+test_shorthand_value('animation', '4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse', {
+  'animation-duration': '1s, 0s',
+  'animation-timing-function': 'cubic-bezier(0, -2, 1, 3), ease',
+  'animation-delay': '-3s, 0s',
+  'animation-iteration-count': '4, 1',
+  'animation-direction': 'normal, reverse',
+  'animation-fill-mode': 'none, both',
+  'animation-play-state': 'running, paused',
+  'animation-name': 'none, anim'
+});
+</script>
+</body>
+</html>
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-timing-function-invalid.html
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-timing-function-invalid.html
@@ -13,11 +13,14 @@
 <script>
 test_invalid_value("animation-timing-function", "auto");
 test_invalid_value("animation-timing-function", "ease-in ease-out");
 test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3)");
 test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3, infinite)");
 test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3, 4, 5)");
 test_invalid_value("animation-timing-function", "cubic-bezier(-0.1, 0.1, 0.5, 0.9)");
 test_invalid_value("animation-timing-function", "cubic-bezier(0.5, 0.1, 1.1, 0.9)");
+
+test_invalid_value("animation-timing-function", "initial, cubic-bezier(0, -2, 1, 3)");
+test_invalid_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3), initial");
 </script>
 </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/parsing/animation-valid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: parsing animation with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation">
+<meta name="assert" content="animation supports the full grammar '<single-animation> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <single-animation> = <time> || <easing-function> || <time> ||
+// <single-animation-iteration-count> || <single-animation-direction> ||
+// <single-animation-fill-mode> || <single-animation-play-state> ||
+// [ none | <keyframes-name> ]
+test_valid_value("animation", "1s", ["1s", "1s ease 0s 1 normal none running none"]);
+test_valid_value("animation", "cubic-bezier(0, -2, 1, 3)", ["cubic-bezier(0, -2, 1, 3)", "0s cubic-bezier(0, -2, 1, 3) 0s 1 normal none running none"]);
+test_valid_value("animation", "1s -3s", ["1s -3s", "1s ease -3s 1 normal none running none"]);
+test_valid_value("animation", "4", ["4", "0s ease 0s 4 normal none running none"]);
+test_valid_value("animation", "reverse", ["reverse", "0s ease 0s 1 reverse none running none"]);
+test_valid_value("animation", "both", ["both", "0s ease 0s 1 normal both running none"]);
+test_valid_value("animation", "paused", ["paused", "0s ease 0s 1 normal none paused none"]);
+test_valid_value("animation", "none", ["none", "0s ease 0s 1 normal none running none"]);
+test_valid_value("animation", "anim", ["anim", "0s ease 0s 1 normal none running anim"]);
+
+test_valid_value("animation", "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)",
+  "1s cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim");
+
+test_valid_value("animation", "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)",
+  "0s ease 0s 1 reverse both paused anim, 1s cubic-bezier(0, -2, 1, 3) -3s 4 normal none running none");
+
+// TODO: Add test with a single negative time.
+// TODO: Add test with a single timing-function keyword.
+</script>
+</body>
+</html>
--- a/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-invalid.html
+++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-delay-invalid.html
@@ -9,11 +9,14 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("transition-delay", 'infinite');
 test_invalid_value("transition-delay", '0');
 test_invalid_value("transition-delay", '500ms 0.5s');
+
+test_invalid_value("transition-delay", '-3s, initial');
+test_invalid_value("transition-delay", 'initial, -3s');
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-invalid.html
+++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-duration-invalid.html
@@ -9,11 +9,14 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("transition-duration", 'infinite');
 test_invalid_value("transition-duration", '-500ms');
 test_invalid_value("transition-duration", '1s 2s');
+
+test_invalid_value("transition-duration", '1s, initial');
+test_invalid_value("transition-duration", 'initial, 1s');
 </script>
 </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-invalid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transitions: parsing transition with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property">
+<meta name="assert" content="transition supports only the grammar '<single-transition> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <single-transition> = [ none | <single-transition-property> ] ||
+// <time> || <easing-function> || <time>
+test_invalid_value("transition", "1s 2s 3s");
+test_invalid_value("transition", "-1s -2s");
+
+test_invalid_value("transition", "steps(1) steps(2)");
+
+test_invalid_value("transition", "none top");
+</script>
+</body>
+</html>
--- a/testing/web-platform/tests/css/css-transitions/parsing/transition-property-invalid.html
+++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-property-invalid.html
@@ -9,11 +9,14 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("transition-property", 'one two three');
 test_invalid_value("transition-property", '1, 2, 3');
 test_invalid_value("transition-property", 'none, one');
+
+test_invalid_value("transition-property", 'initial, top');
+test_invalid_value("transition-property", 'top, initial');
 </script>
 </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-shorthand.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transitions: transition sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property">
+<meta name="assert" content="transition supports the full grammar '<single-transition> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('transition', '1s -3s cubic-bezier(0, -2, 1, 3) top', {
+  'transition-property': 'top',
+  'transition-duration': '1s',
+  'transition-timing-function': 'cubic-bezier(0, -2, 1, 3)',
+  'transition-delay': '-3s'
+});
+
+test_shorthand_value('transition', '1s -3s, cubic-bezier(0, -2, 1, 3) top', {
+  'transition-property': 'all, top',
+  'transition-duration': '1s, 0s',
+  'transition-timing-function': 'ease, cubic-bezier(0, -2, 1, 3)',
+  'transition-delay': '-3s, 0s'
+});
+
+test_shorthand_value('transition', 'cubic-bezier(0, -2, 1, 3) top, 1s -3s', {
+  'transition-property': 'top, all',
+  'transition-duration': '0s, 1s',
+  'transition-timing-function': 'cubic-bezier(0, -2, 1, 3), ease',
+  'transition-delay': '0s, -3s'
+});
+</script>
+</body>
+</html>
--- a/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-invalid.html
+++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-timing-function-invalid.html
@@ -14,11 +14,14 @@
 <script>
 test_invalid_value("transition-timing-function", "auto");
 test_invalid_value("transition-timing-function", "ease-in ease-out");
 test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3)");
 test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3, infinite)");
 test_invalid_value("transition-timing-function", "cubic-bezier(1, 2, 3, 4, 5)");
 test_invalid_value("transition-timing-function", "cubic-bezier(-0.1, 0.1, 0.5, 0.9)");
 test_invalid_value("transition-timing-function", "cubic-bezier(0.5, 0.1, 1.1, 0.9)");
+
+test_invalid_value("transition-timing-function", "initial, cubic-bezier(0, -2, 1, 3)");
+test_invalid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3), initial");
 </script>
 </body>
 </html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/parsing/transition-valid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transitions: parsing transition with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property">
+<meta name="assert" content="transition supports the full grammar '<single-transition> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <single-transition> = [ none | <single-transition-property> ] ||
+// <time> || <easing-function> || <time>
+test_valid_value("transition", "1s", ["1s", "all 1s ease 0s"]);
+test_valid_value("transition", "cubic-bezier(0, -2, 1, 3)", ["cubic-bezier(0, -2, 1, 3)", "all 0s cubic-bezier(0, -2, 1, 3) 0s"]);
+test_valid_value("transition", "1s -3s", ["1s -3s", "all 1s ease -3s"]);
+test_valid_value("transition", "none", ["none", "none 0s ease 0s"]);
+test_valid_value("transition", "top", ["top", "top 0s ease 0s"]);
+
+test_valid_value("transition", "1s -3s cubic-bezier(0, -2, 1, 3) top", "top 1s cubic-bezier(0, -2, 1, 3) -3s");
+test_valid_value("transition", "1s -3s, cubic-bezier(0, -2, 1, 3) top", ["1s -3s, top cubic-bezier(0, -2, 1, 3)", "all 1s ease -3s, top 0s cubic-bezier(0, -2, 1, 3) 0s"]);
+
+// TODO: Add test with a single negative time.
+// TODO: Add test with a single timing-function keyword.
+</script>
+</body>
+</html>
--- a/testing/web-platform/tests/css/support/shorthand-testcommon.js
+++ b/testing/web-platform/tests/css/support/shorthand-testcommon.js
@@ -1,24 +1,39 @@
 'use strict';
 
 function test_shorthand_value(property, value, longhands) {
     const stringifiedValue = JSON.stringify(value);
 
-    test(function(){
-        var div = document.getElementById('target') || document.createElement('div');
-        div.style[property] = "";
-        try {
-            div.style[property] = value;
+    for (let longhand of Object.keys(longhands).sort()) {
+        test(function(){
+            var div = document.getElementById('target') || document.createElement('div');
+            div.style[property] = "";
+            try {
+                div.style[property] = value;
 
-            for (let longhand of Object.keys(longhands).sort()) {
                 const readValue = div.style[longhand];
                 assert_equals(readValue, longhands[longhand], longhand + " should be canonical");
 
                 div.style[longhand] = "";
                 div.style[longhand] = readValue;
                 assert_equals(div.style[longhand], readValue, "serialization should round-trip");
+            } finally {
+                div.style[property] = "";
             }
+        }, "e.style['" + property + "'] = " + stringifiedValue + " should set " + longhand);
+    }
+
+    test(function(){
+        var div = document.getElementById('target') || document.createElement('div');
+        div.style[property] = "";
+        try {
+            const expectedLength = div.style.length;
+            div.style[property] = value;
+            for (let longhand of Object.keys(longhands).sort()) {
+                div.style[longhand] = "";
+            }
+            assert_equals(div.style.length, expectedLength);
         } finally {
             div.style[property] = "";
         }
-    }, "e.style['" + property + "'] = " + stringifiedValue + " should set the longhand values");
+    }, "e.style['" + property + "'] = " + stringifiedValue + " should not set unrelated longhands");
 }