geometry-border-image-001-ref.html (807B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 html, body { margin: 0; padding: 0; } 5 </style> 6 <body> 7 <canvas id ="canvas" width="200" height="200" style="position:relative; top:10px; left:10px"></canvas> 8 <script> 9 var canvas = document.getElementById('canvas'); 10 var context = canvas.getContext("2d"); 11 // The test geometry-border-image1.html has a paint canvas with width=200 and 12 // height=200, as well as a border-width=10 and border-image-slice: fill. All of 13 // them combined meaning that it draws to the (200+10*2)*(200+10*2) area, but 14 // stretch it to fit into the 200*200 area. 15 // So in this reftest, we create a 200*200 canvas. We draw to a 220*220 area 16 // and scale it to fit the 200*200 canvas. 17 context.scale(200/220, 200/220); 18 context.fillStyle = 'green'; 19 context.fillRect(0, 0, 220, 220); 20 </script> 21 </body> 22 </html>