Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(258)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html

Issue 2778483002: Synchronize commits at end of JS task (Closed)
Patch Set: fix layout test Created 3 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html ('k') | content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 webgl commit flow on main thread: Two Canvases</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 /* This pixel test checks the following:
19 1. Whether submission of frames for multiple canvases happen about the same
20 time for OffscreenCanvas.commit() that are invoked in the same JS task.
21 2. Whether overdraw frame in one animation loop is handled well.
22 3. Whether the drawn webgl image is position upright in commit().
23 4. Drawing to OffscreenCanvas without commit() has no rendering results.
24
25 Correct end result of this test: The left canvas shows a upright white
26 triangle on a green background and the right canvas shows dark-blue fill.
27 */
28
18 var g_swapsBeforeAck = 15; 29 var g_swapsBeforeAck = 15;
19 var g_frameNumber = 0; 30 var g_asyncCallbackNumber = 2;
20 var gl;
21 31
22 function main() 32 function getOffscreenContext(htmlCanvasId) {
23 { 33 return document.getElementById(htmlCanvasId).transferControlToOffscreen().getC ontext("webgl");
24 var canvas = document.getElementById("c");
25 var offscreenCanvas = canvas.transferControlToOffscreen();
26 gl = offscreenCanvas.getContext("webgl", {preserveDrawingBuffer: true});
27 gl.clearColor(1, 0, 0, 1);
28 gl.clear(gl.COLOR_BUFFER_BIT);
29 drawLoop();
30 } 34 }
31 35
32 function drawTriangle() 36 function startTest() {
33 { 37 var ctx1 = getOffscreenContext("canvas1");
34 gl.clearColor(0, 1, 0, 1); 38 var ctx2 = getOffscreenContext("canvas2");
35 gl.clear(gl.COLOR_BUFFER_BIT);
36 39
37 var prog = gl.createProgram(); 40 ctx1.clearColor(0, 1, 0, 1);
38 var vs = gl.createShader(gl.VERTEX_SHADER); 41 ctx1.clear(ctx1.COLOR_BUFFER_BIT);
39 gl.shaderSource(vs, ['attribute vec2 pos;', 42 // The promise returned by this ctx1.commit() must be resolved at
40 'void main() {', 43 // about the same time as the other ctx2.commit() below as they are in the
41 ' gl_Position = vec4(pos, 0., 1.);', 44 // same JS task.
42 '}'].join('\n')); 45 ctx1.commit().then(function() {
43 gl.compileShader(vs); 46 ctx2.clearColor(0, 0, 1, 1);
44 if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) { 47 ctx2.clear(ctx2.COLOR_BUFFER_BIT);
45 throw 'failed to compiled shader'; 48 // This ctx2.commit() must happen after the other ctx2.commit() below.
49 ctx2.commit();
50 if (--g_asyncCallbackNumber == 0) waitForFinish();
51 });
52
53 function drawTriangle(gl)
54 {
55 gl.clearColor(0, 1, 0, 1);
56 gl.clear(gl.COLOR_BUFFER_BIT);
57
58 var prog = gl.createProgram();
59 var vs = gl.createShader(gl.VERTEX_SHADER);
60 gl.shaderSource(vs, ['attribute vec2 pos;',
61 'void main() {',
62 ' gl_Position = vec4(pos, 0., 1.);',
63 '}'].join('\n'));
64 gl.compileShader(vs);
65 if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
66 throw 'failed to compiled shader';
67 }
68 gl.attachShader(prog, vs);
69
70 var fs = gl.createShader(gl.FRAGMENT_SHADER);
71 gl.shaderSource(fs, ['void main() {',
72 ' gl_FragColor = vec4(1.);',
73 '}'].join('\n'));
74 gl.compileShader(fs);
75 if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
76 throw 'failed to compiled shader';
77 }
78 gl.attachShader(prog, fs);
79
80 gl.linkProgram(prog);
81 if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
82 throw "Could not link the shader program!";
83 }
84 gl.useProgram(prog);
85
86 gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
87 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STA TIC_DRAW);
88 var attr = gl.getAttribLocation(prog, 'pos');
89 gl.enableVertexAttribArray(attr);
90 gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);
91
92 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
46 } 93 }
47 gl.attachShader(prog, vs);
48 94
49 var fs = gl.createShader(gl.FRAGMENT_SHADER); 95 // Do something complex to ctx2.
50 gl.shaderSource(fs, ['void main() {', 96 drawTriangle(ctx2);
51 ' gl_FragColor = vec4(1.);', 97 // This ctx2.commit() must be resolved at about the same time as the first
52 '}'].join('\n')); 98 // ctx1.commit() above because they are in the same JS task, no matter how
53 gl.compileShader(fs); 99 // complex the drawing operation is.
54 if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) { 100 ctx2.commit().then(function() {
55 throw 'failed to compiled shader'; 101 drawTriangle(ctx1);
56 } 102 ctx1.commit();
57 gl.attachShader(prog, fs);
58 103
59 gl.linkProgram(prog); 104 // The following clear is never committed
60 if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { 105 ctx1.clearColor(1, 0, 0, 1);
61 throw "Could not link the shader program!"; 106 ctx1.clear(ctx1.COLOR_BUFFER_BIT);
62 } 107 if (--g_asyncCallbackNumber == 0) waitForFinish();
63 gl.useProgram(prog); 108 });
64 109
65 gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
66 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATI C_DRAW);
67 var attr = gl.getAttribLocation(prog, 'pos');
68 gl.enableVertexAttribArray(attr);
69 gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);
70
71 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
72 } 110 }
73 111
74 function drawLoop() 112 function main() {
75 { 113 startTest();
76 if (g_frameNumber < 10) {
77 g_frameNumber++;
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 }
91 } else {
92 drawTriangle();
93 gl.commit();
94
95 // The following clear is never committed
96 gl.clearColor(0, 0, 1, 1);
97 gl.clear(gl.COLOR_BUFFER_BIT);
98
99 waitForFinish();
100 }
101 } 114 }
102 115
103 function waitForFinish() 116 function waitForFinish()
104 { 117 {
105 if (g_swapsBeforeAck == 0) { 118 if (g_swapsBeforeAck == 0) {
106 domAutomationController.setAutomationId(1); 119 domAutomationController.setAutomationId(1);
107 domAutomationController.send("SUCCESS"); 120 domAutomationController.send("SUCCESS");
108 } else { 121 } else {
109 g_swapsBeforeAck--; 122 g_swapsBeforeAck--;
110 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; 123 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
111 window.requestAnimationFrame(waitForFinish); 124 requestAnimationFrame(waitForFinish);
112 } 125 }
113 } 126 }
114 </script> 127 </script>
115 </head> 128 </head>
116 <body onload="main()"> 129 <body onload="main()">
117 <div style="position:relative; width:300px; height:300px; background-color:white "> 130 <div style="position:relative; width:700px; height:300px; background-color:white ">
118 </div> 131 </div>
119 <div id="container" style="position:absolute; top:0px; left:0px"> 132 <div id="container" style="position:absolute; top:0px; left:0px">
120 <canvas id="c" width="300" height="300" class="nomargin"></canvas> 133 <canvas id="canvas1" width="300" height="300" class="nomargin"></canvas>
134 <canvas id="canvas2" width="300" height="300" class="nomargin"></canvas>
121 </div> 135 </div>
122 </body> 136 </body>
123 </html> 137 </html>
OLDNEW
« no previous file with comments | « content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html ('k') | content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_worker.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698