Blitz - WPT: border-shape-shadow-negative-spread.html

wpt / css / css-borders / border-shape / border-shape-shadow-negative-spread.html

/css/css-borders/border-shape/border-shape-shadow-negative-spread.html

<!DOCTYPE html>
<title>border-shape with negative spread box-shadow</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-shadow-negative-spread-ref.html">
<meta name="assert" content="box-shadow with negative spread should shrink the shadow smaller than the element with border-shape">
<style>
body {
    margin: 0;
}
#target {
    width: 100px;
    height: 100px;
    border-shape: inset(0px);
    background: blue;
    box-shadow: 20px 20px 0 -10px red;
    margin: 40px;
}
</style>
<div id="target">
</div>

/css/css-borders/border-shape/border-shape-shadow-negative-spread-ref.html

<!DOCTYPE html>
<style>
    body {
        margin: 0;
    }
    svg {
        position: absolute;
        top: 40px;
        left: 40px;
        width: 140px;
        height: 140px;
        overflow: visible;
    }
    .shadow {
        fill: red;
    }
    .box {
        fill: blue;
    }
</style>
<!-- Shadow should be 80x80 (100 - 10*2 for negative spread) offset by 20,20 -->
<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
    <rect x="30" y="30" width="80" height="80" class="shadow" />
    <rect x="0" y="0" width="100" height="100" class="box" />
</svg>