| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <html> |
| 4 <head> |
| 5 <title>object-fit on canvas</title> |
| 6 <style type="text/css"> |
| 7 img, embed, object, input, canvas, video { |
| 8 width: 72px; |
| 9 height: 72px; |
| 10 margin: 2px 10px; |
| 11 border: 1px solid black; |
| 12 background-color: gray; |
| 13 } |
| 14 |
| 15 .group { object-fit: contain; } |
| 16 .group > *:nth-child(1) { object-fit: fill; } |
| 17 .group > *:nth-child(2) { object-fit: contain; } |
| 18 .group > *:nth-child(3) { object-fit: cover; } |
| 19 .group > *:nth-child(4) { object-fit: none; } |
| 20 .group > *:nth-child(5) { object-fit: scale-down; } |
| 21 .group > *:nth-child(6) { object-fit: inherit; } |
| 22 .group > *:nth-child(7) { } |
| 23 </style> |
| 24 <script type="text/javascript" charset="utf-8"> |
| 25 if (window.testRunner) |
| 26 testRunner.waitUntilDone(); |
| 27 |
| 28 var circlesImage; |
| 29 |
| 30 function paintCanvas(canvas) |
| 31 { |
| 32 var ctx = canvas.getContext('2d'); |
| 33 ctx.drawImage(circlesImage, 0, 0); |
| 34 } |
| 35 |
| 36 function init() |
| 37 { |
| 38 circlesImage = new Image() |
| 39 circlesImage.addEventListener('load', imageLoaded, false); |
| 40 circlesImage.src = "resources/circles-landscape.png"; |
| 41 } |
| 42 |
| 43 function imageLoaded() |
| 44 { |
| 45 var canvases = document.getElementsByTagName('canvas'); |
| 46 for (var i = 0; i < canvases.length; ++i) |
| 47 paintCanvas(canvases[i]) |
| 48 if (window.testRunner) |
| 49 testRunner.notifyDone(); |
| 50 } |
| 51 |
| 52 window.addEventListener('load', init, false); |
| 53 </script> |
| 54 </head> |
| 55 <body> |
| 56 |
| 57 <div class="group"> |
| 58 <canvas width="288" height="144"></canvas> |
| 59 <canvas width="288" height="144"></canvas> |
| 60 <canvas width="288" height="144"></canvas> |
| 61 <canvas width="288" height="144"></canvas> |
| 62 <canvas width="288" height="144"></canvas> |
| 63 <canvas width="288" height="144"></canvas> |
| 64 <canvas width="288" height="144"></canvas> |
| 65 </div> |
| 66 |
| 67 </body> |
| 68 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 22482004:
Add support for the object-fit CSS property. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master