mask-image-backdrop-filter-with-border-radius.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-masking/mask-image/mask-image-backdrop-filter-with-border-radius.html - WPT Dashboard Interop Dashboard

<!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>