object-fit-containcontainintrinsicsize-png-001c.tentative.html (2437B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html class="reftest-wait"> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Test: 'object-fit: contain' and 'contain-intrinsic-size' on a canvas element, drawing a PNG image</title> 10 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116"> 11 <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html"> 12 <style type="text/css"> 13 canvas { 14 border: 1px dashed gray; 15 padding: 1px; 16 image-rendering: pixelated; 17 float: left; 18 object-position: top left; 19 contain: size; 20 aspect-ratio: auto; 21 } 22 br { 23 clear: both; 24 } 25 .big { 26 contain-intrinsic-width: 32px; 27 contain-intrinsic-height: 48px; 28 } 29 .small { 30 contain-intrinsic-width: 8px; 31 contain-intrinsic-height: 8px; 32 } 33 34 .cover { object-fit: cover } 35 .contain { object-fit: contain } 36 .fill { object-fit: fill } 37 .none { object-fit: none } 38 .scaledown { object-fit: scale-down } 39 40 </style> 41 <script> 42 function drawImageToCanvases(imageURI) { 43 var image = new Image(); 44 image.onload = function() { 45 var canvasElems = document.getElementsByTagName("canvas"); 46 for (var i = 0; i < canvasElems.length; i++) { 47 var ctx = canvasElems[i].getContext("2d"); 48 ctx.drawImage(image, 0, 0); 49 } 50 document.documentElement.removeAttribute("class"); 51 } 52 image.src = imageURI; 53 } 54 </script> 55 </head> 56 <body onload="drawImageToCanvases('support/colors-16x8.png')"> 57 <!-- big: --> 58 <canvas width="16" height="8" class="big cover"></canvas> 59 <canvas width="16" height="8" class="big contain"></canvas> 60 <canvas width="16" height="8" class="big fill"></canvas> 61 <canvas width="16" height="8" class="big none"></canvas> 62 <canvas width="16" height="8" class="big scaledown"></canvas> 63 <br> 64 <!-- small: --> 65 <canvas width="16" height="8" class="small cover"></canvas> 66 <canvas width="16" height="8" class="small contain"></canvas> 67 <canvas width="16" height="8" class="small fill"></canvas> 68 <canvas width="16" height="8" class="small none"></canvas> 69 <canvas width="16" height="8" class="small scaledown"></canvas> 70 <br> 71 </body> 72 </html>