clip-path-invalidation-1d.html (1312B)
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: 200px; 12 height: 200px; 13 } 14 15 div.clipped { 16 clip-path: url(#cp1); 17 } 18 19 div.inner { 20 width: 5px; 21 height: 5px; 22 border: 1px solid transparent; 23 will-change: transform; 24 } 25 26 </style> 27 </head> 28 <body> 29 <div id="d1" class="outer clipped"><div class="inner"></div></div> 30 <script type="text/javascript"> 31 function changeClipPath() 32 { 33 document.getElementById("r1").setAttribute("width", "50"); 34 document.getElementById("r1").setAttribute("height", "50"); 35 document.getElementById("r1").setAttribute("x", "100"); 36 document.getElementById("r1").setAttribute("y", "100"); 37 38 document.documentElement.removeAttribute("class"); 39 } 40 41 document.addEventListener("MozReftestInvalidate", 42 changeClipPath); 43 </script> 44 <svg height="0"> 45 <clipPath id="cp1"> 46 <rect id="r1" x="50" y="50" width="100" height="100"/> 47 </clipPath> 48 </svg> 49 </body> 50 </html>