object-fit-containcontainintrinsicsize-png-001p.tentative.html (1936B)
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 video element with a PNG poster 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 video { 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 <video poster="support/colors-16x8.png" class="big cover"></video> 44 <video poster="support/colors-16x8.png" class="big contain"></video> 45 <video poster="support/colors-16x8.png" class="big fill"></video> 46 <video poster="support/colors-16x8.png" class="big none"></video> 47 <video poster="support/colors-16x8.png" class="big scaledown"></video> 48 <br> 49 <!-- small: --> 50 <video poster="support/colors-16x8.png" class="small cover"></video> 51 <video poster="support/colors-16x8.png" class="small contain"></video> 52 <video poster="support/colors-16x8.png" class="small fill"></video> 53 <video poster="support/colors-16x8.png" class="small none"></video> 54 <video poster="support/colors-16x8.png" class="small scaledown"></video> 55 <br> 56 </body> 57 </html>