OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 | 2 |
3 <!-- READ BEFORE UPDATING: | 3 <!-- READ BEFORE UPDATING: |
4 If this test is updated make sure to increment the "revision" value of the | 4 If this test is updated make sure to increment the "revision" value of the |
5 associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ens
ure | 5 associated test in content/test/gpu/gpu_tests/pixel_test_pages.py. This will ens
ure |
6 that the baseline images are regenerated on the next run. | 6 that the baseline images are regenerated on the next run. |
7 --> | 7 --> |
8 | 8 |
9 <html> | 9 <html> |
10 <head> | 10 <head> |
11 <title>OffscreenCanvas commit flow on main thread: green square on white backgro
und.</title> | 11 <title>OffscreenCanvas commit flow on main thread: green square on white backgro
und.</title> |
12 <style type="text/css"> | 12 <style type="text/css"> |
13 .nomargin { | 13 .nomargin { |
14 margin: 0px auto; | 14 margin: 0px auto; |
15 } | 15 } |
16 </style> | 16 </style> |
17 <script> | 17 <script> |
18 var g_swapsBeforeAck = 15; | 18 var g_swapsBeforeAck = 15; |
19 var g_frameNumber = 0; | 19 var g_frameNumber = 0; |
20 var gl; | 20 var gl; |
21 | 21 |
22 function main() | 22 function main() |
23 { | 23 { |
24 var canvas = document.getElementById("c"); | 24 var canvas = document.getElementById("c"); |
25 var offscreenCanvas = canvas.transferControlToOffscreen(); | 25 var offscreenCanvas = canvas.transferControlToOffscreen(); |
26 gl = offscreenCanvas.getContext("webgl"); | 26 gl = offscreenCanvas.getContext("webgl", {preserveDrawingBuffer: true}); |
| 27 gl.clearColor(1, 0, 0, 1); |
| 28 gl.clear(gl.COLOR_BUFFER_BIT); |
27 drawLoop(); | 29 drawLoop(); |
28 } | 30 } |
29 | 31 |
30 function drawTriangle() | 32 function drawTriangle() |
31 { | 33 { |
32 gl.clearColor(0, 1, 0, 1); | 34 gl.clearColor(0, 1, 0, 1); |
33 gl.clear(gl.COLOR_BUFFER_BIT); | 35 gl.clear(gl.COLOR_BUFFER_BIT); |
34 | 36 |
35 var prog = gl.createProgram(); | 37 var prog = gl.createProgram(); |
36 var vs = gl.createShader(gl.VERTEX_SHADER); | 38 var vs = gl.createShader(gl.VERTEX_SHADER); |
(...skipping 27 matching lines...) Expand all Loading... |
64 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATI
C_DRAW); | 66 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATI
C_DRAW); |
65 var attr = gl.getAttribLocation(prog, 'pos'); | 67 var attr = gl.getAttribLocation(prog, 'pos'); |
66 gl.enableVertexAttribArray(attr); | 68 gl.enableVertexAttribArray(attr); |
67 gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0); | 69 gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0); |
68 | 70 |
69 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); | 71 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); |
70 } | 72 } |
71 | 73 |
72 function drawLoop() | 74 function drawLoop() |
73 { | 75 { |
74 if (g_frameNumber < 3) { | 76 if (g_frameNumber < 10) { |
75 gl.clearColor(1, 0, 0, 1); | |
76 gl.clear(gl.COLOR_BUFFER_BIT); | |
77 g_frameNumber++; | 77 g_frameNumber++; |
78 gl.commit().then(drawLoop); | 78 // Purposely intersperse overdraw and non-overdraw commit cases to see |
| 79 // if OffscreenCanvas commit() handles both cases well. |
| 80 if (0 == g_frameNumber % 2) { |
| 81 // When promise is used, the next drawLoop() is called after the first |
| 82 // frame is resolved; therefore there is no overdraw in this case. |
| 83 gl.commit().then(drawLoop); |
| 84 } else { |
| 85 // When the next drawLoop() is invoked regardless the promise resolve |
| 86 // status of the previous commit(), the frame committed in the next |
| 87 // drawLoop() is very likely to be overdrawn. |
| 88 gl.commit(); |
| 89 drawLoop(); |
| 90 } |
79 } else { | 91 } else { |
80 drawTriangle(); | 92 drawTriangle(); |
81 gl.commit(); | 93 gl.commit(); |
82 | 94 |
83 // The following clear is never committed | 95 // The following clear is never committed |
84 gl.clearColor(0, 0, 1, 1); | 96 gl.clearColor(0, 0, 1, 1); |
85 gl.clear(gl.COLOR_BUFFER_BIT); | 97 gl.clear(gl.COLOR_BUFFER_BIT); |
86 | 98 |
87 waitForFinish(); | 99 waitForFinish(); |
88 } | 100 } |
(...skipping 13 matching lines...) Expand all Loading... |
102 </script> | 114 </script> |
103 </head> | 115 </head> |
104 <body onload="main()"> | 116 <body onload="main()"> |
105 <div style="position:relative; width:300px; height:300px; background-color:white
"> | 117 <div style="position:relative; width:300px; height:300px; background-color:white
"> |
106 </div> | 118 </div> |
107 <div id="container" style="position:absolute; top:0px; left:0px"> | 119 <div id="container" style="position:absolute; top:0px; left:0px"> |
108 <canvas id="c" width="300" height="300" class="nomargin"></canvas> | 120 <canvas id="c" width="300" height="300" class="nomargin"></canvas> |
109 </div> | 121 </div> |
110 </body> | 122 </body> |
111 </html> | 123 </html> |
OLD | NEW |