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

Unified Diff: content/test/data/gpu/pixel_offscreenCanvas_2d_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

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

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

index d2fe21285742b731e811187d51c0a17d5d8d08fc..837c64f5769289ce0ad58187ff527241392b2122 100644

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

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

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

<html>

<head>

-<title>OffscreenCanvas 2d commit flow on main thread: Four-color squares on white background.</title>

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

.nomargin {

margin: 0px auto;

@@ -16,59 +16,97 @@ that the baseline images are regenerated on the next run.

</style>

</head>

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

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

</div>

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

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

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

</div>

+/* 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 2d 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 seven-spike skyblue

+ star on the top-left corner of a green background and the right canvas shows

+ a sky-blue fill.

+*/

var g_swapsBeforeAck = 15;

+var g_asyncCallbackNumber = 2;

-function main()

- drawLoop();

+function getOffscreenContext(htmlCanvasId) {

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

}

-var g_animationFrameNumber = 0;

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

-var offscreenCanvas = canvas.transferControlToOffscreen();

-var offscreen2d = offscreenCanvas.getContext("2d");

-offscreen2d.fillStyle = "red";

-offscreen2d.fillRect(0, 0, 200, 200);

+function startTest() {

+ var ctx1 = getOffscreenContext("canvas1");

+ var ctx2 = getOffscreenContext("canvas2");

-function drawLoop()

- if (g_animationFrameNumber < 10) {

- g_animationFrameNumber++;

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

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

- if (0 == g_animationFrameNumber % 2) {

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

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

- offscreen2d.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.

- offscreen2d.commit();

- drawLoop();

+ ctx1.fillStyle = "green";

+ ctx1.fillRect(0, 0, 300, 300);

+ // 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.fillRect(0, 0, 300, 300);

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

+ ctx2.commit();

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

+ });

+ function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {

+ var rot = Math.PI / 2 * 3;

+ var x = cx;

+ var y = cy;

+ var step = Math.PI / spikes;

+ ctx.beginPath();

+ ctx.moveTo(cx, cy - outerRadius);

+ for (i = 0; i < spikes; i++) {

+ x = cx + Math.cos(rot) * outerRadius;

+ y = cy + Math.sin(rot) * outerRadius;

+ ctx.lineTo(x, y);

+ rot += step;

+ x = cx + Math.cos(rot) * innerRadius;

+ y = cy + Math.sin(rot) * innerRadius;

+ ctx.lineTo(x, y);

+ rot += step;

}

- } else {

- offscreen2d.fillStyle = "red";

- offscreen2d.fillRect(0, 0, 100, 100);

- offscreen2d.fillStyle = "green";

- offscreen2d.fillRect(100, 0, 100, 100);

- offscreen2d.fillStyle = "blue";

- offscreen2d.fillRect(0, 100, 100, 100);

- offscreen2d.fillStyle = "black";

- offscreen2d.fillRect(100, 100, 100, 100);

- offscreen2d.commit();

+ ctx.lineTo(cx, cy - outerRadius);

+ ctx.closePath();

+ ctx.lineWidth = 5;

+ ctx.strokeStyle = 'black';

+ ctx.stroke();

+ ctx.fillStyle = 'skyblue';

+ ctx.fill();

+ }

+ // Do something complex to ctx2.

+ ctx2.fillStyle = "blue";

+ ctx2.fillRect(0, 0, 300, 300);

+ drawStar(ctx2, 150, 150, 25, 80, 60);

+ // 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() {

+ drawStar(ctx1, 100, 100, 7, 80, 30);

+ ctx1.commit();

// The following fill is never committed

- offscreen2d.fillStyle = "blue";

- offscreen2d.fillRect(0, 0, 200, 200);

- waitForFinish();

- }

+ ctx1.fillStyle = "red";

+ ctx1.fillRect(0, 0, 200, 200);

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

+ });

+function main() {

+ startTest();

}

function waitForFinish()

@@ -79,9 +117,10 @@ function waitForFinish()

} else {

g_swapsBeforeAck--;

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

- window.requestAnimationFrame(waitForFinish);

+ requestAnimationFrame(waitForFinish);

}

</script>

</body>

</html>

« no previous file with comments | « no previous file | content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html » ('j') | no next file with comments »