Bug 1574171 [wpt PR 18458] - Clean up WPT TestExpectations for CSS animations and transitions, a=testonly
authorGeorge Steel <gtsteel@chromium.org>
Mon, 26 Aug 2019 11:20:16 +0000
changeset 553866 21776be8b523f57a43eb28bece08a218d9dc5afb
parent 553865 7650ea271c95ddd4519b7519d80e9fa3129c232e
child 553867 1ab4394124f9c82a88372c3a7d4e44f6b2d2a49a
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1574171, 18458, 849975, 849927, 922970, 825262, 332189, 626703, 1748116, 687422
milestone70.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 1574171 [wpt PR 18458] - Clean up WPT TestExpectations for CSS animations and transitions, a=testonly Automatic update from web-platform-tests Clean up WPT TestExpectations for CSS animations and transitions external/wpt/css/css-animations/Element-getAnimations.tentative.html external/wpt/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html (turned on and baselined, code appears to have been fixed earlier) external/wpt/css/css-transitions/CSSTransition-startTime.tentative.html (now has same behavior reargless of when in frame the test is started) external/wpt/css/css-transitions/properties-value-* (fix duration to allow for CPU stress and add RAF before checking event handlers are called, using guideline in https://web-platform-tests.org/writing-tests/testharness-api.html#timeouts-in-tests "Note that timeouts generally need to be a few seconds long in order to produce stable results in all test environments.") external/wpt/css/css-transitions/no-transition-from-ua-to-blocking-stylesheet.html (marked flaky instead of always-fail, test sometimes passes) REMOVE external/wpt/css/css-transitions/transitions-animatable-properties-01.html (old and flaky duplicate of properties-value-001.html) (serial timeouts add to close to 60s, causing harness timeout in CI) Bug: 849975, 849927, 922970, 825262, 332189, 626703, Change-Id: Id03994b3017ac72858dca00ee71d9b89dacbd3c6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1748116 Reviewed-by: Majid Valipour <majidvp@chromium.org> Commit-Queue: Majid Valipour <majidvp@chromium.org> Auto-Submit: George Steel <gtsteel@chromium.org> Cr-Commit-Position: refs/heads/master@{#687422} -- wpt-commits: b0545c7a1c25c1ae01b78fdd40a1d6eee1d2f0bf wpt-pr: 18458
testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html
testing/web-platform/tests/css/css-transitions/properties-value-001.html
testing/web-platform/tests/css/css-transitions/properties-value-002.html
testing/web-platform/tests/css/css-transitions/properties-value-003.html
testing/web-platform/tests/css/css-transitions/properties-value-auto-001.html
testing/web-platform/tests/css/css-transitions/properties-value-implicit-001.html
testing/web-platform/tests/css/css-transitions/properties-value-inherit-001.html
testing/web-platform/tests/css/css-transitions/properties-value-inherit-002.html
testing/web-platform/tests/css/css-transitions/properties-value-inherit-003.html
testing/web-platform/tests/css/css-transitions/pseudo-elements-001.html
testing/web-platform/tests/css/css-transitions/support/runParallelAsyncHarness.js
testing/web-platform/tests/css/css-transitions/transitions-animatable-properties-01.html
--- a/testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html
+++ b/testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html
@@ -35,17 +35,17 @@ promise_test(async t => {
 
   let animations = div.getAnimations();
   assert_equals(animations.length, 2);
   await waitForAllAnimations(animations);
 
   assert_equals(animations[0].startTime, animations[1].startTime,
     'CSS transitions started together have the same start time');
 
-  await waitForFrame();
+  await waitForAnimationFrames(1);
 
   div.style.backgroundColor = 'green';
 
   animations = div.getAnimations();
   assert_equals(animations.length, 3);
   await waitForAllAnimations(animations);
 
   assert_less_than(animations[1].startTime, animations[2].startTime,
--- a/testing/web-platform/tests/css/css-transitions/properties-value-001.html
+++ b/testing/web-platform/tests/css/css-transitions/properties-value-001.html
@@ -54,17 +54,17 @@
             // for testing, limit to a couple of iterations
             // tests = tests.slice(10, 30);
             // or filter using one of:
             // tests = filterPropertyTests(tests, "background-color color(rgba)");
             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
             // tests = filterPropertyTests(tests, /^background-color/);
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
                 duration: parseFloat(duration) * 1000,
--- a/testing/web-platform/tests/css/css-transitions/properties-value-002.html
+++ b/testing/web-platform/tests/css/css-transitions/properties-value-002.html
@@ -56,17 +56,17 @@
             // for testing, limit to a couple of iterations
             // tests = tests.slice(10, 30);
             // or filter using one of:
             // tests = filterPropertyTests(tests, "background-color color(rgba)");
             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
             // tests = filterPropertyTests(tests, /^background-color/);
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
                 duration: parseFloat(duration) * 1000,
--- a/testing/web-platform/tests/css/css-transitions/properties-value-003.html
+++ b/testing/web-platform/tests/css/css-transitions/properties-value-003.html
@@ -58,17 +58,17 @@
             // for testing, limit to a couple of iterations
             // tests = tests.slice(10, 30);
             // or filter using one of:
             // tests = filterPropertyTests(tests, "background-color color(rgba)");
             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
             // tests = filterPropertyTests(tests, /^background-color/);
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
                 duration: parseFloat(duration) * 1000,
--- a/testing/web-platform/tests/css/css-transitions/properties-value-auto-001.html
+++ b/testing/web-platform/tests/css/css-transitions/properties-value-auto-001.html
@@ -56,25 +56,25 @@
             // for testing, limit to a couple of iterations
             // tests = tests.slice(10, 30);
             // or filter using one of:
             // tests = filterPropertyTests(tests, "background-color color(rgba)");
             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
             // tests = filterPropertyTests(tests, /^background-color/);
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
-                duration: parseFloat(duration) * 1000,
+                duration: parseFloat(duration) * 1200,
                 // prepare individual test
                 setup: function(data, options) {
                     var styles = {
                         '.fixture': {},
 
                         '.container': data.parentStyle,
                         '.container.to': {},
                         '.container.how': {},
--- a/testing/web-platform/tests/css/css-transitions/properties-value-implicit-001.html
+++ b/testing/web-platform/tests/css/css-transitions/properties-value-implicit-001.html
@@ -57,17 +57,17 @@
             // for testing, limit to a couple of iterations
             // tests = tests.slice(10, 30);
             // or filter using one of:
             // tests = filterPropertyTests(tests, "background-color color(rgba)");
             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
             // tests = filterPropertyTests(tests, /^background-color/);
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
                 duration: parseFloat(duration) * 1000,
--- a/testing/web-platform/tests/css/css-transitions/properties-value-inherit-001.html
+++ b/testing/web-platform/tests/css/css-transitions/properties-value-inherit-001.html
@@ -57,17 +57,17 @@
             // for testing, limit to a couple of iterations
             // tests = tests.slice(10, 30);
             // or filter using one of:
             // tests = filterPropertyTests(tests, "background-color color(rgba)");
             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
             // tests = filterPropertyTests(tests, /^background-color/);
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
                 duration: parseFloat(duration) * 1000,
--- a/testing/web-platform/tests/css/css-transitions/properties-value-inherit-002.html
+++ b/testing/web-platform/tests/css/css-transitions/properties-value-inherit-002.html
@@ -58,17 +58,17 @@
             // for testing, limit to a couple of iterations
             // tests = tests.slice(10, 30);
             // or filter using one of:
             // tests = filterPropertyTests(tests, "background-color color(rgba)");
             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
             // tests = filterPropertyTests(tests, /^background-color/);
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
                 duration: parseFloat(duration) * 1000,
--- a/testing/web-platform/tests/css/css-transitions/properties-value-inherit-003.html
+++ b/testing/web-platform/tests/css/css-transitions/properties-value-inherit-003.html
@@ -57,17 +57,17 @@
             // for testing, limit to a couple of iterations
             // tests = tests.slice(10, 30);
             // or filter using one of:
             // tests = filterPropertyTests(tests, "background-color color(rgba)");
             // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
             // tests = filterPropertyTests(tests, /^background-color/);
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
                 duration: parseFloat(duration) * 1000,
--- a/testing/web-platform/tests/css/css-transitions/pseudo-elements-001.html
+++ b/testing/web-platform/tests/css/css-transitions/pseudo-elements-001.html
@@ -79,17 +79,17 @@
                     property: 'padding-left',
                     flags: {},
                     from: {'padding-left': '1px', 'content': '"1"'},
                     to: {'padding-left': '10px', 'content': '"2"'}
                 }
             ];
 
             // general transition-duration
-            var duration = '0.5s';
+            var duration = '2s';
 
             runParallelAsyncHarness({
                 // array of test data
                 tests: tests,
                 // the number of tests to run in parallel
                 testsPerSlice: 50,
                 // milliseconds to wait before calling teardown and ending test
                 duration: parseFloat(duration) * 1000,
--- a/testing/web-platform/tests/css/css-transitions/support/runParallelAsyncHarness.js
+++ b/testing/web-platform/tests/css/css-transitions/support/runParallelAsyncHarness.js
@@ -108,18 +108,18 @@ root.runParallelAsyncHarness = function(
         tests.forEach(function(data) {
             cases.forEach(function(name) {
                 data.cases[name].step(function() {
                     (options.cases[name].start || noop)(data.cases[name], data, options);
                 });
             });
         });
 
-        // conclude test (possibly abort)
-        setTimeout(function() {
+        // conclude slice (possibly abort)
+        var concludeSlice = function() {
             tests.forEach(function(data) {
                 // perform individual "done" test-case
                 cases.forEach(function(name) {
                     data.cases[name].step(function() {
                         (options.cases[name].done || noop)(data.cases[name], data, options);
                     });
                 });
                 // clean up after individual test
@@ -130,16 +130,19 @@ root.runParallelAsyncHarness = function(
                 });
             });
 
             // finish the test for current slice of tests
             (options.sliceDone || noop)(options, tests);
 
             // next test please, give the browser 50ms to do catch its breath
             setTimeout(runLoop, 50);
-        }, duration);
+        }
+
+        // wait on RAF before cleanup to make sure all queued event handlers have run
+        setTimeout(function() {requestAnimationFrame(concludeSlice)},duration);
     }
 
     // allow DOMContentLoaded before actually doing something
     setTimeout(runLoop, 100);
 };
 
 })(window);
deleted file mode 100644
--- a/testing/web-platform/tests/css/css-transitions/transitions-animatable-properties-01.html
+++ /dev/null
@@ -1,179 +0,0 @@
-<!DOCTYPE html>
-<html>
-<!-- Submitted from TestTWF Paris -->
-  <head>
-    <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
-    <title> CSS Transitions: Animatable CSS properties </title>
-    <meta name="assert" content="Check that all animatable CSS properties are animatable and then accepted by the 'transition-property' property">
-    <meta name="timeout" content="long">
-    <link rel="author" title="Daniel Glazman" href="mailto:daniel.glazman@disruptive-innovations.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-transitions/#transitions">
-    <link rel="help" href="http://www.w3.org/TR/css3-transitions/#animatable-properties">
-    <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">
-
-    <style type="text/css">
-
-      html, body { margin: 0px; padding: 0px; }
-
-      .w50vw { width: 50vw; )
-      .h50vh { height: 50vh; }
-
-      .w50vm { width: 50vm; }
-      .h50vm { height: 50vm; }
-    </style>
-
-    <script src="/resources/testharness.js" type="text/javascript"></script>
-    <script src="/resources/testharnessreport.js" type="text/javascript"></script>
-
-    <style type="text/css" id="newStyles"></style>
-  </head>
-  <body>
-    <p>Check that all animatable CSS properties are animatable and
-      then accepted by the 'transition-property' property.<br>
-    </p>
-
-    <p id="testP">THIS PROSE NEEDED FOR TEST ITSELF</p>
-
-    <div id="log"></div><a href="transitions-animatable-properties-01.html" id="" title="transitions-animatable-properties-01">transitions-animatable-properties-01</a>
-
-    <script type="text/javascript">
-      var kANIMATABLE_CSS_PROPERTIES = [
-          ["background-color",    "white",                      "rgb(0, 128, 0)",               "", false],
-          ["background-position", "0px 0px",                    "100% 100%",                    "", false],
-          ["border-color",        "white",                      "rgb(0, 128, 0)",               "", false],
-          ["border-bottom-color", "white",                      "rgb(0, 128, 0)",               "", false],
-          ["border-bottom-width", "0px",                        "10px",                         "border-style: solid; border-color: black", false],
-          ["border-left-color",   "white",                      "rgb(0, 128, 0)",               "", false],
-          ["border-left-width",   "0px",                        "10px",                         "border-style: solid; border-color: black", false],
-          ["border-right-color",  "white",                      "rgb(0, 128, 0)",               "", false],
-          ["border-right-width",  "0px",                        "10px",                         "border-style: solid; border-color: black", false],
-          ["border-spacing",      "0px",                        "10px 15px",                    "", false],
-          ["border-top-color",    "white",                      "rgb(0, 128, 0)",               "", false],
-          ["border-top-width",    "0px",                        "10px",                         "border-style: solid; border-color: black", false],
-          ["bottom",              "0px",                        "10px",                         "", false],
-          ["clip",                "rect(0px, 0px, 10px, 10px)", "rect(10px, 10px, 20px, 20px)", "", false],
-          ["color",               "white",                      "rgb(0, 128, 0)",               "", false],
-          ["crop",                "rect(0px, 0px, 10px, 10px)", "rect(10px 10px 20px 20px)",    "", false],
-          ["font-size",           "12pt",                       "32px",                         "", false],
-          ["font-weight",         "400",                        "900",                          "", false],
-          ["height",              "1em",                        "64px",                         "", false],
-          ["left",                "0px",                        "10px",                         "", false],
-          ["letter-spacing",      "1em",                        "64px",                         "", false],
-          ["line-height",         "1em",                        "64px",                         "", false],
-          ["margin-bottom",       "0px",                        "10px",                         "", false],
-          ["margin-left",         "0px",                        "10px",                         "", false],
-          ["margin-right",        "0px",                        "10px",                         "", false],
-          ["margin-top",          "0px",                        "10px",                         "", false],
-          ["max-height",          "0px",                        "10px",                         "", false],
-          ["max-width",           "0px",                        "10px",                         "", false],
-          ["min-height",          "0px",                        "10px",                         "", false],
-          ["min-width",           "0px",                        "10px",                         "", false],
-          ["opacity",             "0",                          "1",                            "", false],
-          ["outline-color",       "white",                      "rgb(0, 128, 0)",               "", false],
-          ["outline-offset",      "0px",                        "10px",                         "", false],
-          ["outline-width",       "0px",                        "10px",                         "outline-style: solid; outline-style: black", false],
-          ["padding-bottom",      "0px",                        "10px",                         "", false],
-          ["padding-left",        "0px",                        "10px",                         "", false],
-          ["padding-right",       "0px",                        "10px",                         "", false],
-          ["padding-top",         "0px",                        "10px",                         "", false],
-          ["right",               "0px",                        "10px",                         "", false],
-          ["text-indent",         "0px",                        "10px",                         "", false],
-          ["text-shadow",         "orange 0 -2px",              "rgb(0, 128, 0) 0px 2px 0px",   "", false],
-          ["top",                 "0px",                        "10px",                         "", false],
-          ["vertical-align",      "0px",                        "10px",                         "", false],
-          ["visibility",          "visible",                    "hidden",                       "", true],
-          ["width",               "0px",                        "10px",                         "", false],
-          ["word-spacing",        "0px",                        "10px",                         "", false],
-          ["z-index",             "1",                           "10",                          "", false]
-      ];
-
-      // page timeout
-      var kTIMEOUT = 3000000;
-
-      var p = document.getElementById("testP");
-      var style = document.getElementById("newStyles");
-
-      var testsIntermediate = [];
-      var testsEnd = [];
-
-      setup({timeout: kTIMEOUT});
-
-      // create all the tests we need
-      for (var i = 0; i < kANIMATABLE_CSS_PROPERTIES.length; i++) {
-        testsIntermediate.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " intermediate"));
-        testsEnd.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " end"));
-      }
-
-      // getComputedStyle helper
-      function gCS(aProperty)
-      {
-        return document.defaultView
-               .getComputedStyle(p, "")
-               .getPropertyValue(aProperty);
-      }
-
-      function Scheduler(aIndex)
-      {
-        if (aIndex >= kANIMATABLE_CSS_PROPERTIES.length) // we're done here
-          return;
-
-        var property   = kANIMATABLE_CSS_PROPERTIES[aIndex][0];
-        var startValue = kANIMATABLE_CSS_PROPERTIES[aIndex][1];
-        var endValue   = kANIMATABLE_CSS_PROPERTIES[aIndex][2];
-        var extras     = kANIMATABLE_CSS_PROPERTIES[aIndex][3];
-        var discrete   = kANIMATABLE_CSS_PROPERTIES[aIndex][4];
-
-        // create a style rule
-        var s = "#testP { ";
-        s += property + ": " + startValue + ";\n";
-        s += "transition-property: " + property + ";\n";
-        s += "transition-duration: 0.5s;\n";
-        s += "transition-delay: 0s;\n";
-        s += "transition-timing-function: linear;\n";
-        s += extras;
-        s += "}";
-        style.textContent = s;
-
-        // flush styles
-        gCS(property);
-
-        // set property to endValue
-        p.setAttribute("style", property + ": " + endValue + "; ");
-
-        // test for intermediate value
-        setTimeout(function()
-                   {
-                     testsIntermediate[aIndex].step(function()
-                                         {
-                                           var cs = gCS(property);
-                                           if (discrete) {
-                                             assert_equals(cs, startValue);
-                                           }
-                                           else {
-                                             assert_true((cs != startValue) && (null != cs));
-                                           }
-                                         });
-                     testsIntermediate[aIndex].done();
-                   }, 250);
-
-        // test for final value
-        setTimeout(function()
-                   {
-                     testsEnd[aIndex].step(function()
-                                           {
-                                             var cs = gCS(property);
-                                             assert_equals(cs, endValue);
-                                           }
-                                          );
-                     testsEnd[aIndex].done();
-                     Scheduler(aIndex + 1);
-                   }, 600);
-
-      }
-
-      // let's start
-      Scheduler(0);
-
-    </script>
-  </body>
-</html>