LayoutTests/fast/canvas/webgl/context-attributes-alpha-depth-stencil-antialias.html - WebKit - Git at Google

 <html>
 <head>
 <link rel="stylesheet" href="../../js/resources/js-test-style.css"/>
 <script src="../../js/resources/js-test-pre.js"></script>
 <script src="resources/webgl-test.js"></script>
 <script id="vshader" type="x-shader/x-vertex">
 attribute vec3 pos;
 attribute vec4 colorIn;
 varying vec4 color;

 void main()
 {
     color = colorIn;
     gl_Position = vec4(pos.xyz, 1.0);
 }
 </script>

 <script id="fshader" type="x-shader/x-fragment">
 #ifdef GL_ES
 precision highp float;
 #endif
 varying vec4 color;

 void main()
 {
     gl_FragColor = color;
 }
 </script>

 <script>
 var successfullyParsed = false;

 // These four declarations need to be global for "shouldBe" to see them
 var webGL = null;
 var contextAttribs = null;
 var pixel = [0, 0, 0, 1];
 var correctColor = null;

 function init()
 {
     if (window.initNonKhronosFramework) {
         window.initNonKhronosFramework(true);
     }

     description('Verify WebGLContextAttributes are working as specified, including alpha, depth, stencil, antialias, but not premultipliedAlpha');

     runTest();
 }

 function getWebGL(canvasName, contextAttribs, clearColor, clearDepth, clearStencil)
 {
     var canvas = document.getElementById(canvasName);
     var gl = canvas.getContext("experimental-webgl", contextAttribs);
     if (!gl) {
         alert("No WebGL context found");
         return null;
     }

     // Add a console
     gl.console = ("console" in window) ? window.console : { log: function() { } };

     // create our shaders
     var vertexShader = loadShader(gl, "vshader");
     var fragmentShader = loadShader(gl, "fshader");

     if (!vertexShader || !fragmentShader)
         return null;

     // Create the program object
     gl.program = gl.createProgram();

     if (!gl.program)
         return null;

     // Attach our two shaders to the program
     gl.attachShader(gl.program, vertexShader);
     gl.attachShader(gl.program, fragmentShader);

     // Bind attributes
     var attribs = [ "pos", "colorIn" ];
     for (var i in attribs)
         gl.bindAttribLocation(gl.program, parseInt(i), attribs[i]);

     // Link the program
     gl.linkProgram(gl.program);

     // Check the link status
     var linked = gl.getProgramParameter(gl.program, gl.LINK_STATUS);
     if (!linked) {
         // something went wrong with the link
         var error = gl.getProgramInfoLog (gl.program);
         gl.console.log("Error in program linking:"+error);

         gl.deleteProgram(gl.program);
         gl.deleteProgram(fragmentShader);
         gl.deleteProgram(vertexShader);

         return null;
     }

     gl.useProgram(gl.program);

     gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
     gl.clearDepth(clearDepth);
     gl.clearStencil(clearStencil);
     gl.enable(gl.DEPTH_TEST);
     gl.enable(gl.STENCIL_TEST);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

     return gl;
 }

 function drawAndReadPixel(gl, vertices, colors, x, y)
 {
     var colorOffset = vertices.byteLength;

     var vbo = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
     gl.bufferData(gl.ARRAY_BUFFER, colorOffset + colors.byteLength, gl.STATIC_DRAW);
     gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
     gl.bufferSubData(gl.ARRAY_BUFFER, colorOffset, colors);

     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, true, 0, colorOffset);
     gl.enableVertexAttribArray(1);

     gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);

     var buf = new Uint8Array(1 * 1 * 4);
     gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
     return buf;
 }

 function testAlpha(alpha)
 {
     debug("Testing alpha = " + alpha);
     if (alpha)
         shouldBeNonNull("webGL = getWebGL('alphaOn', { alpha: true, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)");
     else
         shouldBeNonNull("webGL = getWebGL('alphaOff', { alpha: false, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)");
     shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
     shouldBeDefined("contextAttribs.alpha");
     shouldBeDefined("contextAttribs.depth");
     shouldBeDefined("contextAttribs.stencil");
     shouldBeDefined("contextAttribs.antialias");
     shouldBeDefined("contextAttribs.premultipliedAlpha");

     var buf = new Uint8Array(1 * 1 * 4);
     webGL.readPixels(0, 0, 1, 1, webGL.RGBA, webGL.UNSIGNED_BYTE, buf);
     pixel[0] = buf[0];
     pixel[1] = buf[1];
     pixel[2] = buf[2];
     pixel[3] = buf[3];
     correctColor = (contextAttribs.alpha ? [0, 0, 0, 0] : [0, 0, 0, 255]);
     shouldBe("pixel", "correctColor");
 }

 function testDepth(depth)
 {
     debug("Testing depth = " + depth);
     if (depth)
         shouldBeNonNull("webGL = getWebGL('depthOn', { stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
     else
         shouldBeNonNull("webGL = getWebGL('depthOff', { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
     shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
     shouldBeDefined("contextAttribs.depth");
     shouldBeDefined("contextAttribs.alpha");
     shouldBeDefined("contextAttribs.stencil");
     shouldBeDefined("contextAttribs.antialias");
     shouldBeDefined("contextAttribs.premultipliedAlpha");

     webGL.depthFunc(webGL.NEVER);

     var vertices = new Float32Array([
          1.0,  1.0, 0.0,
         -1.0,  1.0, 0.0,
         -1.0, -1.0, 0.0,
          1.0,  1.0, 0.0,
         -1.0, -1.0, 0.0,
          1.0, -1.0, 0.0]);
     var colors = new Uint8Array([
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255]);

     var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
     pixel[0] = buf[0];
     pixel[1] = buf[1];
     pixel[2] = buf[2];
     pixel[3] = buf[3];
     correctColor = (contextAttribs.depth ? [0, 0, 0, 255] : [255, 0, 0, 255]);
     shouldBe("pixel", "correctColor");
 }

 function testStencil(stencil)
 {
     debug("Testing stencil = " + stencil);
     if (stencil)
         shouldBeNonNull("webGL = getWebGL('stencilOn', { depth: false, stencil: true, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
     else
         shouldBeNonNull("webGL = getWebGL('stencilOff', { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
     shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
     shouldBeDefined("contextAttribs.depth");
     shouldBeDefined("contextAttribs.alpha");
     shouldBeDefined("contextAttribs.stencil");
     shouldBeDefined("contextAttribs.antialias");
     shouldBeDefined("contextAttribs.premultipliedAlpha");

     webGL.depthFunc(webGL.ALWAYS);

     webGL.stencilFunc(webGL.NEVER, 1, 1);
     webGL.stencilOp(webGL.KEEP, webGL.KEEP, webGL.KEEP);

     var vertices = new Float32Array([
          1.0, 1.0, 0.0,
         -1.0, 1.0, 0.0,
         -1.0, -1.0, 0.0,
          1.0, 1.0, 0.0,
         -1.0, -1.0, 0.0,
          1.0, -1.0, 0.0]);
     var colors = new Uint8Array([
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255]);

     var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
     pixel[0] = buf[0];
     pixel[1] = buf[1];
     pixel[2] = buf[2];
     pixel[3] = buf[3];
     correctColor = (contextAttribs.stencil ? [0, 0, 0, 255] : [255, 0, 0, 255]);
     shouldBe("pixel", "correctColor");
 }

 function testAntialias(antialias)
 {
     debug("Testing antialias = " + antialias);
     if (antialias)
         shouldBeNonNull("webGL = getWebGL('antialiasOn', { depth: false, stencil: false, alpha: false, antialias: true }, [ 0, 0, 0, 1 ], 1, 0)");
     else
         shouldBeNonNull("webGL = getWebGL('antialiasOff', { depth: false, stencil: false, alpha: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
     shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
     shouldBeDefined("contextAttribs.depth");
     shouldBeDefined("contextAttribs.alpha");
     shouldBeDefined("contextAttribs.stencil");
     shouldBeDefined("contextAttribs.antialias");
     shouldBeDefined("contextAttribs.premultipliedAlpha");

     var vertices = new Float32Array([
          1.0, 1.0, 0.0,
         -1.0, 1.0, 0.0,
         -1.0, -1.0, 0.0]);
     var colors = new Uint8Array([
         255, 0, 0, 255,
         255, 0, 0, 255,
         255, 0, 0, 255]);
     var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
     pixel[0] = buf[0];
     shouldBe("pixel[0] != 255 && pixel[0] != 0", "contextAttribs.antialias");
 }

 function runTest()
 {

     testAlpha(true);
     testAlpha(false);
     testDepth(true);
     testDepth(false);
     testStencil(true);
     testStencil(false);
     testAntialias(true);
     testAntialias(false);

     successfullyParsed = true;
     var epilogue = document.createElement("script");
     epilogue.onload = finish;
     epilogue.src = "../../js/resources/js-test-post.js";
     document.body.appendChild(epilogue);
 }

 function finish() {
     if (window.nonKhronosFrameworkNotifyDone) {
         window.nonKhronosFrameworkNotifyDone();
     }
 }
 </script>
 </head>
 <body onload="init()">
 <canvas id="alphaOn" width="1px" height="1px"></canvas>
 <canvas id="alphaOff" width="1px" height="1px"></canvas>
 <canvas id="depthOn" width="1px" height="1px"></canvas>
 <canvas id="depthOff" width="1px" height="1px"></canvas>
 <canvas id="stencilOn" width="1px" height="1px"></canvas>
 <canvas id="stencilOff" width="1px" height="1px"></canvas>
 <canvas id="antialiasOn" width="2px" height="2px"></canvas>
 <canvas id="antialiasOff" width="2px" height="2px"></canvas>
 <div id="description"></div>
 <div id="console"></div>
 </body>
 </html>
	<html>
	<head>
	<link rel="stylesheet" href="../../js/resources/js-test-style.css"/>
	<script src="../../js/resources/js-test-pre.js"></script>
	<script src="resources/webgl-test.js"></script>
	<script id="vshader" type="x-shader/x-vertex">
	attribute vec3 pos;
	attribute vec4 colorIn;
	varying vec4 color;

	void main()
	{
	color = colorIn;
	gl_Position = vec4(pos.xyz, 1.0);
	}
	</script>

	<script id="fshader" type="x-shader/x-fragment">
	#ifdef GL_ES
	precision highp float;
	#endif
	varying vec4 color;

	void main()
	{
	gl_FragColor = color;
	}
	</script>

	<script>
	var successfullyParsed = false;

	// These four declarations need to be global for "shouldBe" to see them
	var webGL = null;
	var contextAttribs = null;
	var pixel = [0, 0, 0, 1];
	var correctColor = null;

	function init()
	{
	if (window.initNonKhronosFramework) {
	window.initNonKhronosFramework(true);
	}

	description('Verify WebGLContextAttributes are working as specified, including alpha, depth, stencil, antialias, but not premultipliedAlpha');

	runTest();
	}

	function getWebGL(canvasName, contextAttribs, clearColor, clearDepth, clearStencil)
	{
	var canvas = document.getElementById(canvasName);
	var gl = canvas.getContext("experimental-webgl", contextAttribs);
	if (!gl) {
	alert("No WebGL context found");
	return null;
	}

	// Add a console
	gl.console = ("console" in window) ? window.console : { log: function() { } };

	// create our shaders
	var vertexShader = loadShader(gl, "vshader");
	var fragmentShader = loadShader(gl, "fshader");

	if (!vertexShader \|\| !fragmentShader)
	return null;

	// Create the program object
	gl.program = gl.createProgram();

	if (!gl.program)
	return null;

	// Attach our two shaders to the program
	gl.attachShader(gl.program, vertexShader);
	gl.attachShader(gl.program, fragmentShader);

	// Bind attributes
	var attribs = [ "pos", "colorIn" ];
	for (var i in attribs)
	gl.bindAttribLocation(gl.program, parseInt(i), attribs[i]);

	// Link the program
	gl.linkProgram(gl.program);

	// Check the link status
	var linked = gl.getProgramParameter(gl.program, gl.LINK_STATUS);
	if (!linked) {
	// something went wrong with the link
	var error = gl.getProgramInfoLog (gl.program);
	gl.console.log("Error in program linking:"+error);

	gl.deleteProgram(gl.program);
	gl.deleteProgram(fragmentShader);
	gl.deleteProgram(vertexShader);

	return null;
	}

	gl.useProgram(gl.program);

	gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
	gl.clearDepth(clearDepth);
	gl.clearStencil(clearStencil);
	gl.enable(gl.DEPTH_TEST);
	gl.enable(gl.STENCIL_TEST);
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT \| gl.STENCIL_BUFFER_BIT);

	return gl;
	}

	function drawAndReadPixel(gl, vertices, colors, x, y)
	{
	var colorOffset = vertices.byteLength;

	var vbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, colorOffset + colors.byteLength, gl.STATIC_DRAW);
	gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
	gl.bufferSubData(gl.ARRAY_BUFFER, colorOffset, colors);

	gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, true, 0, colorOffset);
	gl.enableVertexAttribArray(1);

	gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 3);

	var buf = new Uint8Array(1 * 1 * 4);
	gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, buf);
	return buf;
	}

	function testAlpha(alpha)
	{
	debug("Testing alpha = " + alpha);
	if (alpha)
	shouldBeNonNull("webGL = getWebGL('alphaOn', { alpha: true, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)");
	else
	shouldBeNonNull("webGL = getWebGL('alphaOff', { alpha: false, depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 0 ], 1, 0)");
	shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
	shouldBeDefined("contextAttribs.alpha");
	shouldBeDefined("contextAttribs.depth");
	shouldBeDefined("contextAttribs.stencil");
	shouldBeDefined("contextAttribs.antialias");
	shouldBeDefined("contextAttribs.premultipliedAlpha");

	var buf = new Uint8Array(1 * 1 * 4);
	webGL.readPixels(0, 0, 1, 1, webGL.RGBA, webGL.UNSIGNED_BYTE, buf);
	pixel[0] = buf[0];
	pixel[1] = buf[1];
	pixel[2] = buf[2];
	pixel[3] = buf[3];
	correctColor = (contextAttribs.alpha ? [0, 0, 0, 0] : [0, 0, 0, 255]);
	shouldBe("pixel", "correctColor");
	}

	function testDepth(depth)
	{
	debug("Testing depth = " + depth);
	if (depth)
	shouldBeNonNull("webGL = getWebGL('depthOn', { stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
	else
	shouldBeNonNull("webGL = getWebGL('depthOff', { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
	shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
	shouldBeDefined("contextAttribs.depth");
	shouldBeDefined("contextAttribs.alpha");
	shouldBeDefined("contextAttribs.stencil");
	shouldBeDefined("contextAttribs.antialias");
	shouldBeDefined("contextAttribs.premultipliedAlpha");

	webGL.depthFunc(webGL.NEVER);

	var vertices = new Float32Array([
	1.0, 1.0, 0.0,
	-1.0, 1.0, 0.0,
	-1.0, -1.0, 0.0,
	1.0, 1.0, 0.0,
	-1.0, -1.0, 0.0,
	1.0, -1.0, 0.0]);
	var colors = new Uint8Array([
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255]);

	var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
	pixel[0] = buf[0];
	pixel[1] = buf[1];
	pixel[2] = buf[2];
	pixel[3] = buf[3];
	correctColor = (contextAttribs.depth ? [0, 0, 0, 255] : [255, 0, 0, 255]);
	shouldBe("pixel", "correctColor");
	}

	function testStencil(stencil)
	{
	debug("Testing stencil = " + stencil);
	if (stencil)
	shouldBeNonNull("webGL = getWebGL('stencilOn', { depth: false, stencil: true, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
	else
	shouldBeNonNull("webGL = getWebGL('stencilOff', { depth: false, stencil: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
	shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
	shouldBeDefined("contextAttribs.depth");
	shouldBeDefined("contextAttribs.alpha");
	shouldBeDefined("contextAttribs.stencil");
	shouldBeDefined("contextAttribs.antialias");
	shouldBeDefined("contextAttribs.premultipliedAlpha");

	webGL.depthFunc(webGL.ALWAYS);

	webGL.stencilFunc(webGL.NEVER, 1, 1);
	webGL.stencilOp(webGL.KEEP, webGL.KEEP, webGL.KEEP);

	var vertices = new Float32Array([
	1.0, 1.0, 0.0,
	-1.0, 1.0, 0.0,
	-1.0, -1.0, 0.0,
	1.0, 1.0, 0.0,
	-1.0, -1.0, 0.0,
	1.0, -1.0, 0.0]);
	var colors = new Uint8Array([
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255]);

	var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
	pixel[0] = buf[0];
	pixel[1] = buf[1];
	pixel[2] = buf[2];
	pixel[3] = buf[3];
	correctColor = (contextAttribs.stencil ? [0, 0, 0, 255] : [255, 0, 0, 255]);
	shouldBe("pixel", "correctColor");
	}

	function testAntialias(antialias)
	{
	debug("Testing antialias = " + antialias);
	if (antialias)
	shouldBeNonNull("webGL = getWebGL('antialiasOn', { depth: false, stencil: false, alpha: false, antialias: true }, [ 0, 0, 0, 1 ], 1, 0)");
	else
	shouldBeNonNull("webGL = getWebGL('antialiasOff', { depth: false, stencil: false, alpha: false, antialias: false }, [ 0, 0, 0, 1 ], 1, 0)");
	shouldBeNonNull("contextAttribs = webGL.getContextAttributes()");
	shouldBeDefined("contextAttribs.depth");
	shouldBeDefined("contextAttribs.alpha");
	shouldBeDefined("contextAttribs.stencil");
	shouldBeDefined("contextAttribs.antialias");
	shouldBeDefined("contextAttribs.premultipliedAlpha");

	var vertices = new Float32Array([
	1.0, 1.0, 0.0,
	-1.0, 1.0, 0.0,
	-1.0, -1.0, 0.0]);
	var colors = new Uint8Array([
	255, 0, 0, 255,
	255, 0, 0, 255,
	255, 0, 0, 255]);
	var buf = drawAndReadPixel(webGL, vertices, colors, 0, 0);
	pixel[0] = buf[0];
	shouldBe("pixel[0] != 255 && pixel[0] != 0", "contextAttribs.antialias");
	}

	function runTest()
	{

	testAlpha(true);
	testAlpha(false);
	testDepth(true);
	testDepth(false);
	testStencil(true);
	testStencil(false);
	testAntialias(true);
	testAntialias(false);

	successfullyParsed = true;
	var epilogue = document.createElement("script");
	epilogue.onload = finish;
	epilogue.src = "../../js/resources/js-test-post.js";
	document.body.appendChild(epilogue);
	}

	function finish() {
	if (window.nonKhronosFrameworkNotifyDone) {
	window.nonKhronosFrameworkNotifyDone();
	}
	}
	</script>
	</head>
	<body onload="init()">
	<canvas id="alphaOn" width="1px" height="1px"></canvas>
	<canvas id="alphaOff" width="1px" height="1px"></canvas>
	<canvas id="depthOn" width="1px" height="1px"></canvas>
	<canvas id="depthOff" width="1px" height="1px"></canvas>
	<canvas id="stencilOn" width="1px" height="1px"></canvas>
	<canvas id="stencilOff" width="1px" height="1px"></canvas>
	<canvas id="antialiasOn" width="2px" height="2px"></canvas>
	<canvas id="antialiasOff" width="2px" height="2px"></canvas>
	<div id="description"></div>
	<div id="console"></div>
	</body>
	</html>