Blitz - WPT: remove-filter-repaint.html

wpt / css / filter-effects / remove-filter-repaint.html

/css/filter-effects/remove-filter-repaint.html

<!DOCTYPE html>
<html class="reftest-wait">
<html>
<head>
  <title>CSS Filters: Repaint a compositing layer</title>
  <link rel="author" title="Simon Fraser" href="mailto:simon.fraser@apple.com>">
  <link rel="help" href="https://drafts.fxtf.org/filter-effects/#dropshadowEquivalent">
  <link rel="issue" href="https://bugs.webkit.org/show_bug.cgi?id=120135">
  <link rel="issue" href="https://chromiumcodereview.appspot.com/23526037">
  <link rel="match" href="reference/remove-filter-repaint-ref.html">
  <meta name="assert" content="This test ensures that we can repaint the compositing layer when removing a filter on an inline child of a compositing layer.">
  <script src="/common/reftest-wait.js"></script>
  <style>
    .backdrop {
      position: absolute;
      top: 0;
      left: 0;
      height: 100px;
      width: 100px;
      background-color: silver;
    }
    .overlay {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 400px;
      height: 100px;
      background: gray;
      box-shadow: 0 0 4px black;
    }
    .play {
      font-size: 36pt;
      background-color: navy;
      color: white;
    }
    .play.changed {
      filter: drop-shadow(black 0 0 5px);
    }
    .composited {
      will-change: transform;
    }
    </style>
    <script>
      function doTest() {
        requestAnimationFrame(function() {
          requestAnimationFrame(function() {
            document.getElementById('play').classList.remove('changed');
            takeScreenshot();
          });
        });
      }
      window.addEventListener('load', doTest, false);
  </script>
</head>
<body>
  <div class="composited backdrop"></div>
  <div class="overlay">
    <span id="play" class="play changed">this should be visible</span>
  </div>
</body>
</html>

/css/filter-effects/reference/remove-filter-repaint-ref.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Filters: Repaint a compositing layer</title>
    <style>
    .backdrop {
        position: absolute;
        top: 0;
        left: 0;
        height: 100px;
        width: 100px;
        background-color: silver;
    }

    .overlay {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 400px;
        height: 100px;
        background: gray;
        box-shadow: 0 0 4px black;
    }

    .play {
        font-size: 36pt;
        background-color: navy;
        color: white;
    }
    .composited {
        will-change: transform;
    }
    </style>
</head>
<body>
    <div class="composited backdrop"></div>
    <div class="overlay">
        <span id="play" class="play changed">this should be visible</span>
    </div>
</body>
</html>