Implementing promise-based commit for driving OffscreenCanvas animations

content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html

Index: content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html
diff --git a/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html b/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html
index 1c02a62e1b22e3ac199ddc32b866d293b7094fb7..f7d4b177336fddf5d5115993ce5d78b07e5a2b0a 100644
--- a/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html
+++ b/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html
@@ -15,9 +15,24 @@ that the baseline images are regenerated on the next run.
 }
 </style>
 <script id="myWorker" type="text/worker">
+
+var g_offscreen2d;
+var g_animationFrameNumber = 0;
+
 self.onmessage = function(e) {
-    var transferredCanvas = e.data;
-    var offscreen2d = transferredCanvas.getContext("2d");
+  var transferredCanvas = e.data;
+  g_offscreen2d = transferredCanvas.getContext("2d");
+  drawLoop();
+}  
+
+function drawLoop()
+{
+  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";
@@ -26,9 +41,14 @@ self.onmessage = function(e) {
     offscreen2d.fillRect(0, 100, 100, 100);
     offscreen2d.fillStyle = "black";
     offscreen2d.fillRect(100, 100, 100, 100);
-    offscreen2d.commit();
+    offscreen2d.commit()
+
+    // The following fill is never committed
+    offscreen2d.fillStyle = "blue";
+    offscreen2d.fillRect(0, 0, 200, 200);    
     self.postMessage("");
-};
+  }
+}
 </script>
 <script>
 var g_swapsBeforeAck = 15;