Blitz - WPT: filter-target-offscreen-below-viewport-003.html

wpt / css / filter-effects / filter-target-offscreen-below-viewport-003.html

/css/filter-effects/filter-target-offscreen-below-viewport-003.html

<!DOCTYPE html>
<title>CSS Filter Effects test: SVG feOffset filter applied to element below initial viewport must not paint at viewport origin</title>
<link rel="author" title="Karl Dubost" href="mailto:karlcow@apple.com">
<link rel="help" href="https://drafts.csswg.org/filter-effects-1/#FilterProperty">
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=314999">
<link rel="match" href="filter-target-offscreen-below-viewport-003-ref.html">
<meta name="assert" content="An element placed entirely below the initial viewport with a CSS filter: url(#…) reference to an SVG feOffset filter must not produce any painted pixels inside the initial viewport.">
<style>
  html, body { margin: 0; background: white; }
  .spacer { height: calc(100vh + 50px); }
  .target { padding: 10px; background: black; color: white;
            filter: url(#offset); }
</style>
<div class="spacer"></div>
<div class="target">Filter target — should not contribute to viewport pixels.</div>
<svg width="0" height="0" color-interpolation-filters="sRGB" aria-hidden="true"
     style="position: absolute">
  <defs>
    <filter id="offset">
      <feOffset in="SourceAlpha" dx="8" dy="8"></feOffset>
    </filter>
  </defs>
</svg>

/css/filter-effects/filter-target-offscreen-below-viewport-003-ref.html

<!DOCTYPE html>
<title>CSS Filter Effects reference: empty viewport, target stays below</title>
<style>
  html, body { margin: 0; background: white; }
  .spacer { height: calc(100vh + 50px); }
  .target { padding: 10px; background: black; color: white; }
</style>
<div class="spacer"></div>
<div class="target">Filter target — should not contribute to viewport pixels.</div>