Index: content/test/data/gpu/pixel_offscreenCanvas_transferToImageBitmap_main.html |
diff --git a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html b/content/test/data/gpu/pixel_offscreenCanvas_transferToImageBitmap_main.html |
similarity index 53% |
copy from content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html |
copy to content/test/data/gpu/pixel_offscreenCanvas_transferToImageBitmap_main.html |
index 3ae0e56c24d2c1864f35277dbaa6b75ff33191d1..89c6d1b66a26a3cfdad6ddba284965e10e5acc54 100644 |
--- a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html |
+++ b/content/test/data/gpu/pixel_offscreenCanvas_transferToImageBitmap_main.html |
@@ -8,7 +8,7 @@ that the baseline images are regenerated on the next run. |
<html> |
<head> |
-<title>OffscreenCanvas commit flow on main thread: green square on white background.</title> |
+<title>OffscreenCanvas transferToImageBitmap on main thread: green and blue squares on white background.</title> |
<style type="text/css"> |
.nomargin { |
margin: 0px auto; |
@@ -25,12 +25,24 @@ function main() |
function draw() |
{ |
- var canvas = document.getElementById("c"); |
- var offscreenCanvas = canvas.transferControlToOffscreen(); |
- var gl = offscreenCanvas.getContext("webgl"); |
+ var width = 100; |
+ var height = 100; |
+ var aCanvas = new OffscreenCanvas(width, height); |
+ var gl = aCanvas.getContext('webgl'); |
gl.clearColor(0.0, 1.0, 0.0, 1.0); |
gl.clear(gl.COLOR_BUFFER_BIT); |
- gl.commit(); |
+ var image1 = aCanvas.transferToImageBitmap(); |
+ gl.clearColor(0.0, 0.0, 1.0, 1.0); |
+ gl.clear(gl.COLOR_BUFFER_BIT); |
+ var image2 = aCanvas.transferToImageBitmap(); |
+ |
+ var canvas1 = document.getElementById("canvas1"); |
+ var ctx1 = canvas1.getContext('bitmaprenderer'); |
+ ctx1.transferFromImageBitmap(image1); |
+ |
+ var canvas2 = document.getElementById('canvas2'); |
+ var ctx2 = canvas2.getContext('bitmaprenderer'); |
+ ctx2.transferFromImageBitmap(image2); |
} |
function waitForFinish() |
@@ -50,7 +62,10 @@ function waitForFinish() |
<div style="position:relative; width:200px; height:200px; background-color:white"> |
</div> |
<div id="container" style="position:absolute; top:0px; left:0px"> |
-<canvas id="c" width="200" height="200" class="nomargin"></canvas> |
+<canvas id="canvas1" width="100" height="100" class="nomargin"></canvas> |
+</div> |
+<div id="container" style="position:absolute; top:0px; left:150px"> |
+<canvas id="canvas2" width="100" height="100" class="nomargin"></canvas> |
</div> |
</body> |
</html> |