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

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

/css/filter-effects/backdrop-filter-backdrop-root-clip-path.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-clip-path-ref.html">

<!-- A Backdrop Root is formed, anywhere in the document, by:
     - An element with mask, mask-image, mask-border, or clip-path properties with values 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="clip-path: inset(-100%);"><div></div></div>
  </div>
  <div class=testcase>
    <div style="will-change:clip-path;"><div></div></div>
  </div>
</div>

/css/filter-effects/backdrop-filter-backdrop-root-clip-path-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></div>
    <div class="box2" style="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>