Blitz - WPT: backdrop-filter-with-background-clip-padding-box.html

wpt / css / filter-effects / backdrop-filter-with-background-clip-padding-box.html

/css/filter-effects/backdrop-filter-with-background-clip-padding-box.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: filter region with background-clip padding-box</title>
<link rel="help" href="https://drafts.csswg.org/filter-effects-2/#backdrop-filter-operation">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-clip">
<link rel="match" href="backdrop-filter-with-background-clip-padding-box-ref.html">

<p>Expected: A box with a dashed black border (cyan in gaps) and a green
interior.</p>
<div class="backdrop">
  <div class="filterbox"></div>
</div>

<style>
.backdrop {
    background: red;
    width: 100px;
    height: 100px;
}
/* backdrop-filter clips to border box per spec, so the invert effect
   should cover the full 100x100 area including the border region.
   The dashed border gaps reveal the inverted backdrop (red -> cyan),
   while background-clip: padding-box keeps green inside. */
.filterbox {
    padding: 10px;
    width: 60px;
    height: 60px;
    border: 10px dashed;
    background: lime;
    background-clip: padding-box;
    backdrop-filter: invert(1);
}
</style>

/css/filter-effects/backdrop-filter-with-background-clip-padding-box-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: filter region with background-clip padding-box (reference)</title>

<p>Expected: A box with a dashed black border (cyan in gaps) and a green
interior.</p>
<div class="backdrop">
  <div class="content"></div>
</div>

<style>
.backdrop {
    /* Red inverted = cyan, visible through dashed border gaps */
    background: cyan;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 10px dashed;
}
.content {
    /* Green background in the padding + content area */
    background: lime;
    width: 100%;
    height: 100%;
}
</style>