mask-invalidation-2b.html (1173B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask invalidation.</title> 6 <style type="text/css"> 7 div.outer { 8 position: absolute; 9 background-color: purple; 10 border: solid purple; 11 width: 10px; 12 height: 10px; 13 transform: scale(20); 14 transform-origin: top left; 15 } 16 17 div.mask { 18 mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 10"><rect x="10" y="10" width="5" height="5" fill="black"/></svg>'); 19 } 20 21 div.inner { 22 width: 5px; 23 height: 5px; 24 border: 1px solid transparent; 25 will-change: transform; 26 } 27 28 </style> 29 </head> 30 <body> 31 <div id="d1" class="outer mask"><div class="inner"></div></div> 32 <script type="text/javascript"> 33 function changeTransform() 34 { 35 document.getElementById("d1").style.transform = "scale(10)"; 36 document.documentElement.removeAttribute("class"); 37 } 38 39 document.addEventListener("MozReftestInvalidate", 40 changeTransform); 41 </script> 42 </body> 43 </html>