| 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> |
| (...skipping 20 matching lines...) Expand all Loading... |
| 31 | 31 |
| 32 self.onmessage = function(e) { | 32 self.onmessage = function(e) { |
| 33 g_ctx1 = e.data.offscreenCanvas1.getContext("2d"); | 33 g_ctx1 = e.data.offscreenCanvas1.getContext("2d"); |
| 34 g_ctx2 = e.data.offscreenCanvas2.getContext("2d"); | 34 g_ctx2 = e.data.offscreenCanvas2.getContext("2d"); |
| 35 | 35 |
| 36 startTest(); | 36 startTest(); |
| 37 } | 37 } |
| 38 | 38 |
| 39 function startTest() { | 39 function startTest() { |
| 40 g_ctx1.fillStyle = "green"; | 40 g_ctx1.fillStyle = "green"; |
| 41 g_ctx1.fillRect(0, 0, 300, 300); | 41 g_ctx1.fillRect(0, 0, 200, 200); |
| 42 // The promise returned by this g_ctx1.commit() must be resolved at | 42 // The promise returned by this g_ctx1.commit() must be resolved at |
| 43 // about the same time as the other g_ctx2.commit() below as they are in the | 43 // about the same time as the other g_ctx2.commit() below as they are in the |
| 44 // same JS task. | 44 // same JS task. |
| 45 g_ctx1.commit().then(function() { | 45 g_ctx1.commit().then(function() { |
| 46 g_ctx2.fillRect(0, 0, 300, 300); | 46 g_ctx2.fillRect(0, 0, 200, 200); |
| 47 // This g_ctx2.commit() must happen after the other g_ctx2.commit() below. | 47 // This g_ctx2.commit() must happen after the other g_ctx2.commit() below. |
| 48 g_ctx2.commit(); | 48 g_ctx2.commit(); |
| 49 if (--g_asyncCallbackNumber == 0) self.postMessage(""); | 49 if (--g_asyncCallbackNumber == 0) self.postMessage(""); |
| 50 }); | 50 }); |
| 51 | 51 |
| 52 function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) { | 52 function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) { |
| 53 var rot = Math.PI / 2 * 3; | 53 var rot = Math.PI / 2 * 3; |
| 54 var x = cx; | 54 var x = cx; |
| 55 var y = cy; | 55 var y = cy; |
| 56 var step = Math.PI / spikes; | 56 var step = Math.PI / spikes; |
| (...skipping 15 matching lines...) Expand all Loading... |
| 72 ctx.closePath(); | 72 ctx.closePath(); |
| 73 ctx.lineWidth = 5; | 73 ctx.lineWidth = 5; |
| 74 ctx.strokeStyle = 'black'; | 74 ctx.strokeStyle = 'black'; |
| 75 ctx.stroke(); | 75 ctx.stroke(); |
| 76 ctx.fillStyle = 'skyblue'; | 76 ctx.fillStyle = 'skyblue'; |
| 77 ctx.fill(); | 77 ctx.fill(); |
| 78 } | 78 } |
| 79 | 79 |
| 80 // Do something complex to g_ctx2. | 80 // Do something complex to g_ctx2. |
| 81 g_ctx2.fillStyle = "blue"; | 81 g_ctx2.fillStyle = "blue"; |
| 82 g_ctx2.fillRect(0, 0, 300, 300); | 82 g_ctx2.fillRect(0, 0, 200, 200); |
| 83 drawStar(g_ctx2, 150, 150, 25, 80, 60); | 83 drawStar(g_ctx2, 100, 100, 25, 60, 40); |
| 84 // This g_ctx2.commit() must be resolved at about the same time as the first | 84 // This g_ctx2.commit() must be resolved at about the same time as the first |
| 85 // g_ctx1.commit() above because they are in the same JS task, no matter how | 85 // g_ctx1.commit() above because they are in the same JS task, no matter how |
| 86 // complex the drawing operation is. | 86 // complex the drawing operation is. |
| 87 g_ctx2.commit().then(function() { | 87 g_ctx2.commit().then(function() { |
| 88 drawStar(g_ctx1, 100, 100, 7, 80, 30); | 88 drawStar(g_ctx1, 80, 80, 7, 60, 30); |
| 89 g_ctx1.commit(); | 89 g_ctx1.commit(); |
| 90 | 90 |
| 91 // The following fill is never committed | 91 // The following fill is never committed |
| 92 g_ctx1.fillStyle = "red"; | 92 g_ctx1.fillStyle = "red"; |
| 93 g_ctx1.fillRect(0, 0, 200, 200); | 93 g_ctx1.fillRect(0, 0, 200, 200); |
| 94 if (--g_asyncCallbackNumber == 0) self.postMessage(""); | 94 if (--g_asyncCallbackNumber == 0) self.postMessage(""); |
| 95 }); | 95 }); |
| 96 | 96 |
| 97 } | 97 } |
| 98 | 98 |
| (...skipping 29 matching lines...) Expand all Loading... |
| 128 waitForFinish(); | 128 waitForFinish(); |
| 129 }; | 129 }; |
| 130 worker.postMessage( | 130 worker.postMessage( |
| 131 {offscreenCanvas1: offscreenCanvas1, | 131 {offscreenCanvas1: offscreenCanvas1, |
| 132 offscreenCanvas2: offscreenCanvas2}, | 132 offscreenCanvas2: offscreenCanvas2}, |
| 133 [offscreenCanvas1, offscreenCanvas2]); | 133 [offscreenCanvas1, offscreenCanvas2]); |
| 134 } | 134 } |
| 135 </script> | 135 </script> |
| 136 </head> | 136 </head> |
| 137 <body onload="main()"> | 137 <body onload="main()"> |
| 138 <div style="position:relative; width:600px; height:300px; background-color:white
"> | 138 <div style="position:relative; width:400px; height:200px; background-color:white
"> |
| 139 </div> | 139 </div> |
| 140 <div id="container" style="position:absolute; top:0px; left:0px"> | 140 <div id="container" style="position:absolute; top:0px; left:0px"> |
| 141 <canvas id="canvas1" width="300" height="300" class="nomargin"></canvas> | 141 <canvas id="canvas1" width="200" height="200" class="nomargin"></canvas> |
| 142 <canvas id="canvas2" width="300" height="300" class="nomargin"></canvas> | 142 <canvas id="canvas2" width="200" height="200" class="nomargin"></canvas> |
| 143 </div> | 143 </div> |
| 144 </body> | 144 </body> |
| 145 </html> | 145 </html> |
| OLD | NEW |