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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | Download patch
« no previous file with comments | « no previous file | content/test/data/gpu/pixel_offscreenCanvas_2d_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 2d commit flow on main thread: Four-color squares on whit e background.</title> 11 <title>OffscreenCanvas 2d 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 </head> 17 </head>
18 <body onload="main()"> 18 <body onload="main()">
19 <div style="position:relative; width:300px; height:300px; background-color:white "> 19 <div style="position:relative; width:600px; height:300px; background-color:white ">
20 </div> 20 </div>
21 <div id="container" style="position:absolute; top:0px; left:0px"> 21 <div id="container" style="position:absolute; top:0px; left:0px">
22 <canvas id="c" width="200" height="200" class="nomargin"></canvas> 22 <canvas id="canvas1" width="300" height="300" class="nomargin"></canvas>
23 <canvas id="canvas2" width="300" height="300" class="nomargin"></canvas>
23 </div> 24 </div>
24 <script> 25 <script>
26 /* This pixel test checks the following:
27 1. Whether submission of frames for multiple canvases happen about the same
28 time for OffscreenCanvas.commit() that are invoked in the same JS task.
29 2. Whether overdraw frame in one animation loop is handled well.
30 3. Whether the drawn 2d image is position upright in commit().
31 4. Drawing to OffscreenCanvas without commit() has no rendering results.
32
33 Correct end result of this test: The left canvas shows a seven-spike skyblue
34 star on the top-left corner of a green background and the right canvas shows
35 a sky-blue fill.
36 */
37
25 var g_swapsBeforeAck = 15; 38 var g_swapsBeforeAck = 15;
39 var g_asyncCallbackNumber = 2;
26 40
27 function main() 41 function getOffscreenContext(htmlCanvasId) {
28 { 42 return document.getElementById(htmlCanvasId).transferControlToOffscreen().getC ontext("2d");
29 drawLoop();
30 } 43 }
31 44
32 var g_animationFrameNumber = 0; 45 function startTest() {
33 var canvas = document.getElementById("c"); 46 var ctx1 = getOffscreenContext("canvas1");
34 var offscreenCanvas = canvas.transferControlToOffscreen(); 47 var ctx2 = getOffscreenContext("canvas2");
35 var offscreen2d = offscreenCanvas.getContext("2d");
36 offscreen2d.fillStyle = "red";
37 offscreen2d.fillRect(0, 0, 200, 200);
38 48
39 function drawLoop() 49 ctx1.fillStyle = "green";
40 { 50 ctx1.fillRect(0, 0, 300, 300);
41 if (g_animationFrameNumber < 10) { 51 // The promise returned by this ctx1.commit() must be resolved at
42 g_animationFrameNumber++; 52 // about the same time as the other ctx2.commit() below as they are in the
43 // Purposely intersperse overdraw and non-overdraw commit cases to see 53 // same JS task.
44 // if OffscreenCanvas commit() handles both cases well. 54 ctx1.commit().then(function() {
45 if (0 == g_animationFrameNumber % 2) { 55 ctx2.fillRect(0, 0, 300, 300);
46 // When promise is used, the next drawLoop() is called after the first 56 // This ctx2.commit() must happen after the other ctx2.commit() below.
47 // frame is resolved; therefore there is no overdraw in this case. 57 ctx2.commit();
48 offscreen2d.commit().then(drawLoop); 58 if (--g_asyncCallbackNumber == 0) waitForFinish();
49 } else { 59 });
50 // When the next drawLoop() is invoked regardless the promise resolve 60
51 // status of the previous commit(), the frame committed in the next 61 function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
52 // drawLoop() is very likely to be overdrawn. 62 var rot = Math.PI / 2 * 3;
53 offscreen2d.commit(); 63 var x = cx;
54 drawLoop(); 64 var y = cy;
65 var step = Math.PI / spikes;
66
67 ctx.beginPath();
68 ctx.moveTo(cx, cy - outerRadius);
69 for (i = 0; i < spikes; i++) {
70 x = cx + Math.cos(rot) * outerRadius;
71 y = cy + Math.sin(rot) * outerRadius;
72 ctx.lineTo(x, y);
73 rot += step;
74
75 x = cx + Math.cos(rot) * innerRadius;
76 y = cy + Math.sin(rot) * innerRadius;
77 ctx.lineTo(x, y);
78 rot += step;
55 } 79 }
56 } else { 80 ctx.lineTo(cx, cy - outerRadius);
57 offscreen2d.fillStyle = "red"; 81 ctx.closePath();
58 offscreen2d.fillRect(0, 0, 100, 100); 82 ctx.lineWidth = 5;
59 offscreen2d.fillStyle = "green"; 83 ctx.strokeStyle = 'black';
60 offscreen2d.fillRect(100, 0, 100, 100); 84 ctx.stroke();
61 offscreen2d.fillStyle = "blue"; 85 ctx.fillStyle = 'skyblue';
62 offscreen2d.fillRect(0, 100, 100, 100); 86 ctx.fill();
63 offscreen2d.fillStyle = "black"; 87 }
64 offscreen2d.fillRect(100, 100, 100, 100); 88
65 offscreen2d.commit(); 89 // Do something complex to ctx2.
90 ctx2.fillStyle = "blue";
91 ctx2.fillRect(0, 0, 300, 300);
92 drawStar(ctx2, 150, 150, 25, 80, 60);
93 // This ctx2.commit() must be resolved at about the same time as the first
94 // ctx1.commit() above because they are in the same JS task, no matter how
95 // complex the drawing operation is.
96 ctx2.commit().then(function() {
97 drawStar(ctx1, 100, 100, 7, 80, 30);
98 ctx1.commit();
66 99
67 // The following fill is never committed 100 // The following fill is never committed
68 offscreen2d.fillStyle = "blue"; 101 ctx1.fillStyle = "red";
69 offscreen2d.fillRect(0, 0, 200, 200); 102 ctx1.fillRect(0, 0, 200, 200);
70 waitForFinish(); 103 if (--g_asyncCallbackNumber == 0) waitForFinish();
71 } 104 });
105
106 }
107
108 function main() {
109 startTest();
72 } 110 }
73 111
74 function waitForFinish() 112 function waitForFinish()
75 { 113 {
76 if (g_swapsBeforeAck == 0) { 114 if (g_swapsBeforeAck == 0) {
77 domAutomationController.setAutomationId(1); 115 domAutomationController.setAutomationId(1);
78 domAutomationController.send("SUCCESS"); 116 domAutomationController.send("SUCCESS");
79 } else { 117 } else {
80 g_swapsBeforeAck--; 118 g_swapsBeforeAck--;
81 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1; 119 document.getElementById('container').style.zIndex = g_swapsBeforeAck + 1;
82 window.requestAnimationFrame(waitForFinish); 120 requestAnimationFrame(waitForFinish);
83 } 121 }
84 } 122 }
123
85 </script> 124 </script>
86 </body> 125 </body>
87 </html> 126 </html>
OLDNEW
« no previous file with comments | « no previous file | content/test/data/gpu/pixel_offscreenCanvas_2d_commit_worker.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698