Bug 1467344 - Drop use of flushComputedStyle in css-transitions tests; r=hiro
authorBrian Birtles <birtles@gmail.com>
Thu, 16 Aug 2018 14:41:04 +0900
changeset 487365 5b8c402641ac0a302770b6661b5f01c77226c70e
parent 487364 64abf6978f00f919aa926d56b6ce908392549529
child 487366 d0c3ab5c291b0743911fc3b62938e3a2c130f20c
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1467344
milestone63.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 1467344 - Drop use of flushComputedStyle in css-transitions tests; r=hiro flushComputedStyle is as follows: var cs = getComputedStyle(elem); cs.marginLeft; That _probably_ flushes style in most engines, but it's possible some engine in the future will optimize things in a way that it can flush marginLeft without flushing, say, backgroundColor. Before moving these tests to wpt, it would be better to explicitly flush the property (or at least one of the properties) we are transitioning. This patch also updates the "Setting zero combined duration" test from test_animation-cancel.html since, in making this change, I realized the test was wrong. Specifically, it was testing that when we set a combined duration of zero that a transition is canceled. However, nothing in the spec requires this. The spec only requires a non-zero combined duration to _start_ a transition and only cancels an existing transition if the combined duration becomes _zero_ if the "the end value of the running transition is not equal to the value of the property in the after-change style". This test passed, however, because it changed the transition property to margin-top, hence it was actually testing the same condition as the previous test.
dom/animation/test/css-transitions/test_animation-cancel.html
dom/animation/test/css-transitions/test_animation-computed-timing.html
dom/animation/test/css-transitions/test_animation-currenttime.html
dom/animation/test/css-transitions/test_animation-finished.html
dom/animation/test/css-transitions/test_animation-starttime.html
dom/animation/test/css-transitions/test_document-get-animations.html
dom/animation/test/css-transitions/test_effect-target.html
dom/animation/test/css-transitions/test_element-get-animations.html
dom/animation/test/css-transitions/test_event-dispatch.html
dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
dom/animation/test/css-transitions/test_setting-effect.html
--- a/dom/animation/test/css-transitions/test_animation-cancel.html
+++ b/dom/animation/test/css-transitions/test_animation-cancel.html
@@ -5,17 +5,17 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <div id="log"></div>
 <script>
 'use strict';
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
   await waitForFrame();
 
@@ -23,17 +23,17 @@ promise_test(async t => {
                     'transform style is animated before canceling');
   transition.cancel();
   assert_equals(getComputedStyle(div).marginLeft, div.style.marginLeft,
                 'transform style is no longer animated after canceling');
 }, 'Animated style is cleared after canceling a running CSS transition');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   transition.cancel();
@@ -46,17 +46,17 @@ promise_test(async t => {
   await transition.ready;
 
   assert_equals(transition.playState, 'running',
                 'Transition succeeds in running after being re-started');
 }, 'After canceling a transition, it can still be re-used');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   transition.finish();
@@ -70,41 +70,41 @@ promise_test(async t => {
   await transition.ready;
 
   assert_equals(transition.playState, 'running',
                 'Transition succeeds in running after being re-started');
 }, 'After canceling a finished transition, it can still be re-used');
 
 test(t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   transition.cancel();
   assert_equals(getComputedStyle(div).marginLeft, '1000px',
                 'margin-left style is not animated after canceling');
 
   // Trigger a change to a transition property and check that this
   // doesn't cause the animation to become live again
   div.style.transitionDuration = '200s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   assert_equals(getComputedStyle(div).marginLeft, '1000px',
                 'margin-left style is still not animated after updating'
                 + ' transition-duration');
   assert_equals(transition.playState, 'idle',
                 'Transition is still idle after updating transition-duration');
 }, 'After canceling a transition, updating transition properties doesn\'t make'
    + ' it live again');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
