content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html - chromium/src - Git at Google

 <!DOCTYPE HTML>

 <!-- READ BEFORE UPDATING:
 If this test is updated make sure to increment the "revision" value of the
 associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ensure
 that the baseline images are regenerated on the next run.
 -->

 <html>
 <head>
 <title>OffscreenCanvas 2d commit flow on worker thread: Two Canvases</title>
 <style type="text/css">
 .nomargin {
   margin: 0px auto;
 }
 </style>
 <script id="myWorker" type="text/worker">
 /* This pixel test checks the following:
     1. Whether submission of frames for multiple canvases happen about the same
        time for OffscreenCanvas.commit() that are invoked in the same JS task.
     2. Whether overdraw frame in one animation loop is handled well.
     3. Whether the drawn 2d image is position upright in commit().
     4. Drawing to OffscreenCanvas without commit() has no rendering results.

     Correct end result of this test: The left canvas shows a seven-spike skyblue
     star on the top-left corner of a green background and the right canvas shows
     a sky-blue fill.
 */
 var g_ctx1, g_ctx2;
 var g_asyncCallbackNumber = 2;

 self.onmessage = function(e) {
   g_ctx1 = e.data.offscreenCanvas1.getContext("2d");
   g_ctx2 = e.data.offscreenCanvas2.getContext("2d");

   startTest();
 }

 function startTest() {
   g_ctx1.fillStyle = "green";
   g_ctx1.fillRect(0, 0, 300, 300);
   // The promise returned by this g_ctx1.commit() must be resolved at
   // about the same time as the other g_ctx2.commit() below as they are in the
   // same JS task.
   g_ctx1.commit().then(function() {
     g_ctx2.fillRect(0, 0, 300, 300);
     // This g_ctx2.commit() must happen after the other g_ctx2.commit() below.
     g_ctx2.commit();
     if (--g_asyncCallbackNumber == 0) self.postMessage("");
   });

   function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
     var rot = Math.PI / 2 * 3;
     var x = cx;
     var y = cy;
     var step = Math.PI / spikes;

     ctx.beginPath();
     ctx.moveTo(cx, cy - outerRadius);
     for (i = 0; i < spikes; i++) {
       x = cx + Math.cos(rot) * outerRadius;
       y = cy + Math.sin(rot) * outerRadius;
       ctx.lineTo(x, y);
       rot += step;

       x = cx + Math.cos(rot) * innerRadius;
       y = cy + Math.sin(rot) * innerRadius;
       ctx.lineTo(x, y);
       rot += step;
     }
     ctx.lineTo(cx, cy - outerRadius);
     ctx.closePath();
     ctx.lineWidth = 5;
     ctx.strokeStyle = 'black';
     ctx.stroke();
     ctx.fillStyle = 'skyblue';
     ctx.fill();
   }

   // Do something complex to g_ctx2.
   g_ctx2.fillStyle = "blue";
   g_ctx2.fillRect(0, 0, 300, 300);
   drawStar(g_ctx2, 150, 150, 25, 80, 60);
   // This g_ctx2.commit() must be resolved at about the same time as the first
   // g_ctx1.commit() above because they are in the same JS task, no matter how
   // complex the drawing operation is.
   g_ctx2.commit().then(function() {
     drawStar(g_ctx1, 100, 100, 7, 80, 30);
     g_ctx1.commit();

     // The following fill is never committed
     g_ctx1.fillStyle = "red";
     g_ctx1.fillRect(0, 0, 200, 200);
     if (--g_asyncCallbackNumber == 0) self.postMessage("");
   });

 }

 </script>
 <script>
 var g_swapsBeforeAck = 15;

 function makeWorker(script)
 {
    var blob = new Blob([script]);
    return new Worker(URL.createObjectURL(blob));
 }

 function waitForFinish()
 {
   if (g_swapsBeforeAck == 0) {
     domAutomationController.setAutomationId(1);
     domAutomationController.send("SUCCESS");
   } else {
     g_swapsBeforeAck--;
     document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
     requestAnimationFrame(waitForFinish);
   }
 }

 function main()
 {
   var offscreenCanvas1 = document.getElementById("canvas1").transferControlToOffscreen();
   var offscreenCanvas2 = document.getElementById("canvas2").transferControlToOffscreen();

   var worker = makeWorker(document.getElementById("myWorker").textContent);
   worker.onmessage = function (e) {
       waitForFinish();
   };
   worker.postMessage(
       {offscreenCanvas1: offscreenCanvas1,
        offscreenCanvas2: offscreenCanvas2},
       [offscreenCanvas1, offscreenCanvas2]);
 }
 </script>
 </head>
 <body onload="main()">
 <div style="position:relative; width:600px; height:300px; background-color:white">
 </div>
 <div id="container" style="position:absolute; top:0px; left:0px">
 <canvas id="canvas1" width="300" height="300" class="nomargin"></canvas>
 <canvas id="canvas2" width="300" height="300" class="nomargin"></canvas>
 </div>
 </body>
 </html>
	<!DOCTYPE HTML>

	<!-- READ BEFORE UPDATING:
	If this test is updated make sure to increment the "revision" value of the
	associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ensure
	that the baseline images are regenerated on the next run.
	-->

	<html>
	<head>
	<title>OffscreenCanvas 2d commit flow on worker thread: Two Canvases</title>
	<style type="text/css">
	.nomargin {
	margin: 0px auto;
	}
	</style>
	<script id="myWorker" type="text/worker">
	/* This pixel test checks the following:
	1. Whether submission of frames for multiple canvases happen about the same
	time for OffscreenCanvas.commit() that are invoked in the same JS task.
	2. Whether overdraw frame in one animation loop is handled well.
	3. Whether the drawn 2d image is position upright in commit().
	4. Drawing to OffscreenCanvas without commit() has no rendering results.

	Correct end result of this test: The left canvas shows a seven-spike skyblue
	star on the top-left corner of a green background and the right canvas shows
	a sky-blue fill.
	*/
	var g_ctx1, g_ctx2;
	var g_asyncCallbackNumber = 2;

	self.onmessage = function(e) {
	g_ctx1 = e.data.offscreenCanvas1.getContext("2d");
	g_ctx2 = e.data.offscreenCanvas2.getContext("2d");

	startTest();
	}

	function startTest() {
	g_ctx1.fillStyle = "green";
	g_ctx1.fillRect(0, 0, 300, 300);
	// The promise returned by this g_ctx1.commit() must be resolved at
	// about the same time as the other g_ctx2.commit() below as they are in the
	// same JS task.
	g_ctx1.commit().then(function() {
	g_ctx2.fillRect(0, 0, 300, 300);
	// This g_ctx2.commit() must happen after the other g_ctx2.commit() below.
	g_ctx2.commit();
	if (--g_asyncCallbackNumber == 0) self.postMessage("");
	});

	function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
	var rot = Math.PI / 2 * 3;
	var x = cx;
	var y = cy;
	var step = Math.PI / spikes;

	ctx.beginPath();
	ctx.moveTo(cx, cy - outerRadius);
	for (i = 0; i < spikes; i++) {
	x = cx + Math.cos(rot) * outerRadius;
	y = cy + Math.sin(rot) * outerRadius;
	ctx.lineTo(x, y);
	rot += step;

	x = cx + Math.cos(rot) * innerRadius;
	y = cy + Math.sin(rot) * innerRadius;
	ctx.lineTo(x, y);
	rot += step;
	}
	ctx.lineTo(cx, cy - outerRadius);
	ctx.closePath();
	ctx.lineWidth = 5;
	ctx.strokeStyle = 'black';
	ctx.stroke();
	ctx.fillStyle = 'skyblue';
	ctx.fill();
	}

	// Do something complex to g_ctx2.
	g_ctx2.fillStyle = "blue";
	g_ctx2.fillRect(0, 0, 300, 300);
	drawStar(g_ctx2, 150, 150, 25, 80, 60);
	// This g_ctx2.commit() must be resolved at about the same time as the first
	// g_ctx1.commit() above because they are in the same JS task, no matter how
	// complex the drawing operation is.
	g_ctx2.commit().then(function() {
	drawStar(g_ctx1, 100, 100, 7, 80, 30);
	g_ctx1.commit();

	// The following fill is never committed
	g_ctx1.fillStyle = "red";
	g_ctx1.fillRect(0, 0, 200, 200);
	if (--g_asyncCallbackNumber == 0) self.postMessage("");
	});

	}

	</script>
	<script>
	var g_swapsBeforeAck = 15;

	function makeWorker(script)
	{
	var blob = new Blob([script]);
	return new Worker(URL.createObjectURL(blob));
	}

	function waitForFinish()
	{
	if (g_swapsBeforeAck == 0) {
	domAutomationController.setAutomationId(1);
	domAutomationController.send("SUCCESS");
	} else {
	g_swapsBeforeAck--;
	document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
	requestAnimationFrame(waitForFinish);
	}
	}

	function main()
	{
	var offscreenCanvas1 = document.getElementById("canvas1").transferControlToOffscreen();
	var offscreenCanvas2 = document.getElementById("canvas2").transferControlToOffscreen();

	var worker = makeWorker(document.getElementById("myWorker").textContent);
	worker.onmessage = function (e) {
	waitForFinish();
	};
	worker.postMessage(
	{offscreenCanvas1: offscreenCanvas1,
	offscreenCanvas2: offscreenCanvas2},
	[offscreenCanvas1, offscreenCanvas2]);
	}
	</script>
	</head>
	<body onload="main()">
	<div style="position:relative; width:600px; height:300px; background-color:white">
	</div>
	<div id="container" style="position:absolute; top:0px; left:0px">
	<canvas id="canvas1" width="300" height="300" class="nomargin"></canvas>
	<canvas id="canvas2" width="300" height="300" class="nomargin"></canvas>
	</div>
	</body>
	</html>