Blitz - WPT: filter-overflow-transformed-child-001.html

wpt / css / filter-effects / filter-overflow-transformed-child-001.html

/css/filter-effects/filter-overflow-transformed-child-001.html

<!DOCTYPE html>
<title>CSS Filters: filter should not clip transformed overflow children</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
<link rel="match" href="reference/filter-overflow-transformed-child-001-ref.html">
<meta name="assert" content="A child element with a CSS transform that overflows the filtered parent should not be clipped by the filter.">
<style>
body { margin: 0; }
</style>
<div style="margin: 100px; width: 40px; height: 40px; background-color: green; filter: saturate(50%);">
  <div>
    <div style="background-color: rgba(0, 255, 0, 0.5); width: 150px; height: 150px; transform: translate(-50px, -50px);"></div>
  </div>
</div>

/css/filter-effects/reference/filter-overflow-transformed-child-001-ref.html

<!DOCTYPE html>
<title>CSS Filters: filter should not clip transformed overflow children (reference)</title>
<style>
body { margin: 0; }
</style>
<div style="position: absolute; left: 50px; top: 50px; width: 150px; height: 150px; filter: saturate(50%);">
  <div style="position: absolute; left: 50px; top: 50px; width: 40px; height: 40px; background-color: green;"></div>
  <div style="position: absolute; width: 150px; height: 150px; background-color: rgba(0, 255, 0, 0.5);"></div>
</div>