@@ -117,17 +117,17 @@ promise_test(async t => {
 }, 'Setting display:none on an element cancels its transitions');
 
 promise_test(async t => {
   const parentDiv = addDiv(t);
   const childDiv = document.createElement('div');
   parentDiv.appendChild(childDiv);
   childDiv.setAttribute('style', 'margin-left: 0px');
 
-  flushComputedStyle(childDiv);
+  getComputedStyle(childDiv).marginLeft;
 
   childDiv.style.transition = 'margin-left 100s';
   childDiv.style.marginLeft = '1000px';
 
   const transition = childDiv.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
@@ -135,104 +135,115 @@ promise_test(async t => {
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
   assert_equals(getComputedStyle(childDiv).marginLeft, '1000px');
 }, 'Setting display:none cancels transitions on a child element');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   // Set an unrecognized property value
   div.style.transitionProperty = 'none';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
   assert_equals(getComputedStyle(div).marginLeft, '1000px');
 }, 'Removing a property from transition-property cancels transitions on that '+
    'property');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
-  div.style.transition = 'margin-top 10s -10s'; // combined duration is zero
-  flushComputedStyle(div);
+  div.style.transition = 'margin-left 10s -10s'; // combined duration is zero
+
+  // Note that simply setting the combined duration to zero is not enough to
+  // cancel the transition. We must also update the end value so that the,
+  // "the end value of the running transition is not equal to the value of the
+  // property in the after-change style" condition is true.
+  //
+  // (And note that the zero combined duration is not strictly necessary to
+  // cancel the original transition--but it does ensure another transition is
+  // not generated in its place.)
+
+  div.style.marginLeft = '2000px';
+  getComputedStyle(div).marginLeft;
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
-  assert_equals(getComputedStyle(div).marginLeft, '1000px');
+  assert_equals(getComputedStyle(div).marginLeft, '2000px');
 }, 'Setting zero combined duration');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   div.style.marginLeft = '2000px';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
 }, 'Changing style to another interpolable value cancels the original ' +
    'transition');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   div.style.marginLeft = 'auto';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   await waitForFrame();
 
   assert_equals(div.getAnimations().length, 0,
                 'There should be no transitions');
   assert_equals(transition.playState, 'idle');
 }, 'An after-change style value can\'t be interpolated');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'margin-left: 0px' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.transition = 'margin-left 100s';
   div.style.marginLeft = '1000px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   assert_equals(transition.playState, 'running');
   div.style.marginLeft = '0px';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   await waitForFrame();
 
   assert_equals(transition.playState, 'idle');
 }, 'Reversing a running transition cancels the original transition');
 
 </script>
--- a/dom/animation/test/css-transitions/test_animation-computed-timing.html
+++ b/dom/animation/test/css-transitions/test_animation-computed-timing.html
@@ -19,166 +19,166 @@
 
 // --------------------
 // delay
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay');
 }, 'delay of a new tranisition');
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, 10000,
                 'Initial value of delay');
 }, 'Positive delay of a new transition');
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s -5s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().delay, -5000,
                 'Initial value of delay');
 }, 'Negative delay of a new transition');
 
 
 // --------------------
 // endDelay
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().endDelay, 0,
                 'Initial value of endDelay');
 }, 'endDelay of a new transition');
 
 
 // --------------------
 // fill
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().fill, 'backwards', 'Fill backwards');
 }, 'fill of a new transition');
 
 
 // --------------------
 // iterationStart
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().iterationStart, 0,
                 'Initial value of iterationStart');
 }, 'iterationStart of a new transition');
 
 
 // --------------------
 // iterations
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().iterations, 1,
                 'Initial value of iterations');
 }, 'iterations of a new transition');
 
 
 // --------------------
 // duration
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().duration, 10000,
                 'Initial value of duration');
 }, 'duration of a new transition');
 
 
 // --------------------
 // direction
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class : 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().direction, 'normal',
                 'Initial value of direction');
 }, 'direction of a new transition');
 
 
 // --------------------
 // easing
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().easing, 'linear',
                 'Initial value of easing');
 }, 'easing of a new transition');
 
 
 // ------------------------------
 // endTime
 // = max(start delay + active duration + end delay, 0)
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 100s -5s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   const answer = 100000 - 5000; // ms
   assert_equals(effect.getComputedTiming().endTime, answer,
                 'Initial value of endTime');
 }, 'endTime of a new transition');
 
