v158 · css · values & units
Layer-count lab
Appendix A names a whole coordinated group, not just background-position. This lab writes a three-entry list into every coordinated background-* longhand while the element carries one or two images, then reads each computed value back. It also runs the appendix’s second observable: with mismatched longhand lists, serialising the background shorthand must return the empty string.
Probing this browser…
Three-entry lists on every longhand
background-image layers:
| longhand | authored (3 entries) | computed value | kept | verdict |
|---|
Switch the image count or serialise the shorthand.
the shorthand rule most people miss
/* Appendix A, on shorthands over coordinated groups:
"if any longhands have mismatched list lengths … the CSSOM
representation of the shorthand's value will return the
empty string." */
el.style.backgroundImage = "linear-gradient(…)"; // 1 entry
el.style.backgroundPosition = "0px 0px, 10px 10px"; // 2 entries
getComputedStyle(el).background
// Chrome ≤157: "rgba(0, 0, 0, 0) linear-gradient(…) … 0px 0px …"
// (non-empty — the lists were silently equalised first)
// Chrome 158+: "" (empty — mismatched lists are not representable)The mask-* properties form the other coordinated group in shipping CSS. The table’s last row reads mask-position under the same mismatch, clearly labelled as the neighbouring group rather than part of this chromestatus entry — the css-masking parsing WPTs are listed on the entry because the same engine change covers both.