Implementing promise-based commit for driving OffscreenCanvas animations

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 e881731bd7213d29b46d26b1af6d58844b40d020..8f6be1e313e66fc8278e36090f14ad92c443188c 100644
--- a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html
+++ b/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html
@@ -16,16 +16,19 @@ that the baseline images are regenerated on the next run.
 </style>
 <script>
 var g_swapsBeforeAck = 15;
+var g_frameNumber = 0;
+var gl;
 
 function main()
 {
-  draw();
-  waitForFinish();
+  var canvas = document.getElementById("c");
+  var offscreenCanvas = canvas.transferControlToOffscreen();
+  var gl = offscreenCanvas.getContext("webgl");
+  drawLoop();
 }
 
-function drawTriangle(canvas)
+function drawTriangle()
 {
-  var gl = canvas.getContext("webgl");
   gl.clearColor(0, 1, 0, 1);
   gl.clear(gl.COLOR_BUFFER_BIT);
 
@@ -64,15 +67,25 @@ function drawTriangle(canvas)
   gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);
 
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
-
-  gl.commit();
 }
 
-function draw()
+function drawLoop()
 {
-  var canvas = document.getElementById("c");
-  var offscreenCanvas = canvas.transferControlToOffscreen();
-  drawTriangle(offscreenCanvas);
+  if (g_frameNumber < 3) {
+    gl.clearColor(1, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    g_frameNumber++;
+    gl.commit().then(drawLoop);
+  } else {
+    drawTriangle(offscreenCanvas);
+    gl.commit();
+
+    // The following clear is never committed
+    gl.clearColor(0, 0, 1, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    waitForFinish();
+  }
 }
 
 function waitForFinish()