Compute stroke from the first not none border property in logical order

danielsakhapov · chromium-wpt-export-bot · commit e27546d42fe9 · 2025-10-29T09:03:21.000-07:00
Compute the derived stroke thickness and color from the first renderable logical border side (block-start, inline-start, block-end, inline-end) according to https://drafts.csswg.org/css-borders-4/#relevant-side-for-border-shape. When two <basic-shape> values are given, the border is rendered as the shape between the two paths. When only a single <basic-shape> is given, the border is rendered as a stroke with the relevant side’s computed border width as the stroke width. The fill color of border is the relevant side’s computed border-color. This CL also removes the use of fill and stroke properties. Bug: 448653232 Change-Id: Iff2f592a7cd0d413a55f6ef62fefd308967a9fb1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7072931 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Cr-Commit-Position: refs/heads/main@{#1537333}
diff --git a/css/css-borders/border-shape-absolute-coords-shape-ref.tentative.html b/css/css-borders/border-shape-absolute-coords-shape-ref.tentative.html
@@ -1,7 +1,5 @@
 <!DOCTYPE html>
 <style>
-  @import "resources/stroke-variants.css";
-
   svg {
     position: absolute;
     top: 200px;
@@ -12,8 +10,9 @@
     stroke: purple;
     stroke-width: 20px;
     fill: green;
+    border: 20px solid transparent;
   }
 </style>
 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <polygon points="0,0 200,0, 100,200" />
+  <polygon points="6,0 194,0, 100,188" />
 </svg>
diff --git a/css/css-borders/border-shape-absolute-coords-shape.tentative.html b/css/css-borders/border-shape-absolute-coords-shape.tentative.html
@@ -3,6 +3,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-borders-4/#propdef-border-shape">
 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shape-function">
 <link rel="match" href="border-shape-absolute-coords-shape-ref.tentative.html">
+<meta name="fuzzy" content="maxDifference=0-70;totalPixels=0-1200">
 <style>
   .bs-target {
     position: absolute;
@@ -11,8 +12,7 @@
     width: 200px;
     height: 200px;
     border-shape: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
-    stroke: purple;
-    stroke-width: 20px;
+    border: 20px solid purple;
     background: green;
   }
 </style>
diff --git a/css/css-borders/tentative/border-shape/border-shape-clips-background-ref.html b/css/css-borders/tentative/border-shape/border-shape-clips-background-ref.html
@@ -5,14 +5,15 @@
     width: 100px;
     height: 100px;
     overflow: visible;
+    border: 10px solid transparent;
 }
 
-polygon {
+circle {
     stroke: purple;
     stroke-width: 10px;
     fill: green;
 }
 </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="50" />
 </svg>
diff --git a/css/css-borders/tentative/border-shape/border-shape-clips-background.html b/css/css-borders/tentative/border-shape/border-shape-clips-background.html
@@ -1,14 +1,13 @@
 <!DOCTYPE html>
 <link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
 <link rel="match" href="border-shape-clips-background-ref.html">
-<meta name="fuzzy" content="maxDifference=0-32;totalPixels=0-128">
+<meta name="fuzzy" content="maxDifference=0-110;totalPixels=0-200">
 <style>
 #target {
     width: 100px;
     height: 100px;
-    border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
-    stroke: purple;
-    stroke-width: 10px;
+    border-shape: circle();
+    border: 10px solid purple;
     background: green;
     border-radius: 10px;
 }
diff --git a/css/css-borders/tentative/border-shape/border-shape-geometry-box-ref.html b/css/css-borders/tentative/border-shape/border-shape-geometry-box-ref.html
@@ -31,7 +31,6 @@
 <div class="container">
   <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
     <rect width="160" height="160" fill="yellow" />
-    <rect x="10" y="10" width="140" height="140" fill="thistle" />
     <rect x="20" y="20" width="120" height="120" fill="palegoldenrod" />
     <rect x="30" y="30" width="100" height="100" fill="lightblue" />
   </svg>
diff --git a/css/css-borders/tentative/border-shape/border-shape-geometry-box.html b/css/css-borders/tentative/border-shape/border-shape-geometry-box.html
@@ -16,8 +16,7 @@
   background: thistle;
   padding: 10px;
   margin: 10px;
-  border: 10px solid black;
-  fill: palegoldenrod;
+  border: 10px solid palegoldenrod;
 }
 .contents {
   width: 100%;
diff --git a/css/css-borders/tentative/border-shape/border-shape-inner-outer-ref.html b/css/css-borders/tentative/border-shape/border-shape-inner-outer-ref.html
@@ -7,11 +7,6 @@
     overflow: visible;
 }
 
-polygon, circle {
-    stroke: purple;
-    stroke-width: 3px;
-}
-
 polygon {
     fill: yellow;
 }
