Blitz - WPT: dynamic-filter-changes-001.html

wpt / css / filter-effects / dynamic-filter-changes-001.html

/css/filter-effects/dynamic-filter-changes-001.html

<!DOCTYPE html>
<html class="reftest-wait">
<title>CSS Filters: dynamic filter changes on images with will-change: transform</title>
<link rel="author" title="Noel Gordon" href="mailto:noel@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=405803">
<link rel="match" href="reference/dynamic-filter-changes-001-ref.html">
<meta name="assert" content="A filtered image should be visible after adding a filter to an image with will-change: transform."/>

<style>
.filter {
  filter: invert(100%);
}
</style>

<script src="/common/reftest-wait.js"></script>
<script>
function load(element) {
  element.classList.add('filter');
  takeScreenshotDelayed(0);
}
</script>

<body>
  <img style="will-change: transform" onload="load(this)" src="/images/green-256x256.png">
</body>
</html>

/css/filter-effects/reference/dynamic-filter-changes-001-ref.html

<!DOCTYPE html>
<html>
<style>
  .filter {
    transform: translateZ(0);
    filter: invert(100%);
  }
</style>

<!-- There should be a bright pink box on this page -->
<body>
  <img class="filter" src="/images/green-256x256.png">
</body>

</html>