object-view-box-fit-fill-ref-template.html (2954B)
1 <!DOCTYPE html> 2 <title>CSS object-view-box with object-fit:fill (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: 50px; 20 overflow: hidden; 21 display: inline-block; 22 clip-path: inset(1px 0px 0px 0px); 23 } 24 .view_box_subset { 25 position: relative; 26 top: -50px; 27 } 28 29 .container_view_box_subset_with_position { 30 width: 50px; 31 height: 50px; 32 overflow: hidden; 33 background-color: grey; 34 display: inline-block; 35 } 36 .view_box_subset_with_position { 37 position: relative; 38 top: -40px; 39 left: 10px; 40 } 41 42 .container_view_box_subset_with_scaling { 43 width: 50px; 44 height: 100px; 45 overflow: hidden; 46 display: inline-block; 47 clip-path: inset(1px 0px 0px 0px); 48 } 49 .view_box_subset_with_scaling { 50 position: relative; 51 top: -100px; 52 width: 50px; 53 height: 200px; 54 } 55 56 .container_view_box_superset { 57 width: 100px; 58 height: 100px; 59 overflow: hidden; 60 display: inline-block; 61 background-color: grey; 62 } 63 64 .container_view_box_superset_with_position { 65 width: 100px; 66 height: 100px; 67 overflow: hidden; 68 display: inline-block; 69 background-color: grey; 70 } 71 .view_box_superset_with_position { 72 position: relative; 73 top: 10px; 74 left: 10px; 75 } 76 77 .container_view_box_superset_with_scaling { 78 width: 50px; 79 height: 50px; 80 overflow: hidden; 81 display: inline-block; 82 background-color: grey; 83 } 84 .view_box_superset_with_scaling { 85 width: 25px; 86 height: 50px; 87 object-fit: fill; 88 } 89 90 .container_view_box_intersection { 91 width: 25px; 92 height: 100px; 93 overflow: hidden; 94 display: inline-block; 95 background-color: grey; 96 clip-path: inset(0px 0px 1px 0px); 97 } 98 .view_box_intersection { 99 width: 50px; 100 height: 100px; 101 position: relative; 102 top: 50px; 103 } 104 105 .container_view_box_no_intersection { 106 width: 25px; 107 height: 50px; 108 overflow: hidden; 109 display: inline-block; 110 background-color: grey; 111 } 112 </style> 113 <div class="container_view_box_subset"> 114 <__TAG__ class="view_box_subset"></__TAG__> 115 </div> 116 <div class="container_view_box_subset_with_position"> 117 <__TAG__ class="view_box_subset_with_position"></__TAG__> 118 </div> 119 <div class="container_view_box_subset_with_scaling"> 120 <__TAG__ class="view_box_subset_with_scaling"></__TAG__> 121 </div> 122 123 <div class="container_view_box_superset"> 124 <__TAG__></__TAG__> 125 </div> 126 <div class="container_view_box_superset_with_position"> 127 <__TAG__ class="view_box_superset_with_position"></__TAG__> 128 </div> 129 <div class="container_view_box_superset_with_scaling"> 130 <__TAG__ class="view_box_superset_with_scaling"></__TAG__> 131 </div> 132 133 <div class="container_view_box_intersection"> 134 <__TAG__ class="view_box_intersection"></__TAG__> 135 </div> 136 137 <div class="container_view_box_no_intersection"> 138 </div> 139 </body> 140 <script> 141 populateElements("__IMAGE_SOURCE__"); 142 </script>