Blitz - WPT: mask-image-backdrop-filter-with-border-radius.html

wpt / css / css-masking / mask-image / mask-image-backdrop-filter-with-border-radius.html

/css/css-masking/mask-image/mask-image-backdrop-filter-with-border-radius.html

<!DOCTYPE html>
<title>Mask-image with backdrop-filter inside parent with border-radius and overflow hidden</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image">
<link rel="match" href="mask-image-backdrop-filter-with-border-radius-ref.html">
<meta name="fuzzy" content="maxDifference=0-55; totalPixels=0-5">

<div class="wrapper">
  <div class="element">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</div>

<style>
  body {
    background-color: rgb(173, 216, 230);
  }

  .wrapper {
    border-radius: 1px;
    overflow: hidden;
  }

  .element {
    backdrop-filter: saturate(300%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
  }
</style>

/css/css-masking/mask-image/mask-image-backdrop-filter-with-border-radius-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Reference for Mask-image with backdrop-filter inside parent with border-radius and overflow hidden</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image">


<div class="wrapper">
  <div class="element">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</div>

<style>
  body {
    background-color: rgb(173, 216, 230);
  }

  .wrapper {
    border-radius: 1px;
  }

  .element {
    backdrop-filter: saturate(300%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
  }
</style>