Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions css-borders-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1594,23 +1594,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.
Expand All @@ -1623,11 +1633,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">
To choose the <dfn>relevant side for border shape</dfn> given an [=element=] |element|:
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
Expand Down
5 changes: 4 additions & 1 deletion css-shapes-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down