object-view-box-fit-contain-img.html (1271B)
1 <!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> 2 <!DOCTYPE html> 3 <html> 4 <title>CSS object-view-box with object-fit:contain</title> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="object-view-box-fit-contain-img-ref.html"> 7 <script src="support/testHelper.js"></script> 8 <link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> 9 10 <body> 11 <style> 12 .view_box_subset { 13 object-view-box: inset(50px 0px 0px 0px); 14 object-fit: contain; 15 width: 50px; 16 height: 100px; 17 background-color: grey; 18 margin: 5px; 19 } 20 21 .view_box_subset_with_position { 22 object-view-box: inset(50px 0px 0px 0px); 23 object-fit: contain; 24 width: 50px; 25 height: 100px; 26 background-color: grey; 27 margin: 5px; 28 29 object-position: 0% 0%; 30 background-color: grey; 31 } 32 33 .view_box_subset_with_scaling { 34 object-view-box: inset(50px 0px 0px 0px); 35 object-fit: contain; 36 background-color: grey; 37 margin: 5px; 38 39 width: 100px; 40 height: 200px; 41 object-position: 25px 125px; 42 } 43 </style> 44 <img class="view_box_subset"></img> 45 <img class="view_box_subset_with_position"></img> 46 <img class="view_box_subset_with_scaling"></img> 47 </body> 48 <script> 49 populateElements("support/exif-orientation-6-ru.jpg"); 50 </script>