Implementing promise-based commit for driving OffscreenCanvas animations

content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html

Index: content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html
diff --git a/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html b/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html
index 4aba7ada0a60a36054c84fd586aff35a9e3184c2..42e4ae6f4b3616dfbd3c7dea70f7718110678e24 100644
--- a/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html
+++ b/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html
@@ -19,24 +19,37 @@ var g_swapsBeforeAck = 15;
 
 function main()
 {
-  draw();
-  waitForFinish();
+  drawLoop();
 }
 
-function draw()
+var g_animationFrameNumber = 0;
+
+function drawLoop()
 {
   var canvas = document.getElementById("c");
   var offscreenCanvas = canvas.transferControlToOffscreen();
   var offscreen2d = offscreenCanvas.getContext("2d");
-  offscreen2d.fillStyle = "red";
-  offscreen2d.fillRect(0, 0, 100, 100);
-  offscreen2d.fillStyle = "green";
-  offscreen2d.fillRect(100, 0, 100, 100);
-  offscreen2d.fillStyle = "blue";
-  offscreen2d.fillRect(0, 100, 100, 100);
-  offscreen2d.fillStyle = "black";
-  offscreen2d.fillRect(100, 100, 100, 100);
-  offscreen2d.commit();
+  if (g_animationFrameNumber < 3) {
+    offscreen2d.fillStyle = "red";
+    offscreen2d.fillRect(0, 0, 200, 200);
+    g_animationFrameNumber++;
+    offscreen2d.commit().then(drawLoop);
+  } else {
+    offscreen2d.fillStyle = "red";
+    offscreen2d.fillRect(0, 0, 100, 100);
+    offscreen2d.fillStyle = "green";
+    offscreen2d.fillRect(100, 0, 100, 100);
+    offscreen2d.fillStyle = "blue";
+    offscreen2d.fillRect(0, 100, 100, 100);
+    offscreen2d.fillStyle = "black";
+    offscreen2d.fillRect(100, 100, 100, 100);
+    offscreen2d.commit();
+
+    // The following fill is never committed
+    offscreen2d.fillStyle = "blue";
+    offscreen2d.fillRect(0, 0, 200, 200);
+    waitForFinish();
+  }
 }
 
 function waitForFinish()