image-object-fit-with-background-1.html (1121B)
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'. This 9 is an interesting case because, by default, images fill their container, 10 which means we can often optimize away the background completely. BUT, if 11 "object-fit" prevents the image from filling its container, we can't 12 optimize away the background; it need to be painted in the uncovered area. 13 --> 14 <html> 15 <head> 16 <meta charset="utf-8"> 17 <style type="text/css"> 18 .test { 19 background: salmon; 20 object-fit: none; 21 width: 40px; 22 height: 40px; 23 display: block; 24 margin-bottom: 2px; 25 } 26 </style> 27 </head> 28 <body> 29 <img class="test" src="blue-32x32.png"> 30 <embed class="test" src="blue-32x32.png"> 31 <object class="test" data="blue-32x32.png"></object> 32 <video class="test" poster="blue-32x32.png"></video> 33 </body> 34 </html>