OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <body onload="runRepaintTest()"> | |
3 <span id="description" style="color: white"> | |
4 This test is only useful as a pixel test. You should see two rows with 4 canvase
s in each. The top row of canvases should have a black background, the bottom ro
w should have a dark blue background. | |
5 The canvases in the first two rows should have a single triangle. The canvases o
n the left should have three triangles superimposed on top of each other. | |
6 If multisampling is supported, the odd columns should have smooth edges instead
of jagged stair-stepping. | |
7 </span> | |
8 <br> | |
9 <style> | |
10 canvas { | |
11 outline: 1px solid blue; | |
12 } | |
13 body { | |
14 background-color: darkblue; | |
15 } | |
16 </style> | |
17 <script id="2d-fragment-shader" type="x-shader/x-fragment"> | |
18 precision mediump float; | |
19 | |
20 uniform vec4 u_color; | |
21 | |
22 void main() { | |
23 gl_FragColor = u_color; | |
24 } | |
25 </script> | |
26 <script id="2d-vertex-shader" type="x-shader/x-vertex"> | |
27 attribute vec2 a_position; | |
28 | |
29 uniform vec2 u_resolution; | |
30 | |
31 void main() { | |
32 // convert the rectangle from pixels to 0.0 to 1.0 | |
33 vec2 zeroToOne = a_position / u_resolution; | |
34 | |
35 // convert from 0->1 to 0->2 | |
36 vec2 zeroToTwo = zeroToOne * 2.0; | |
37 | |
38 // convert from 0->2 to -1->+1 (clipspace) | |
39 vec2 clipSpace = zeroToTwo - 1.0; | |
40 | |
41 gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); | |
42 } | |
43 </script> | |
44 <script src="resources/webgl-test-utils.js"></script> | |
45 <script> | |
46 | |
47 var ctxs = [] | |
48 | |
49 if (window.testRunner) { | |
50 testRunner.overridePreference("WebKitWebGLEnabled", "1"); | |
51 testRunner.dumpAsTextWithPixelResults(); | |
52 document.getElementById("description").style.position = "absolute"; | |
53 document.getElementById("description").style.top = "-5000px"; | |
54 } | |
55 | |
56 for (var i=0; i<8; ++i) { | |
57 var attrs = { | |
58 'alpha': (i >= 4), | |
59 'preserveDrawingBuffer': (i % 4) >= 2, | |
60 'antialias': (i % 2) == 1 | |
61 }; | |
62 var can = document.createElement('canvas'); | |
63 can.width = can.height = 100; | |
64 can.style.position = "absolute"; | |
65 can.style.left = 10 + (i % 4) * 120 + "px"; | |
66 can.style.top = (i < 4 ? 40 : 150) + "px"; | |
67 document.body.appendChild(can); | |
68 if (i == 3) | |
69 document.body.appendChild(document.createElement('br')); | |
70 ctxs[i] = can.getContext("experimental-webgl", attrs); | |
71 setup(ctxs[i]); | |
72 } | |
73 | |
74 function setup(gl) { | |
75 // setup a GLSL program | |
76 var wtu = WebGLTestUtils; | |
77 var vertexShader = WebGLTestUtils.loadShaderFromScript(gl, "2d-vertex-shader
"); | |
78 var fragmentShader = WebGLTestUtils.loadShaderFromScript(gl, "2d-fragment-sh
ader"); | |
79 var program = gl.createProgram(); | |
80 gl.attachShader(program, vertexShader, gl.VERTEX_SHADER); | |
81 gl.attachShader(program, fragmentShader, gl.FRAGMENT_SHADER); | |
82 gl.linkProgram(program); | |
83 gl.useProgram(program); | |
84 | |
85 // look up where the vertex data needs to go. | |
86 gl.myPositionLocation = gl.getAttribLocation(program, "a_position"); | |
87 | |
88 // set the resolution | |
89 var resolutionLocation = gl.getUniformLocation(program, "u_resolution"); | |
90 gl.uniform2f(resolutionLocation, 100, 100); | |
91 | |
92 var colorLocation = gl.getUniformLocation(program, "u_color"); | |
93 gl.uniform4f(colorLocation, 0, 1, 0, 1); | |
94 } | |
95 | |
96 function draw(gl, offset) { | |
97 var buffer = gl.createBuffer(); | |
98 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); | |
99 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ | |
100 80 + offset, 20, | |
101 10 + offset, 10, | |
102 10 + offset, 80]), gl.STATIC_DRAW); | |
103 | |
104 gl.enableVertexAttribArray(gl.myPositionLocation); | |
105 gl.vertexAttribPointer(gl.myPositionLocation, 2, gl.FLOAT, false, 0, 0); | |
106 | |
107 // draw | |
108 gl.drawArrays(gl.TRIANGLES, 0, 3); | |
109 } | |
110 | |
111 function drawAll(offset) { | |
112 for (var i=0; i<8; ++i) | |
113 draw(ctxs[i], offset); | |
114 } | |
115 | |
116 function repaintOnVisiblePage() { | |
117 // Check if WebGL draws this frame correctly, because WebGL implementation | |
118 // clears temporary cache when page is hidden. | |
119 drawAll(60); | |
120 if (window.testRunner) { | |
121 testRunner.notifyDone(); | |
122 } | |
123 } | |
124 | |
125 function setPageVisible() { | |
126 if (window.testRunner) { | |
127 testRunner.setPageVisibility("visible"); | |
128 testRunner.displayAsyncThen(repaintOnVisiblePage); | |
129 } else { | |
130 setTimeout(repaintOnVisiblePage, 50); | |
131 } | |
132 } | |
133 | |
134 function repaintOnHiddenPage() { | |
135 if (window.testRunner) { | |
136 testRunner.setPageVisibility("hidden"); | |
137 } | |
138 // Although page is hidden, WebGL must draw this frame. | |
139 drawAll(30); | |
140 // testRunner.displayAsyncThen doesn't work when page is hidden. | |
141 setTimeout(setPageVisible, 50); | |
142 } | |
143 | |
144 function runRepaintTest() { | |
145 drawAll(0); | |
146 if (window.testRunner) { | |
147 testRunner.waitUntilDone(); | |
148 testRunner.displayAsyncThen(repaintOnHiddenPage); | |
149 } else { | |
150 setTimeout(repaintOnHiddenPage, 50); | |
151 } | |
152 } | |
153 </script> | |
OLD | NEW |