cleanup WPT css-transitions timing-function parsing tests

Move all such tests into parsing.
Eliminate duplicate tests and manual versions of automated tests.

Change-Id: I0ef507a1832c9ce113ed1a855653af7fd22bb0b0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1809508
Commit-Queue: George Steel <gtsteel@chromium.org>
Auto-Submit: George Steel <gtsteel@chromium.org>
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699042}

third_party/blink/web_tests/TestExpectations

@@ -3903,12 +3903,10 @@ crbug.com/626703 external/wpt/css/css-transitions/transition-property-030.html [
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-015.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-021.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-039.html [ Skip ]
-crbug.com/626703 external/wpt/css/css-transitions/transition-timing-function-008.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-timing-function-002.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-012.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-014.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-016.html [ Skip ]
-crbug.com/626703 external/wpt/css/css-transitions/transition-timing-function-007.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-009.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-029.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-023.html [ Skip ]
@@ -3917,10 +3915,7 @@ crbug.com/626703 external/wpt/css/css-transitions/transition-timing-function-010
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-003.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-011.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-008.html [ Skip ]
-crbug.com/626703 external/wpt/css/css-transitions/transition-timing-function-011.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-020.html [ Skip ]
-crbug.com/626703 external/wpt/css/css-transitions/transition-timing-function-013.html [ Skip ]
-crbug.com/626703 external/wpt/css/css-transitions/transition-timing-function-012.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-031.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-delay-000.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-041.html [ Skip ]
@@ -3934,7 +3929,6 @@ crbug.com/626703 external/wpt/css/css-transitions/transition-property-018.html [
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-022.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-duration-002.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-024.html [ Skip ]
-crbug.com/626703 external/wpt/css/css-transitions/transition-timing-function-009.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-037.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-007.html [ Skip ]
 crbug.com/626703 external/wpt/css/css-transitions/transition-property-005.html [ Skip ]

third_party/blink/web_tests/external/wpt/css/css-transitions/parsing/transition-timing-function-computed.html

@@ -13,6 +13,8 @@
 <div id="target"></div>
 <script>
 test_computed_value("transition-timing-function", "linear");
+test_computed_value("transition-timing-function", "", "ease");
+test_computed_value("transition-timing-function", "initial", "ease");
 
 test_computed_value("transition-timing-function", "ease");
 test_computed_value("transition-timing-function", "ease-in");
@@ -22,7 +24,9 @@ test_computed_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0
 test_computed_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)");
 test_computed_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
 
-
+test_computed_value("transition-timing-function", "step-start", "steps(1, start)");
+test_computed_value("transition-timing-function", "step-end", "steps(1)");
+test_computed_value("transition-timing-function", "steps(4)");
 test_computed_value("transition-timing-function", "steps(4, start)");
 test_computed_value("transition-timing-function", "steps(2, end)", "steps(2)");
 test_computed_value("transition-timing-function", "steps(2, jump-start)");

third_party/blink/web_tests/external/wpt/css/css-transitions/parsing/transition-timing-function-invalid.html

@@ -14,11 +14,23 @@
 <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(foobar)");
 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", "steps(foobar)");
+test_invalid_value("transition-timing-function", "steps(3.3, end)");
+test_invalid_value("transition-timing-function", "steps(3, top)");
+test_invalid_value("transition-timing-function", "steps(-3, top)");
+test_invalid_value("transition-timing-function", "steps(0, jump-start)");
+test_invalid_value("transition-timing-function", "steps(0, jump-end)");
+test_invalid_value("transition-timing-function", "steps(0, jump-both)");
+test_invalid_value("transition-timing-function", "steps(1, jump-none)");
+
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-transitions/parsing/transition-timing-function-valid-expected.txt

+This is a testharness.js-based test.
+PASS e.style['transition-timing-function'] = "linear" should set the property value
+PASS e.style['transition-timing-function'] = "ease" should set the property value
+PASS e.style['transition-timing-function'] = "ease-in" should set the property value
+PASS e.style['transition-timing-function'] = "ease-out" should set the property value
+PASS e.style['transition-timing-function'] = "ease-in-out" should set the property value
+PASS e.style['transition-timing-function'] = "cubic-bezier(0.1, 0.2, 0.8, 0.9)" should set the property value
+PASS e.style['transition-timing-function'] = "cubic-bezier(0, -2, 1, 3)" should set the property value
+PASS e.style['transition-timing-function'] = "cubic-bezier(0, 0.7, 1, 1.3)" should set the property value
+FAIL e.style['transition-timing-function'] = "step-start" should set the property value assert_equals: serialization should be canonical expected "steps(1, start)" but got "step-start"
+FAIL e.style['transition-timing-function'] = "step-end" should set the property value assert_equals: serialization should be canonical expected "steps(1)" but got "step-end"
+PASS e.style['transition-timing-function'] = "steps(4)" should set the property value
+PASS e.style['transition-timing-function'] = "steps(4, start)" should set the property value
+PASS e.style['transition-timing-function'] = "steps(2, end)" should set the property value
+PASS e.style['transition-timing-function'] = "steps(2, jump-start)" should set the property value
+PASS e.style['transition-timing-function'] = "steps(2, jump-end)" should set the property value
+PASS e.style['transition-timing-function'] = "steps(2, jump-both)" should set the property value
+PASS e.style['transition-timing-function'] = "steps(2, jump-none)" should set the property value
+PASS e.style['transition-timing-function'] = "linear, ease, linear" should set the property value
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/css/css-transitions/parsing/transition-timing-function-valid.html

@@ -22,6 +22,9 @@ test_valid_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)
 test_valid_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)");
 test_valid_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
 
