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 |