[css-align-3] `grid-*-gap` should be aliases instead of shorthands #8014

cdoublev · 2022-11-04T04:25:11Z

grid-row-gap, grid-column-gap, grid-gap, are defined to be treated as legacy shorthands instead of legacy name aliases, but they must take the same grammar as the property they are aliasing, whereas CSS Cascade defines:

legacy name aliases: when the old property’s value syntax is identical to that of the new property, the two names are aliased with an operation on par with case-mapping [...]

I did not quite understand the whole discussions in #866 (especially the meeting transcript) that led to the changes in CSS Cascade for the above definition and the definition of legacy shorthands, so I am not sure the resolution is you must use legacy name aliasing when the syntax is the same. I also note that the details of the aliasing mechanism is intentionally left up to the UA for some legacy properties whose syntax is the same as the new property (eg. -webkit-user-select).

The text was updated successfully, but these errors were encountered:

Loirooriol · 2022-11-04T04:47:48Z

In practice, the difference can be observed as such:

document.body.style.gridGap = "var(--gap)";
document.body.style.gap;

Firefox and WebKit say "var(--gap)" because they implement grid-gap as an alias of gap.
Blink says "" because it implements grid-gap and gap as independent shorthands.

cdoublev · 2022-11-04T08:12:10Z

In practice, the difference can be observed as such

Do you mean the difference between a simple alias and a legacy shorthand?

Blink says "" because it implements grid-gap and gap as independent shorthands.

Is this the expected behavior of a legacy shorthand? If so, I do not understand. grid-gap is a shorthand for gap which is a shorthand for row-gap and column-gap, so the parsed value for grid-gap must expand to declarations for both longhands. Why gap would then serialize to ''?

EDIT: oh right, ok, it is specific to substitution-value, I will have to think harder to understand how it could be wrong to not serialize gap with the substitution-value specified for grid-gap.

Loirooriol · 2022-11-04T09:11:05Z

Yes, this is just when using var(). For these gap properties I think it would be fine, but in general it would not, e.g.

document.body.style.cssText = "--bb: page; break-before: var(--bb)";
document.body.style.pageBreakBefore; // ""

It can't be var(--bb) since page-break-before: page would be invalid.

cdoublev · 2022-11-04T10:34:20Z

Then when syntaxes are different, UAs must implement the legacy property as a legacy shorthand, otherwise they can choose the mechanism they want.

cdoublev · 2022-11-05T12:47:08Z

I would not want to stray too far from the topic of this issue (which is to allow aliasing grid-*-gap as a simple alias), but did you had discussions about serializing the legacy shorthand with var() as a specified value (when it was declared for the target property), but with empty string as a computed/resolved value? This may avoid these confusing serializations:

style.pageBreakAfter = 'var(--custom)'
style.cssText; // 'break-after: ;'
style.breakAfter = 'var(--custom)'
style.cssText; // 'break-after: var(--custom);'

