| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style type="text/css"> | 4 <style type="text/css"> |
| 5 .clippingContainer { | 5 .clippingContainer { |
| 6 width: 200px; | 6 width: 200px; |
| 7 height: 200px; | 7 height: 200px; |
| 8 overflow: hidden; | 8 overflow: hidden; |
| 9 } | 9 } |
| 10 | 10 |
| 11 </style> | 11 </style> |
| 12 | 12 |
| 13 <script> | 13 <script> |
| 14 function drawCanvas() | 14 function drawCanvas() |
| 15 { | 15 { |
| 16 if (window.testRunner) | 16 if (window.testRunner) |
| 17 testRunner.dumpAsText(true); | 17 testRunner.dumpAsTextWithPixelResults(); |
| 18 var canvas = document.getElementById("clippedCanvas"); | 18 var canvas = document.getElementById("clippedCanvas"); |
| 19 var context = canvas.getContext("2d"); | 19 var context = canvas.getContext("2d"); |
| 20 context.fillStyle = "red"; | 20 context.fillStyle = "red"; |
| 21 context.fillRect(0, 0, 400, 400); | 21 context.fillRect(0, 0, 400, 400); |
| 22 context.fillStyle = "green"; | 22 context.fillStyle = "green"; |
| 23 context.fillRect(0, 0, 200, 200); | 23 context.fillRect(0, 0, 200, 200); |
| 24 } | 24 } |
| 25 </script> | 25 </script> |
| 26 </head> | 26 </head> |
| 27 | 27 |
| 28 <body onload="drawCanvas()"> | 28 <body onload="drawCanvas()"> |
| 29 <div class="clippingContainer"> | 29 <div class="clippingContainer"> |
| 30 <canvas id="clippedCanvas" width="400" height="400"> | 30 <canvas id="clippedCanvas" width="400" height="400"> |
| 31 </canvas> | 31 </canvas> |
| 32 </div> | 32 </div> |
| 33 </body> | 33 </body> |
| 34 | 34 |
| 35 </html> | 35 </html> |
| OLD | NEW |