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

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

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

<!DOCTYPE html>
<title>border-shape with inset box-shadow blur only</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-inset-shadow-blur-ref.html">
<meta name="assert" content="inset box-shadow with blur but no spread should render correctly 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 0px red;
}
</style>
<div id="target">
</div>

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

<!DOCTYPE html>
<style>
    body {
        margin: 0;
    }
    .container {
        width: 100px;
        height: 100px;
        background: white;
        border: 10px solid black;
        overflow: hidden;
    }
    .shadow-inner {
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 20px 0px red;
    }
</style>
<div class="container">
    <div class="shadow-inner"></div>
</div>