mask-invalidation-2c.html (1189B)
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: 200px; 12 height: 200px; 13 } 14 15 div.mask { 16 mask-image: url(#m1); 17 } 18 </style> 19 </head> 20 <body> 21 <div id="d1" class="outer mask"></div> 22 <script type="text/javascript"> 23 function changeMask() 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 changeMask); 35 </script> 36 <svg height="0"> 37 <mask id="m1" x="0" y="0" width="1" height="1"> 38 <rect id="r1" x="50" y="50" width="100" height="100" style="stroke:none; fill: #ffffff;"/> 39 </mask> 40 </svg> 41 </body> 42 </html>