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