object-view-box-fit-cover-img.html (1290B)
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-cover-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: cover; 15 width: 40px; 16 height: 50px; 17 margin: 5px; 18 } 19 20 .view_box_subset_with_position { 21 object-view-box: inset(50px 0px 0px 0px); 22 object-fit: cover; 23 width: 40px; 24 height: 50px; 25 margin: 5px; 26 object-position: 0% 0%; 27 } 28 29 .view_box_subset_with_scaling { 30 object-view-box: inset(50px 0px 0px 0px); 31 object-fit: cover; 32 margin: 5px; 33 width: 50px; 34 height: 100px; 35 /* The top row of pixels can have minor differences due to mismatch in order 36 of clipping and scaling operations */ 37 clip-path: inset(1px 0px 0px 0px); 38 } 39 </style> 40 </body> 41 <img class="view_box_subset"></img> 42 <img class="view_box_subset_with_position"></img> 43 <img class="view_box_subset_with_scaling"></img> 44 </body> 45 <script> 46 populateElements("support/exif-orientation-6-ru.jpg"); 47 </script>