271627 2024-03-24 22:28:17 -0700 shorthand value for CSS gap is not kept as-is in serialized and computed values. 2024-03-28 12:24:01 -0700 1 1 1 Unclassified WebKit CSS Safari 17 Unspecified Unspecified RESOLVED FIXED https://wpt.fyi/results/css/css-align/parsing/gap-computed.html BrowserCompat, InRadar, WPTImpact P2 Normal --- 271692 1 karlcow karlcow ntim obrufau webkit-bug-importer oldest_to_newest 2023579 0 karlcow 2024-03-24 22:28:17 -0700 see http://wpt.live/css/css-align/parsing/gap-computed.html https://wpt.fyi/results/css/css-align/parsing/gap-computed.html with const target = document.getElementById('target'); target.style['gap'] = 'normal'; Then doing: target.style.cssText; target.style.getPropertyValue('gap'); window.getComputedStyle(target).gap; Safari: cssText: "row-gap: normal; column-gap: normal;" getPropertyValue: "normal" getComputedStyle: "normal normal" Firefox: cssText: "gap: normal;" getPropertyValue: "normal" getComputedStyle: "normal" Chrome: cssText: "gap: normal;" getPropertyValue: "normal" getComputedStyle: "normal" In https://searchfox.org/wubkat/rev/de98fcee68c0bd94f16d6dfb9dac2ea106ee40d5/Source/WebCore/css/parser/CSSPropertyParser.cpp#2911-2921 case CSSPropertyGap: { RefPtr rowGap = CSSPropertyParsing::consumeRowGap(m_range, m_context); RefPtr columnGap = CSSPropertyParsing::consumeColumnGap(m_range, m_context); if (!rowGap || !m_range.atEnd()) return false; if (!columnGap) columnGap = rowGap; addProperty(CSSPropertyRowGap, CSSPropertyGap, rowGap.releaseNonNull(), important); addProperty(CSSPropertyColumnGap, CSSPropertyGap, columnGap.releaseNonNull(), important); return true; } In https://searchfox.org/wubkat/rev/de98fcee68c0bd94f16d6dfb9dac2ea106ee40d5/Source/WebCore/css/ComputedStyleExtractor.cpp#3695-3696 case CSSPropertyGap: return getCSSPropertyValuesForShorthandProperties(gapShorthand()); In https://searchfox.org/wubkat/rev/de98fcee68c0bd94f16d6dfb9dac2ea106ee40d5/Source/WebCore/css/ComputedStyleExtractor.cpp#4788-4794 Ref<CSSValueList> ComputedStyleExtractor::getCSSPropertyValuesForShorthandProperties(const StylePropertyShorthand& shorthand) const { CSSValueListBuilder list; for (auto longhand : shorthand) list.append(propertyValue(longhand, UpdateLayout::No).releaseNonNull()); return CSSValueList::createSpaceSeparated(WTFMove(list)); } And [StylePropertyShorthandFunctions.cpp](https://searchfox.org/wubkat/source/__GENERATED__/WebCore/DerivedSources/StylePropertyShorthandFunctions.cpp#839-846) StylePropertyShorthand gapShorthand() { static const CSSPropertyID gapProperties[] = { CSSPropertyID::CSSPropertyRowGap, CSSPropertyID::CSSPropertyColumnGap, }; return StylePropertyShorthand(CSSPropertyID::CSSPropertyGap, gapProperties); } 2023580 1 webkit-bug-importer 2024-03-24 22:28:29 -0700 <rdar://problem/125335787> 2023586 2 ntim 2024-03-24 23:44:56 -0700 Fixing the cssText bit is just a matter of removing this line: https://searchfox.org/wubkat/rev/de98fcee68c0bd94f16d6dfb9dac2ea106ee40d5/Source/WebCore/css/StyleProperties.cpp#253 There are many ways to fix getComputedStyle, the easiest one being using ShorthandSerializer for the computed style by adding CSSPropertyGap here: https://searchfox.org/wubkat/rev/de98fcee68c0bd94f16d6dfb9dac2ea106ee40d5/Source/WebCore/css/CSSComputedStyleDeclaration.cpp#131-136 2023592 3 karlcow 2024-03-25 00:35:27 -0700 Pull request: https://github.com/WebKit/WebKit/pull/26398 2024520 4 ews-feeder 2024-03-28 12:23:59 -0700 Committed 276794@main (ab28ade5ffd5): <https://commits.webkit.org/276794@main> Reviewed commits have been landed. Closing PR #26398 and removing active labels.