Skip to content

[css-backgrounds-4] Added border-*-radius shorthands #7705

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

Merged
SebastianZ merged 5 commits into from
Feb 17, 2023
Merged

[css-backgrounds-4] Added border-*-radius shorthands #7705

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e30b61
[css-backgrounds-4] Added `border-*-radius` shorthands
SebastianZ Sep 6, 2022
7215ec8
[css-backgrounds-4] Replaced "flow-relative" by "physical" and mentio…
SebastianZ Sep 7, 2022
0b8fd97
[css-backgrounds-4] Let logical `border-*-radius` shorthands expand t…
SebastianZ Oct 3, 2022
3be3250
[css-backgrounds-4] Added issue for `border-*-radius` value order
SebastianZ Oct 3, 2022
b8ad9b2
[css-backgrounds-4] Merged physical and logical border-*-radius short…
SebastianZ Oct 9, 2022
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
17 changes: 8 additions & 9 deletions css-backgrounds-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,15 +289,14 @@ The 'border-block-start-radius', 'border-block-end-radius',
Animatable: see individual properties
</pre>

<p>These properties correspond to the 'border-top-radius',
'border-right-radius', 'border-bottom-radius', and 'border-left-radius'
shorthand properties.
The mapping depends on the element’s 'writing-mode', 'direction',
and 'text-orientation',
with start/end referring to the axis orthogonal to the one given
by the first part of the name
(i.e. patterned as 'border-block-<i>inline</i>-radius' and
'border-inline-<i>block</i>-radius')
<p>These properties correspond to the 'border-start-start-radius',
'border-start-end-radius', 'border-end-start-radius',
and 'border-end-end-radius' longhand properties.
The start/end refers to the axis given by the first part of the name
(i.e. 'border-start-<i>inline</i>-radius' for 'border-block-start-radius`,
'border-end-<i>inline</i>-radius' for 'border-block-end-radius',
'border-<i>block</i>-start-radius' for 'border-inline-start-radius', and
'border-<i>block</i>-end-radius' for 'border-inline-end-radius')
Copy link
Contributor

@Loirooriol Loirooriol Oct 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand what the paragraph is trying to say.
Also, border-start-inline-radius and border-end-inline-radius don't exist, do you mean border-inline-start-radius and border-inline-end-radius?

Copy link
Contributor Author

@SebastianZ SebastianZ Oct 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I basically copied the wording from https://drafts.csswg.org/css-logical-1/#border-radius-properties. There, the italic written parts are meant to clarify the logical direction and stand for start and end.

The sentence is meant to say that border-block-start-radius is the shorthand for border-start-start-radius and border-end-start-radius, border-block-end-radius the shorthand for border-end-start-radius and border-end-end-radius, border-inline-start-radius the shorthand for border-start-start-radius and border-end-start-radius, and border-inline-end-radius the shorthand for border-start-end-radius and border-end-end-radius.
Though that is obviously even longer and quite complicated.
So maybe there's an easier way to express that?

(Also, the order of the longhands is meant to follow the ones of the physical shorthands, so it is always start first then end.)

Copy link
Contributor Author

@SebastianZ SebastianZ Oct 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The start/end refers to the axis given by the first part of the name

To give an example, the inline-end in border-inline-end-radius means the end radii in the inline axis, so border-start-end-radius and border-end-end-radius.

Copy link
Contributor

@Loirooriol Loirooriol Oct 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I find it confusing because the wording from https://drafts.csswg.org/css-logical-1/#border-radius-properties explains the mapping of logical longhands into physical longhands, but here it's trying to explain how some shorthands expand into longhands.

I would rather copy the wording from the physical shorthands

The physical 'border-*-radius' shorthands set the two physical 'border-*-*-radius'
longhand properties of the related physical side. [...]
The two values for the radii are given in the order
top-left, top-right for 'border-top-radius',
top-right, bottom-right for 'border-right-radius'
bottom-left, bottom-right for 'border-bottom-radius',
and top-left, bottom-left for 'border-left-radius'.

The logical 'border-*-radius' shorthands set the two logical 'border-*-*-radius'
longhand properties of the related logical side. [...]
The two values for the radii are given in the order
start-start, start-end for 'border-block-start-radius',
end-start, end-end for 'border-block-end-radius'
start-start, end-start for 'border-inline-start-radius',
and start-end, end-end for 'border-inline-end-radius'.

Or maybe merge the sections and define all the shorthands together.

The 'border-*-radius' shorthands set the two 'border-*-*-radius'
longhand properties of the related side. [...]
The two values for the radii are given in the order
top-left, top-right for 'border-top-radius',
top-right, bottom-right for 'border-right-radius'
bottom-left, bottom-right for 'border-bottom-radius',
top-left, bottom-left for 'border-left-radius',
start-start, start-end for 'border-block-start-radius',
end-start, end-end for 'border-block-end-radius'
start-start, end-start for 'border-inline-start-radius',
and start-end, end-end for 'border-inline-end-radius'.

Copy link
Contributor Author

@SebastianZ SebastianZ Oct 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds reasonable. I've merged the two sections now.

If values are given before and after the slash,
then the values before the slash set the
horizontal radius and the values after the slash set the vertical radius,
Expand Down