OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <body> | 3 <body> |
4 <span id="description" style="color: white"> | 4 <span id="description" style="color: white"> |
5 This test checks for drawing webgl to canvas 2d. The test process is as follows: | 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. | 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). | 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). | 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. | 9 4. wait for few frames. |
10 5. draw a red rect on the canvas 2d context, and check a pixel (should be red). | 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). | 11 6. draw the webgl contents on the canvas 2d context, and check a pixel (see belo
w explanation). |
12 | 12 |
13 Above test is executed for both preserve and non-preserve webgl contexts. | 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. | 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] | 15 For the non-preserve webgl context, the pixel on #6 is undefined.[1] |
16 | 16 |
17 [1] http://www.khronos.org/registry/webgl/specs/latest/1.0/. | 17 [1] http://www.khronos.org/registry/webgl/specs/latest/1.0/. |
18 "This default behavior can be changed by setting the preserveDrawingBuffer | 18 "This default behavior can be changed by setting the preserveDrawingBuffer |
19 attribute of the WebGLContextAttributes object. If this flag is true, the | 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 | 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 | 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 | 22 using this context as a source image after the rendering function has returned |
23 can lead to undefined behavior.". | 23 can lead to undefined behavior.". |
24 </span> | 24 </span> |
25 <canvas id="preserve-canvas3d" width="100" height="100"></canvas> | 25 <canvas id="preserve-canvas3d" width="100" height="100"></canvas> |
26 <canvas id="preserve-canvas2d" 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> | 27 <canvas id="nonpreserve-canvas3d" width="100" height="100"></canvas> |
28 <canvas id="nonpreserve-canvas2d" width="100" height="100"></canvas> | 28 <canvas id="nonpreserve-canvas2d" width="100" height="100"></canvas> |
29 <script src="../../../resources/js-test.js"></script> | 29 <script src="../../../resources/js-test.js"></script> |
| 30 <script src="resources/draw-webgl-to-canvas-2d.js"></script> |
30 <script> | 31 <script> |
31 if (window.testRunner) { | |
32 testRunner.dumpAsText(); | |
33 testRunner.waitUntilDone(); | |
34 } | |
35 | |
36 var preserve_ctx2D; | |
37 var preserve_canvas3D; | |
38 var preserve_gl; | |
39 var nonpreserve_ctx2D; | |
40 var nonpreserve_canvas3D; | |
41 var nonpreserve_gl; | |
42 var imgdata; | |
43 | |
44 function createContexts() { | 32 function createContexts() { |
45 preserve_ctx2D = document.getElementById("preserve-canvas2d").getContext("2d
"); | 33 preserve_ctx2D = document.getElementById("preserve-canvas2d").getContext("2d
"); |
46 preserve_canvas3D = document.getElementById('preserve-canvas3d'); | 34 preserve_canvas3D = document.getElementById('preserve-canvas3d'); |
47 preserve_gl = preserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer'
: true}); | 35 preserve_gl = preserve_canvas3D.getContext('webgl', {'preserveDrawingBuffer'
: true}); |
48 nonpreserve_ctx2D = document.getElementById("nonpreserve-canvas2d").getConte
xt("2d"); | 36 nonpreserve_ctx2D = document.getElementById("nonpreserve-canvas2d").getConte
xt("2d"); |
49 nonpreserve_canvas3D = document.getElementById('nonpreserve-canvas3d'); | 37 nonpreserve_canvas3D = document.getElementById('nonpreserve-canvas3d'); |
50 nonpreserve_gl = nonpreserve_canvas3D.getContext('webgl', {'preserveDrawingB
uffer': false}); | 38 nonpreserve_gl = nonpreserve_canvas3D.getContext('webgl', {'preserveDrawingB
uffer': false}); |
51 } | 39 } |
52 | |
53 function renderWebGL(gl) { | |
54 gl.clearColor(0, 1, 0, 1); | |
55 gl.clear(gl.COLOR_BUFFER_BIT); | |
56 } | |
57 | |
58 function drawWebGLToCanvas2D(ctx2D, canvas3D, isDrawingBufferUndefined) { | |
59 // draw red rect on canvas 2d. | |
60 ctx2D.fillStyle = 'red'; | |
61 ctx2D.fillRect(0, 0, 100, 100); | |
62 var imageData = ctx2D.getImageData(0, 0, 1, 1); | |
63 imgdata = imageData.data; | |
64 shouldBe("imgdata[0]", "255"); | |
65 shouldBe("imgdata[1]", "0"); | |
66 shouldBe("imgdata[2]", "0"); | |
67 | |
68 // draw the webgl contents (green rect) on the canvas 2d context. | |
69 ctx2D.drawImage(canvas3D, 0, 0); | |
70 ctx2D.getImageData(0, 0, 1, 1); | |
71 imageData = ctx2D.getImageData(0, 0, 1, 1); | |
72 imgdata = imageData.data; | |
73 if (isDrawingBufferUndefined) { | |
74 // Current implementation draws transparent texture on the canvas 2d con
text, | |
75 // although the spec said it leads to undefined behavior. | |
76 shouldBe("imgdata[0]", "255"); | |
77 shouldBe("imgdata[1]", "0"); | |
78 shouldBe("imgdata[2]", "0"); | |
79 } else { | |
80 shouldBe("imgdata[0]", "0"); | |
81 shouldBe("imgdata[1]", "255"); | |
82 shouldBe("imgdata[2]", "0"); | |
83 } | |
84 | |
85 if (isDrawingBufferUndefined && window.testRunner) | |
86 testRunner.notifyDone(); | |
87 } | |
88 | |
89 function asyncTest() { | |
90 debug("Check for drawing webgl to canvas 2d several frames after drawing web
gl contents.") | |
91 debug("1) when drawingBuffer is preserved.") | |
92 drawWebGLToCanvas2D(preserve_ctx2D, preserve_canvas3D, false); | |
93 debug("2) when drawingBuffer is not preserved. It leads to undefined behavio
r.") | |
94 drawWebGLToCanvas2D(nonpreserve_ctx2D, nonpreserve_canvas3D, true); | |
95 } | |
96 | |
97 function startTestAfterFirstPaint() { | |
98 // create both canvas 2d and webgl contexts. | |
99 createContexts(); | |
100 // prepare webgl contents. | |
101 renderWebGL(preserve_gl); | |
102 renderWebGL(nonpreserve_gl); | |
103 | |
104 debug("Check for drawing webgl to canvas 2d on the same frame.") | |
105 debug("1) when drawingBuffer is preserved.") | |
106 drawWebGLToCanvas2D(preserve_ctx2D, preserve_canvas3D, false); | |
107 debug("2) when drawingBuffer is not preserved.") | |
108 drawWebGLToCanvas2D(nonpreserve_ctx2D, nonpreserve_canvas3D, false); | |
109 | |
110 if (window.testRunner) { | |
111 testRunner.waitUntilDone(); | |
112 testRunner.displayAsyncThen(asyncTest); | |
113 } else { | |
114 window.requestAnimationFrame(asyncTest); | |
115 } | |
116 } | |
117 | |
118 window.onload = function () { | |
119 window.requestAnimationFrame(startTestAfterFirstPaint); | |
120 } | |
121 | |
122 </script> | 40 </script> |
123 </body> | 41 </body> |
124 </html> | 42 </html> |
OLD | NEW |