object-view-box-fit-cover-ref-template.html (1464B)
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: 40px; 19 height: 50px; 20 overflow: hidden; 21 display: inline-block; 22 } 23 .view_box_subset { 24 width: 50px; 25 height: 100px; 26 position: relative; 27 left: -5px; 28 top: -50px; 29 } 30 31 .container_view_box_subset_with_position { 32 width: 40px; 33 height: 50px; 34 overflow: hidden; 35 display: inline-block; 36 } 37 .view_box_subset_with_position { 38 width: 50px; 39 height: 100px; 40 position: relative; 41 top: -50px; 42 } 43 44 .container_view_box_subset_with_scaling { 45 width: 50px; 46 height: 100px; 47 overflow: hidden; 48 display: inline-block; 49 clip-path: inset(1px 0px 0px 0px); 50 } 51 .view_box_subset_with_scaling { 52 width: 100px; 53 height: 200px; 54 position: relative; 55 left: -25px; 56 top: -100px; 57 } 58 </style> 59 <div class="container_view_box_subset"> 60 <__TAG__ class="view_box_subset"></__TAG__> 61 </div> 62 <div class="container_view_box_subset_with_position"> 63 <__TAG__ class="view_box_subset_with_position"></__TAG__> 64 </div> 65 <div class="container_view_box_subset_with_scaling"> 66 <__TAG__ class="view_box_subset_with_scaling"></__TAG__> 67 </div> 68 </body> 69 <script> 70 populateElements("__IMAGE_SOURCE__"); 71 </script>