But how to serialize these cases may not be fully defined though (cf. #3109).

Loirooriol · 2022-11-05T17:48:46Z

This could maybe be addressed as part of #2515? https://drafts.csswg.org/css-cascade-4/#legacy-shorthand says

CSSOM will not use them when serializing declarations

but I think they should be used when a longhand has a pending-substitution value linked to the legacy shorthand.
WebKit does this:

style.pageBreakAfter = 'always'
style.cssText; // 'break-after: page;'
style.pageBreakAfter = 'var(--custom)'
style.cssText; // 'page-break-after: var(--custom);'

cdoublev · 2022-11-05T20:04:17Z

I was thinking to serializing the legacy shorthand with getPropertyValue():

style['--custom'] = 'recto'
style.breakAfter = 'var(--custom)'
style.pageBreakAfter; // 'var(--custom)'
computedStyle.pageBreakAfter; // ''

But yeah, "using" it in a style block also makes sense to me, and I am fine with discussing it in #2515. I subscribed to it.

dbaron · 2024-04-02T21:00:27Z

Based on @Loirooriol 's comment in a Chromium code review, it sounds like:

Gecko and WebKit already treat these properties as aliases
Chromium currently treats them as shorthands, but has a few bugs with that handling, and would like to switch to aliases, which is simpler.

I will also admit when reading the spec that I didn't catch the distinction that these weren't aliases.

dbaron · 2024-04-02T21:03:02Z

(We should probably also add helper functions to parsing-testcommon.js for testing that something is one or the other of these types of aliases, based on the technique in #8014 (comment) .)

dbaron · 2024-06-11T15:00:05Z

FYI, Chrome has done this.

css-meeting-bot · 2024-06-11T15:01:13Z

The CSS Working Group just discussed [css-align-3] `grid-*-gap` should be aliases instead of shorthands, and agreed to the following:

RESOLVED: Make grid*gap properties be legacy name aliases

The full IRC log of that discussion

<jarhar> oriol: so we had the case with grid that we initially added the grid properties but then we wanted to ? as gap and then the currently the specification that grid gap should be a hsorthand of gap
<jarhar> oriol: however, but firefox and webkit implement it not as a hsorthand but as an alias
<jarhar> oriol: both cases basically have the same behavior but if you set a variable to the grid gap property, then you try to read the value of the gap property, if they are aliasses then you get the ? otherwise you get the emptry string
<jarhar> oriol: if it gets set to an internal ? value
<emilio> s/?/pending substitution/
<jarhar> oriol: and then i think that doing show interest or ended up doing it as an alias i dont remember the situation
<jarhar> dbaron: it is already done and shipping in 125
<jarhar> oriol: the propsoed resolution would be that grid gap should be an alias of gap and not a shorthand
<jarhar> oriol: not sure if i missed anything
<iank_> make the spec fiction, non-fiction :)
<jarhar> miriam: so thats the proposed resolution and is also whats now shipping?
<jarhar> dbaron: yes it is now shipping in 3 engines
<jarhar> dbaron: we added it to the agenda around the same time we made the change and it took some time to come to the meeting
<jarhar> miriam: great, lets resolve on the thing that all the engines do
<jarhar> fantasai: make grid gap aliases
<fantasai> PROPOSED: Make grid*gap properties be legacy name aliases
<fantasai> RESOLVED: Make grid*gap properties be legacy name aliases

…acy shorthands. This is a followup to the discussion in w3c/csswg-drafts#8014 and tests the concepts in https://drafts.csswg.org/css-cascade-5/#aliasing partly using the rules in https://drafts.csswg.org/css-variables/#substitution-in-shorthands . Bug: 40834250 Change-Id: Ic8c2044a091ec609bb447c739052888a4ec6e603

…acy shorthands. This is a followup to the discussion in w3c/csswg-drafts#8014 and tests the concepts in https://drafts.csswg.org/css-cascade-5/#aliasing partly using the rules in https://drafts.csswg.org/css-variables/#substitution-in-shorthands . Bug: 40834250 Change-Id: Ic8c2044a091ec609bb447c739052888a4ec6e603 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5838006 Commit-Queue: David Baron <dbaron@chromium.org> Reviewed-by: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/main@{#1351453}

…n legacy name aliases and legacy shorthands., a=testonly Automatic update from web-platform-tests Add tests to test the distinction between legacy name aliases and legacy shorthands. This is a followup to the discussion in w3c/csswg-drafts#8014 and tests the concepts in https://drafts.csswg.org/css-cascade-5/#aliasing partly using the rules in https://drafts.csswg.org/css-variables/#substitution-in-shorthands . Bug: 40834250 Change-Id: Ic8c2044a091ec609bb447c739052888a4ec6e603 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5838006 Commit-Queue: David Baron <dbaron@chromium.org> Reviewed-by: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/main@{#1351453} -- wpt-commits: 67a07c1964180a3ea630a5968a236db010a20e42 wpt-pr: 47982

…n legacy name aliases and legacy shorthands., a=testonly Automatic update from web-platform-tests Add tests to test the distinction between legacy name aliases and legacy shorthands. This is a followup to the discussion in w3c/csswg-drafts#8014 and tests the concepts in https://drafts.csswg.org/css-cascade-5/#aliasing partly using the rules in https://drafts.csswg.org/css-variables/#substitution-in-shorthands . Bug: 40834250 Change-Id: Ic8c2044a091ec609bb447c739052888a4ec6e603 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5838006 Commit-Queue: David Baron <dbaronchromium.org> Reviewed-by: Oriol Brufau <obrufauigalia.com> Cr-Commit-Position: refs/heads/main{#1351453} -- wpt-commits: 67a07c1964180a3ea630a5968a236db010a20e42 wpt-pr: 47982 UltraBlame original commit: d85e48ddef6f68ec481f98cce15461dd50857ab7

Loirooriol added the css-align-3 Current Work label Nov 4, 2022

cdoublev mentioned this issue Nov 6, 2022

Do the CSSOM part of #866 #3109

Open

dbaron added the Agenda+ label Apr 2, 2024

astearns added this to CSSWG June 2024 meeting Jun 3, 2024

astearns moved this to Unsorted in CSSWG June 2024 meeting Jun 3, 2024

astearns moved this from Unsorted to Wednesday morning in CSSWG June 2024 meeting Jun 3, 2024

astearns closed this as completed by moving to Wednesday morning in CSSWG June 2024 meeting Jun 3, 2024

astearns reopened this Jun 3, 2024

astearns moved this from Wednesday morning to Wed morning in CSSWG June 2024 meeting Jun 3, 2024

css-meeting-bot removed the Agenda+ label Jun 11, 2024

chromium-helper mentioned this issue Jun 11, 2024

[css-align-3] grid-*-gap should be aliases instead of shorthands chromium-helper/csswg-resolutions#446

Closed

mozilla-apprentice mentioned this issue Jun 11, 2024

[css-align-3] grid-*-gap should be aliases instead of shorthands mozilla/wg-decisions#1502

Open

fantasai added Closed Accepted by CSSWG Resolution Needs Edits labels Jun 11, 2024

fantasai removed the Needs Edits label Aug 4, 2024

fantasai closed this as completed Aug 4, 2024

fantasai added a commit that referenced this issue Aug 4, 2024

[css-align-3] Define grid-gap as legacy name aliases #8014

15427a6

chromium-wpt-export-bot mentioned this issue Sep 5, 2024

Add tests to test the distinction between legacy name aliases and legacy shorthands. web-platform-tests/wpt#47982

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-align-3] `grid-*-gap` should be aliases instead of shorthands #8014

