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

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

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

<!DOCTYPE html>
<title>border-shape with semi-transparent box-shadow</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-shadow-semitransparent-ref.html">
<meta name="assert" content="box-shadow with semi-transparent color should not show double-painting artifacts with border-shape">
<style>
body {
    margin: 0;
    background: white;
}
#target {
    width: 190px;
    height: 190px;
    border-shape: xywh(0% 0% 100% 100%);
    position: relative;
    background: green;
    box-shadow: 10px 20px 0 10px rgba(0, 0, 255, 0.5);
    border: 10px solid black;
}
</style>
<div id="target">
</div>

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

<!DOCTYPE html>
<style>
    body {
        margin: 0;
        background: white;
    }
    svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 230px;
        height: 240px;
        overflow: visible;
    }
    .shadow {
        fill: rgba(0, 0, 255, 0.5);
        transform: translate(10px, 20px);
    }
    .border {
        fill: green;
        stroke: black;
        stroke-width: 10px;
    }
</style>

<svg viewBox="0 0 230 240" xmlns="http://www.w3.org/2000/svg">
    <rect x="-10" y="-10" width="230" height="230" class="shadow" />
    <rect x="5" y="5" width="200" height="200" class="border" />
</svg>