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