[CSS-images] Specify fallback behavior when replaced or background image content not available

[chrishtr]

There appears to be no spec language for what paints to the screen when the replaced content
of an <img> or CSS backgroud image is not available at paint time, either due to being in process
of being loaded, or due to an async decode.

Image fallbacks appear to be (partially?) specified in the presence of the image() function as part of
css images level 4. https://www.w3.org/TR/css-images-4/#image-fallbacks. This needs to be
extended more generally.

I think the best behavior is to fall back to whatever content painted underneath the paint phase that
would have drawn the image. e.g. if step 1.2. or step 7.1 of the algorithm below had no image content,
still paint but just skip those steps.
https://www.w3.org/TR/CSS2/zindex.html

See also whatwg/html#1920

@vmpstr @tabatkins

[fantasai]

See “invalid image” in https://drafts.csswg.org/css-images-3/#image-values which is the spec prose that's currently active (no one implements image() yet). I suppose we can extend the wording to include images that have not yet loaded.

[tabatkins]

Yeah, I think "invalid image" should cover the loading case as well.

[AmeliaBR]

For content images, at least, browsers treat loading images (blank space or partial image render) differently from invalid images (broken-image icon).

Not sure whether its worthwhile to have a similar distinction for CSS images. It might be worth testing to see what browsers currently do.

[tabatkins]

Yeah, letting the UA discriminate between those cases when doing its ultimate fallback seems fine, and will just need some extra prose. But it would be good, I think, to let image() fallback handle loading images as well.

(image() will need to discriminate here, too - we don't want a loading fallback to fall back to another URL! Basically, if it's currently depending on a loading image, it should skip all further images that require loading, and fall back all the way to a CSS-generated image or color.)

[fantasai]

OK, we've defined “loading image” as a term somewhat distinct from “invalid image”, see changes at: 846d21d

Agenda+ for CSSWG review.