Blitz - WPT: backdrop-filter-nested-border-radius-clip.html

wpt / css / filter-effects / backdrop-filter-nested-border-radius-clip.html

/css/filter-effects/backdrop-filter-nested-border-radius-clip.html

<!DOCTYPE html>
<title>backdrop-filter should respect rounded clip from ancestor with border-radius and overflow:hidden</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="backdrop-filter-nested-border-radius-clip-ref.html">
<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-200" />
<style>
#outer {
  position: relative;
  width: 200px;
  height: 100px;
  padding: 10px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #66ccff;
}
#inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
}
#backdrop-source {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 127, 255);
}
#backdrop-filter {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  backdrop-filter:invert(1);
}
</style>
<!-- Test passes if there is a green rounded rectangle inside a light blue
     rounded border (#outer), with no artifacts in the corners.
     The backdrop-filter area must be clipped by all ancestor border-radius
     clips; in this case, specifically #inner's border-radius. -->
<div id="outer">
  <div id="inner">
    <div id="backdrop-source"></div>
    <div id="backdrop-filter"></div>
  </div>
</div>

/css/filter-effects/backdrop-filter-nested-border-radius-clip-ref.html

<!DOCTYPE html>
<title>backdrop-filter should respect rounded clip from ancestor with border-radius and overflow:hidden - reference</title>
<style>
#outer {
  position: relative;
  width: 200px;
  height: 100px;
  padding: 10px;
  border-radius: 10px;
  background-color: #66ccff;
}
#inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
}
#backdrop-source {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 128, 0);
}
</style>
<div id="outer">
  <div id="inner">
    <div id="backdrop-source"></div>
  </div>
</div>