Blitz - WPT: border-shape-outline.html

wpt / css / css-borders / border-shape / border-shape-outline.html

/css/css-borders/border-shape/border-shape-outline.html

<!DOCTYPE html>
<title>CSS Borders Test: outline follows border-shape (circle)</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="help" href="https://drafts.csswg.org/css-ui/#outline">
<link rel="match" href="border-shape-outline-ref.html">
<meta name="fuzzy" content="maxDifference=0-70;totalPixels=0-750">
<style>
body {
  margin: 0;
}
.container {
  padding: 20px;
}
.target {
  width: 100px;
  height: 100px;
  background: lightblue;
  border-shape: circle(50px at 50px 50px);
  outline: 4px solid red;
}
</style>
<div class="container">
  <div class="target"></div>
</div>

/css/css-borders/border-shape/border-shape-outline-ref.html

<!DOCTYPE html>
<style>
body {
  margin: 0;
}
.container {
  padding: 20px;
}
.target {
  width: 100px;
  height: 100px;
  position: relative;
}
</style>
<div class="container">
  <!-- Circle with 4px red outline around 50px radius circle -->
  <div class="target">
    <svg width="120" height="120" style="position: absolute; left: -10px; top: -10px;">
      <!-- Background fill: circle at center with 50px radius -->
      <circle cx="60" cy="60" r="50" fill="lightblue"/>
      <!-- Outline stroke: centered at radius 52px (50 + 2) with stroke-width 4 -->
      <circle cx="60" cy="60" r="52" fill="none" stroke="red" stroke-width="4"/>
    </svg>
  </div>
</div>