[css-align-3] `grid-*-gap` should be aliases instead of shorthands #8014

cdoublev commented Nov 4, 2022

Loirooriol commented Nov 4, 2022

cdoublev commented Nov 4, 2022 •

edited

Loading

Loirooriol commented Nov 4, 2022

cdoublev commented Nov 4, 2022

cdoublev commented Nov 5, 2022

Loirooriol commented Nov 5, 2022

cdoublev commented Nov 5, 2022

dbaron commented Apr 2, 2024

dbaron commented Apr 2, 2024

dbaron commented Jun 11, 2024

css-meeting-bot commented Jun 11, 2024

[css-align-3] grid-*-gap should be aliases instead of shorthands #8014

[css-align-3] grid-*-gap should be aliases instead of shorthands #8014

Comments

cdoublev commented Nov 4, 2022

Loirooriol commented Nov 4, 2022

cdoublev commented Nov 4, 2022 • edited Loading

Loirooriol commented Nov 4, 2022

cdoublev commented Nov 4, 2022

cdoublev commented Nov 5, 2022

Loirooriol commented Nov 5, 2022

cdoublev commented Nov 5, 2022

dbaron commented Apr 2, 2024

dbaron commented Apr 2, 2024

dbaron commented Jun 11, 2024

css-meeting-bot commented Jun 11, 2024

[css-align-3] `grid-*-gap` should be aliases instead of shorthands #8014

[css-align-3] `grid-*-gap` should be aliases instead of shorthands #8014

cdoublev commented Nov 4, 2022 •

edited

Loading