[css-images-3] change which images image-orientation applies to · Issue #5245 · w3c/csswg-drafts (original) (raw)

In #4165 it was resolved that EXIF orientation applies to all images by default. There was some discussion about which images the image-orientation property and talk of a resolution, but no actual resolution.

This matters because we've got two sets of WPT tests added in the last six months which disagree - see web-platform-tests/wpt#18549 (comment) - and different results in Firefox and Chrome (see a, b). So we need a once-and-for-all resolution on this.

@heycam made the same observation in #4165 (comment), and we'd like to implement this but can't until it's clarified.

So the question is: does the image-orientation property apply to "decorative" images, such as background-image and border-image? And if it does not (as currently specified), the second question is can we tightly define "decorative" images.

@zcorpan made a full list at web-platform-tests/wpt#18549 (comment)

CSS

• ::before/::after + content
• background-image
• list-style-image
• border-image
• cursor

SVG

• image

HTML

• img
• canvas drawImage() + getImageData()
• video poster
• input type=image
• embed
• object

load an image in an iframe
load an image in a top-level doc (this already respects EXIF in all browsers I believe)
Favicon link rel=icon / favicon.ico (manual tests?)
web app manifest icon (manual test?)

• I would expect "content" images to be those displayed from content, list-style-image (which generates content), SVG image, HTMLimg, embed, object, and video poster. The image-orientation property should apply to all of these.
• I would expect "decorative" images to be background-image, border-image and mask-image.
• image-orientation does not apply to cursor, top-level docs, favicon or web-app manifests.
• I'm slightly unsure about exactly where iframe fits.

cc @schenney-chromium