diff --git a/css/css-borders/tentative/border-shape/border-shape-inner-outer.html b/css/css-borders/tentative/border-shape/border-shape-inner-outer.html
@@ -1,16 +1,14 @@
 <!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-32;totalPixels=0-128">
+<meta name="fuzzy" content="maxDifference=0-170;totalPixels=0-130">
 <style>
 #target {
     width: 100px;
     height: 100px;
     border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) circle(20%);
-    stroke: purple;
-    stroke-width: 3px;
+    border-color: yellow;
     background: green;
-    fill: yellow;
     border-radius: 10px;
 }
 </style>
diff --git a/css/css-borders/tentative/border-shape/border-shape-overflow-stroke.html b/css/css-borders/tentative/border-shape/border-shape-overflow-stroke.html
diff --git a/css/css-borders/tentative/border-shape/border-shape-shadow-ref.html b/css/css-borders/tentative/border-shape/border-shape-shadow-ref.html
@@ -7,6 +7,8 @@
     svg {
         width: 200px;
         height: 200px;
+        overflow: visible;
+        border: 2px solid transparent;
     }
     .shadow {
         fill: purple;
@@ -21,6 +23,6 @@
 </style>
 
 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="70,10 130,60, 70,110, 10,60" class="shadow" />
-    <polygon points="70,10 130,60, 70,110, 10,60" class="target"  />
+    <polygon points="100,0 200,100, 100,200, 0,100" class="shadow"  />
+    <polygon points="100,0 200,100, 100,200, 0,100" class="target" />
 </svg>
diff --git a/css/css-borders/tentative/border-shape/border-shape-shadow.html b/css/css-borders/tentative/border-shape/border-shape-shadow.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
 <link rel="match" href="border-shape-shadow-ref.html">
-<meta name="fuzzy" content="maxDifference=0-96;totalPixels=0-256">
+<meta name="fuzzy" content="maxDifference=0-110;totalPixels=0-2500">
 <style>
 body {
     margin: 0;
 }
 #target {
-    margin: 10px;
-    width: 120px;
-    height: 100px;
+    width: 200px;
+    height: 200px;
     border-shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
     position: relative;
     background: green;
     box-shadow: 10px 20px 0 0px purple;
-    stroke: black;
-    stroke-width: 2px;
+    border: 2px solid black;
 }
 </style>
 <div id="target">
