content/canvas/test/webgl-conformance/conformance/canvas/canvas-test.html@7e26c7da4463
content/canvas/test/webgl-conformance/conformance/canvas/canvas-test.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 <!--
2 Copyright (c) 2011 The Chromium Authors. All rights reserved.
3 Use of this source code is governed by a BSD-style license that can be
4 found in the LICENSE file.
5 -->
6 <!DOCTYPE html>
7 <html>
8 <head>
9 <meta charset="utf-8">
10 <title>WebGL Canvas Conformance Tests</title>
11 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
12 <script src="../../resources/desktop-gl-constants.js" type="text/javascript"></script>
13 <script src="../../resources/js-test-pre.js"></script>
14 <script src="../resources/webgl-test.js"></script>
15 </head>
16 <body>
17 <div id="description"></div>
18 <div id="console"></div>
19 <canvas id="canvas" style="width: 50px; height: 50px;"> </canvas>
20 <canvas id="canvas2d" width="40" height="40"> </canvas>
21 <script>
22 if (window.initNonKhronosFramework) {
23 window.initNonKhronosFramework(true);
24 }
26 description("This test ensures WebGL implementations interact correctly with the canvas tag.");
28 debug("");
29 debug("Canvas.getContext");
31 var err;
32 var canvas = document.getElementById("canvas");
33 var canvas2d = document.getElementById("canvas2d");
34 var ctx2d = canvas2d.getContext("2d");
35 var gl = create3DContext(canvas);
36 if (!gl) {
37 testFailed("context does not exist");
38 } else {
39 testPassed("context exists");
41 debug("");
42 debug("Checking canvas and WebGL interaction");
44 // Check that a canvas with no width or height is 300x150 pixels
45 shouldBe('canvas.width', '300');
46 shouldBe('canvas.height', '150');
48 // Check get a 4 value gl parameter as a csv string.
49 function getValue4v(name) {
50 var v = gl.getParameter(name);
51 var result = '' +
52 v[0] + ',' +
53 v[1] + ',' +
54 v[2] + ',' +
55 v[3];
56 return result;
57 }
59 function getViewport() {
60 return getValue4v(gl.VIEWPORT);
61 }
63 function getClearColor() {
64 return getValue4v(gl.COLOR_CLEAR_VALUE);
65 }
67 function isAboutEqual(a, b) {
68 return Math.abs(a - b) < 0.01;
69 }
71 function isAboutEqualInt(a, b) {
72 return Math.abs(a - b) < 3;
73 }
75 function checkCanvasContentIs(r3d,g3d,b3d,a3d) {
76 var r2d;
77 var g2d;
78 var b2d;
79 var a2d;
81 function checkPixel(x, y, r3d,g3d,b3d,a3d) {
82 var offset = (y * 40 + x) * 4;
83 r2d = imgData.data[offset];
84 g2d = imgData.data[offset + 1];
85 b2d = imgData.data[offset + 2];
86 a2d = imgData.data[offset + 3];
87 //debug('' + x + ', ' + y + "(" + offset + ") = " + r2d + ", " + g2d + ", " + b2d + ", " + a2d);
88 return isAboutEqualInt(r2d, r3d) &&
89 isAboutEqualInt(g2d, g3d) &&
90 isAboutEqualInt(b2d, b3d) &&
91 isAboutEqualInt(a2d, a3d);
92 }
94 function checkPixels(r3d,g3d,b3d,a3d) {
95 return checkPixel(0, 0, r3d, g3d, b3d, a3d) &&
96 checkPixel(0, 39, r3d, g3d, b3d, a3d) &&
97 checkPixel(39, 0, r3d, g3d, b3d, a3d) &&
98 checkPixel(39, 39, r3d, g3d, b3d, a3d) &&
99 checkPixel(0, 0, r3d, g3d, b3d, a3d);
100 };
102 // Set to just take the color from the 3d canvas
103 ctx2d.globalCompositeOperation = 'copy';
105 // fill 2d canvas with orange
106 ctx2d.fillStyle = "rgb(255,192,128)";
107 ctx2d.fillRect (0, 0, 40, 40);
109 // get the image data
110 var imgData = ctx2d.getImageData(0, 0, 40, 40);
112 // check it got cleared.
113 if (!checkPixels(255, 192, 128, 255)) {
114 testFailed("unable to fill 2d context.");
115 return;
116 }
118 // draw 3d canvas on top.
119 ctx2d.drawImage(canvas, 0,0, 40, 40);
121 // get the image data
122 var imgData = ctx2d.getImageData(0, 0, 40, 40);
124 // Check it's the expected color.
125 if (!checkPixels(r3d, g3d, b3d, a3d)) {
126 testFailed("pixels are " + r2d + "," + g2d + "," + b2d + "," + a2d +
127 " expected " + r3d + "," + g3d + "," + b3d + "," + a3d);
128 } else {
129 testPassed("pixels are " + r3d + "," + g3d + "," + b3d + "," + a3d);
130 }
131 }
133 checkCanvasContentIs(0, 0, 0, 0);
134 shouldBe('getViewport()', '"0,0,300,150"');
136 // Change the display size of the canvas and check
137 // the viewport size does not change.
138 debug("");
139 debug("change display size of canvas and see that viewport does not change");
140 canvas.style.width = "100px";
141 canvas.style.height = "25px";
142 var intervalId;
143 intervalId = window.setInterval(function() {
144 if (canvas.clientWidth == 100 &&
145 canvas.clientHeight == 25) {
146 window.clearInterval(intervalId);
147 shouldBe('getViewport()', '"0,0,300,150"');
148 shouldBe('canvas.width', '300');
149 shouldBe('canvas.height', '150');
151 // Change the actual size of the canvas
152 // Check that the viewport does not change.
153 // Check that the clear color does not change.
154 // Check that the color mask does not change.
155 debug("");
156 debug("change the actual size of the canvas and see that the viewport does not change");
157 gl.clearColor(0.25, 0.5, 0.75, 1);
158 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
159 checkCanvasContentIs(64, 128, 192, 255);
160 gl.colorMask(0,0,0,0);
161 glErrorShouldBe(gl, gl.NO_ERROR, "No GL errors before resizing the canvas");
162 canvas.width = 400;
163 canvas.height = 10;
164 err = gl.getError();
165 // Some implementations might lost the context when resizing
166 if (err != gl.CONTEXT_LOST_WEBGL) {
167 shouldBe("err", "gl.NO_ERROR");
168 var v = gl.getParameter(gl.COLOR_CLEAR_VALUE);
169 assertMsg(isAboutEqual(v[0], 0.25) &&
170 isAboutEqual(v[1], 0.5) &&
171 isAboutEqual(v[2], 0.75) &&
172 isAboutEqual(v[3], 1),
173 "gl.clearColor should not change after canvas resize");
174 v = gl.getParameter(gl.COLOR_WRITEMASK);
175 assertMsg(isAboutEqual(v[0], 0) &&
176 isAboutEqual(v[1], 0) &&
177 isAboutEqual(v[2], 0) &&
178 isAboutEqual(v[3], 0),
179 "gl.colorMask should not change after canvas resize");
180 shouldBe('getViewport()', '"0,0,300,150"');
181 checkCanvasContentIs(0, 0, 0, 0);
182 }
184 debug("");
185 finishTest();
186 }
187 }, 1000/30);
188 }
189 </script>
191 </body>
192 </html>