+test_valid_value("transition-timing-function", "step-start", "steps(1, start)");
+test_valid_value("transition-timing-function", "step-end", "steps(1)");
+test_valid_value("transition-timing-function", "steps(4)");
 test_valid_value("transition-timing-function", "steps(4, start)");
 test_valid_value("transition-timing-function", "steps(2, end)", "steps(2)");
 test_valid_value("transition-timing-function", "steps(2, jump-start)");

third_party/blink/web_tests/external/wpt/css/css-transitions/transition-timing-function-001.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>CSS Transitions Test: Parsing transition-timing-function</title>
-        <meta name="assert" content="Test checks that transition-timing-function values are parsed properly">
-        <link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function-property">
-        <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
-        <meta name="flags" content="dom">
-
-        <script src="/resources/testharness.js" type="text/javascript"></script>
-        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
-
-        <script src="./support/vendorPrefix.js" type="text/javascript"></script>
-        <script src="./support/helper.js" type="text/javascript"></script>
-    </head>
-    <body>
-        <!-- required by testharnessreport.js -->
-        <div id="log"></div>
-        <!-- elements used for testing -->
-        <div id="container">
-            <div id="transition"></div>
-        </div>
-
-        <script>
-            var transition = document.getElementById('transition');
-            var defaultValue = 'ease';
-            var values = {
-                // keywords
-                'ease': 'ease',
-                'linear': 'linear',
-                'ease-in': 'ease-in',
-                'ease-out': 'ease-out',
-                'ease-in-out': 'ease-in-out',
-                'step-start': 'steps(1, start)',
-                'step-end': 'steps(1)',
-                // cubic bezier
-                'cubic-bezier(0.1, 0.2, 0.3, 0.4)': 'cubic-bezier(0.1, 0.2, 0.3, 0.4)',
-                'cubic-bezier(0.1, -0.2, 0.3, -0.4)': 'cubic-bezier(0.1, -0.2, 0.3, -0.4)',
-                'cubic-bezier(0.1, 1.2, 0.3, 1.4)': 'cubic-bezier(0.1, 1.2, 0.3, 1.4)',
-                // steps
-                'steps(3, start)': 'steps(3, start)',
-                'steps(3, end)': 'steps(3)',
-                'steps(3)': 'steps(3)',
-                'steps(3, jump-start)': 'steps(3, jump-start)',
-                'steps(3, jump-end)': 'steps(3)',
-                'steps(3, jump-both)': 'steps(3, jump-both)',
-                'steps(3, jump-none)': 'steps(3, jump-none)',
-                // invalid
-                'cubic-bezier(foobar)': defaultValue,
-                'steps(foobar)': defaultValue,
-                'steps(3.3, end)': defaultValue,
-                'steps(3, top)': defaultValue,
-                'steps(-3, top)': defaultValue,
-                'steps(0, jump-start)': defaultValue,
-                'steps(0, jump-end)': defaultValue,
-                'steps(0, jump-both)': defaultValue,
-                'steps(1, jump-none)': defaultValue,
-                // Both x values must be in the range [0, 1]
-                'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': defaultValue,
-                'cubic-bezier(1.1, 1.2, 1.3, 1.4)': defaultValue
-            };
-
-            // these tests are supposed to fail and
-            // possibly make the engine issue a parser warning
-            var invalidTests = {
-                'cubic-bezier(foobar)': true,
-                'steps(foobar)': true,
-                'steps(3.3, end)': true,
-                'steps(3, top)': true,
-                'steps(-3, top)': true,
-                // Both x values must be in the range [0, 1]
-                'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': true,
-                'cubic-bezier(1.1, 1.2, 1.3, 1.4)': true
-            };
-
-            for (var key in values) {
-                if (Object.prototype.hasOwnProperty.call(values, key)) {
-                    test(function() {
-                        setStyle('#transition', {
-                            'transition-timing-function': key
-                        });
-                        var result = computedStyle(transition, 'transition-timing-function');
-                        assert_equals(result, values[key], "Expected computed value");
-                    }, "parse '" + key + "'",
-                    {
-                        // mark tests that fail as such
-                        flags: invalidTests[key] ? "invalid" : ""
-                    });
-                }
-            }
-        </script>
-    </body>
-</html>

