5 <title>object-fit on canvas
</title>
6 <style type=
"text/css">
7 img
, embed
, object
, input
, canvas
, video
{
11 border: 1px solid black
;
12 background-color: gray
;
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) { }
24 <script type=
"text/javascript" charset=
"utf-8">
25 if (window.testRunner)
26 testRunner.waitUntilDone();
30 function paintCanvas(canvas)
32 var ctx = canvas.getContext('
2d');
33 ctx.drawImage(circlesImage,
0,
0);
38 circlesImage = new Image()
39 circlesImage.addEventListener('load', imageLoaded, false);
40 circlesImage.src =
"resources/circles-landscape.png";
43 function imageLoaded()
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();
52 window.addEventListener('load', init, false);
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>