Skip to content

[css-images-3] change which images image-orientation applies to #5245

Closed

Description

Image for: Description

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

Metadata

Image for: Metadata

Metadata

Image for: Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

    Image for: Issue actions