image-object-position-with-background-1.html (1143B)
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 offset from the container via 'object-position'. This is 9 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-position" offsets the image from its container's content-box, we 12 can't optimize away the background; it need to be painted in the uncovered 13 area. 14 --> 15 <html> 16 <head> 17 <meta charset="utf-8"> 18 <style type="text/css"> 19 .test { 20 background: salmon; 21 object-position: 5px 5px; 22 width: 32px; 23 height: 32px; 24 display: block; 25 margin-bottom: 2px; 26 } 27 </style> 28 </head> 29 <body> 30 <img class="test" src="blue-32x32.png"> 31 <embed class="test" src="blue-32x32.png"> 32 <object class="test" data="blue-32x32.png"></object> 33 <video class="test" poster="blue-32x32.png"></video> 34 </body> 35 </html>