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

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

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

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

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

<!DOCTYPE html>
<style>
body {
    margin: 0;
}
svg {
    display: block;
    width: 240px;
    height: 250px;
}
</style>
<svg viewBox="0 0 240 250" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="inner-clip">
            <rect x="10" y="10" width="190" height="190" />
        </clipPath>
    </defs>
    <!-- Outer shadow: 230x230 at (0,10) -->
    <rect x="0" y="10" width="230" height="230" fill="blue" />

    <!-- Background: 190x190 at (10,10) -->
    <rect x="10" y="10" width="190" height="190" fill="green" />

    <!-- Inset shadow: 10px stroke inside the 190x190 rect. Center at (15,15), size 180x180 -->
    <rect x="10" y="10" width="190" height="190" fill="none" stroke="purple" stroke-width="20" clip-path="url(#inner-clip)" />

    <!-- Border: 10px stroke centered on base path (5,5) 200x200 rect -->
    <rect x="5" y="5" width="200" height="200" fill="none" stroke="black" stroke-width="10" />
</svg>