Blitz - WPT: corner-shape-inset-shadow.html

wpt / css / css-borders / corner-shape / corner-shape-inset-shadow.html

/css/css-borders/corner-shape/corner-shape-inset-shadow.html

<!DOCTYPE html>
<head>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
<link rel="match" href="corner-shape-inset-shadow-ref.html">
<meta name="fuzzy" content="maxDifference=0-255;totalPixels=0-450">
<style>
    .target {
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        corner-shape: bevel notch squircle scoop;
        border-radius: 20%;
        background: green;
        border: 20px solid purple;
        box-shadow: -5px 5px 0 10px blue inset;
    }
</style>
</head>
<body>
    <div class="target"></div>
</body>

/css/css-borders/corner-shape/corner-shape-inset-shadow-ref.html

<!DOCTYPE html>
<head>
<style>
    .target {
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        corner-shape: bevel notch squircle scoop;
        border-radius: 20%;
        overflow: clip;
        position: relative;
    }

    .target::before {
        content: " ";
        display: block;
        background: green;
        border: 30px solid blue;
        corner-shape: inherit;
        border-radius: inherit;
        position: absolute;
        left: -5px;
        top: 5px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .target::after {
        content: " ";
        display: block;
        border: 20px solid purple;
        corner-shape: inherit;
        border-radius: inherit;
        position: absolute;
        inset: 0;
        box-sizing: border-box;
    }
</style>
</head>
<body>
    <div class="target"></div>
</body>