content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html - Issue 2594843002: Implementing promise-based commit for driving OffscreenCanvas animations

Unified Diff: content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html

Issue 2594843002: Implementing promise-based commit for driving OffscreenCanvas animations (Closed)

Patch Set: apply senorblanco feedback Created 4 years 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 | « no previous file | content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html » ('j') | third_party/WebKit/Source/core/offscreencanvas/OffscreenCanvas.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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 4aba7ada0a60a36054c84fd586aff35a9e3184c2..3d0164656d9661204ec95993566fd257a2c899e4 100644

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

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

@@ -14,29 +14,49 @@ that the baseline images are regenerated on the next run.

margin: 0px auto;

}

</style>

+</head>

+<body onload="main()">

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

+</div>

+<div id="container" style="position:absolute; top:0px; left:0px">

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

+</div>

var g_swapsBeforeAck = 15;

function main()

{

- draw();

- waitForFinish();

+ drawLoop();

}

-function draw()

+var g_animationFrameNumber = 0;

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

+var offscreenCanvas = canvas.transferControlToOffscreen();

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

+function drawLoop()

{

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

- var offscreenCanvas = canvas.transferControlToOffscreen();

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

- 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();

+ if (g_animationFrameNumber < 3) {

+ offscreen2d.fillStyle = "red";

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

+ g_animationFrameNumber++;

+ offscreen2d.commit().then(drawLoop);

+ } 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();

+ // The following fill is never committed

+ offscreen2d.fillStyle = "blue";

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

+ waitForFinish();

+ }

}

function waitForFinish()

@@ -47,16 +67,9 @@ function waitForFinish()

} else {

g_swapsBeforeAck--;

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

- window.webkitRequestAnimationFrame(waitForFinish);

+ window.requestAnimationFrame(waitForFinish);

}

</script>

-</head>

-<body onload="main()">

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

-</div>

-<div id="container" style="position:absolute; top:0px; left:0px">

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

-</div>

</body>

</html>