Blitz - WPT: border-shape-outline-double-path.html

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

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

<!DOCTYPE html>
<title>CSS Borders Test: outline follows double-path border-shape (outer path)</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-double-path-ref.html">
<meta name="fuzzy" content="maxDifference=0-170;totalPixels=0-5000">
<style>
body {
  margin: 0;
}
.container {
  padding: 40px;
}
.target {
  width: 100px;
  height: 100px;
  background: lightblue;
  /* Double path: outer circle, inner smaller circle */
  /* This creates a ring/donut shape for the border */
  border-shape: circle(50px at 50px 50px) circle(30px at 50px 50px);
  border-color: rgba(255, 0, 0, 0.5);
  outline: 4px solid green;
}
</style>
<div class="container">
  <div class="target"></div>
</div>

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

<!DOCTYPE html>
<style>
body {
  margin: 0;
}
.container {
  padding: 40px;
}
.target {
  width: 100px;
  height: 100px;
  position: relative;
}
</style>
<div class="container">
  <!-- Double-path border-shape: outer 50px circle, inner 30px circle -->
  <!-- Background fills the inner circle, border fills the ring between them -->
  <!-- Outline follows the outer 50px circle path -->
  <div class="target">
    <svg width="120" height="120" style="position: absolute; left: -10px; top: -10px;">
      <!-- Border ring: area between 50px and 30px circles -->
      <circle cx="60" cy="60" r="50" fill="rgba(255,0,0,0.5)"/>
      <!-- Background fill: inner circle at 30px radius -->
      <circle cx="60" cy="60" r="30" fill="lightblue"/>
      <!-- Outline stroke: green at radius 52 (50 + 2) with stroke-width 4 -->
      <circle cx="60" cy="60" r="52" fill="none" stroke="green" stroke-width="4"/>
    </svg>
  </div>
</div>