third_party/blink/web_tests/external/wpt/css/css-transitions/transition-timing-function-007.html

-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Transitions Test: transition-timing-function - 'step-end' equivalent to 'steps(1, end)'</title>
-<link rel="author" title="Intel" href="http://www.intel.com">
-<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
-<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
-<meta name="flags" content="interact">
-<meta name="assert" content="The 'transition-timing-function' property set 'step-end' is equivalent to 'steps(1, end)'">
-<style>
-  div {
-    height: 100px;
-    transition: width 2s;
-    width: 100px;
-  }
-  #test1 {
-    background-color: blue;
-    transition-timing-function: step-end;
-  }
-  #test2 {
-    background-color: yellow;
-    transition-timing-function: steps(1, end);
-  }
-</style>
-<body>
-  <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
-  <div id="test1"></div>
-  <div id="test2"></div>
-  <button>Start</button>
-  <script>
-    (function() {
-      var button = document.querySelector("button");
-      button.addEventListener("click", function(evt) {
-        var test1 = document.querySelector("#test1"),
-            test2 = document.querySelector("#test2");
-        test1.setAttribute("style", "width: 300px");
-        test2.setAttribute("style", "width: 300px");
-      }, false);
-    })();
-  </script>
-</body>

third_party/blink/web_tests/external/wpt/css/css-transitions/transition-timing-function-008.html

-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Transitions Test: transition-timing-function - 'step-start' equivalent to 'steps(1, start)'</title>
-<link rel="author" title="Intel" href="http://www.intel.com">
-<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
-<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
-<meta name="flags" content="interact">
-<meta name="assert" content="The 'transition-timing-function' property set 'step-start' is equivalent to 'steps(1, start)'">
-<style>
-  div {
-    height: 100px;
-    transition: width 2s;
-    width: 100px;
-  }
-  #test1 {
-    background-color: blue;
-    transition-timing-function: step-start;
-  }
-  #test2 {
-    background-color: yellow;
-    transition-timing-function: steps(1, start);
-  }
-</style>
-<body>
-  <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
-  <div id="test1"></div>
-  <div id="test2"></div>
-  <button>Start</button>
-  <script>
-    (function() {
-      var button = document.querySelector("button");
-      button.addEventListener("click", function(evt) {
-        var test1 = document.querySelector("#test1"),
-            test2 = document.querySelector("#test2");
-        test1.setAttribute("style", "width: 300px");
-        test2.setAttribute("style", "width: 300px");
-      }, false);
-    })();
-  </script>
-</body>

third_party/blink/web_tests/external/wpt/css/css-transitions/transition-timing-function-009.html

-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Transitions Test: transition-timing-function - ease(initial value)</title>
-<link rel="author" title="Intel" href="http://www.intel.com">
-<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
-<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
-<meta name="flags" content="interact">
-<meta name="assert" content="Test checks that the initial value of 'transition-timing-function' property is 'ease'.">
-<style>
-  div {
-    height: 100px;
-    transition-duration: 2s;
-    transition-property: width;
-    width: 100px;
-  }
-  #test1 {
-    background-color: blue;
-    transition-timing-function: ease;
-  }
-  #test2 {
-    background-color: yellow;
-  }
-</style>
-<body>
-  <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
-  <div id="test1"></div>
-  <div id="test2"></div>
-  <button>Start</button>
-  <script>
-    (function() {
-      var button = document.querySelector("button");
-      button.addEventListener("click", function(evt) {
-        var test1 = document.querySelector("#test1"),
-            test2 = document.querySelector("#test2");
-        test1.setAttribute("style", "width: 300px");
-        test2.setAttribute("style", "width: 300px");
-      }, false);
-    })();
-  </script>
-</body>

