Blitz - WPT: border-shape-inner-outer.html

wpt / css / css-borders / border-shape / border-shape-inner-outer.html

/css/css-borders/border-shape/border-shape-inner-outer.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-inner-outer-ref.html">
<meta name="fuzzy" content="maxDifference=0-170;totalPixels=0-150">
<style>
#target {
    width: 100px;
    height: 100px;
    border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) circle(20%);
    border-color: yellow;
    background: green;
    border-radius: 10px;
}
</style>
<div id="target"></div>

/css/css-borders/border-shape/border-shape-inner-outer-ref.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<style>
svg {
    width: 100px;
    height: 100px;
    overflow: visible;
}

polygon {
    fill: yellow;
}
</style>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="50,0 100,50, 50,100, 0,50" />
    <circle cx="50" cy="50" r="20" style="fill:green"></circle>
</svg>