| OLD | NEW | 
| (Empty) |  | 
 |   1 <!DOCTYPE html> | 
 |   2  | 
 |   3 <html> | 
 |   4   <head> | 
 |   5     <title>object-fit on canvas</title> | 
 |   6     <style type="text/css"> | 
 |   7       .group > div { | 
 |   8         display: inline-block; | 
 |   9         overflow: hidden; | 
 |  10         width: 72px; | 
 |  11         height: 72px; | 
 |  12         margin: 2px 10px; | 
 |  13         border: 1px solid black; | 
 |  14         background-color: gray; | 
 |  15       } | 
 |  16  | 
 |  17       .group > * > * { display: block; } | 
 |  18       .group > *:nth-child(1) * { width:100%; height:100%; } | 
 |  19       .group > *:nth-child(2) * { width:100%; margin-top:25%; } | 
 |  20       .group > *:nth-child(3) * { height:100%; margin-left:-50%; } | 
 |  21       .group > *:nth-child(4) * { width:288px; margin-left:-108px; margin-top:-3
    6px; } | 
 |  22       .group > *:nth-child(5) * { width:100%; margin-top:25%; } | 
 |  23       .group > *:nth-child(6) * { width:100%; margin-top:25%; } | 
 |  24       .group > *:nth-child(7) * { width:100%; height:100%; } | 
 |  25     </style> | 
 |  26     <script type="text/javascript" charset="utf-8"> | 
 |  27       if (window.testRunner) | 
 |  28         testRunner.waitUntilDone(); | 
 |  29  | 
 |  30       var circlesImage; | 
 |  31  | 
 |  32       function paintCanvas(canvas) | 
 |  33       { | 
 |  34         var ctx = canvas.getContext('2d'); | 
 |  35         ctx.drawImage(circlesImage, 0, 0); | 
 |  36       } | 
 |  37  | 
 |  38       function init() | 
 |  39       { | 
 |  40         circlesImage = new Image() | 
 |  41         circlesImage.addEventListener('load', imageLoaded, false); | 
 |  42         circlesImage.src = "resources/circles-landscape.png"; | 
 |  43       } | 
 |  44  | 
 |  45       function imageLoaded() | 
 |  46       { | 
 |  47         var canvases = document.getElementsByTagName('canvas'); | 
 |  48         for (var i = 0; i < canvases.length; ++i) | 
 |  49           paintCanvas(canvases[i]) | 
 |  50         if (window.testRunner) | 
 |  51           testRunner.notifyDone(); | 
 |  52       } | 
 |  53  | 
 |  54       window.addEventListener('load', init, false); | 
 |  55     </script> | 
 |  56   </head> | 
 |  57   <body> | 
 |  58  | 
 |  59     <div class="group"> | 
 |  60       <div><canvas width="288" height="144"></canvas></div> | 
 |  61       <div><canvas width="288" height="144"></canvas></div> | 
 |  62       <div><canvas width="288" height="144"></canvas></div> | 
 |  63       <div><canvas width="288" height="144"></canvas></div> | 
 |  64       <div><canvas width="288" height="144"></canvas></div> | 
 |  65       <div><canvas width="288" height="144"></canvas></div> | 
 |  66       <div><canvas width="288" height="144"></canvas></div> | 
 |  67     </div> | 
 |  68  | 
 |  69   </body> | 
 |  70 </html> | 
| OLD | NEW |