mask-opacity-invalidation-1.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html lang="en" class="reftest-wait">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title></title>

    <style>

    #mask {

      clip-path: circle(50%);

      width: 100px;

      height: 100px;

      opacity: 0.9;

    #content {

      width: 100px;

      height: 100px;

      background-color: green;

  </style>

</head>

<body>

    <div id="mask">

        <div id="content"></div>

    </div>

    <script type="text/javascript">

    function step1() {

      document.querySelector("#mask").style.opacity = 0.1;

      window.requestAnimationFrame(() => window.requestAnimationFrame(step2));

};

    function step2() {

      document.querySelector("#mask").style.opacity = 0.5;

      document.documentElement.removeAttribute("class");

    window.addEventListener("MozReftestInvalidate", step1);

    </script>

</body>

</html>