| OLD | NEW |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <body> | |
| 4 <span id="description" style="color: white"> | |
| 5 This test checks for drawing webgl to canvas 2d. The test process is as follows: | |
| 6 1. draw a green rect on a webgl context. | |
| 7 2. draw a red rect on a canvas 2d context, and check a pixel (should be red). | |
| 8 3. draw the webgl contents on the canvas 2d context, and check a pixel (should b
e green). | |
| 9 4. wait for few frames. | |
| 10 5. draw a red rect on the canvas 2d context, and check a pixel (should be red). | |
| 11 6. draw the webgl contents on the canvas 2d context, and check a pixel (see belo
w explanation). | |
| 12 | |
| 13 Above test is executed for both preserve and non-preserve webgl contexts. | |
| 14 For the preserve webgl context, the pixel on #6 is green. | |
| 15 For the non-preserve webgl context, the pixel on #6 is undefined.[1] | |
| 16 | |
| 17 [1] http://www.khronos.org/registry/webgl/specs/latest/1.0/. | |
| 18 "This default behavior can be changed by setting the preserveDrawingBuffer | |
| 19 attribute of the WebGLContextAttributes object. If this flag is true, the | |
| 20 contents of the drawing buffer shall be preserved until the author either clears | |
| 21 or overwrites them. If this flag is false, attempting to perform operations | |
| 22 using this context as a source image after the rendering function has returned | |
| 23 can lead to undefined behavior.". | |
| 24 </span> | |
| 25 <canvas id="preserve-canvas3d" width="100" height="100"></canvas> | |
| 26 <canvas id="preserve-canvas2d" width="100" height="100"></canvas> | |
| 27 <canvas id="nonpreserve-canvas3d" width="100" height="100"></canvas> | |
| 28 <canvas id="nonpreserve-canvas2d" width="100" height="100"></canvas> | |
| 29 <script src="../../../resources/js-test.js"></script> | |
| 30 <script> | |
| 31 if (window.testRunner) { | 1 if (window.testRunner) { |
| 32 testRunner.dumpAsText(); | 2 testRunner.dumpAsText(); |
| 33 testRunner.waitUntilDone(); | 3 testRunner.waitUntilDone(); |
| 34 } | 4 } |
| 35 | 5 |
| 36 var preserve_ctx2D; | 6 var preserve_ctx2D; |
| 37 var preserve_canvas3D; | 7 var preserve_canvas3D; |
| 38 var preserve_gl; | 8 var preserve_gl; |
| 39 var nonpreserve_ctx2D; | 9 var nonpreserve_ctx2D; |
| 40 var nonpreserve_canvas3D; | 10 var nonpreserve_canvas3D; |
| 41 var nonpreserve_gl; | 11 var nonpreserve_gl; |
| 42 var imgdata; | 12 var imgdata; |
| 43 | 13 |
| 44 function createContexts() { | |
| 45 preserve_ctx2D = document.getElementById("preserve-canvas2d").getContext("2d
"); | |
| 46 preserve_canvas3D = document.getElementById('preserve-canvas3d'); | |
| 47 preserve_gl = preserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer'
: true}); | |
| 48 nonpreserve_ctx2D = document.getElementById("nonpreserve-canvas2d").getConte
xt("2d"); | |
| 49 nonpreserve_canvas3D = document.getElementById('nonpreserve-canvas3d'); | |
| 50 nonpreserve_gl = nonpreserve_canvas3D.getContext('webgl', {'preserveDrawingB
uffer': false}); | |
| 51 } | |
| 52 | |
| 53 function renderWebGL(gl) { | 14 function renderWebGL(gl) { |
| 54 gl.clearColor(0, 1, 0, 1); | 15 gl.clearColor(0, 1, 0, 1); |
| 55 gl.clear(gl.COLOR_BUFFER_BIT); | 16 gl.clear(gl.COLOR_BUFFER_BIT); |
| 56 } | 17 } |
| 57 | 18 |
| 58 function drawWebGLToCanvas2D(ctx2D, canvas3D, isDrawingBufferUndefined) { | 19 function drawWebGLToCanvas2D(ctx2D, canvas3D, isDrawingBufferUndefined) { |
| 59 // draw red rect on canvas 2d. | 20 // draw red rect on canvas 2d. |
| 60 ctx2D.fillStyle = 'red'; | 21 ctx2D.fillStyle = 'red'; |
| 61 ctx2D.fillRect(0, 0, 100, 100); | 22 ctx2D.fillRect(0, 0, 100, 100); |
| 62 var imageData = ctx2D.getImageData(0, 0, 1, 1); | 23 var imageData = ctx2D.getImageData(0, 0, 1, 1); |
| (...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 111 testRunner.waitUntilDone(); | 72 testRunner.waitUntilDone(); |
| 112 testRunner.displayAsyncThen(asyncTest); | 73 testRunner.displayAsyncThen(asyncTest); |
| 113 } else { | 74 } else { |
| 114 window.requestAnimationFrame(asyncTest); | 75 window.requestAnimationFrame(asyncTest); |
| 115 } | 76 } |
| 116 } | 77 } |
| 117 | 78 |
| 118 window.onload = function () { | 79 window.onload = function () { |
| 119 window.requestAnimationFrame(startTestAfterFirstPaint); | 80 window.requestAnimationFrame(startTestAfterFirstPaint); |
| 120 } | 81 } |
| 121 | |
| 122 </script> | |
| 123 </body> | |
| 124 </html> | |
| OLD | NEW |