object-fit-containcontainintrinsicsize-png-001e.tentative.html (1908B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Test: 'object-fit: contain' and 'contain-intrinsic-size' on an embed element, embedding 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 embed { 14 border: 1px dashed gray; 15 padding: 1px; 16 image-rendering: pixelated; 17 float: left; 18 object-position: top left; 19 contain: size; 20 } 21 br { 22 clear: both; 23 } 24 .big { 25 contain-intrinsic-width: 32px; 26 contain-intrinsic-height: 48px; 27 } 28 .small { 29 contain-intrinsic-width: 8px; 30 contain-intrinsic-height: 8px; 31 } 32 33 .cover { object-fit: cover } 34 .contain { object-fit: contain } 35 .fill { object-fit: fill } 36 .none { object-fit: none } 37 .scaledown { object-fit: scale-down } 38 39 </style> 40 </head> 41 <body> 42 <!-- big: --> 43 <embed src="support/colors-16x8.png" class="big cover"></embed> 44 <embed src="support/colors-16x8.png" class="big contain"></embed> 45 <embed src="support/colors-16x8.png" class="big fill"></embed> 46 <embed src="support/colors-16x8.png" class="big none"></embed> 47 <embed src="support/colors-16x8.png" class="big scaledown"></embed> 48 <br> 49 <!-- small: --> 50 <embed src="support/colors-16x8.png" class="small cover"></embed> 51 <embed src="support/colors-16x8.png" class="small contain"></embed> 52 <embed src="support/colors-16x8.png" class="small fill"></embed> 53 <embed src="support/colors-16x8.png" class="small none"></embed> 54 <embed src="support/colors-16x8.png" class="small scaledown"></embed> 55 <br> 56 </body> 57 </html>