@@ -186,56 +186,56 @@ test(t => {
 // --------------------
 // activeDuration
 // = iteration duration * iteration count(==1)
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 100s -5s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().activeDuration, 100000,
                 'Initial value of activeDuration');
 }, 'activeDuration of a new transition');
 
 
 // --------------------
 // localTime
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().localTime, 0,
                 'Initial value of localTime');
 }, 'localTime of a new transition');
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const anim = div.getAnimations()[0];
   anim.currentTime = 5000;
   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
                 'current localTime after setting currentTime');
 }, 'localTime is always equal to currentTime');
 
 promise_test(async t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const anim = div.getAnimations()[0];
   anim.playbackRate = 2; // 2 times faster
 
   await anim.ready;
 
   assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
@@ -249,78 +249,78 @@ promise_test(async t => {
 
 // --------------------
 // progress
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10.5s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().progress, 0.0,
                 'Initial value of progress');
 }, 'progress of a new transition');
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10.5s 2s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().progress, 0.0,
                 'Initial value of progress');
 }, 'progress of a new transition with positive delay in before phase');
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10.5s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const anim = div.getAnimations()[0];
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().progress, null,
                 'finished progress');
 }, 'progress of a finished transition');
 
 
 // --------------------
 // currentIteration
 // --------------------
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().currentIteration, 0,
                 'Initial value of currentIteration');
 }, 'currentIteration of a new transition');
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s 2s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const effect = div.getAnimations()[0].effect;
   assert_equals(effect.getComputedTiming().currentIteration, 0,
                 'Initial value of currentIteration');
 }, 'currentIteration of a new transition with positive delay in before phase');
 
 test(t => {
   const div = addDiv(t, { class: 'animated-div' });
   div.style.transition = 'margin-left 10s';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '10px';
 
   const anim = div.getAnimations()[0];
   anim.finish();
   assert_equals(anim.effect.getComputedTiming().currentIteration, null,
                 'finished currentIteration');
 }, 'currentIteration of a finished transition');
 
