object-view-box-fit-contain-ref-template.html (1427B)
1 <!DOCTYPE html> 2 <title>CSS object-view-box with object-fit:contain (ref)</title> 3 <link rel="author" href="mailto:khushalsagar@chromium.org"> 4 <script src="support/testHelper.js"></script> 5 <link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> 6 7 <body> 8 <style> 9 div { 10 margin: 5px; 11 } 12 13 video { 14 object-fit: fill; 15 } 16 17 .container_view_box_subset { 18 width: 50px; 19 height: 100px; 20 overflow: hidden; 21 display: inline-block; 22 background-color: grey; 23 } 24 .view_box_subset { 25 position: relative; 26 top: -25px; 27 } 28 29 .container_view_box_subset_with_position { 30 width: 50px; 31 height: 100px; 32 overflow: hidden; 33 display: inline-block; 34 background-color: grey; 35 } 36 .view_box_subset_with_position { 37 position: relative; 38 top: -50px; 39 } 40 41 .container_view_box_subset_with_scaling { 42 width: 100px; 43 height: 200px; 44 overflow: hidden; 45 display: inline-block; 46 background-color: grey; 47 } 48 .view_box_subset_with_scaling { 49 position: relative; 50 top: 25px; 51 left: 25px; 52 width: 100px; 53 height: 200px; 54 } 55 </style> 56 <div class="container_view_box_subset"> 57 <__TAG__ class="view_box_subset"></__TAG__> 58 </div> 59 <div class="container_view_box_subset_with_position"> 60 <__TAG__ class="view_box_subset_with_position"></__TAG__> 61 </div> 62 <div class="container_view_box_subset_with_scaling"> 63 <__TAG__ class="view_box_subset_with_scaling"></__TAG__> 64 </div> 65 </body> 66 <script> 67 populateElements("__IMAGE_SOURCE__"); 68 </script>