script: Unify script-based "update the rendering" and throttle it to 60 FPS

Instead of running "update the rendering" at every IPC message, only run
it when a timeout has occured in script. In addition, avoid updating the
rendering if a rendering update isn't necessary. This should greatly
reduce the amount of processing that has to happen in script.

Because we are running many fewer calls to "update the rendering" it is
reasonable now to ensure that these always work the same way. In
particular, we always run rAF and update the animation timeline when
updating the ernder

In addition, pull the following things out of reflow:

 - Code dealing with informing the Constellation that a Pipeline has
   become Idle when waiting for a screenshot.
 - Detecting when it is time to fulfill the `document.fonts.ready`
   promise.

The latter means that reflow can never cause a garbage collection,
making timing of reflows more consistent and simplifying many callsites
that need to do script queries.

Followup changes will seek to simplify the way that ScriptThread-driven
animation timeouts happen even simpler.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>

tests/wpt/meta/css/css-cascade/layer-statement-before-import.html.ini

@@ -1,3 +0,0 @@
-[layer-statement-before-import.html]
-  [insert other rules before the first layer statement without imports]
-    expected: FAIL

tests/wpt/mozilla/meta/MANIFEST.json

@@ -12595,7 +12595,7 @@
       ]
      ],
      "basic-transition.html": [
-      "b80e8a666a6e6202b4ecafe628ef00ebcecfe168",
+      "c3461d3a5f9f1259296168742028db3bd4fc3668",
       [
        null,
        {}
@@ -12623,7 +12623,7 @@
       ]
      ],
      "transition-raf.html": [
-      "c38404503408e04b3c75b42df18ec3a7ec0819f5",
+      "aa3ed54e3e08a190f227c87165523306aed5a6bc",
       [
        null,
        {}
@@ -12743,7 +12743,7 @@
      ]
     ],
     "stylesheet_media_queries.html": [
-     "49956367a16c3de98d173d4cf5692c05451340a0",
+     "d04eb4b23f107b1e4d127cf633d4155ab3bdf629",
      [
       null,
       {}

tests/wpt/mozilla/tests/css/animations/basic-transition.html

@@ -20,15 +20,26 @@ var div = document.getElementById('check-me');
 var span = div.childNodes[0];
 async_test(function(t) {
   window.addEventListener('load', function() {
-    assert_equals(getComputedStyle(div).getPropertyValue('background-color'), 'rgb(255, 0, 0)');
-    div.id = "check-me-2";
-    requestAnimationFrame(function() {
-      var test = new window.TestBinding();
+    var test = new window.TestBinding();
+
+    div.addEventListener("transitionstart", () => {
+      // The transition should have just started so the current value of the style should
+      // not be the value expected after the transition.
+      assert_not_equals(getComputedStyle(div).getPropertyValue('background-color'), 'rgb(0, 0, 0)');
       test.advanceClock(2000);
-      span.innerHTML = "a";
+    });
+
+    div.addEventListener("transitionend", () => {
+      // The transition should be finished so the value of the style should be the final one.
       assert_equals(getComputedStyle(div).getPropertyValue('background-color'), 'rgb(0, 0, 0)');
       t.done();
     });
+
+    // The starting value should be the one set in the style.
+    assert_equals(getComputedStyle(div).getPropertyValue('background-color'), 'rgb(255, 0, 0)');
+
+    // Start the transition.
+    div.id = "check-me-2";
   })
 })
 </script>

tests/wpt/mozilla/tests/css/animations/transition-raf.html

@@ -32,9 +32,12 @@ async_test(function(t) {
 
   window.addEventListener('load', function() {
     assert_equals(getComputedStyle(box).getPropertyValue('width'), '100px');
+
+    box.addEventListener("transitionstart", () => {
+      // Let the first restyle run at zero, then advance the clock.
+      test.advanceClock(500);
+    });
     box.className = "expose";
-    // Let the first restyle run at zero, then advance the clock.
-    setTimeout(function() { test.advanceClock(500) }, 0);
   });
 }, "Transitions should work during RAF loop")
 </script>

tests/wpt/mozilla/tests/css/stylesheet_media_queries.html

@@ -14,8 +14,10 @@ window.onload = test.step_func(function() {
   assert_equals(frame.contentWindow.getComputedStyle(element).backgroundColor, "rgb(255, 0, 0)");
   frame.width = "300";
   frameDoc.documentElement.offsetWidth; // Force layout
-  window.requestAnimationFrame(test.step_func_done(function () {
+  window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(test.step_func_done(function () {
       assert_equals(frame.contentWindow.getComputedStyle(element).backgroundColor, "rgb(0, 255, 0)");
-  }));
+    }))
+  });
 });
 </script>