--- a/dom/animation/test/css-transitions/test_animation-currenttime.html
+++ b/dom/animation/test/css-transitions/test_animation-currenttime.html
@@ -10,17 +10,17 @@
 'use strict';
 
 const marginLeft = div => parseFloat(getComputedStyle(div).marginLeft);
 
 promise_test(async t => {
   const div = addDiv(t, {
     style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
   });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
 
   const animation = div.getAnimations()[0];
   assert_equals(
     animation.currentTime,
     0,
     'currentTime should initially be zero'
   );
@@ -38,17 +38,17 @@ promise_test(async t => {
   assert_equals(getComputedStyle(div).marginLeft, '150px');
 }, 'currentTime can be used to seek a CSS transition');
 
 promise_test(async t => {
   const div = addDiv(t, {
     style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
   });
   const eventWatcher = new EventWatcher(t, div, 'transitionend');
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
 
   const animation = div.getAnimations()[0];
   await animation.ready;
 
   const marginLeft = () => parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft(div), 100);
 
@@ -63,17 +63,17 @@ promise_test(async t => {
   assert_equals(marginLeft(div), 200);
 }, 'Skipping forwards through transition');
 
 promise_test(async t => {
   const div = addDiv(t, {
     style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
   });
   const eventWatcher = new EventWatcher(t, div, 'transitionend');
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
 
   const animation = div.getAnimations()[0];
   await animation.ready;
 
   // Unlike in the case of CSS animations, we cannot skip to the end and skip
   // backwards since when we reach the end the transition effect is removed and
   // changes to the Animation object no longer affect the element. For
@@ -85,17 +85,17 @@ promise_test(async t => {
   animation.currentTime = 100 * MS_PER_SEC;
   assert_equals(marginLeft(div), 100);
 }, 'Skipping backwards through transition');
 
 promise_test(async t => {
   const div = addDiv(t, {
     style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
   });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
   const animation = div.getAnimations()[0];
 
   await animation.ready;
 
   assert_throws(
     new TypeError(),
     () => {
--- a/dom/animation/test/css-transitions/test_animation-finished.html
+++ b/dom/animation/test/css-transitions/test_animation-finished.html
@@ -14,17 +14,17 @@
 </style>
 <div id="log"></div>
 <script>
 
 'use strict';
 
 promise_test(async t => {
   const div = addDiv(t, { class: 'animated-div' });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
   const animation = div.getAnimations()[0];
 
   animation.finish();
   await animation.finished;
 
   animation.play();
   const marginLeft = parseFloat(getComputedStyle(div).marginLeft);
--- a/dom/animation/test/css-transitions/test_animation-starttime.html
+++ b/dom/animation/test/css-transitions/test_animation-starttime.html
@@ -8,17 +8,17 @@
 <script>
 
 'use strict';
 
 test(t => {
   const div = addDiv(t, {
     style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
   });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
   const animation = div.getAnimations()[0];
 
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'The start time of a newly-created transition is unresolved');
 
 promise_test(async t => {
   const div = addDiv(t);
@@ -49,17 +49,17 @@ promise_test(async t => {
   assert_less_than(animations[1].startTime, animations[2].startTime,
     'A CSS transition added in a later frame has a later start time');
 }, 'The start time of transitions is based on when they are generated');
 
 test(t => {
   const div = addDiv(t, {
     style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
   });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
   const animation = div.getAnimations()[0];
 
   const timelineTime = animation.timeline.currentTime;
   animation.startTime = timelineTime;
 
   assert_times_equal(
     animation.startTime,
@@ -67,17 +67,17 @@ test(t => {
     'Check setting of startTime actually works'
   );
 }, 'The start time of a transition can be set');
 
 promise_test(async t => {
   const div = addDiv(t, {
     style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
   });
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
   const animation = div.getAnimations()[0];
 
   await animation.ready;
 
   const timelineTime = animation.timeline.currentTime;
   const marginLeft = () => parseFloat(getComputedStyle(div).marginLeft);
 
@@ -91,17 +91,17 @@ promise_test(async t => {
 promise_test(async t => {
   const div = addDiv(t, {
     style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
   });
   const eventWatcher = new EventWatcher(t, div, [
     'transitionstart',
     'transitionend',
   ]);
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   div.style.marginLeft = '200px';
   const animation = div.getAnimations()[0];
 
   await animation.ready;
 
   const timelineTime = animation.timeline.currentTime;
 
   animation.startTime = timelineTime - 100 * MS_PER_SEC;
--- a/dom/animation/test/css-transitions/test_document-get-animations.html
+++ b/dom/animation/test/css-transitions/test_document-get-animations.html
@@ -51,17 +51,17 @@ test(t => {
   const child = addDiv(t);
   parent.appendChild(child);
 
   parent.style.left = '0px';
   parent.style.transition = 'left 10s';
   parent.classList.add('init');
   child.style.left = '0px';
   child.style.transition = 'left 10s';
-  flushComputedStyle(parent);
+  getComputedStyle(parent).left;
 
   parent.style.left = '100px';
   parent.classList.add('change');
   child.style.left = '100px';
 
   const anims = document.getAnimations();
   assert_equals(anims.length, 4,
                 'CSS transition on both pseudo-elements and elements ' +
@@ -74,17 +74,17 @@ test(t => {
                 'The animation targeting the ::after element comes third');
   assert_equals(anims[3].effect.target, child,
                 'The animation targeting the child element comes last');
 }, 'CSS Transitions targetting (pseudo-)elements should have correct order ' +
    'after sorting');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
-  flushComputedStyle(div);
+  getComputedStyle(div).left;
 
   div.style.left = '100px';
   const animations = div.getAnimations();
   assert_equals(animations.length, 1, 'Got transition');
   await animations[0].finished;
 
   assert_equals(document.getAnimations().length, 0,
                 'No animations returned');
--- a/dom/animation/test/css-transitions/test_effect-target.html
+++ b/dom/animation/test/css-transitions/test_effect-target.html
@@ -21,31 +21,31 @@ test(t => {
     'Animation.target is the animatable div');
 }, 'Returned CSS transitions have the correct Animation.target');
 
 test(t => {
   addStyle(t, { '.init::after': 'content: ""; width: 0px; height: 0px; ' +
                                 'transition: all 10s;',
                 '.change::after': 'width: 100px; height: 100px;' });
   const div = addDiv(t, { class: 'init' });
-  flushComputedStyle(div);
+  getComputedStyle(div).width;
   div.classList.add('change');
 
   const anims = document.getAnimations();
   assert_equals(anims.length, 2,
                 'Got transitions running on ::after pseudo element');
   assert_equals(anims[0].effect.target, anims[1].effect.target,
                 'Both transitions return the same target object');
 }, 'effect.target should return the same CSSPseudoElement object each time');
 
 test(t => {
   addStyle(t, { '.init::after': 'content: ""; width: 0px; transition: all 10s;',
                 '.change::after': 'width: 100px;' });
   const div = addDiv(t, { class: 'init' });
-  flushComputedStyle(div);
+  getComputedStyle(div).width;
   div.classList.add('change');
   const pseudoTarget = document.getAnimations()[0].effect.target;
   const effect = new KeyframeEffect(pseudoTarget,
                                     { background: ["blue", "red"] },
                                     3000);
   const newAnim = new Animation(effect, document.timeline);
   newAnim.play();
 
--- a/dom/animation/test/css-transitions/test_element-get-animations.html
+++ b/dom/animation/test/css-transitions/test_element-get-animations.html
@@ -20,17 +20,17 @@ promise_test(async t => {
   div.style.top = '100px';
 
   assert_equals(div.getAnimations().length, 2);
 }, 'getAnimations returns one Animation per transitioning property');
 
 test(t => {
   const div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
 
-  flushComputedStyle(div);
+  getComputedStyle(div).left;
   div.style.left = '100px';
 
   assert_class_string(div.getAnimations()[0], 'CSSTransition',
                       'Interface of returned animation is CSSTransition');
 }, 'getAnimations returns CSSTransition objects for CSS Transitions');
 
 promise_test(async t => {
   const div = addDiv(t);
--- a/dom/animation/test/css-transitions/test_event-dispatch.html
+++ b/dom/animation/test/css-transitions/test_event-dispatch.html
@@ -43,17 +43,17 @@ const setupTransition = (t, transitionSt
   // Note that this TransitionEventHandler should be created before EventWatcher
   // to capture all events in the handler prior to the EventWatcher since
   // testharness.js proceeds when the EventWatcher received watching events.
   const handler = new TransitionEventHandler(div);
   const watcher = new EventWatcher(t, div, [ 'transitionrun',
                                              'transitionstart',
                                              'transitionend',
                                              'transitioncancel' ]);
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
 
   div.style.marginLeft = '100px';
   const transition = div.getAnimations()[0];
 
   return { transition, watcher, div, handler };
 };
 
 // On the next frame (i.e. when events are queued), whether or not the
@@ -103,17 +103,17 @@ promise_test(async t => {
 promise_test(async t => {
   const { transition, watcher, div } =
     setupTransition(t, 'margin-left 100s 100s');
 
   await Promise.all([ watcher.wait_for('transitionrun'), transition.ready ]);
 
   // Make idle
   div.style.display = 'none';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   const evt = await watcher.wait_for('transitioncancel');
   assert_equals(evt.elapsedTime, 0.0);
 }, 'Before -> Idle (display: none)');
 
 promise_test(async t => {
   const { transition, watcher } =
     setupTransition(t, 'margin-left 100s 100s');
 
@@ -153,17 +153,17 @@ promise_test(async t => {
   const { transition, watcher, div } = setupTransition(t, 'margin-left 100s');
 
   // Seek to Active start position.
   transition.pause();
   await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
 
   // Make idle
   div.style.display = 'none';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   const evt = await watcher.wait_for('transitioncancel');
   assert_equals(evt.elapsedTime, 0.0);
 }, 'Active -> Idle, no delay (display: none)');
 
 promise_test(async t => {
   const { transition, watcher } = setupTransition(t, 'margin-left 100s');
 
   await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
@@ -183,17 +183,17 @@ promise_test(async t => {
   transition.pause();
 
   // Seek to Active phase.
   transition.currentTime = 100 * MS_PER_SEC;
   await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
 
   // Make idle
   div.style.display = 'none';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   const evt = await watcher.wait_for('transitioncancel');
   assert_equals(evt.elapsedTime, 0.0);
 }, 'Active -> Idle, with positive delay (display: none)');
 
 promise_test(async t => {
   const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
 
   // Seek to Active phase.
@@ -214,17 +214,17 @@ promise_test(async t => {
   // Pause so the currentTime is fixed and we can accurately compare the event
   // time in transition cancel events.
   transition.pause();
 
   await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
 
   // Make idle
   div.style.display = 'none';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   const evt = await watcher.wait_for('transitioncancel');
   assert_equals(evt.elapsedTime, 50.0);
 }, 'Active -> Idle, with negative delay (display: none)');
 
 promise_test(async t => {
   const { transition, watcher } = setupTransition(t, 'margin-left 100s -50s');
 
   await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
@@ -339,17 +339,17 @@ promise_test(async t => {
 promise_test(async t => {
   const { transition, watcher, div } =
     setupTransition(t, 'margin-left 100s 100s');
 
   await watcher.wait_for('transitionrun');
 
   // Make idle
   div.style.display = 'none';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   await watcher.wait_for('transitioncancel');
 
   transition.cancel();
   // Then wait a couple of frames and check that no event was dispatched
   await waitForAnimationFrames(2);
 }, 'Call Animation.cancel after canceling transition.');
 
 promise_test(async t => {
@@ -368,17 +368,17 @@ promise_test(async t => {
 promise_test(async t => {
   const { transition, watcher, div } =
     setupTransition(t, 'margin-left 100s 100s');
 
   await watcher.wait_for('transitionrun');
 
   // Make idle
   div.style.display = 'none';
-  flushComputedStyle(div);
+  getComputedStyle(div).marginLeft;
   transition.play();
   transition.cancel();
   await watcher.wait_for('transitioncancel');
 
   // Then wait a couple of frames and check that no event was dispatched
   await waitForAnimationFrames(2);
 }, 'Call Animation.cancel after restarting transition immediately');
 
--- a/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
+++ b/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
@@ -19,17 +19,17 @@
 }
 </style>
 <div id="log"></div>
 <script>
 'use strict';
 
 test(t => {
   const div = addDiv(t, { class: 'init' });
-  flushComputedStyle(div);
+  getComputedStyle(div).width;
   div.classList.add('change');
 
   // Sanity checks
   assert_equals(document.getAnimations().length, 3,
                 'Got expected number of animations on document');
   const pseudoTarget = document.getAnimations()[0].effect.target;
   assert_class_string(pseudoTarget, 'CSSPseudoElement',
                       'Got pseudo-element target');
--- a/dom/animation/test/css-transitions/test_setting-effect.html
+++ b/dom/animation/test/css-transitions/test_setting-effect.html
@@ -8,64 +8,64 @@
 <script>
 'use strict';
 
 test(t => {
   const div = addDiv(t);
   div.style.left = '0px';
 
   div.style.transition = 'left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).left;
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
 
   transition.effect = null;
 
   assert_equals(transition.transitionProperty, 'left');
 }, 'After setting a transition\'s effect to null, it still reports the'
    + ' original transition property');
 
 promise_test(async t => {
   const div = addDiv(t);
   div.style.left = '0px';
 
   div.style.transition = 'left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).left;
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   transition.effect = null;
   assert_equals(transition.playState, 'finished');
 }, 'After setting a transition\'s effect to null, it becomes finished');
 
 promise_test(async t => {
   const div = addDiv(t);
   div.style.left = '0px';
 
   div.style.transition = 'left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).left;
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   transition.effect = null;
   assert_equals(getComputedStyle(div).left, '100px');
 }, 'After setting a transition\'s effect to null, style is updated');
 
 promise_test(async t => {
   const div = addDiv(t);
   div.style.left = '0px';
   div.style.width = '0px';
 
   div.style.transition = 'left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).left;
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   transition.currentTime = 50 * MS_PER_SEC;
   transition.effect = new KeyframeEffect(div,
                                          { left: [ '0px' , '100px'] },
@@ -76,34 +76,34 @@ promise_test(async t => {
    + ' the transition becomes finished');
 
 promise_test(async t => {
   const div = addDiv(t);
   div.style.left = '0px';
   div.style.width = '0px';
 
   div.style.transition = 'left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).left;
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   transition.effect = new KeyframeEffect(div,
                                          { marginLeft: [ '0px' , '100px'] },
                                          100 * MS_PER_SEC);
   assert_equals(transition.transitionProperty, 'left');
 }, 'After setting a new keyframe effect targeting different properties,'
    + ' the transition continues to report the original transition property');
 
 promise_test(async t => {
   const div = addDiv(t);
   div.style.left = '0px';
   div.style.width = '0px';
 
   div.style.transition = 'left 100s';
-  flushComputedStyle(div);
+  getComputedStyle(div).left;
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   assert_true(transition.pending);
 
   transition.effect = new KeyframeEffect(div,
                                          { marginLeft: [ '0px' , '100px'] },
                                          100 * MS_PER_SEC);