Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/external/wpt/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. -->