Bug 263104

Summary: getComputedStyle() should return the same list than what was specified (truncation or excess)
Product: WebKit Reporter: Karl Dubost <karlcow>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: emilio, koivisto, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar, WPTImpact
Version: Safari 17   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=263115
https://bugs.webkit.org/show_bug.cgi?id=250702
Bug Depends on:    
Bug Blocks: 261552, 263051    

Description Karl Dubost 2023-10-12 19:43:08 PDT
getComputedStyle(elt).* should return the specified values for coordinating list properties.

.test {
    background-image: url(foo.ping);
    background-blend-mode: normal, luminosity;
    background-position: 0px 0px, 10px 10px;
}

let test = document.querySelector('.test');
window.getComputedStyle(test).backgroundBlendMode;
window.getComputedStyle(test).backgroundPosition;

should return (like Gecko)

normal, luminosity
0px 0px, 10px 10px

currently WebKit and Blink return

normal
0px 0px


Currently all the properties in 
https://searchfox.org/wubkat/rev/95664cfd77a025b5154b8fc6dd52a6cbd9c0f544/Source/WebCore/css/ComputedStyleExtractor.cpp
which have the patterns


        auto& layers = style.backgroundLayers();
        if (!layers.next())
            return createConvertingToCSSValueID(layers.blendMode());
        CSSValueListBuilder list;
        for (auto* currLayer = &layers; currLayer; currLayer = currLayer->next())
            list.append(createConvertingToCSSValueID(currLayer->blendMode()));
        return CSSValueList::createSpaceSeparated(WTFMove(list));


will not send back the list of values as specified and will stop if the number of images and the number of associated properties is different.
Comment 1 Radar WebKit Bug Importer 2023-10-12 19:43:41 PDT
<rdar://problem/116897028>
Comment 3 Karl Dubost 2023-10-13 16:52:19 PDT
This is happening for mask-image too.