Blitz - WPT: backdrop-filter-backdrop-root-filter.html

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

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

<!DOCTYPE html>
<meta charset="utf-8">
<title>backdrop-filter: The backdrop root concept</title>
<link rel="author" href="mailto:masonf@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot">
<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
<link rel="match"  href="backdrop-filter-backdrop-root-filter-ref.html">
<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-2696">

<!-- A Backdrop Root is formed, anywhere in the document, by:
     - An element with a filter property other than "none".
     - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. -->
<div class=container>
  <div class=testcase>
    <div style="filter: invert(0.1);"><div></div></div>
  </div>
  <div class=testcase>
    <div style="will-change:filter;"><div></div></div>
  </div>
</div>

/css/filter-effects/backdrop-filter-backdrop-root-filter-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">

<div class=container>
  <div class=testcase>
    <div style="filter: invert(0.1)"></div>
    <div class="box2" style="border-color: #1A1A1A; background: #00ffff;"></div>
  </div>
  <div class=testcase>
    <div></div>
    <div class="box2" style="background: #00ffff;"></div>
  </div>
</div>

<style>
.box2 {
  top:-50px;
  left: 50px;
  border: 1px solid black;
}
</style>