content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html - Issue 2778483002: Synchronize commits at end of JS task

Unified 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 side-by-side diff with in-line comments

« 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 »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html

diff --git a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html b/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html

index a00828dee66a2ad83107701773e465848925ff6e..80666645268ee8560a1749f332e4336ff4faeb9b 100644

--- a/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html

+++ b/content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html

@@ -8,96 +8,109 @@ that the baseline images are regenerated on the next run.

<html>

<head>

-<title>OffscreenCanvas commit flow on main thread: green square on white background.</title>

+<title>OffscreenCanvas webgl commit flow on main thread: Two Canvases</title>

.nomargin {

margin: 0px auto;

}

</style>

+/* This pixel test checks the following:

+ 1. Whether submission of frames for multiple canvases happen about the same

+ time for OffscreenCanvas.commit() that are invoked in the same JS task.

+ 2. Whether overdraw frame in one animation loop is handled well.

+ 3. Whether the drawn webgl image is position upright in commit().

+ 4. Drawing to OffscreenCanvas without commit() has no rendering results.

+ Correct end result of this test: The left canvas shows a upright white

+ triangle on a green background and the right canvas shows dark-blue fill.

+*/

var g_swapsBeforeAck = 15;

-var g_frameNumber = 0;

-var gl;

+var g_asyncCallbackNumber = 2;

-function main()

- var canvas = document.getElementById("c");

- var offscreenCanvas = canvas.transferControlToOffscreen();

- gl = offscreenCanvas.getContext("webgl", {preserveDrawingBuffer: true});

- gl.clearColor(1, 0, 0, 1);

- gl.clear(gl.COLOR_BUFFER_BIT);

- drawLoop();

+function getOffscreenContext(htmlCanvasId) {

+ return document.getElementById(htmlCanvasId).transferControlToOffscreen().getContext("webgl");

}

-function drawTriangle()

- gl.clearColor(0, 1, 0, 1);

- gl.clear(gl.COLOR_BUFFER_BIT);

- var prog = gl.createProgram();

- var vs = gl.createShader(gl.VERTEX_SHADER);

- gl.shaderSource(vs, ['attribute vec2 pos;',

- 'void main() {',

- ' gl_Position = vec4(pos, 0., 1.);',

- '}'].join('\n'));

- gl.compileShader(vs);

- if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {

- throw 'failed to compiled shader';

- }

- gl.attachShader(prog, vs);

- var fs = gl.createShader(gl.FRAGMENT_SHADER);

- gl.shaderSource(fs, ['void main() {',

- ' gl_FragColor = vec4(1.);',

- '}'].join('\n'));

- gl.compileShader(fs);

- if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {

- throw 'failed to compiled shader';

- }

- gl.attachShader(prog, fs);

+function startTest() {

+ var ctx1 = getOffscreenContext("canvas1");

+ var ctx2 = getOffscreenContext("canvas2");

- gl.linkProgram(prog);

- if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {

- throw "Could not link the shader program!";

- }

- gl.useProgram(prog);

+ ctx1.clearColor(0, 1, 0, 1);

+ ctx1.clear(ctx1.COLOR_BUFFER_BIT);

+ // The promise returned by this ctx1.commit() must be resolved at

+ // about the same time as the other ctx2.commit() below as they are in the

+ // same JS task.

+ ctx1.commit().then(function() {

+ ctx2.clearColor(0, 0, 1, 1);

+ ctx2.clear(ctx2.COLOR_BUFFER_BIT);

+ // This ctx2.commit() must happen after the other ctx2.commit() below.

+ ctx2.commit();

+ if (--g_asyncCallbackNumber == 0) waitForFinish();

+ });

- gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());

- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATIC_DRAW);

- var attr = gl.getAttribLocation(prog, 'pos');

- gl.enableVertexAttribArray(attr);

- gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);

+ function drawTriangle(gl)

+ {

+ gl.clearColor(0, 1, 0, 1);

+ gl.clear(gl.COLOR_BUFFER_BIT);

- gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);

+ var prog = gl.createProgram();

+ var vs = gl.createShader(gl.VERTEX_SHADER);

+ gl.shaderSource(vs, ['attribute vec2 pos;',

+ 'void main() {',

+ ' gl_Position = vec4(pos, 0., 1.);',

+ '}'].join('\n'));

+ gl.compileShader(vs);

+ if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {

+ throw 'failed to compiled shader';

+ }

+ gl.attachShader(prog, vs);

-function drawLoop()

- if (g_frameNumber < 10) {

- g_frameNumber++;

- // Purposely intersperse overdraw and non-overdraw commit cases to see

- // if OffscreenCanvas commit() handles both cases well.

- if (0 == g_frameNumber % 2) {

- // When promise is used, the next drawLoop() is called after the first

- // frame is resolved; therefore there is no overdraw in this case.

- gl.commit().then(drawLoop);

- } else {

- // When the next drawLoop() is invoked regardless the promise resolve

- // status of the previous commit(), the frame committed in the next

- // drawLoop() is very likely to be overdrawn.

- gl.commit();

- drawLoop();

+ var fs = gl.createShader(gl.FRAGMENT_SHADER);

+ gl.shaderSource(fs, ['void main() {',

+ ' gl_FragColor = vec4(1.);',

+ '}'].join('\n'));

+ gl.compileShader(fs);

+ if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {

+ throw 'failed to compiled shader';

}

- } else {

- drawTriangle();

- gl.commit();

+ gl.attachShader(prog, fs);

- // The following clear is never committed

- gl.clearColor(0, 0, 1, 1);

- gl.clear(gl.COLOR_BUFFER_BIT);

+ gl.linkProgram(prog);

+ if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {

+ throw "Could not link the shader program!";

+ }

+ gl.useProgram(prog);

+ gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());

+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-.5,0, 0,.5, .5,0]), gl.STATIC_DRAW);

+ var attr = gl.getAttribLocation(prog, 'pos');

+ gl.enableVertexAttribArray(attr);

+ gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0);

- waitForFinish();

+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);

}

+ // Do something complex to ctx2.

+ drawTriangle(ctx2);

+ // This ctx2.commit() must be resolved at about the same time as the first

+ // ctx1.commit() above because they are in the same JS task, no matter how

+ // complex the drawing operation is.

+ ctx2.commit().then(function() {

+ drawTriangle(ctx1);

+ ctx1.commit();

+ // The following clear is never committed

+ ctx1.clearColor(1, 0, 0, 1);

+ ctx1.clear(ctx1.COLOR_BUFFER_BIT);

+ if (--g_asyncCallbackNumber == 0) waitForFinish();

+ });

+function main() {

+ startTest();

}

function waitForFinish()

@@ -108,16 +121,17 @@ function waitForFinish()

} else {

g_swapsBeforeAck--;

document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;

- window.requestAnimationFrame(waitForFinish);

+ requestAnimationFrame(waitForFinish);

}

</script>

</head>

-<div style="position:relative; width:300px; height:300px; background-color:white">

+<div style="position:relative; width:700px; height:300px; background-color:white">

</div>

-<canvas id="c" width="300" height="300" class="nomargin"></canvas>

+<canvas id="canvas1" width="300" height="300" class="nomargin"></canvas>

+<canvas id="canvas2" width="300" height="300" class="nomargin"></canvas>

</div>

</body>

</html>