image-object-fit-with-background-2.html (1587B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This testcase ensures that we paint the background around an opaque image, 8 when the image is kept from filling the container via 'object-fit' (and 9 the img element is fragmented). This is an interesting case because, by 10 default, images fill their container, which means we can often optimize 11 away the background completely. BUT, if "object-fit" prevents the image 12 from filling its container, we can't optimize away the background; it need 13 to be painted in the uncovered area. 14 --> 15 <html class="reftest-paged"> 16 <head> 17 <meta charset="utf-8"> 18 <style type="text/css"> 19 img.test { 20 background: salmon; 21 object-fit: none; 22 width: 32px; 23 /* We make the height 6in larger than the image's intrinsic height, 24 * which gives us the following happy results: 25 * (1) the <img> will split over several 3in tall reftest-paged cards 26 * (so, we get to test fragmentation). 27 * (2) the image pixels end up on the second fragment (not the first), 28 * so we get to test image-data painting on later fragments. 29 * (3) the reference case can easily match us using a simple img 30 * with 3in-tall divs before & after it. 31 */ 32 height: calc(32px + 6in); 33 display: block; /* Required for fragmentation */ 34 } 35 </style> 36 </head> 37 <body> 38 <img class="test" src="blue-32x32.png"> 39 </body> 40 </html>