247810 2022-11-11 08:50:47 -0800 border shorthand serialization doesn't round-trip 2026-02-04 22:20:02 -0800 1 1 1 Unclassified WebKit CSS Other Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=247498 InRadar P2 Normal --- 1 emilio webkit-unassigned ahmad.saleem792 darin ntim obrufau simon.fraser webkit-bug-importer oldest_to_newest 1911826 0 emilio 2022-11-11 08:50:47 -0800 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. 1911873 1 obrufau 2022-11-11 11:35:04 -0800 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"], } 1912006 2 ntim 2022-11-12 10:18:05 -0800 Are there any WPT for this? It would be nice to add some if not. 1912012 3 darin 2022-11-12 10:50:03 -0800 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. 1912024 4 obrufau 2022-11-12 12:58:56 -0800 It should not be literally "initial", see e.g. bug 82078 and bug 244657 Using "initial" causes bugs like bug 242775. 1912161 5 darin 2022-11-13 20:35:56 -0800 I don’t mean how it will serialize in the shorthand. I meant how it should serialize in the longhand. 1912162 6 darin 2022-11-13 20:36:49 -0800 But I assume that most shorthands never say "reset to the initial value". 1912163 7 darin 2022-11-13 20:37:00 -0800 The font shorthand does, but maybe that’s the only one. 1912165 8 darin 2022-11-13 20:37:53 -0800 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. 1912215 9 ntim 2022-11-14 01:14:15 -0800 The border/border-image case is tested by LayoutTests/imported/w3c/web-platform-tests/css/cssom/border-shorthand-serialization.html 1912315 10 obrufau 2022-11-14 08:06:33 -0800 (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. 1913469 11 webkit-bug-importer 2022-11-18 08:51:15 -0800 <rdar://problem/102516427> 2178268 12 ahmad.saleem792 2026-02-04 22:20:02 -0800 https://wpt.fyi/results/css/cssom/border-shorthand-serialization.html?label=master&label=experimental&aligned All browsers match each other in above test, do we need to do anything here?