object-view-box-fit-fill-svg.html (2449B)
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:fill</title> 5 <script src="support/testHelper.js"></script> 6 <link rel="author" href="mailto:khushalsagar@chromium.org"> 7 <link rel="match" href="object-view-box-fit-fill-svg-ref.html"> 8 <link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> 9 10 <body> 11 <style> 12 /* The test uses clip-path to avoid comparing edges with minor pixel differences 13 due to differences in scaling on highdpi devices */ 14 15 .view_box_subset { 16 object-view-box: inset(50px 0px 0px 0px); 17 object-fit: fill; 18 margin: 5px; 19 clip-path: inset(1px 0px 0px 0px); 20 } 21 22 .view_box_subset_with_position { 23 object-view-box: inset(50px 0px 0px 0px); 24 object-fit: fill; 25 margin: 5px; 26 object-position: 10px 10px; 27 background-color: grey; 28 } 29 30 .view_box_subset_with_scaling { 31 object-view-box: inset(50px 0px 0px 0px); 32 object-fit: fill; 33 margin: 5px; 34 width: 50px; 35 height: 100px; 36 37 /* The top row of pixels can have minor differences due to difference in order 38 of clipping and scaling operations */ 39 clip-path: inset(1px 0px 0px 0px); 40 } 41 42 .view_box_superset { 43 object-view-box: inset(0px -50px 0px 0px); 44 object-fit: fill; 45 margin: 5px; 46 background-color: grey; 47 } 48 49 .view_box_superset_with_position { 50 object-view-box: inset(0px -50px 0px 0px); 51 object-fit: fill; 52 margin: 5px; 53 background-color: grey; 54 object-position: 10px 10px; 55 } 56 57 .view_box_superset_with_scaling { 58 object-view-box: inset(0px -50px 0px 0px); 59 object-fit: fill; 60 margin: 5px; 61 background-color: grey; 62 width: 50px; 63 height: 50px; 64 } 65 66 .view_box_intersection { 67 object-view-box: inset(-50px 25px 50px 0px); 68 object-fit: fill; 69 margin: 5px; 70 background-color: grey; 71 clip-path: inset(0px 0px 1px 0px); 72 } 73 74 .view_box_no_intersection { 75 object-view-box: inset(-50px 25px 100px 0px); 76 object-fit: fill; 77 margin: 5px; 78 background-color: grey; 79 } 80 </style> 81 <img class="view_box_subset"></img> 82 <img class="view_box_subset_with_position"></img> 83 <img class="view_box_subset_with_scaling"></img> 84 85 <img class="view_box_superset"></img> 86 <img class="view_box_superset_with_position"></img> 87 <img class="view_box_superset_with_scaling"></img> 88 89 <img class="view_box_intersection"></img> 90 91 <img class="view_box_no_intersection"></img> 92 </body> 93 <script> 94 populateElements("support/blue-green-red-yellow-50x100.svg"); 95 </script>