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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.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
Download patch
« no previous file with comments | « content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html ('k') | content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html
diff --git a/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html b/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html
index 02f3a123349302090c3c2026608a2e0a11a9730a..6b20de9c388eb9abb7e6376d66c250763eef5c86 100644
--- a/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html
+++ b/content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html
@@ -8,59 +8,94 @@ that the baseline images are regenerated on the next run.
<html>
<head>
-<title>OffscreenCanvas 2d commit flow on worker thread: Four-color square on white background.</title>
+<title>OffscreenCanvas 2d commit flow on worker thread: Two Canvases</title>
<style type="text/css">
.nomargin {
margin: 0px auto;
}
</style>
<script id="myWorker" type="text/worker">
+/* 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.
-var g_offscreen2d;
-var g_animationFrameNumber = 0;
+ 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_ctx1, g_ctx2;
+var g_asyncCallbackNumber = 2;
self.onmessage = function(e) {
- var transferredCanvas = e.data;
- g_offscreen2d = transferredCanvas.getContext("2d");
- g_offscreen2d.fillStyle = "red";
- g_offscreen2d.fillRect(0, 0, 200, 200);
- drawLoop();
+ g_ctx1 = e.data.offscreenCanvas1.getContext("2d");
+ g_ctx2 = e.data.offscreenCanvas2.getContext("2d");
+
+ startTest();
}
-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.
- g_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.
- g_offscreen2d.commit();
- drawLoop();
+function startTest() {
+ g_ctx1.fillStyle = "green";
+ g_ctx1.fillRect(0, 0, 300, 300);
+ // The promise returned by this g_ctx1.commit() must be resolved at
+ // about the same time as the other g_ctx2.commit() below as they are in the
+ // same JS task.
+ g_ctx1.commit().then(function() {
+ g_ctx2.fillRect(0, 0, 300, 300);
+ // This g_ctx2.commit() must happen after the other g_ctx2.commit() below.
+ g_ctx2.commit();
+ if (--g_asyncCallbackNumber == 0) self.postMessage("");
+ });
+
+ 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 {
- g_offscreen2d.fillStyle = "red";
- g_offscreen2d.fillRect(0, 0, 100, 100);
- g_offscreen2d.fillStyle = "green";
- g_offscreen2d.fillRect(100, 0, 100, 100);
- g_offscreen2d.fillStyle = "blue";
- g_offscreen2d.fillRect(0, 100, 100, 100);
- g_offscreen2d.fillStyle = "black";
- g_offscreen2d.fillRect(100, 100, 100, 100);
- g_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 g_ctx2.
+ g_ctx2.fillStyle = "blue";
+ g_ctx2.fillRect(0, 0, 300, 300);
+ drawStar(g_ctx2, 150, 150, 25, 80, 60);
+ // This g_ctx2.commit() must be resolved at about the same time as the first
+ // g_ctx1.commit() above because they are in the same JS task, no matter how
+ // complex the drawing operation is.
+ g_ctx2.commit().then(function() {
+ drawStar(g_ctx1, 100, 100, 7, 80, 30);
+ g_ctx1.commit();
// The following fill is never committed
- g_offscreen2d.fillStyle = "blue";
- g_offscreen2d.fillRect(0, 0, 200, 200);
- self.postMessage("");
- }
+ g_ctx1.fillStyle = "red";
+ g_ctx1.fillRect(0, 0, 200, 200);
+ if (--g_asyncCallbackNumber == 0) self.postMessage("");
+ });
+
}
+
</script>
<script>
var g_swapsBeforeAck = 15;
@@ -79,27 +114,32 @@ function waitForFinish()
} else {
g_swapsBeforeAck--;
document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
- window.requestAnimationFrame(waitForFinish);
+ requestAnimationFrame(waitForFinish);
}
}
function main()
{
- var canvas2D = document.getElementById("c");
- var offscreenCanvas = canvas2D.transferControlToOffscreen();
+ var offscreenCanvas1 = document.getElementById("canvas1").transferControlToOffscreen();
+ var offscreenCanvas2 = document.getElementById("canvas2").transferControlToOffscreen();
+
var worker = makeWorker(document.getElementById("myWorker").textContent);
worker.onmessage = function (e) {
waitForFinish();
};
- worker.postMessage(offscreenCanvas, [offscreenCanvas]);
+ worker.postMessage(
+ {offscreenCanvas1: offscreenCanvas1,
+ offscreenCanvas2: offscreenCanvas2},
+ [offscreenCanvas1, offscreenCanvas2]);
}
</script>
</head>
<body onload="main()">
-<div style="position:relative; width:300px; height:300px; background-color:white">
+<div style="position:relative; width:600px; 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>
+<canvas id="canvas1" width="300" height="300" class="nomargin"></canvas>
+<canvas id="canvas2" width="300" height="300" class="nomargin"></canvas>
</div>
</body>
</html>
« no previous file with comments | « content/test/data/gpu/pixel_offscreenCanvas_2d_commit_main.html ('k') | content/test/data/gpu/pixel_offscreenCanvas_webgl_commit_main.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698