v158 · css · values & units

Inheritance & used value

Three edges of Appendix A in one page. First, what does not change: used values still truncate and repeat, so paint is identical before and after this feature. Then the two places preserved computed lists genuinely leak into rendering and script: the inherit keyword, and transitions interpolating a list your image count used to eat.

Probing this browser…

1 · Used value: rendering does not change

A — 1 image, THREE positions authored

B — 1 image, only the first position

Both boxes paint ONE dot in the same place in every engine — the excess entries in A are ignored at used-value time (“excess values at the end of its list are not used”). What differs is only what A’s computed value admits to. The button reads both back.

2 · inherit passes the full computed list

parent — 1 image, 3 positions

child — background-position: inherit, 3 images

The child has THREE images and inherits its position list. If the parent’s computed value kept all three entries (Chrome 158), the child’s dots spread out; if it was truncated to the parent’s single image (pre-158), the child inherits one entry and all three dots pile onto it. This is the one place the change is visible — because inherit copies computed values.

3 · Transitions interpolate the preserved list

1 image, a 2-entry position list in transition

Use any button above to read values back.

the inheritance contract

.parent { background-image: url(one.png);
          background-position: 20px 20px, 90px 20px, 160px 20px; }
.child  { background-image: url(a.png), url(b.png), url(c.png);
          background-position: inherit; }

getComputedStyle(parent).backgroundPosition
/* Chrome ≤157: "20px 20px"                           (truncated)   */
/* Chrome 158+: "20px 20px, 90px 20px, 160px 20px"    (preserved)   */

/* …and the child's three images place accordingly:
   pre-158 → all three at 20px 20px;  158+ → spread across all three. */

Also verified here: background-image’s initial value none still counts as ONE layer — a multi-entry position list on an element with no image is equally protected (that case is in the probe the banner ran). The default background-position of 0% 0% is why the truncated pile-up lands at the first entry, never at a fabricated value.

see also