Make OffscreenCanvas animation in sync with its placeholder canvas's parent frame rate

content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html

Index: content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html
diff --git a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html b/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html
index 95bf093e4d951c397c62c3621ba45126152ffba2..a00828dee66a2ad83107701773e465848925ff6e 100644
--- a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html
+++ b/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html
@@ -23,7 +23,9 @@ function main()
 {
   var canvas = document.getElementById("c");
   var offscreenCanvas = canvas.transferControlToOffscreen();
-  gl = offscreenCanvas.getContext("webgl");
+  gl = offscreenCanvas.getContext("webgl", {preserveDrawingBuffer: true});
+  gl.clearColor(1, 0, 0, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
   drawLoop();
 }
 
@@ -71,11 +73,21 @@ function drawTriangle()
 
 function drawLoop()
 {
-  if (g_frameNumber < 3) {
-    gl.clearColor(1, 0, 0, 1);
-    gl.clear(gl.COLOR_BUFFER_BIT);
+  if (g_frameNumber < 10) {
     g_frameNumber++;
-    gl.commit().then(drawLoop);
+    // Purposely intersperse overdraw and non-overdraw commit cases to see
+    // if OffscreenCanvas commit() handles both cases well.
+    if (0 == g_frameNumber % 2) {
+      // When promise is used, the next drawLoop() is called after the first
+      // frame is resolved; therefore there is no overdraw in this case.
+      gl.commit().then(drawLoop);
+    } else {
+      // When the next drawLoop() is invoked regardless the promise resolve
+      // status of the previous commit(), the frame committed in the next
+      // drawLoop() is very likely to be overdrawn.
+      gl.commit();
+      drawLoop();
+    }
   } else {
     drawTriangle();
     gl.commit();