Blitz - WPT: backdrop-filter-boundary.html

wpt / css / filter-effects / backdrop-filter-boundary.html

/css/filter-effects/backdrop-filter-boundary.html

<!DOCTYPE html>
<meta charset="utf-8">
<meta name=fuzzy content="maxDifference=0-67;totalPixels=0-100000">
<title>backdrop-filter: Correctly apply backdrop-filter with an SVG filter</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="reference/backdrop-filter-boundary-ref.html">
<style>
.bg {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 90px;
    background-image: url("resources/reference.png");
}
.fg {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 150px;
    height: 80px;
}
body {
    background-color: lime;
}
</style>
<div style="width:550px">
  <div class="bg"><div class="fg" style="backdrop-filter: blur(3px);"></div></div>
  <div class="bg"><div class="fg" style="backdrop-filter: blur(6px);"></div></div>
  <div class="bg"><div class="fg" style="backdrop-filter: blur(12px);"></div></div>
  <div class="bg"><div class="fg" style="backdrop-filter: blur(24px);"></div></div>
  <div class="bg"><div class="fg" style="backdrop-filter: blur(48px);"></div></div>
  <div class="bg"><div class="fg" style="backdrop-filter: blur(96px);"></div></div>
</div>

<!-- This should show an increasing series of blurred blocks. No lime green should
    be brought in to the blurred regions. -->

/css/filter-effects/reference/backdrop-filter-boundary-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Correctly apply backdrop-filter with an SVG filter</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<script src="../support/simulate-backdrop-blur.js"></script>
<style>
.bg {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 90px;
    background-image: url("../resources/reference.png");
}
.fg {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 150px;
    height: 80px;
}
body {
    background-color: lime;
}
</style>
<div style="width:550px">
  <div class="bg"><div class="fg" data-blur="3px"></div></div>
  <div class="bg"><div class="fg" data-blur="6px"></div></div>
  <div class="bg"><div class="fg" data-blur="12px"></div></div>
  <div class="bg"><div class="fg" data-blur="24px"></div></div>
  <div class="bg"><div class="fg" data-blur="48px"></div></div>
  <div class="bg"><div class="fg" data-blur="96px"></div></div>
</div>

<script>
  for (let fg of document.querySelectorAll(".fg")) {
    simulateBackdropBlur(fg, [fg.parentElement], parseInt(fg.getAttribute('data-blur')));
  }
</script>

<!-- This should show an increasing series of blurred blocks. No lime green should
    be brought in to the blurred regions. -->