Bug 1292001 - Modernize test_transitions_replacement_on_busy_frame.ht…

…ml; r=boris

In the next patch we want to add a test for transitions whose start value is
replaced when the transition has been modified using the Web Animations API.
However, first we update the existing test for this replacing behavior to
make it more readable so we can copy it.

Differential Revision: https://phabricator.services.mozilla.com/D64518

--HG--
extra : moz-landing-system : lando

layout/style/test/test_transitions_replacement_on_busy_frame.html

@@ -26,68 +26,73 @@
 
 SimpleTest.waitForExplicitFinish();
 
-var OMTAPrefKey = "layers.offmainthreadcomposition.async-animations";
-var omtaEnabled = SpecialPowers.DOMWindowUtils.layerManagerRemote &&
-                  SpecialPowers.getBoolPref(OMTAPrefKey);
-window.addEventListener("load", function() {
+const OMTAPrefKey = 'layers.offmainthreadcomposition.async-animations';
+const omtaEnabled =
+  SpecialPowers.DOMWindowUtils.layerManagerRemote &&
+  SpecialPowers.getBoolPref(OMTAPrefKey);
+
+window.addEventListener('load', async function() {
   if (!omtaEnabled) {
-    ok(true, "Skipping the test since OMTA is disabled");
+    ok(true, 'Skipping the test since OMTA is disabled');
     SimpleTest.finish();
     return;
   }
 
-  var div = document.getElementById("target");
+  const div = document.getElementById('target');
 
   // Start first transition
-  div.style.transform = "translateX(300px)";
+  div.style.transform = 'translateX(300px)';
   const firstTransition = div.getAnimations()[0];
 
   // Wait for first transition to start running on the main thread and
   // compositor.
-  firstTransition.ready.then(waitForPaints).then(() => {
-    var previousPropertyValue;
-    var previousKeyframeValue;
-    var secondTransition;
+  await firstTransition.ready;
+  await waitForPaints();
+
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  // Start second transition
+  div.style.transform = 'translateX(600px)';
+  const secondTransition = div.getAnimations()[0];
 
-    requestAnimationFrame(function() {
-      // Start second transition
-      div.style.transform = "translateX(600px)";
-      secondTransition = div.getAnimations()[0];
+  const originalProperties = SpecialPowers.wrap(
+    secondTransition.effect
+  ).getProperties();
+  const previousPropertyValue = originalProperties[0].values[0].value;
+  const previousKeyframeValue = secondTransition.effect.getKeyframes()[0]
+    .transform;
 
-      var properties =
-        SpecialPowers.wrap(secondTransition.effect).getProperties();
-      previousPropertyValue = properties[0].values[0].value;
-      previousKeyframeValue =
-        secondTransition.effect.getKeyframes()[0].transform;
-    });
+  // Tie up main thread for 300ms. In the meantime, the first transition
+  // will continue running on the compositor. If we don't update the start
+  // point of the second transition, it will appear to jump when it starts.
+  const startTime = performance.now();
+  while (performance.now() - startTime < 300);
 
-    requestAnimationFrame(function() {
-      // Tie up main thread for 300ms. In the meantime, the first transition
-      // will continue running on the compositor. If we don't update the start
-      // point of the second transition, it will appear to jump when it starts.
-      var startTime = performance.now();
-      while (performance.now() - startTime < 300);
+  // Ensure that our paint process has been done.
+  //
+  // Note that requestAnimationFrame is not suitable here since on Android
+  // there is a case where the paint process has not completed even when the
+  // requestAnimationFrame callback is run (and it is during the paint
+  // process that we update the transition start point).
+  await waitForPaints();
 
-      // Ensure that our paint process has been done.
-      // Note that requestAnimationFrame is not suitable here since on Android
-      // there is a case where the paint process has not completed even when the
-      // requestAnimationFrame callback is run (and it is during the paint
-      // process that we update the transition start point).
-      waitForAllPaints(function() {
-        var properties =
-          SpecialPowers.wrap(secondTransition.effect).getProperties();
-        var currentPropertyValue = properties[0].values[0].value;
-        isnot(currentPropertyValue, previousPropertyValue,
-              "From value of transition is updated since the moment when " +
-              "it was generated");
-        isnot(secondTransition.effect.getKeyframes()[0].transform,
-              previousKeyframeValue,
-              "Keyframe value of transition is updated since the moment when " +
-              "it was generated");
-        SimpleTest.finish();
-      });
-    });
-  });
+  const updatedProperties = SpecialPowers.wrap(
+    secondTransition.effect
+  ).getProperties();
+  const currentPropertyValue = updatedProperties[0].values[0].value;
+  isnot(
+    currentPropertyValue,
+    previousPropertyValue,
+    'From value of transition is updated since the moment when ' +
+      'it was generated'
+  );
+  isnot(
+    secondTransition.effect.getKeyframes()[0].transform,
+    previousKeyframeValue,
+    'Keyframe value of transition is updated since the moment when ' +
+      'it was generated'
+  );
+  SimpleTest.finish();
 });
 
 </script>