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

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

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

<!DOCTYPE html>
<title>border-shape with inset box-shadow negative spread and blur</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-inset-shadow-negative-spread-ref.html">
<meta name="assert" content="inset box-shadow with negative spread and blur should render a smaller inset shadow with border-shape">
<style>
body {
    margin: 0;
}
#target {
    width: 100px;
    height: 100px;
    background: white;
    border: 10px solid black;
    border-shape: rect(0, 0, 100%, 100%);
    box-shadow: inset 0 0 20px -10px red;
    margin: 20px;
}
</style>
<div id="target">
</div>

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

<!DOCTYPE html>
<style>
    body {
        margin: 0;
    }
    /* With negative spread of -10px and blur of 20px, the inset shadow
       starts 10px away from the edge with a 20px blur */
    .container {
        width: 100px;
        height: 100px;
        background: white;
        border: 10px solid black;
        margin: 20px;
        overflow: hidden;
    }
    .shadow-inner {
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 20px -10px red;
    }
</style>
<div class="container">
    <div class="shadow-inner"></div>
</div>