Blitz - WPT: border-shape-two-shapes-shadow.html

wpt / css / css-borders / border-shape / border-shape-two-shapes-shadow.html

/css/css-borders/border-shape/border-shape-two-shapes-shadow.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-two-shapes-shadow-ref.html">
<meta name="fuzzy" content="maxDifference=0-91;totalPixels=0-2000">
<style>
body {
    margin: 0;
}
#target {
    width: 200px;
    height: 200px;
    border-shape: circle(50%) circle(25%);
    position: relative;
    background: green;
    border-color: yellow;
    box-shadow: 10px 10px 0 5px blue, 0 0 0 5px purple inset;
}
</style>
<div id="target">
</div>

/css/css-borders/border-shape/border-shape-two-shapes-shadow-ref.html

<!DOCTYPE html>
<style>
body {
    margin: 0;
}
svg {
    display: block;
    width: 220px;
    height: 220px;
}
</style>
<svg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="inner-clip">
            <circle cx="100" cy="100" r="50" />
        </clipPath>
    </defs>
    <!-- Outer shadow: r=105 at (110,110) -->
    <circle cx="110" cy="110" r="105" fill="blue" />

    <!-- Outer border shape (filled with border color) -->
    <circle cx="100" cy="100" r="100" fill="yellow" />

    <!-- Background (filled inside inner shape) -->
    <circle cx="100" cy="100" r="50" fill="green" />

    <!-- Inset shadow: 10px stroke on r=50 circle, clipped to inside -->
    <circle cx="100" cy="100" r="50" fill="none" stroke="purple" stroke-width="10" clip-path="url(#inner-clip)" />
</svg>