clip-path-invalidation-1b.html (1169B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: clipPath 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.clipped { 18 clip-path: url(#cp1); 19 } 20 21 div.inner { 22 width: 5px; 23 height: 5px; 24 border: 1px solid transparent; 25 will-change: transform; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="d1" class="outer clipped"><div class="inner"></div></div> 31 <script type="text/javascript"> 32 function changeTransform() 33 { 34 document.getElementById("d1").style.transform = "scale(10)"; 35 document.documentElement.removeAttribute("class"); 36 } 37 38 document.addEventListener("MozReftestInvalidate", 39 changeTransform); 40 </script> 41 <svg height="0"> 42 <clipPath id="cp1"> 43 <rect x="10" y="10" width="5" height="5"/> 44 </clipPath> 45 </svg> 46 </body> 47 </html>