third_party/blink/web_tests/external/wpt/css/css-transitions/transition-timing-function-011.html

-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Transitions Test: transition-timing-function - steps(the second parameter default 'end')</title>
-<link rel="author" title="Intel" href="http://www.intel.com">
-<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
-<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
-<meta name="flags" content="interact">
-<meta name="assert" content="Test checks that the second parameter of 'steps()' function is default 'end'.">
-<style>
-  div {
-    height: 100px;
-    transition-duration: 2s;
-    transition-property: width;
-    width: 100px;
-  }
-  #test1 {
-    background-color: blue;
-    transition-timing-function: steps(2);
-  }
-  #test2 {
-    background-color: yellow;
-    transition-timing-function: steps(2, end);
-  }
-</style>
-<body>
-  <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
-  <div id="test1"></div>
-  <div id="test2"></div>
-  <button>Start</button>
-  <script>
-    (function() {
-      var button = document.querySelector("button");
-      button.addEventListener("click", function(evt) {
-        var test1 = document.querySelector("#test1"),
-            test2 = document.querySelector("#test2");
-        test1.setAttribute("style", "width: 300px");
-        test2.setAttribute("style", "width: 300px");
-      }, false);
-    })();
-  </script>
-</body>

third_party/blink/web_tests/external/wpt/css/css-transitions/transition-timing-function-012.html

-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Transitions Test: transition-timing-function - steps(-2)</title>
-<link rel="author" title="Intel" href="http://www.intel.com">
-<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
-<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
-<meta name="flags" content="interact">
-<meta name="assert" content="Test checks that the 'steps()' function with negative number is invalid, the transition-timing-function will use 'ease' as default.">
-<style>
-  div {
-    height: 100px;
-    transition-duration: 2s;
-    transition-property: width;
-    width: 100px;
-  }
-  #test1 {
-    background-color: blue;
-    transition-timing-function: steps(-2);
-  }
-  #test2 {
-    background-color: yellow;
-    transition-timing-function: ease;
-  }
-</style>
-<body>
-  <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
-  <div id="test1"></div>
-  <div id="test2"></div>
-  <button>Start</button>
-  <script>
-    (function() {
-      var button = document.querySelector("button");
-      button.addEventListener("click", function(evt) {
-        var test1 = document.querySelector("#test1"),
-            test2 = document.querySelector("#test2");
-        test1.setAttribute("style", "width: 300px");
-        test2.setAttribute("style", "width: 300px");
-      }, false);
-    })();
-  </script>
-</body>

third_party/blink/web_tests/external/wpt/css/css-transitions/transition-timing-function-013.html

-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>CSS Transitions Test: transition-timing-function - steps(0)</title>
-<link rel="author" title="Intel" href="http://www.intel.com">
-<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
-<link rel="help" title="2.3. The 'transition-timing-function' Property" href="http://www.w3.org/TR/css3-transitions/#transition-timing-function">
-<meta name="flags" content="interact">
-<meta name="assert" content="Test checks that the 'steps()' function with '0' is invalid, the transition-timing-function will use 'ease' as default.">
-<style>
-  div {
-    height: 100px;
-    transition-duration: 2s;
-    transition-property: width;
-    width: 100px;
-  }
-  #test1 {
-    background-color: blue;
-    transition-timing-function: steps(0);
-  }
-  #test2 {
-    background-color: yellow;
-    transition-timing-function: ease;
-  }
-</style>
-<body>
-  <p>Click the 'Start' button. Test passes if the width growth of blue square is <strong>equivalent</strong> to the yellow square.</p>
-  <div id="test1"></div>
-  <div id="test2"></div>
-  <button>Start</button>
-  <script>
-    (function() {
-      var button = document.querySelector("button");
-      button.addEventListener("click", function(evt) {
-        var test1 = document.querySelector("#test1"),
-            test2 = document.querySelector("#test2");
-        test1.setAttribute("style", "width: 300px");
-        test2.setAttribute("style", "width: 300px");
-      }, false);
-    })();
-  </script>
-</body>