<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: Filter input is at element bounds</title>
<link rel="author" href="mailto:[email protected]">
<link rel="author" href="mailto:[email protected]">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<script src="../support/simulate-backdrop-blur.js"></script>
<!-- Expected: A white box with a blue border, surrounded by green.
A red blurred region should be seen at the bottom of the white box.
No green should be observed within the white box.
No dark/black should be observed within the white box either. -->
<div class="greenbox top"></div>
<div class="greenbox right"></div>
<div class="greenbox bottom"></div>
<div class="redline"></div>
<div class="filterbox"></div>
<style>
.filterbox {
position: absolute;
width: 100px;
height: 100px;
top: 150px;
left: 0px;
}
.greenbox {
position:absolute;
width: 160px;
height: 50px;
background: green;
}
.redline {
position:absolute;
width: 90px;
height: 5px;
top:245px;
left:5px;
background: red;
}
.top {
top:100px;
left: 0;
}
.right {
top:130px;
left: 102px;
width: 58px;
height: 150px;
}
.bottom {
top:250px;
left: 0;
height: 60px;
}
</style>
<script>
const filterBox = document.querySelector('.filterbox');
simulateBackdropBlur(filterBox, Array.prototype.slice.apply(document.body.querySelectorAll('div')).filter(c => c != filterBox), 10);
</script>
Codebase Browser
chromium