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

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

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

<!DOCTYPE html>
<title>backdrop-filter should respect multiple nested rounded clips from ancestors</title>
<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
<link rel="match" href="backdrop-filter-nested-border-radius-clip-4-ref.html">
<meta name="fuzzy" content="maxDifference=0-150; totalPixels=0-200" />
<style>
#outer {
  position: relative;
  width: 200px;
  height: 100px;
  padding: 10px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #66ccff;
}

#middle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  overflow: hidden;
  background-color: yellow;
}

#inner {
  position: relative;
  width: 80%;
  height: 80%;
  border-radius: 10px;
  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 yellow
     rounded border (#middle) 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, #middle's larger border-radius further clips
     #inner's top-left corner while #inner's own border-radius clips
     the remaining edges. -->
<div id="outer">
  <div id="middle">
    <div id="inner">
      <div id="backdrop-source"></div>
      <div id="backdrop-filter"></div>
    </div>
  </div>
</div>

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

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