LayoutTests/webgl/1.0.3/resources/webgl_test_files/conformance/canvas/rapid-resizing.html - WebKit - Git at Google

 <!--

 /*
 ** Copyright (c) 2013 The Khronos Group Inc.
 **
 ** Permission is hereby granted, free of charge, to any person obtaining a
 ** copy of this software and/or associated documentation files (the
 ** "Materials"), to deal in the Materials without restriction, including
 ** without limitation the rights to use, copy, modify, merge, publish,
 ** distribute, sublicense, and/or sell copies of the Materials, and to
 ** permit persons to whom the Materials are furnished to do so, subject to
 ** the following conditions:
 **
 ** The above copyright notice and this permission notice shall be included
 ** in all copies or substantial portions of the Materials.
 **
 ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
 */

 -->

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>WebGL Rapid Resizing Test</title>
 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
 <script src="../../resources/js-test-pre.js"></script>
 <script src="../resources/webgl-test-utils.js"></script>
 </head>
 <body>
 <div id="description"></div>
 <canvas id="canvas" style="width: 256px; height: 256px;"> </canvas>
 <div id="console"></div>
 <script id="vshader" type="x-shader/x-vertex">
 attribute vec2 position;
 void main()
 {
   gl_Position = vec4(position, 0.0, 1.0);
 }
 </script>

 <script id="fshader" type="x-shader/x-fragment">
 void main()
 {
   gl_FragColor = vec4(0.0,1.0,0.0,1.0);
 }
 </script>
 <script>
 "use strict";

 description("Verifies that rapidly resizing the canvas works correctly.");

 debug("");
 debug("Regression test for Chromium <a href='http://crbug.com/299371'>Issue 299371</a>");
 debug("");

 var err;
 var wtu = WebGLTestUtils;
 var canvas = document.getElementById("canvas");
 var largeSize = 256;
 var smallSize = 128;
 var currentSize = largeSize;
 canvas.width = largeSize;
 canvas.height = largeSize;
 var gl = wtu.create3DContext(canvas);
 var numFrames = 0;

 if (!gl) {
   testFailed("context does not exist");
 } else {
   testPassed("context exists");

   gl.clearColor(0, 0, 0, 1);

   var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["position"]);
   shouldBeNonNull("program");

   // Prepare to draw quads
   var quadSize = 0.1;

   var vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
     // Lower left
     -1, -1 + quadSize,
     -1, -1,
     -1 + quadSize, -1,
     -1 + quadSize, -1 + quadSize,

     // Lower right
     1 - quadSize, -1 + quadSize,
     1 - quadSize, -1,
     1, -1,
     1, -1 + quadSize,

     // Upper right
     1 - quadSize, 1,
     1 - quadSize, 1 - quadSize,
     1, 1 - quadSize,
     1, 1,

     // Upper left
     -1, 1,
     -1, 1 - quadSize,
     -1 + quadSize, 1 - quadSize,
     -1 + quadSize, 1
   ]), gl.STATIC_DRAW);
   gl.enableVertexAttribArray(0);
   gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

   var indexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
   gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([
     0, 1, 2,
     0, 2, 3,

     4, 5, 6,
     4, 6, 7,

     8, 9, 10,
     8, 10, 11,

     12, 13, 14,
     12, 14, 15
   ]), gl.STATIC_DRAW);

   wtu.requestAnimFrame(render);
 }

 function render() {
   if (++numFrames < 30) {
     if (currentSize == largeSize) {
       canvas.height = smallSize;
       currentSize = smallSize;
     } else {
       canvas.height = largeSize;
       currentSize = largeSize;
     }
   }

   gl.viewport(0, 0, largeSize, currentSize);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.drawElements(gl.TRIANGLES, 24, gl.UNSIGNED_SHORT, 0);

   // Check the four corners
   var green = [ 0, 255, 0, 255 ];
   var inset = 3;
   wtu.checkCanvasRect(gl, inset, inset, 1, 1, green, "lower left should be green", 1);
   wtu.checkCanvasRect(gl, largeSize - inset, inset, 1, 1, green, "lower right should be green", 1);
   wtu.checkCanvasRect(gl, inset, currentSize - inset, 1, 1, green, "upper left should be green", 1);
   wtu.checkCanvasRect(gl, largeSize - inset, currentSize - inset, 1, 1, green, "upper right should be green", 1);

   if (numFrames < 60) {
     wtu.requestAnimFrame(render);
   } else {
     finishTest();
   }
 }

 </script>

 </body>
 </html>
	<!--

	/*
	** Copyright (c) 2013 The Khronos Group Inc.
	**
	** Permission is hereby granted, free of charge, to any person obtaining a
	** copy of this software and/or associated documentation files (the
	** "Materials"), to deal in the Materials without restriction, including
	** without limitation the rights to use, copy, modify, merge, publish,
	** distribute, sublicense, and/or sell copies of the Materials, and to
	** permit persons to whom the Materials are furnished to do so, subject to
	** the following conditions:
	**
	** The above copyright notice and this permission notice shall be included
	** in all copies or substantial portions of the Materials.
	**
	** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
	** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
	** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
	** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
	** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
	** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
	*/

	-->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>WebGL Rapid Resizing Test</title>
	<link rel="stylesheet" href="../../resources/js-test-style.css"/>
	<script src="../../resources/js-test-pre.js"></script>
	<script src="../resources/webgl-test-utils.js"></script>
	</head>
	<body>
	<div id="description"></div>
	<canvas id="canvas" style="width: 256px; height: 256px;"> </canvas>
	<div id="console"></div>
	<script id="vshader" type="x-shader/x-vertex">
	attribute vec2 position;
	void main()
	{
	gl_Position = vec4(position, 0.0, 1.0);
	}
	</script>

	<script id="fshader" type="x-shader/x-fragment">
	void main()
	{
	gl_FragColor = vec4(0.0,1.0,0.0,1.0);
	}
	</script>
	<script>
	"use strict";

	description("Verifies that rapidly resizing the canvas works correctly.");

	debug("");
	debug("Regression test for Chromium <a href='http://crbug.com/299371'>Issue 299371</a>");
	debug("");

	var err;
	var wtu = WebGLTestUtils;
	var canvas = document.getElementById("canvas");
	var largeSize = 256;
	var smallSize = 128;
	var currentSize = largeSize;
	canvas.width = largeSize;
	canvas.height = largeSize;
	var gl = wtu.create3DContext(canvas);
	var numFrames = 0;

	if (!gl) {
	testFailed("context does not exist");
	} else {
	testPassed("context exists");

	gl.clearColor(0, 0, 0, 1);

	var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["position"]);
	shouldBeNonNull("program");

	// Prepare to draw quads
	var quadSize = 0.1;

	var vertexBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
	// Lower left
	-1, -1 + quadSize,
	-1, -1,
	-1 + quadSize, -1,
	-1 + quadSize, -1 + quadSize,

	// Lower right
	1 - quadSize, -1 + quadSize,
	1 - quadSize, -1,
	1, -1,
	1, -1 + quadSize,

	// Upper right
	1 - quadSize, 1,
	1 - quadSize, 1 - quadSize,
	1, 1 - quadSize,
	1, 1,

	// Upper left
	-1, 1,
	-1, 1 - quadSize,
	-1 + quadSize, 1 - quadSize,
	-1 + quadSize, 1
	]), gl.STATIC_DRAW);
	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

	var indexBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([
	0, 1, 2,
	0, 2, 3,

	4, 5, 6,
	4, 6, 7,

	8, 9, 10,
	8, 10, 11,

	12, 13, 14,
	12, 14, 15
	]), gl.STATIC_DRAW);

	wtu.requestAnimFrame(render);
	}

	function render() {
	if (++numFrames < 30) {
	if (currentSize == largeSize) {
	canvas.height = smallSize;
	currentSize = smallSize;
	} else {
	canvas.height = largeSize;
	currentSize = largeSize;
	}
	}

	gl.viewport(0, 0, largeSize, currentSize);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawElements(gl.TRIANGLES, 24, gl.UNSIGNED_SHORT, 0);

	// Check the four corners
	var green = [ 0, 255, 0, 255 ];
	var inset = 3;
	wtu.checkCanvasRect(gl, inset, inset, 1, 1, green, "lower left should be green", 1);
	wtu.checkCanvasRect(gl, largeSize - inset, inset, 1, 1, green, "lower right should be green", 1);
	wtu.checkCanvasRect(gl, inset, currentSize - inset, 1, 1, green, "upper left should be green", 1);
	wtu.checkCanvasRect(gl, largeSize - inset, currentSize - inset, 1, 1, green, "upper right should be green", 1);

	if (numFrames < 60) {
	wtu.requestAnimFrame(render);
	} else {
	finishTest();
	}
	}

	</script>

	</body>
	</html>