Bug 271627 – shorthand value for CSS gap is not kept as-is in serialized and computed values.

• Component: CSS
• Status: RESOLVED FIXED

[Karl Dubost]

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);
}

[Radar WebKit Bug Importer]

<rdar://problem/125335787>

[Tim Nguyen (:ntim)]

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

[Karl Dubost]

Pull request: https://github.com/WebKit/WebKit/pull/26398

[EWS]

Committed 276794@main (ab28ade5ffd5): <https://commits.webkit.org/276794@main>

Reviewed commits have been landed. Closing PR #26398 and removing active labels.