clip-path-invalidation-1a.html (1006B)
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 </style> 21 </head> 22 <body> 23 <div id="d1" class="outer clipped"></div> 24 <script type="text/javascript"> 25 function changeTransform() 26 { 27 document.getElementById("d1").style.transform = "scale(10)"; 28 document.documentElement.removeAttribute("class"); 29 } 30 31 document.addEventListener("MozReftestInvalidate", 32 changeTransform); 33 </script> 34 <svg height="0"> 35 <clipPath id="cp1"> 36 <rect x="10" y="10" width="5" height="5"/> 37 </clipPath> 38 </svg> 39 </body> 40 </html>