mask-invalidation-2d.html (1354B)
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 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 mask"><div class="inner"></div></div> 30 <script type="text/javascript"> 31 function changeMask() 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 changeMask); 43 </script> 44 <svg height="0"> 45 <mask id="m1" x="0" y="0" width="1" height="1"> 46 <rect id="r1" x="50" y="50" width="100" height="100" style="stroke:none; fill: #ffffff;"/> 47 </mask> 48 </svg> 49 </body> 50 </html>