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.
<rdar://problem/116897028>
see Comment #13 https://bugs.webkit.org/show_bug.cgi?id=261552#c13
This is happening for mask-image too.