Index: content/test/data/gpu/pixel_offscreenCanvas_transferToImageBitmap_worker.html |
diff --git a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html b/content/test/data/gpu/pixel_offscreenCanvas_transferToImageBitmap_worker.html |
similarity index 50% |
copy from content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html |
copy to content/test/data/gpu/pixel_offscreenCanvas_transferToImageBitmap_worker.html |
index 2af3576125e3730a6d81b72c04324963504518f1..9a14a05572e40089cba8d82231be646e2c7db973 100644 |
--- a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html |
+++ b/content/test/data/gpu/pixel_offscreenCanvas_transferToImageBitmap_worker.html |
@@ -8,7 +8,7 @@ that the baseline images are regenerated on the next run. |
<html> |
<head> |
-<title>OffscreenCanvas commit flow on worker thread: red square on white background.</title> |
+<title>OffscreenCanvas transferToImageBitmap on worker thread: green and blue squares on white background.</title> |
<style type="text/css"> |
.nomargin { |
margin: 0px auto; |
@@ -16,12 +16,19 @@ that the baseline images are regenerated on the next run. |
</style> |
<script id="myWorker" type="text/worker"> |
self.onmessage = function(e) { |
- var transferredOffscreenCanvas = e.data; |
- var gl = transferredOffscreenCanvas.getContext("webgl"); |
- gl.clearColor(1.0, 0.0, 0.0, 1.0); |
- gl.clear(gl.COLOR_BUFFER_BIT); |
- gl.commit(); |
- self.postMessage(""); |
+ var canvas1 = new OffscreenCanvas(100, 100); |
+ var gl1 = canvas1.getContext('webgl'); |
+ gl1.clearColor(0.0, 1.0, 0.0, 1.0); |
+ gl1.clear(gl1.COLOR_BUFFER_BIT); |
+ |
+ var canvas2 = new OffscreenCanvas(100, 100); |
+ var gl2 = canvas2.getContext('webgl'); |
+ gl2.clearColor(0.0, 0.0, 1.0, 1.0); |
+ gl2.clear(gl2.COLOR_BUFFER_BIT); |
+ |
+ var image1 = canvas1.transferToImageBitmap(); |
+ var image2 = canvas2.transferToImageBitmap(); |
+ self.postMessage({bitmap1: image1, bitmap2: image2}, [image1, image2]); |
}; |
</script> |
<script> |
@@ -39,13 +46,22 @@ function main() |
function draw() |
{ |
- var canvas = document.getElementById("c"); |
- var offscreenCanvas = canvas.transferControlToOffscreen(); |
var worker = makeWorker(document.getElementById("myWorker").textContent); |
- worker.postMessage(offscreenCanvas, [offscreenCanvas]); |
- worker.onmessage = function (e) { |
+ |
+ worker.onmessage = function(msg) { |
+ var bitmap1 = msg.data.bitmap1; |
+ var bitmap2 = msg.data.bitmap2; |
+ var canvas1 = document.getElementById("canvas1"); |
+ var ctx1 = canvas1.getContext('bitmaprenderer'); |
+ ctx1.transferFromImageBitmap(bitmap1); |
+ |
+ var canvas2 = document.getElementById('canvas2'); |
+ var ctx2 = canvas2.getContext('bitmaprenderer'); |
+ ctx2.transferFromImageBitmap(bitmap2); |
waitForFinish(); |
} |
+ |
+ worker.postMessage(""); |
} |
function waitForFinish() |
@@ -65,7 +81,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> |