Implementing promise-based commit for driving OffscreenCanvas animations

content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html

Index: content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html
diff --git a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html b/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html
index 77cb4c934e8c22dc80ff3aaf8dc2df5195dc45dd..fb19d6cf6c49cf334b153ef4f1245607526eba28 100644
--- a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html
+++ b/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html
@@ -15,9 +15,12 @@ that the baseline images are regenerated on the next run.
 }
 </style>
 <script id="myWorker" type="text/worker">
-function drawTriangle(canvas)
+
+var g_frameNumber = 0;
+var gl;
+
+function drawTriangle()
 {
-  var gl = canvas.getContext("webgl");
   gl.clearColor(0, 1, 0, 1);
   gl.clear(gl.COLOR_BUFFER_BIT);
 
@@ -56,14 +59,31 @@ function drawTriangle(canvas)
   gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);
 
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
+}
+
+function drawLoop()
+{
+  if (g_frameNumber < 3) {
+    gl.clearColor(1, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    g_frameNumber++;
+    gl.commit().then(drawLoop);
+  } else {
+    drawTriangle();
+    gl.commit();
 
-  gl.commit();
+    // The following clear is never committed
+    gl.clearColor(0, 0, 1, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    self.postMessage("");
+  }
 }
 
 self.onmessage = function(e) {
   var transferredOffscreenCanvas = e.data;
-  drawTriangle(transferredOffscreenCanvas);
-  self.postMessage("");
+  gl = transferredOffscreenCanvas.getContext("webgl");
+  drawLoop();
 };
 </script>
 <script>
@@ -98,7 +118,7 @@ function waitForFinish()
   } else {
     g_swapsBeforeAck--;
     document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
-    window.webkitRequestAnimationFrame(waitForFinish);
+    window.requestAnimationFrame(waitForFinish);
   }
 }
 </script>