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

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

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

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-inset-shadow-ref.html">
<meta name="fuzzy" content="maxDifference=0-255;totalPixels=0-2000">
<style>
body {
    margin: 0;
}
#target {
    width: 190px;
    height: 190px;
    border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    position: relative;
    background: green;
    box-shadow: inset 0 0 0 10px purple;
    border: 10px solid black;
}
</style>
<div id="target">
</div>

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

<!DOCTYPE html>
<style>
body {
    margin: 0;
}
svg {
    display: block;
    width: 210px;
    height: 210px;
    overflow: visible;
}
</style>
<svg viewBox="0 0 210 210" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="inner-clip">
            <polygon points="105,0 210,105 105,210 0,105" />
        </clipPath>
    </defs>
    <!-- Background: clipped to the inner edge -->
    <polygon points="105,10 200,105 105,200 10,105" fill="green" />

    <!-- Inset shadow -->
    <polygon points="105,5 205,105 105,205 5,105" fill="none" stroke="purple" stroke-width="30" clip-path="url(#inner-clip)" />

    <!-- Border -->
    <polygon points="105,5 205,105 105,205 5,105" fill="none" stroke="black" stroke-width="10" />
</svg>