object-view-box-fit-fill-canvas-ref.html (3014B)
1 <!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> 2 <!DOCTYPE html> 3 <title>CSS object-view-box with object-fit:fill (ref)</title> 4 <link rel="author" href="mailto:khushalsagar@chromium.org"> 5 <script src="support/testHelper.js"></script> 6 <link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> 7 8 <body> 9 <style> 10 div { 11 margin: 5px; 12 } 13 14 video { 15 object-fit: fill; 16 } 17 18 .container_view_box_subset { 19 width: 50px; 20 height: 50px; 21 overflow: hidden; 22 display: inline-block; 23 clip-path: inset(1px 0px 0px 0px); 24 } 25 .view_box_subset { 26 position: relative; 27 top: -50px; 28 } 29 30 .container_view_box_subset_with_position { 31 width: 50px; 32 height: 50px; 33 overflow: hidden; 34 background-color: grey; 35 display: inline-block; 36 } 37 .view_box_subset_with_position { 38 position: relative; 39 top: -40px; 40 left: 10px; 41 } 42 43 .container_view_box_subset_with_scaling { 44 width: 50px; 45 height: 100px; 46 overflow: hidden; 47 display: inline-block; 48 clip-path: inset(1px 0px 0px 0px); 49 } 50 .view_box_subset_with_scaling { 51 position: relative; 52 top: -100px; 53 width: 50px; 54 height: 200px; 55 } 56 57 .container_view_box_superset { 58 width: 100px; 59 height: 100px; 60 overflow: hidden; 61 display: inline-block; 62 background-color: grey; 63 } 64 65 .container_view_box_superset_with_position { 66 width: 100px; 67 height: 100px; 68 overflow: hidden; 69 display: inline-block; 70 background-color: grey; 71 } 72 .view_box_superset_with_position { 73 position: relative; 74 top: 10px; 75 left: 10px; 76 } 77 78 .container_view_box_superset_with_scaling { 79 width: 50px; 80 height: 50px; 81 overflow: hidden; 82 display: inline-block; 83 background-color: grey; 84 } 85 .view_box_superset_with_scaling { 86 width: 25px; 87 height: 50px; 88 object-fit: fill; 89 } 90 91 .container_view_box_intersection { 92 width: 25px; 93 height: 100px; 94 overflow: hidden; 95 display: inline-block; 96 background-color: grey; 97 clip-path: inset(0px 0px 1px 0px); 98 } 99 .view_box_intersection { 100 width: 50px; 101 height: 100px; 102 position: relative; 103 top: 50px; 104 } 105 106 .container_view_box_no_intersection { 107 width: 25px; 108 height: 50px; 109 overflow: hidden; 110 display: inline-block; 111 background-color: grey; 112 } 113 </style> 114 <div class="container_view_box_subset"> 115 <canvas class="view_box_subset"></canvas> 116 </div> 117 <div class="container_view_box_subset_with_position"> 118 <canvas class="view_box_subset_with_position"></canvas> 119 </div> 120 <div class="container_view_box_subset_with_scaling"> 121 <canvas class="view_box_subset_with_scaling"></canvas> 122 </div> 123 124 <div class="container_view_box_superset"> 125 <canvas></canvas> 126 </div> 127 <div class="container_view_box_superset_with_position"> 128 <canvas class="view_box_superset_with_position"></canvas> 129 </div> 130 <div class="container_view_box_superset_with_scaling"> 131 <canvas class="view_box_superset_with_scaling"></canvas> 132 </div> 133 134 <div class="container_view_box_intersection"> 135 <canvas class="view_box_intersection"></canvas> 136 </div> 137 138 <div class="container_view_box_no_intersection"> 139 </div> 140 </body> 141 <script> 142 populateElements(""); 143 </script>