Bug 271001 – CSSOM serialization unexpectedly expands some shorthand properties

• Component: CSS
• Status: RESOLVED DUPLICATE

[Qianlang Chen]

(See also https://webkit.org/b/75538 and https://webkit.org/b/73002, where this bug has been reported and a fix was attempted.)

The return values of `CSSRule.cssText` and `CSSStyleDeclaration.cssText` getters expand some shorthand CSS properties, specifically font-related shorthands like `font` or `font-variant`.

To reproduce, run this code in Safari inspector's console:
    s = new CSSStyleSheet(); 
    s.replaceSync('body { font: 12px serif; }'); 
    console.log(s.cssRules[0].cssText);

Observe that the output contains all the expanded longhand properties:
    body { font-style: normal; font-variant-caps: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: serif; font-size-adjust: none; font-kerning: auto; font-variant-alternates: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-position: normal; font-variant-emoji: normal; font-feature-settings: normal; font-optical-sizing: auto; font-variation-settings: normal; }

The expected output should just be
    body { font: 12px serif; }

The issue should be associated with how WebKit serializes a CSS declaration. The specs (https://drafts.csswg.org/cssom-1/#serialize-a-css-declaration-block), albeit very hard to read, suggest that shorthand properties should not be expanded and replaced with their longhand equivalents.

[Radar WebKit Bug Importer]

<rdar://problem/124635151>

[Karl Dubost]

With 
  data:text/html,<div id="target" style="font: 12px serif">foo</div>

and 
  const target = document.querySelector("#target");
  target.style.cssText;

On Firefox, Chrome
cssText: "font: 12px serif;" 

On Safari
"font-style: normal; font-variant-caps: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: serif; font-size-adjust: none; font-kerning: auto; font-variant-alternates: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-variant-east-asian: normal; font-variant-position: normal; font-variant-emoji: normal; font-feature-settings: normal; font-optical-sizing: auto; font-variation-settings: normal;"

[Karl Dubost]

I wonder if there's a WPT already covering this.

[Ahmad Saleem]

Might be dupe of bug 247852?

[Qianlang Chen]

(In reply to Ahmad Saleem from comment #4)
> Might be dupe of bug 247852?

Oooh, looks like it!

[Karl Dubost]

*** This bug has been marked as a duplicate of bug 247852 ***