Skip to content

[cssom][css-grid] Do shorthands serialize with the resolved value of their longhands? #11382

Open
@Loirooriol

Description

@Loirooriol

Let's say that the longhands of a shorthand have a resolved value which is different than their computed value.

How should the shorthand serialize? Some examples:

  • For position: relative; inset: auto, all browsers serialize top as 0px. But Firefox serializes inset as auto, while Blink and WebKit say 0px.
  • For margin: auto, all browsers serialize margin-top as 0px. But Firefox serializes margin as auto, while Blink and WebKit say 0px.
  • For display: grid; grid-template-rows: repeat(2, 1px), all browsers serialize grid-template-rows as 1px 1px. But Firefox and Blink serialize grid-template as repeat(2, 1px) / none, while WebKit says 1px 1px / none.
  • For display: grid; grid-template: 1px / 2px and ::before { content: ""; grid-row-end: 1 }, all browsers serialize grid-template-rows as 0px 1px. But Firefox and Blink serialize grid-template as 1px / 2px, while WebKit says 0px 1px / 2px.
  • For display: grid; grid-template: 1px / none; width: 100px and ::before { content: ""; grid-row-end: 1 }, all browsers serialize grid-template-rows as 0px 1px and grid-template-columns as 100px. But Firefox serializes grid-template as 1px / none, Blink as 1px / 100px, and WebKit as 0px 1px / 100px.

Grid is especially nonsensical.

I tend to agree with WebKit: shorthands should serialize as if the computed value of the longhands was their resolved value.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Regular agenda items

    Status

    Regular agenda

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions