mask-opacity-invalidation-1.html (901B)
1 <!DOCTYPE html> 2 <html lang="en" class="reftest-wait"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <title></title> 6 <style> 7 #mask { 8 clip-path: circle(50%); 9 width: 100px; 10 height: 100px; 11 opacity: 0.9; 12 } 13 14 #content { 15 width: 100px; 16 height: 100px; 17 background-color: green; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div id="mask"> 24 <div id="content"></div> 25 </div> 26 27 <script type="text/javascript"> 28 function step1() { 29 document.querySelector("#mask").style.opacity = 0.1; 30 window.requestAnimationFrame(() => window.requestAnimationFrame(step2)); 31 }; 32 33 function step2() { 34 document.querySelector("#mask").style.opacity = 0.5; 35 document.documentElement.removeAttribute("class"); 36 } 37 38 window.addEventListener("MozReftestInvalidate", step1); 39 </script> 40 </body> 41 </html>