1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <title>WebGL Canvas Conformance Tests</title>
7 <script src="resources/desktop-gl-constants.js" type="text/javascript"></script>
8 <script src="../../js/resources/js-test-pre.js"></script>
9 <script src="resources/webgl-test.js"></script>
12 <div id="description"></div>
13 <div id="console"></div>
14 <canvas id="canvas" style="width: 50px; height: 50px;"> </canvas>
15 <canvas id="canvas2d" width="40" height="40"> </canvas>
17 if (window.initNonKhronosFramework) {
18 window.initNonKhronosFramework(true);
21 description("This test ensures WebGL implementations interact correctly with the canvas tag.");
24 debug("Canvas.getContext");
26 var canvas = document.getElementById("canvas");
27 var canvas2d = document.getElementById("canvas2d");
28 var ctx2d = canvas2d.getContext("2d");
29 var gl = create3DContext(canvas);
31 testFailed("context does not exist");
33 testPassed("context exists");
36 debug("Checking canvas and WebGL interaction");
38 // Check that a canvas with no width or height is 300x150 pixels
39 shouldBe('canvas.width', '300');
40 shouldBe('canvas.height', '150');
42 // Check get a 4 value gl parameter as a csv string.
43 function getValue4v(name) {
44 var v = gl.getParameter(name);
53 function getViewport() {
54 return getValue4v(gl.VIEWPORT);
57 function getClearColor() {
58 return getValue4v(gl.COLOR_CLEAR_VALUE);
61 function isAboutEqual(a, b) {
62 return Math.abs(a - b) < 0.01;
65 function isAboutEqualInt(a, b) {
66 return Math.abs(a - b) < 3;
69 function checkCanvasContentIs(r3d,g3d,b3d,a3d) {
75 function checkPixel(x, y, r3d,g3d,b3d,a3d) {
76 var offset = (y * 40 + x) * 4;
77 r2d = imgData.data[offset];
78 g2d = imgData.data[offset + 1];
79 b2d = imgData.data[offset + 2];
80 a2d = imgData.data[offset + 3];
81 //debug('' + x + ', ' + y + "(" + offset + ") = " + r2d + ", " + g2d + ", " + b2d + ", " + a2d);
82 return isAboutEqualInt(r2d, r3d) &&
83 isAboutEqualInt(g2d, g3d) &&
84 isAboutEqualInt(b2d, b3d) &&
85 isAboutEqualInt(a2d, a3d);
88 function checkPixels(r3d,g3d,b3d,a3d) {
89 return checkPixel(0, 0, r3d, g3d, b3d, a3d) &&
90 checkPixel(0, 39, r3d, g3d, b3d, a3d) &&
91 checkPixel(39, 0, r3d, g3d, b3d, a3d) &&
92 checkPixel(39, 39, r3d, g3d, b3d, a3d) &&
93 checkPixel(0, 0, r3d, g3d, b3d, a3d);
96 // Set to just take the color from the 3d canvas
97 ctx2d.globalCompositeOperation = 'copy';
99 // fill 2d canvas with orange
100 ctx2d.fillStyle = "rgb(255,192,128)";
101 ctx2d.fillRect (0, 0, 40, 40);
103 // get the image data
104 var imgData = ctx2d.getImageData(0, 0, 40, 40);
106 // check it got cleared.
107 if (!checkPixels(255, 192, 128, 255)) {
108 testFailed("unable to fill 2d context.");
112 // draw 3d canvas on top.
113 ctx2d.drawImage(canvas, 0,0, 40, 40);
115 // get the image data
116 var imgData = ctx2d.getImageData(0, 0, 40, 40);
118 // Check it's the expected color.
119 if (!checkPixels(r3d, g3d, b3d, a3d)) {
120 testFailed("pixels are " + r2d + "," + g2d + "," + b2d + "," + a2d +
121 " expected " + r3d + "," + g3d + "," + b3d + "," + a3d);
123 testPassed("pixels are " + r3d + "," + g3d + "," + b3d + "," + a3d);
127 checkCanvasContentIs(0, 0, 0, 0);
128 shouldBe('getViewport()', '"0,0,300,150"');
130 // Change the display size of the canvas and check
131 // the viewport size does not change.
133 debug("change display size of canvas and see that viewport does not change");
134 canvas.style.width = "100px";
135 canvas.style.height = "25px";
137 intervalId = window.setInterval(function() {
138 if (canvas.clientWidth == 100 &&
139 canvas.clientHeight == 25) {
140 window.clearInterval(intervalId);
141 shouldBe('getViewport()', '"0,0,300,150"');
142 shouldBe('canvas.width', '300');
143 shouldBe('canvas.height', '150');
145 // Change the actual size of the canvas
146 // Check that the viewport does not change.
147 // Check that the clear color does not change.
148 // Check that the color mask does not change.
150 debug("change the actual size of the canvas and see that the viewport does not change");
151 gl.clearColor(0.25, 0.5, 0.75, 1);
152 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
153 checkCanvasContentIs(64, 128, 192, 255);
154 gl.colorMask(0,0,0,0);
158 var v = gl.getParameter(gl.COLOR_CLEAR_VALUE);
159 assertMsg(isAboutEqual(v[0], 0.25) &&
160 isAboutEqual(v[1], 0.5) &&
161 isAboutEqual(v[2], 0.75) &&
162 isAboutEqual(v[3], 1),
163 "gl.clearColor should not change after canvas resize");
164 v = gl.getParameter(gl.COLOR_WRITEMASK);
165 assertMsg(isAboutEqual(v[0], 0) &&
166 isAboutEqual(v[1], 0) &&
167 isAboutEqual(v[2], 0) &&
168 isAboutEqual(v[3], 0),
169 "gl.colorMask should not change after canvas resize");
170 shouldBe('getViewport()', '"0,0,300,150"');
171 checkCanvasContentIs(0, 0, 0, 0);
174 var epilogue = document.createElement("script");
175 epilogue.onload = finish;
176 epilogue.src = "../../js/resources/js-test-post.js";
177 document.body.appendChild(epilogue);
183 if (window.nonKhronosFrameworkNotifyDone) {
184 window.nonKhronosFrameworkNotifyDone();