Blitz - WPT: backdrop-filters-blur-large.html

wpt / css / filter-effects / backdrop-filters-blur-large.html

/css/filter-effects/backdrop-filters-blur-large.html

<!DOCTYPE html>
<title>CSS Backdrop Filters: Blur over large element</title>
<link rel="author" href="mailto:clchambers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="backdrop-filters-blur-large-ref.html">
<style>
    .background {
        position: fixed;
        width: 200px;
        height: 32768px;
        left: 100px;
        top: 50px;
        background: red;
    }
    .filter {
        backdrop-filter: blur(10px);
        width: 100%;
        height: 100%;
        transform: translateX(-20px);
    }
</style>
<p>You should see a blurred red bar going to the bottom of the page.</p>
<div class="background">
    <div class="filter"></div>
</div>

/css/filter-effects/backdrop-filters-blur-large-ref.html

<!DOCTYPE html>
<title>CSS Backdrop Filters: Blur over large element - Reference</title>
<style>
    .background {
        position: fixed;
        width: 200px;
        height: 2160px;
        left: 100px;
        top: 50px;
        background: red;
    }
    .filter {
        position: fixed;
        width: 200px;
        height: 2160px;
        left: 80px;
        top: 50px;
        backdrop-filter: blur(10px);
    }
</style>
<p>You should see a blurred red bar going to the bottom of the page.</p>
<div class="background"></div>
<div class="filter"></div>