image-object-position-dyn-1.html (1481B)
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 repaint correctly when "object-position" is 8 adjusted on a replaced element with SVG content. We start with 9 "object-position: 10px 15px", which lets a strip of the red background 10 show through on the top and left edges. We then change dynamically to 11 "object-position: 0 0", which (given our "object-fit: fill" value) lets 12 the SVG image fill each replaced element without any uncovered edges. 13 --> 14 <html class="reftest-wait"> 15 <head> 16 <meta charset="utf-8"> 17 <style type="text/css"> 18 embed, img, object, video { 19 object-fit: fill; 20 object-position: 10px 15px; 21 background: red; 22 width: 50px; 23 height: 30px; 24 } 25 </style> 26 <script> 27 function go() { 28 var elemsToTweak = ["embed", "img", "object", "video"]; 29 elemsToTweak.forEach(tweakElemObjectFit); 30 document.documentElement.removeAttribute("class"); 31 } 32 function tweakElemObjectFit(tagName) { 33 var elem = document.getElementsByTagName(tagName)[0]; 34 elem.style.objectPosition = "0 0"; 35 } 36 document.addEventListener("MozReftestInvalidate", go); 37 </script> 38 </head> 39 <body> 40 <embed src="500.svg"> 41 <img src="500.svg"> 42 <object data="500.svg"></object> 43 <video poster="500.svg"></video> 44 </body> 45 </html>