content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.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 webgl commit flow on main thread: Two Canvases</title>
 <style type="text/css">
 .nomargin {
   margin: 0px auto;
 }
 </style>
 <script>
 /* 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 webgl 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 upright white
     triangle on a green background and the right canvas shows dark-blue fill.
 */

 var g_swapsBeforeAck = 15;
 var g_asyncCallbackNumber = 2;

 function getOffscreenContext(htmlCanvasId) {
   return document.getElementById(htmlCanvasId).transferControlToOffscreen().getContext("webgl");
 }

 function startTest() {
   var ctx1 = getOffscreenContext("canvas1");
   var ctx2 = getOffscreenContext("canvas2");

   ctx1.clearColor(0, 1, 0, 1);
   ctx1.clear(ctx1.COLOR_BUFFER_BIT);
   // The promise returned by this ctx1.commit() must be resolved at
   // about the same time as the other ctx2.commit() below as they are in the
   // same JS task.
   ctx1.commit().then(function() {
     ctx2.clearColor(0, 0, 1, 1);
     ctx2.clear(ctx2.COLOR_BUFFER_BIT);
     // This ctx2.commit() must happen after the other ctx2.commit() below.
     ctx2.commit();
     if (--g_asyncCallbackNumber == 0) waitForFinish();
   });

   function drawTriangle(gl)
   {
     gl.clearColor(0, 1, 0, 1);
     gl.clear(gl.COLOR_BUFFER_BIT);

     var prog = gl.createProgram();
     var vs = gl.createShader(gl.VERTEX_SHADER);
     gl.shaderSource(vs, ['attribute vec2 pos;',
         'void main() {',
         '  gl_Position = vec4(pos, 0., 1.);',
         '}'].join('\n'));
     gl.compileShader(vs);
     if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
         throw 'failed to compiled shader';
     }
     gl.attachShader(prog, vs);

     var fs = gl.createShader(gl.FRAGMENT_SHADER);
     gl.shaderSource(fs, ['void main() {',
         '  gl_FragColor = vec4(1.);',
         '}'].join('\n'));
     gl.compileShader(fs);
     if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
         throw 'failed to compiled shader';
     }
     gl.attachShader(prog, fs);

     gl.linkProgram(prog);
     if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
         throw "Could not link the shader program!";
     }
     gl.useProgram(prog);

     gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATIC_DRAW);
     var attr = gl.getAttribLocation(prog, 'pos');
     gl.enableVertexAttribArray(attr);
     gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);

     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
   }

   // Do something complex to ctx2.
   drawTriangle(ctx2);
   // This ctx2.commit() must be resolved at about the same time as the first
   // ctx1.commit() above because they are in the same JS task, no matter how
   // complex the drawing operation is.
   ctx2.commit().then(function() {
     drawTriangle(ctx1);
     ctx1.commit();

     // The following clear is never committed
     ctx1.clearColor(1, 0, 0, 1);
     ctx1.clear(ctx1.COLOR_BUFFER_BIT);
     if (--g_asyncCallbackNumber == 0) waitForFinish();
   });

 }

 function main() {
   startTest();
 }

 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);
   }
 }
 </script>
 </head>
 <body onload="main()">
 <div style="position:relative; width:400px; height:200px; background-color:white">
 </div>
 <div id="container" style="position:absolute; top:0px; left:0px">
 <canvas id="canvas1" width="200" height="200" class="nomargin"></canvas>
 <canvas id="canvas2" width="200" height="200" 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 webgl commit flow on main thread: Two Canvases</title>
	<style type="text/css">
	.nomargin {
	margin: 0px auto;
	}
	</style>
	<script>
	/* 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 webgl 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 upright white
	triangle on a green background and the right canvas shows dark-blue fill.
	*/

	var g_swapsBeforeAck = 15;
	var g_asyncCallbackNumber = 2;

	function getOffscreenContext(htmlCanvasId) {
	return document.getElementById(htmlCanvasId).transferControlToOffscreen().getContext("webgl");
	}

	function startTest() {
	var ctx1 = getOffscreenContext("canvas1");
	var ctx2 = getOffscreenContext("canvas2");

	ctx1.clearColor(0, 1, 0, 1);
	ctx1.clear(ctx1.COLOR_BUFFER_BIT);
	// The promise returned by this ctx1.commit() must be resolved at
	// about the same time as the other ctx2.commit() below as they are in the
	// same JS task.
	ctx1.commit().then(function() {
	ctx2.clearColor(0, 0, 1, 1);
	ctx2.clear(ctx2.COLOR_BUFFER_BIT);
	// This ctx2.commit() must happen after the other ctx2.commit() below.
	ctx2.commit();
	if (--g_asyncCallbackNumber == 0) waitForFinish();
	});

	function drawTriangle(gl)
	{
	gl.clearColor(0, 1, 0, 1);
	gl.clear(gl.COLOR_BUFFER_BIT);

	var prog = gl.createProgram();
	var vs = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vs, ['attribute vec2 pos;',
	'void main() {',
	' gl_Position = vec4(pos, 0., 1.);',
	'}'].join('\n'));
	gl.compileShader(vs);
	if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
	throw 'failed to compiled shader';
	}
	gl.attachShader(prog, vs);

	var fs = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fs, ['void main() {',
	' gl_FragColor = vec4(1.);',
	'}'].join('\n'));
	gl.compileShader(fs);
	if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
	throw 'failed to compiled shader';
	}
	gl.attachShader(prog, fs);

	gl.linkProgram(prog);
	if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
	throw "Could not link the shader program!";
	}
	gl.useProgram(prog);

	gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATIC_DRAW);
	var attr = gl.getAttribLocation(prog, 'pos');
	gl.enableVertexAttribArray(attr);
	gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);

	gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
	}

	// Do something complex to ctx2.
	drawTriangle(ctx2);
	// This ctx2.commit() must be resolved at about the same time as the first
	// ctx1.commit() above because they are in the same JS task, no matter how
	// complex the drawing operation is.
	ctx2.commit().then(function() {
	drawTriangle(ctx1);
	ctx1.commit();

	// The following clear is never committed
	ctx1.clearColor(1, 0, 0, 1);
	ctx1.clear(ctx1.COLOR_BUFFER_BIT);
	if (--g_asyncCallbackNumber == 0) waitForFinish();
	});

	}

	function main() {
	startTest();
	}

	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);
	}
	}
	</script>
	</head>
	<body onload="main()">
	<div style="position:relative; width:400px; height:200px; background-color:white">
	</div>
	<div id="container" style="position:absolute; top:0px; left:0px">
	<canvas id="canvas1" width="200" height="200" class="nomargin"></canvas>
	<canvas id="canvas2" width="200" height="200" class="nomargin"></canvas>
	</div>
	</body>
	</html>