[css-borders-4] [css-shapes-1] Specify rendering of single-path border-shape (#12897)

* [css-borders-4] [css-shapes-1] Specify rendering of single-path border-shape

border-shape takes its color (and thickness if single-path) from one of the
border sides, namely the first one (in logical order) that has a border-style
other than none.

Also define half-border-box as per resolution, in css-shapes-1.

#11662 (comment)

Closes #11662

* Update css-borders-4/Overview.bs

Co-authored-by: Tab Atkins Jr. <[email protected]>

---------

Co-authored-by: Tab Atkins Jr. <[email protected]>

Author: noamr

css-borders-4/Overview.bs

@@ -3048,23 +3048,33 @@ The 'border-shape' property</h3>
 		Initial: none
 		Applies to: all elements
 		Inherited: no
-		Percentages: relative to the given <<geometry-box>>, or to [=border box=] if not given.
+		Percentages: see prose
 		Computed value: list, each item a computed color
 		Animation type: by computed value
 	</pre>
 
 The 'border-shape' property is provided with either a single <<basic-shape>> or two <<basic-shape>>s,
 resulting in one or two paths, respectively.
-The single-path border shape varint uses the existing ''border'' properties of the element to stroke the
-path that the given <<basic-shape>> resolves to,
-while the double-path border shape variant fills the area between the two paths as if it were the border.
+
+When two <<basic-shape>> values are given, the border is rendered between the paths generated shapes.
+When only a single <<basic-shape>> is given, the border is rendered as a stroke with the
+[=relevant side for border shape|relevant side=]'s [=computed value|computed=] [=border width=] as the stroke width.
+
+The fill color of the border is the [=relevant side for border shape|relevant side=]'s [=computed value|computed=]'border-color'.
+
+When a <<geometry-box>> is not given, the default computation of percentage differs based on the number of given <<basic-shape>> values.
+
+When two <<basic-shape>> values are given, the first (outer) one defaults to the [=border box=] and the second (inner) one defaults to the [=padding box=].
+This allows using the different 'border-width' properties to affect the final shape.
+
+When a single <<basic-shape>> value is given, the <<geometry-box>> defaults to the ''half-border-box'' value, which allows stroking in a way that matches the default border behavior.
 
 The 'border-shape' property is not compatible with 'border-radius' and 'corner-shape'.
 When an element's [=computed value=] of 'border-shape' is not <css>none</css>,
 its 'border-radius' is ignored, as if it was set to 0.
 'corner-shape' is implicitly ignored, as it can only work in tandem with 'border-radius'.
 
-A 'box-shadow' follows both the inner and outer border paths.
+A 'box-shadow' follows both the outer border path.
 
 'border-shape' does not affect geometry or layout,
 which is still computed using the existing 'border-width' properties.
@@ -3077,11 +3087,15 @@ as described in <a href="https://drafts.csswg.org/css-backgrounds-3/#corner-clip
 
 Issue: how should this affect clipping replaced elements?
 
-The fill and stroke color, as well as the stroke width, are taken from the respective 'border-color' and 'border-width' properties.
-
-Issue: define this in detail. Perhaps it should be overridable somehow?
+<div algorithm="choose-relevant-side-for-border-shape">
+An element's <dfn>relevant side for border shape</dfn> is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''.
+	1. If |element|'s [=computed value|computed=] 'border-block-start-style' is not ''border-style/none'', then return [=block-start=].
+	1. If |element|'s [=computed value|computed=] 'border-inline-start-style' is not ''border-style/none'', then return [=inline-start=].
+	1. If |element|'s [=computed value|computed=] 'border-block-end-style' is not ''border-style/none'', then return [=block-end=].
+	1. If |element|'s [=computed value|computed=] 'border-inline-end-style' is not ''border-style/none'', then return [=inline-end=].
+	1. Return [=block-start=].
+</div>
 
-Issue: what do we do about 'border-style'? It can't exactly work for every arbitrary shape.
 
 <wpt>
 	tentative/border-shape/border-shape-clips-background.html

css-shapes-1/Overview.bs

@@ -1358,7 +1358,7 @@ Shapes from Box Values</h2>
 	Its syntax is:
 
 	<pre class="prod">
-		<dfn><<shape-box>></dfn> = <<visual-box>> | <a data-xref-type="css-value" data-xref-for="<shape-box>">margin-box</a>
+		<dfn><<shape-box>></dfn> = <<visual-box>> | <a data-xref-type="css-value" data-xref-for="<shape-box>">margin-box</a> | <a data-xref-type="css-value" data-xref-for="<shape-box>">half-border-box</a>
 	</pre>
 
 	The definitions of the values are:
@@ -1394,6 +1394,9 @@ Shapes from Box Values</h2>
 	is the larger of 0
 	or <code>border-radius - border-width - padding</code>.
 
+	The <dfn value for="<shape-box>, shape-outside">half-border-box</dfn> value defines the shape
+	enclosed by a box that is in the middle between the ''padding-box'' and the ''border-box''.
+
 	<div class="example">
 
 		Given the 100px square below with