object-view-box-fit-none-ref-template.html (1054B)
1 <!DOCTYPE html> 2 <title>CSS object-view-box with object-fit:none (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: -40px; 39 left: 10px; 40 } 41 </style> 42 <div class="container_view_box_subset"> 43 <__TAG__ class="view_box_subset"></__TAG__> 44 </div> 45 <div class="container_view_box_subset_with_position"> 46 <__TAG__ class="view_box_subset_with_position"></__TAG__> 47 </div> 48 </body> 49 <script> 50 populateElements("__IMAGE_SOURCE__"); 51 </script>