wpt / css / filter-effects / tainting-feflood-dynamic-002.html

Status: PASS | Duration: 6ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

/css/filter-effects/tainting-feflood-dynamic-002.html

<!DOCTYPE html>
<html class="reftest-wait">
<title>feFlood: tainting state changes dynamically</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#tainted-filter-primitives">
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#fedisplacemnentmap-restrictions">
<link rel="match" href="reference/green-100x100.html">
<script src="/common/reftest-wait.js"></script>
<svg>
  <filter id="flood" color-interpolation-filters="sRGB">
    <feFlood flood-color="rgb(0%, 100%, 50%)" style="color: rgb(0%, 100%, 50%)"/>
    <feDisplacementMap in="SourceGraphic"
                       xChannelSelector="G" yChannelSelector="B"
                       scale="100"/>
  </filter>
  <rect width="100" height="100" fill="red"/>
  <rect width="100" height="100" fill="green" filter="url(#flood)"/>
</svg>
<script>
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      document.querySelector('feFlood').style.floodColor = 'color-mix(in srgb, currentcolor 99.9%, black)';
      takeScreenshot();
    });
  });
</script>

/css/filter-effects/reference/green-100x100.html

<!DOCTYPE html>
<div style="width: 100px; height: 100px; background-color: green"></div>