border shorthand serialization doesn't round-trip

[Emilio Cobos Álvarez (:emilio)]

document.body.style.border = "1px solid";
document.body.style.borderImageSlice = "99%"; // Something non-initial
document.body.style.border // Should be "", on WebKit is "1px solid"

Per spec it should be the empty string.

https://drafts.csswg.org/cssom/#serialize-a-css-value:

> If there is no such shorthand or shorthand cannot exactly represent the values of all the properties in list, return the empty string.

The list comes from https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue which has:

> For each longhand property longhand that property maps to, in canonical order [...]

And border maps to the border-image properties.

[Oriol Brufau]

This also affects other properties, as can be easily shown by the fact that WebKit doesn't even ensure that all longhands are present.

var allCSSProps = new Set();
for (let obj = document.createElement("div").style; obj; obj = Reflect.getPrototypeOf(obj)) {
  for (let name of Object.getOwnPropertyNames(obj)) {
    let prop = name.replace(/[A-Z]/g, c => "-" + c.toLowerCase());
    if (CSS.supports(prop, "initial")) {
      allCSSProps.add(prop);
    }
  }
}
var style = document.createElement("div").style;
document.documentElement.style.cssText = "all: initial; direction: initial; unicode-bidi: initial";
var cs = getComputedStyle(document.documentElement);
var bad = {};
for (let prop of allCSSProps) {
  const value = cs.getPropertyValue(prop);
  style.cssText = "";
  style.setProperty(prop, value);
  if (style.length > 1) {
    let longhands = [...style];
    for (let longhand of longhands) {
      style.cssText = "";
      style.setProperty(prop, value);
      style.removeProperty(longhand);
      if (style.getPropertyValue(prop) !== "") {
        bad[prop] ||= [];
        bad[prop].push(longhand);
      }
    }
  }
}
bad;


{
  border: ["border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"],
  font: ["font-style", "font-variant-caps", "font-weight", "font-stretch", "line-height", "font-size-adjust", "font-kerning", "font-variant-alternates", "font-variant-ligatures", "font-variant-numeric", "font-variant-east-asian", "font-variant-position", "font-feature-settings", "font-optical-sizing", "font-variation-settings", "font-palette"],
  font-synthesis: ["font-synthesis-weight", "font-synthesis-style", "font-synthesis-small-caps"],
  font-variant: ["font-variant-numeric", "font-variant-caps", "font-variant-alternates", "font-variant-east-asian", "font-variant-position"],
  offset: ["offset-path", "offset-distance", "offset-position", "offset-anchor", "offset-rotate"],
}

[Tim Nguyen (:ntim)]

Are there any WPT for this? It would be nice to add some if not.

[Darin Adler]

Tests should cover both specified properties and computed properties. For specified values of shorthands it’s important to cover cases when the longhands are set to CSS-wide keywords like "inherit" and "initial".

Aside from this, I think we also might want tests for what longhands get set to when the specification says "reset to the initial value" because you could imagine that could serialize as "initial" or as "normal", for example.

[Oriol Brufau]

It should not be literally "initial", see e.g. bug 82078 and bug 244657
Using "initial" causes bugs like bug 242775.

[Darin Adler]

I don’t mean how it will serialize in the shorthand. I meant how it should serialize in the longhand.

[Darin Adler]

But I assume that most shorthands never say "reset to the initial value".

[Darin Adler]

The font shorthand does, but maybe that’s the only one.

[Darin Adler]

Without existing WPT, the main task here is writing the tests. It will be very quick to fix the code once we have the tests.

[Tim Nguyen (:ntim)]

The border/border-image case is tested by LayoutTests/imported/w3c/web-platform-tests/css/cssom/border-shorthand-serialization.html

[Oriol Brufau]

(In reply to Darin Adler from comment #6)
> But I assume that most shorthands never say "reset to the initial value".

I think it's quite common.

https://drafts.csswg.org/css-backgrounds/#border-shorthands
> Omitted values are set to their initial values. 
> The border shorthand also resets border-image to its initial value.

https://drafts.csswg.org/css-backgrounds/#background
> 'background-color' is set to the specified color, if any, else set to its initial value. 

https://drafts.fxtf.org/motion/#offset-shorthand
> Omitted values are set to their initial values.

https://drafts.csswg.org/css-grid/#valdef-grid-template-none
> Sets all three properties to their initial values ('none'). 

https://drafts.csswg.org/css-grid/#grid-shorthand
> the 'grid-auto-*' longhands to their initial values.
> All other grid sub-properties are reset to their initial values.

[Radar WebKit Bug Importer]

<rdar://problem/102516427>