diff --git a/css/css-borders/tentative/border-shape/border-shape-stroke-from-border-ref.html b/css/css-borders/tentative/border-shape/border-shape-stroke-from-border-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<title>Reference for border-shape stroke derived from logical border sides</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
+<style>
+body {
+  margin: 0;
+}
+.container {
+  display: flex;
+  gap: 32px;
+  padding: 20px;
+}
+.target {
+  width: 120px;
+  height: 120px;
+  overflow: visible;
+  box-sizing: padding-box;
+}
+.case1 {
+  border-width: 18px 10px 4px 6px;
+  border-color: transparent;
+  border-style: solid;
+}
+.case2 {
+  writing-mode: vertical-rl;
+  border-width: 18px 10px 4px 6px;
+  border-color: transparent;
+  border-style: solid;
+}
+.case3 {
+  writing-mode: vertical-rl;
+  border-width: 18px 10px 4px 0px;
+  border-color: transparent;
+  border-style: solid;
+}
+.case4 {
+  writing-mode: vertical-lr;
+  border-width: 18px 10px 4px 0px;
+  border-color: transparent;
+  border-style: solid;
+}
+</style>
+<div class="container">
+  <svg class="target case1" viewBox="0 0 120 120">
+    <circle cx="59" cy="51" r="36" fill="none" stroke="rgb(220, 0, 0)" stroke-width="18"/>
+  </svg>
+  <svg class="target case2" viewBox="0 0 120 120">
+    <circle cx="59" cy="51" r="42" fill="none" stroke="rgb(0, 0, 220)" stroke-width="6"/>
+  </svg>
+  <svg class="target case3" viewBox="0 0 120 120">
+    <circle cx="65" cy="51" r="36" fill="none" stroke="rgb(220, 0, 0)" stroke-width="18"/>
+  </svg>
+  <svg class="target case4" viewBox="0 0 120 120">
+    <circle cx="65" cy="51" r="40" fill="none" stroke="rgb(0, 140, 0)" stroke-width="10"/>
+  </svg>
+</div>
+<div class="container">
+  <svg class="target double-shape case1" viewBox="0 0 120 120">
+    <circle cx="54" cy="42" r="72.5" fill="rgb(220, 0, 0)" stroke="rgb(220, 0, 0)" stroke-width="55"/>
+    <circle cx="64" cy="60" r="45" fill="white"/>
+  </svg>
+  <svg class="target double-shape case2" viewBox="0 0 120 120">
+    <circle cx="54" cy="42" r="72.5" fill="rgb(0, 0, 220)" stroke="rgb(0, 0, 220)" stroke-width="55"/>
+    <circle cx="64" cy="60" r="45" fill="white"/>
+  </svg>
+  <svg class="target double-shape case3" viewBox="0 0 120 120">
+    <circle cx="60" cy="42" r="72.5" fill="rgb(220, 0, 0)" stroke="rgb(220, 0, 0)" stroke-width="55"/>
+    <circle cx="70" cy="60" r="45" fill="white"/>
+  </svg>
+  <svg class="target double-shape case4" viewBox="0 0 120 120">
+    <circle cx="60" cy="42" r="72.5" fill="rgb(0, 140, 0)" stroke="rgb(0, 140, 0)" stroke-width="55"/>
+    <circle cx="70" cy="60" r="45" fill="white"/>
+  </svg>
+</div>
diff --git a/css/css-borders/tentative/border-shape/border-shape-stroke-from-border.html b/css/css-borders/tentative/border-shape/border-shape-stroke-from-border.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<title>CSS Borders Test: border-shape takes stroke from relevant border side</title>
+<link rel="help" href="https://drafts.csswg.org/css-borders-4/#relevant-side-for-border-shape">
+<link rel="match" href="border-shape-stroke-from-border-ref.html">
+<meta name="assert" content="When border-shape provides a single shape without an explicit stroke, the stroke width and color follow the first renderable logical border side (block-start, inline-start, block-end, inline-end).">
+<meta name="fuzzy" content="maxDifference=0-70;totalPixels=0-3500">
+<style>
+body {
+  margin: 0;
+}
+.container {
+  display: flex;
+  gap: 32px;
+  padding: 20px;
+}
+.target {
+  width: 120px;
+  height: 120px;
+}
+.single-shape {
+  border-shape: circle(45px at 60px 60px);
+}
+.double-shape {
+  border-shape: circle(100px at 60px 60px) circle(45px at 60px 60px);
+}
+.case1 {
+  border-top: 18px solid rgb(220, 0, 0);
+  border-left: 10px solid rgb(0, 140, 0);
+  border-bottom: 4px solid rgb(200, 200, 0);
+  border-right: 6px solid rgb(0, 0, 220);
+}
+.case2 {
+  writing-mode: vertical-rl;
+  border-top: 18px solid rgb(220, 0, 0);
+  border-left: 10px solid rgb(0, 140, 0);
+  border-bottom: 4px solid rgb(200, 200, 0);
+  border-right: 6px solid rgb(0, 0, 220);
+}
+.case3 {
+  writing-mode: vertical-rl;
+  border-top: 18px solid rgb(220, 0, 0);
+  border-left: 10px solid rgb(0, 140, 0);
+  border-bottom: 4px solid rgb(200, 200, 0);
+  border-right: none;
+}
+.case4 {
+  writing-mode: vertical-lr;
+  border-top: 18px solid rgb(220, 0, 0);
+  border-left: 10px solid rgb(0, 140, 0);
+  border-bottom: 4px solid rgb(200, 200, 0);
+  border-right: none;
+}
+</style>
+<div class="container">
+  <div class="target single-shape case1"></div>
+  <div class="target single-shape case2"></div>
+  <div class="target single-shape case3"></div>
+  <div class="target single-shape case4"></div>
+</div>
+<div class="container">
+  <div class="target double-shape case1"></div>
+  <div class="target double-shape case2"></div>
+  <div class="target double-shape case3"></div>
+  <div class="target double-shape case4"></div>
+</div>
diff --git a/css/css-borders/tentative/border-shape/border-shape-stroke-ref.html b/css/css-borders/tentative/border-shape/border-shape-stroke-ref.html
diff --git a/css/css-borders/tentative/border-shape/border-shape-stroke.html b/css/css-borders/tentative/border-shape/border-shape-stroke.html
diff --git a/css/css-borders/tentative/border-shape/resources/stroke-variants.css b/css/css-borders/tentative/border-shape/resources/stroke-variants.css
@@ -16,7 +16,6 @@
     stroke-linejoin: bevel;
 }
 
-
 .nostroke {
     stroke-width: 0;
 }

Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,6 @@`
`7`	`7`	`overflow: visible;`
`8`	`8`	`}`
`9`	`9`
`10`		`-polygon, circle {`
`11`		`- stroke: purple;`
`12`		`- stroke-width: 3px;`
`13`		`-}`
`14`		`-`
`15`	`10`	`polygon {`
`16`	`11`	`fill: yellow;`
`17`	`12`	`}`