| 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 |