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 worker thread: Four-color square on whi
te background.</title> | 11 <title>OffscreenCanvas 2d commit flow on worker thread: Four-color square on whi
te background.</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 <script id="myWorker" type="text/worker"> | 17 <script id="myWorker" type="text/worker"> |
18 | 18 |
19 var g_offscreen2d; | 19 var g_offscreen2d; |
20 var g_animationFrameNumber = 0; | 20 var g_animationFrameNumber = 0; |
21 | 21 |
22 self.onmessage = function(e) { | 22 self.onmessage = function(e) { |
23 var transferredCanvas = e.data; | 23 var transferredCanvas = e.data; |
24 g_offscreen2d = transferredCanvas.getContext("2d"); | 24 g_offscreen2d = transferredCanvas.getContext("2d"); |
| 25 g_offscreen2d.fillStyle = "red"; |
| 26 g_offscreen2d.fillRect(0, 0, 200, 200); |
25 drawLoop(); | 27 drawLoop(); |
26 } | 28 } |
27 | 29 |
28 function drawLoop() | 30 function drawLoop() |
29 { | 31 { |
30 if (g_animationFrameNumber < 3) { | 32 if (g_animationFrameNumber < 10) { |
31 g_offscreen2d.fillStyle = "red"; | |
32 g_offscreen2d.fillRect(0, 0, 200, 200); | |
33 g_animationFrameNumber++; | 33 g_animationFrameNumber++; |
34 g_offscreen2d.commit().then(drawLoop); | 34 // Purposely intersperse overdraw and non-overdraw commit cases to see |
| 35 // if OffscreenCanvas commit() handles both cases well. |
| 36 if (0 == g_animationFrameNumber % 2) { |
| 37 // When promise is used, the next drawLoop() is called after the first |
| 38 // frame is resolved; therefore there is no overdraw in this case. |
| 39 g_offscreen2d.commit().then(drawLoop); |
| 40 } else { |
| 41 // When the next drawLoop() is invoked regardless the promise resolve |
| 42 // status of the previous commit(), the frame committed in the next |
| 43 // drawLoop() is very likely to be overdrawn. |
| 44 g_offscreen2d.commit(); |
| 45 drawLoop(); |
| 46 } |
35 } else { | 47 } else { |
36 g_offscreen2d.fillStyle = "red"; | 48 g_offscreen2d.fillStyle = "red"; |
37 g_offscreen2d.fillRect(0, 0, 100, 100); | 49 g_offscreen2d.fillRect(0, 0, 100, 100); |
38 g_offscreen2d.fillStyle = "green"; | 50 g_offscreen2d.fillStyle = "green"; |
39 g_offscreen2d.fillRect(100, 0, 100, 100); | 51 g_offscreen2d.fillRect(100, 0, 100, 100); |
40 g_offscreen2d.fillStyle = "blue"; | 52 g_offscreen2d.fillStyle = "blue"; |
41 g_offscreen2d.fillRect(0, 100, 100, 100); | 53 g_offscreen2d.fillRect(0, 100, 100, 100); |
42 g_offscreen2d.fillStyle = "black"; | 54 g_offscreen2d.fillStyle = "black"; |
43 g_offscreen2d.fillRect(100, 100, 100, 100); | 55 g_offscreen2d.fillRect(100, 100, 100, 100); |
44 g_offscreen2d.commit() | 56 g_offscreen2d.commit() |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
84 </script> | 96 </script> |
85 </head> | 97 </head> |
86 <body onload="main()"> | 98 <body onload="main()"> |
87 <div style="position:relative; width:300px; height:300px; background-color:white
"> | 99 <div style="position:relative; width:300px; height:300px; background-color:white
"> |
88 </div> | 100 </div> |
89 <div id="container" style="position:absolute; top:0px; left:0px"> | 101 <div id="container" style="position:absolute; top:0px; left:0px"> |
90 <canvas id="c" width="200" height="200" class="nomargin"></canvas> | 102 <canvas id="c" width="200" height="200" class="nomargin"></canvas> |
91 </div> | 103 </div> |
92 </body> | 104 </body> |
93 </html> | 105 </html> |
OLD | NEW |