Where in the CSS specs does it say how multiple properties with the same name should be handled?

Question

In debugging another issue, I'd like to confirm I've correctly understood how a browser should handle a declaration like

background-image: url(image0.jpg);
background-image: image-set(url(image1.jpg) 1x, url(image2.jpg) 2x);

I've poked around in the specs a little but couldn't find it.

My impression from testing it out is that browsers will go with the first declaration they consider valid, but I would like to confirm this with a source. Note that I'm not (just) asking what the correct behaviour is – I'm specifically looking for an authoritative source, ideally a spec.

question from:https://stackoverflow.com/questions/66063087/where-in-the-css-specs-does-it-say-how-multiple-properties-with-the-same-name-sh

Answer 1

To answer my own question – I realised I should probably look for the answers to the two sub-questions "which out of two declarations wins" and "what should it do about invalid declarations".

For the former, https://www.w3.org/TR/css-cascade-3/#cascade-order says

The last declaration in document order wins.

which I take to mean that out of two property-value declarations with the same property, the last one wins.

And for the latter, https://www.w3.org/TR/css-cascade-3/#w3c-partial says

user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

which I take to mean that if a browser e.g. doesn't support image-set in the question's example, it will ignore that entire declaration.