OLD | NEW |
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 blue 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> |
OLD | NEW |