image-object-position-with-background-1-ref.html (1112B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <style type="text/css"> 10 .crop { 11 /* Wrapper-div to simulate the cropping that happens in 12 the testcase. (In the testcase, "object-position" pushes 13 the image's destination rect off towards the bottom-right, 14 and crops it to the content-box.) */ 15 height: 32px; 16 width: 32px; 17 overflow: hidden; 18 margin-bottom: 2px; 19 } 20 .test { 21 background: salmon; 22 padding-top: 5px; 23 padding-left: 5px; 24 display: block; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="crop"> 30 <img class="test" src="blue-32x32.png"> 31 </div> 32 <div class="crop"> 33 <embed class="test" src="blue-32x32.png"> 34 </div> 35 <div class="crop"> 36 <object class="test" data="blue-32x32.png"></object> 37 </div> 38 <div class="crop"> 39 <video class="test" poster="blue-32x32.png"></video> 40 </div> 41 </body> 42 </html>