1710422 - image-set() not falling back

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[jsnkuhn]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

Steps to reproduce:

https://codepen.io/jsnkuhn/pen/VwmxgRJ?editors=0110

Actual results:

background-image property with invalid/non-supported image-set() value leads to no background image even when a separate fallback background-image is declared.

Expected results:

background-image: image-set(); property value pair should fall back to another background-image declaration.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

That's not how it works. You need to specify the fallback in the image-set itself. Invalid mime types are not a parse error per spec. This works as expected:

background-image:
    image-set(
      "https://tracker.randomania.net/dwr/images/alefgard_crop_test.fake" type("image/fake"),
      "https://tracker.randomania.net/dwr/images/alefgard_crop_test.png"
    );

Comment 2

[jsnkuhn]

So the separate background-image declaration is only working in FF88 because image-set type() is not supported?

So until image-set() is fully supported across browser developers need to repeat the last line of the image-set as a separate background-image:

background-image: url("https://tracker.randomania.net/dwr/images/alefgard_crop_test.png");
background-image:
    image-set(
      "https://tracker.randomania.net/dwr/images/alefgard_crop_test.fake" type("image/fake"),
      "https://tracker.randomania.net/dwr/images/alefgard_crop_test.png"
    );

Comment 3

[Emilio Cobos Álvarez (:emilio)]

(In reply to jsnkuhn from comment #2)

So the separate background-image declaration is only working in FF88 because image-set type() is not supported?

Exactly

So until image-set() is fully supported across browser developers need to repeat the last line of the image-set as a separate background-image:

Unfortunately yes, that's how it works for every new CSS feature that implements new syntax usually.

Comment 4

[jsnkuhn]

So image-set() like url() is a dead end, but a more flexible dead end.

Certainly not as developer friendly as <picture> with it's natural <img> child fallback.