Chromium

noel.gordon is actively working on this as far as I understand.

[Empty comment from Monorail migration]

FF 26 just landed this: http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/

Note that the above link is outdated.
The current specification is:
http://www.w3.org/TR/css4-images/#the-image-orientation
which includes the "from-image" value, the most useful part of this feature which puts an end to the 10-year-old problem of exif-rotation-tagged images being displayed wrongly on the web.
FF does implement that too.

(why the specs people left this for "A future level of this specification" when they wrote the CSS3 one, is beyond my understanding)

Btw Apple got this wrong by having iOS safari honoring the exif orientation by default, that is, as if exif-orientation had the value "from-image" by default, contrary to specs (I thought it was the only browser doing the right thing)

This should get some love soon. We desperately need this and it's no good if only FF supports it. I can live with FF an Chrome support though.

I would love to see this implemented

Please add.

Supporting this functionality as well

Taking a look at this.

Is there any way to work around this while we wait? Can we read the EXIF data via JavaScript somehow and rotate it manually like that?

I wrote something that uses imagemagick to fix the rotation.

JavaScript-Load-Image can read the EXIF data and render the proper orientation on the page, using an HTML5 Canvas element for rendering. It works on HTML5 File objects and also loading from an URL.

https://github.com/blueimp/JavaScript-Load-Image

Here's some javascript libraries to do the same:

http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side

Quite inconvenient if you ask me... I mean, image viewers have been using exif data for years to automatically rotate images.  I feel like it's time for browsers to have an easy means to access and use the rotation information.  And that isn't asking for too much since when you view a jpeg in a tab by itself it is rotated correctly, so Chrome already does have features to access that info.

[Empty comment from Monorail migration]

And https://crbug.com/56845#c52 for back story.

For heaven's sake please implement this!

Having a look.

Thanks Rob, I additionally proposed the [flip] after long debate with the spec editor on the need for developers to dishonor [from-image], and control it themselves by using [flip] <angle> instead. I do not see the [flip] value in the CSS specs anymore.

The image-orientation property went into CSS4 then CSS3, then back to CSS4, then back to CSS3, then CSS4 ... many times in the last few years ... too many times to call it stable and ready for implement [1].  The [flip] value went missing in all these moves, Mozilla implemented it I believe (so a compat problem, awesome).  Lastly, this property applies to replaced content (<img>, plugins, <canvas>, <video>, etc) but I doubt implementors support all those cases.  Maybe just do [from-image] for <img> until the spec grows up, and then TBD resolve the [flip] issue somehow.

[1] When Chrome has implemented CSS4 property pie-in-the-sky before, it burned and hurt because said property is actually subject to change, spec-wise, causing support problems if large sites start to depend on some pre-spec / out-of-date property values or names from CSS4 (image-rendering being the classic example). Not a good place to be ever.

WIP CL from Rob: https://codereview.chromium.org/1162793003/

[Empty comment from Monorail migration]

[Empty comment from Monorail migration]

Really need this myself

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=199231

------------------------------------------------------------------
r199231 | rob.buis@samsung.com | 2015-07-21T16:59:14.171915Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/platform/RuntimeEnabledFeatures.in?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-listing-expected.txt?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation-from-image.html?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation-dynamic.html?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleBuilderConverter.cpp?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSValueKeywords.in?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited.html?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/linux/fast/css/image-orientation/image-orientation-from-image-composited-expected.png?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/parser/CSSPropertyParser.cpp?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/style/StyleRareInheritedData.cpp?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutImage.h?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/style/ComputedStyle.h?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSComputedStyleDeclaration.cpp?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/linux/fast/css/image-orientation?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/ComputedStyleCSSValueMapping.cpp?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation-expected.txt?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/getComputedStyle/computed-style-listing-expected.txt?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/CSSProperties.in?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutObject.cpp?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/frame/UseCounter.cpp?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation-dynamic-expected.html?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/linux/fast/css/image-orientation/image-orientation-from-image-expected.png?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/TestExpectations?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/css/resolver/StyleBuilderConverter.h?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutImage.cpp?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation-from-image-expected.txt?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/style/ComputedStyle.cpp?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/svg/css/getComputedStyle-listing-expected.txt?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited-expected.txt?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/compositing/CompositedDeprecatedPaintLayerMapping.cpp?r1=199231&r2=199230&pathrev=199231
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation.html?r1=199231&r2=199230&pathrev=199231
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/style/StyleRareInheritedData.h?r1=199231&r2=199230&pathrev=199231

Add CSS image-orientation: from-image

Support image-orientation: from-image [1] by teaching the CSS style
system and image LayoutImage call about it. To keep state about the
image-orientation, add a flag on CSS RareNonInheritedData. For now
support from-image and the default angle 0deg.

Add various tests for computed style of image-orientation as well as
its rendering effect on images with EXIF orientation and its dynamic
behavior via JS manipulation.

Dragging an oriented image works visually, i.e., if the image has a
orientation, the drag image should have the same orientation.

The behavior partly matches Firefox, in that from-image is supported
but not the CSS angle and flip values, unlike Firefox.

WebKit has code for using image-orientation CSS with angle values (no
from-image or flip), but it is not enabled for Safari.

[1] http://www.w3.org/TR/css4-images/#the-image-orientation

BUG=158753

Review URL: https://codereview.chromium.org/1162793003
-----------------------------------------------------------------

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=199274

------------------------------------------------------------------
r199274 | eae@chromium.org | 2015-07-22T04:17:00.732229Z

Changed paths:
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/android/fast/css/image-orientation/image-orientation-expected.txt?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/win/fast/css/image-orientation/image-orientation-from-image-expected.png?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/win/fast/css/image-orientation?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/mac/fast/css/image-orientation/image-orientation-from-image-expected.png?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/win/fast/css/image-orientation/image-orientation-from-image-composited-expected.png?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/android/fast/css/image-orientation?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/mac/fast/css/image-orientation?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/win-xp/fast/css/image-orientation/image-orientation-from-image-expected.png?r1=199274&r2=199273&pathrev=199274
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/linux/fast/css/image-orientation/image-orientation-from-image-composited-expected.png?r1=199274&r2=199273&pathrev=199274
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/TestExpectations?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/android/fast/css/image-orientation/image-orientation-from-image-composited-expected.png?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/mac/fast/css/image-orientation/image-orientation-from-image-composited-expected.png?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/win-xp/fast/css/image-orientation?r1=199274&r2=199273&pathrev=199274
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css/image-orientation/image-orientation-expected.txt?r1=199274&r2=199273&pathrev=199274
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/platform/win-xp/fast/css/image-orientation/image-orientation-from-image-composited-expected.png?r1=199274&r2=199273&pathrev=199274

Auto-rebaseline for r199231

http://src.chromium.org/viewvc/blink?view=revision&revision=199231

BUG=158753
TBR=rob.buis@samsung.com

Review URL: https://codereview.chromium.org/1245423002 .
-----------------------------------------------------------------

[Empty comment from Monorail migration]

This issue likely requires triage.  The current issue owner may be inactive (i.e. hasn't fixed an issue in the last 30 days or commented in this particular issue in the last 90 days).  Thanks for helping out!

-Anthony

[Empty comment from Monorail migration]

This landed some time ago but it looks like it needs some kind of feature launch approvals that have stalled. Chris, could you triage this?

[Empty comment from Monorail migration]

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7a103b24dadf42f27e914b024977e58ae263a836

commit 7a103b24dadf42f27e914b024977e58ae263a836
Author: rob.buis <rob.buis@samsung.com>
Date: Wed Nov 18 20:25:51 2015

Record UMA stats for Blink decoded image orientation

Record UMA stats for Blink decoded bitmap image orientation values.

BUG=158753

Review URL: https://codereview.chromium.org/1413593012

Cr-Commit-Position: refs/heads/master@{#360400}

[modify] http://crrev.com/7a103b24dadf42f27e914b024977e58ae263a836/third_party/WebKit/Source/platform/graphics/BitmapImage.cpp
[modify] http://crrev.com/7a103b24dadf42f27e914b024977e58ae263a836/third_party/WebKit/Source/platform/graphics/DeferredImageDecoder.h
[modify] http://crrev.com/7a103b24dadf42f27e914b024977e58ae263a836/third_party/WebKit/Source/platform/graphics/ImageOrientation.cpp
[modify] http://crrev.com/7a103b24dadf42f27e914b024977e58ae263a836/third_party/WebKit/Source/platform/graphics/ImageOrientation.h
[modify] http://crrev.com/7a103b24dadf42f27e914b024977e58ae263a836/tools/metrics/histograms/histograms.xml

Hoping this issue hasn't been forgotten about..

Me too. Seems so fundamental in this day and age!

Hasn't been forgotten about. https://www.w3.org/Bugs/Public/show_bug.cgi?id=25508

Noel, can you reply to https://www.w3.org/Bugs/Public/show_bug.cgi?id=25508#c29 please? Thanks!

[Empty comment from Monorail migration]

[Monorail components: Blink>CSS]

[Empty comment from Monorail migration]

chrishtr@/rob.buis@, what is the current status on this, and what is the work remaining? Predictability program has set an OKR this quarter to gain traction on the top 50 starred bugs: either by closing them, stating what milestone the fix will ship, or setting a NextAction date so that we know when to check back in. This one is #30 on the list.

[Empty comment from Monorail migration]

1. Correct image orientation should also be supported by CSS background images.

2. This is not a matter of web standards but a matter of supporting a file format.
Similar to supporting animated GIFs, there is no css property called 'animate-image: from-image' and there also shouldn't be a css property called 'image-orientation: from-image'.
The image should be displayed as it was meant to be displayed, end of story.

3. Backward compatibility is currently irrelevant because there is no workaround for this issue other than re-rendering the image on server side.

4. Example page for displaying the problem:
http://softov.org/oria/image-orientation/index.html

5. Chrome strange behavior - when opening the image directly from the address bar the image is displayed correctly. Does this mean that there is a shadow-dom element that support the correct orientation?

noel@, looks liek this is blocked on you responding to https://www.w3.org/Bugs/Public/show_bug.cgi?id=25508#c29 to get the spec cleared up.

Please fix this! Whether via CSS property or default behavior. I would prefer via default behavior like Safari & Firefox, but we web developers could make CSS property work too.

Those chrome developers still blocking this or quibbling over specs, have you tried creating a web app where users upload photos from various mobile devices? The Javascript or server-side kludges a dev has to do because of this problem are ridiculous.

Just default to honoring the EXIF info in the image! It's not a CSS spec issue, it is an issue of supporting the file format!

I've been following this for well over 18mths with no change

This issue has been automatically relabelled type=task because type=launch-owp issues are now officially deprecated. The deprecation is because they were creating confusion about how to get launch approvals, which should be instead done via type=launch issues.

We recommend this issue be used for implementation tracking (for public visibility), but if you already have an issue for that, you may mark this as duplicate.

For more details see here: https://docs.google.com/document/d/1JA6RohjtZQc26bTrGoIE_bSXGXUDQz8vc6G0n_sZJ2o/edit

For any questions, please contact owencm, sshruthi, larforge

I also vote against the "image-orientation:from-image" property.
It would be like adding "buggy-behavior:false".
It's a matter of the file format and not web specs, so I don't think w3 are relevant.

Currently my users are uploading images from mobile and the images are displayed back to them in random rotations.
Current workaround - opening the image in a new browser window as mime type image, instead of html.

CSS should not even be aware of the EXIF orientation data of the image, this is a deeper level. The correct orientation should be quietly applied anywhere, <img> <canvas> background-image and anywhere else.

@oria..., "image-orientation:from-image" can't be applied as a initial behavior because of backward compatibility.

Imagine, when already having client-side rotated images (because of lack of support "image-orientation:from-image") - it all will be broken if "image-orientation:from-image" applied as a initial behavior.

@laukst... Yes, it would change current behavior, but since there is no client-side workaround current behavior is always already broken.
Backward compatibility applies when someone rely on current behavior, I suggest checking if there is one. Can you give an example?

The phrase 'from-image' is same as 'as-intended' and it sounds redundant to support any other option.

If we find that we actually do have to keep current behavior optional I suggest adding 'image-orientation' as a head <META> tag. It will apply to anywhere an image can be displayed on document.
Otherwise adding image-orientation to every possible image-displaying mechanism would be an unnecessary hassle to both spec writing, browser devs and web devs.

Current broken orientation applies to:
html <img>
css background-image property and multilayered images and future properties such as image() and image-set()
svg <image> <feimage> and fill property
canvas drawimage
other places I missed?

This bug (and the unforgettable "actively working on this" response) turns half a decade old tomorrow.

Crazy that Firefox has supported this feature since before Kanye proposed to Kim and Chrome is still stuck in 2012 :(

Please, please prioritize actually shipping this badly needed feature that by all appearances has been ready for over two years.

Here here!

Not going to be fixed. Hack fix

If I were to send a patch to support EXIF orientation would it be accepted?

Right now we're considering doing this in javascript, but that requires loading the image manually, decoding it, etc.etc.etc. and I would like it to work for all websites that I work on in the future too (just how it does in Safari already).

I remember seeing data from this somewhere, but can't find that post now, it was something like 0.0% of images in production are affected by this. I can see the backward compatibility argument, but it seems like the only people relying on this behaviour would be those who have already fixed the problem in javascript (who I'm sure would be glad to get rid of that code), and those who are writing websites about this problem, and everyone else has already fixed the images server-side.

I have to explain to clients why their landscape-oriented iPhone camera images don't look right on their website, and suggest hacks like screenshotting a photo or cropping a portrait mode photo... or switching browsers. Really hoping for a fix, been making that same speech for a few years now, reticent to create my own server-side or client-side fix because every time I come to this bug I see that it's assigned with an owner and ten people on the CC list, so I assume (wrongly) it's due to be fixed.

Still looking for a response to https://crbug.com/chromium/158753#c40

Any update on this ?

[Empty comment from Monorail migration]

[Empty comment from Monorail migration]

#52, re #49, the question you mentioned is directed at all browser vendors, and I don't speak for them, right?  What was needed in the discussion: hard data [1].

None came, so I eventually added some metrics to Chrome to measure hoping to push the discussion along https://www.w3.org/Bugs/Public/show_bug.cgi?id=25508#c27 but in notes from CSSWG last time image-orientation was discussed [2], the feature was marked "at risk" and proposed that an 'autorotate' alternative be added to HTML image instead.  Not much browser interest.

We don't implement "at risk" things because risk, Mozilla has image-orientation with flip & degree options [3] (compat angle, see risk if image-orientation dropped), and I do not think we should provide two ways of doing this EXIF thing.  The rise of mobile phones with cameras means non-1/EXIF is more likely, natural even, some developers do either server- or client-side fixes as workarounds, etc.  There should be a simple way to drive all this towards consensus in browsers, even given little browser interest in this feature, and in the CSS notes referred to [2] I saw a glimmer of hope.

I work in other areas of Chrome, not CSSWG, I provided them with data, but I need a driver.  He walked past me the other day, hadn't seen him in a very long while, so I asked him on your (my dear web developers) behalf: could we get this bus back on the road, bring this issue up again in CSSWG?

We went through the various pros and cons entered into this bug, and elsewhere, and provided a recommendation for CSSWG consideration:

Recommendation:
===============

Cut image-orientation to just "from-image" and "0deg" at this level (CSS3)
  - Note Mozilla supports image-orientation "from-image" + options
  - do the rest (the 'flip' option, etc) if needed at higher level
    (CSS4), but no need for the rest right now at current level.

Change the initial value to be "from-image"
  - all browsers auto-rotate image documents already;
  - Mobile Safari always auto-rotates already;
  - it looks like vast majority of images with non-1 EXIF would be
    *fixed* by auto-rotation, as they're currently just showing badly
    (see the relevant w3c bug).

Provide developers with an opt-out
  - devs can opt-out by setting { image-orientation: 0deg; }

Because we're defaulting to rotation
  - there's no need for an `autorotate` attribute on HTML <img>.

Add informative CSS spec note
  - recommending that browsers use the last EXIF in the file if there
    are multiple EXIF orientations in the file (all browsers and many
    image viewers already do this).

img.naturalWidth/Height reflect the rotated size
  - the CSS "intrinsic width/height" are the same.

Add img.naturalOrientation which reports the img EXIF orientation
  - or reports 1/"top left" if there's no EXIF
  - decide on the best way to report EXIF
   - as integers, or as strings "top-left", "top-right" ...

canvas.drawImage() autorotates the same way as content images do.

Optional: Maybe close w3c bug
  - move it to the appropriate github or CSSWG bug list

===============

Tab (of course) will be taking these ideas back into the working group, and there's process, discussion and things might change, but www-style@ is the place to follow along. ~noel

[1] https://bugs.webkit.org/show_bug.cgi?id=89052#c4 
[2] https://lists.w3.org/Archives/Public/www-style/2017Apr/0018.html
[3] http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation

That sounds amazing, thanks Noel!

Is there an update on this ? It's been open for over a decade now. With all smartphones uploading pictures, this bug is getting annoying.

@58: See https://crbug.com/chromium/158753#c56, Chrome support is waiting on alignment in the spec space so we don't get browsers implementing multiple incompatible things.

HAPPY ANNIVERSARY!

Happy anniversary :)

I'm surprised this still hasn't been implemented.  JPEG exif data is pretty fundamental to the image format.  If you viewing an image that has rotation/flip in its exif data directly in Chrome, the image will automatically rotate/flip.  That means the browser already has the ability to parse the exif data, get the appropriate information, and apply it.  I'd think that adding a rotate="exif" or rotate="auto" to the html element would suffice for most use cases and that would extend into using an image to draw to a canvas.

I've been waiting for this feature for a long time.  I hope it gets implemented soon.

Its almost 2019 now CHROME you are disappointing on this issue employ me I will come a deal with just this issue... How many years this is ridiculous do you think. I dont even think they read this thread anymore.

Been subbed to this for years, no change.  Don't expect there to be one.

On Sat, 17 Nov 2018, 11:50 mail.cyr… via monorail <
monorail+v2.3846587534@chromium.org wrote:

This is really weak. Now over 5 years behind Firefox and no end in sight. Chrome really is becoming the new IE.

I have direct need of this in JS applications I'm working on currently, to be clear.  Had this issue as far back as Google Wave, which is why I floated the silly idea initially.   Patience is a virtue, I'm told ...

#56 > Optional: Maybe close w3c bug
    >  - move it to the appropriate github or CSSWG bug list

https://github.com/whatwg/html/issues/4495

+tabatkins on whether we want to pursue this.

Statistics of uploaded images would be nice, to see how important is the need for this feature.
Last statistic (from 2015 I think) was on displayed images, but it is meaningless because most websites implemented server-side fix for it.
Google Photos might already have this statistics - anyone knows someone from there?

I don't understand backward compatibility here - No one explicitly set an EXIF orientation and relies on it NOT to work.

The idea of "image-orientation" as CSS option is a very bad idea IMHO because it wouldn't include background images, etc.
I believe EXIF support should be implemented silently in the JPEG decoder, so that width/height would be reported correctly in all places without having to do monkey coding. It is part of the JPEG format, not the web.

There is a backwards-compatibility issue, as some of us (well, at least me :-) [1]) go through great lengths with CSS transforms to show images with the correct orientation on the client even though the file is being interpreted without respecting EXIF.  In other words, I rely on the "incorrect" behavior to implement the "correct" one. Of course, it's easy enough to remove this work-around code (and I'd be happy to do so), but it would be difficult if, for example, Chrome correctly interpreted EXIF and other browsers didn't. At least we need a way to detect whether EXIF is being respected when displaying an image.

[1] https://github.com/edemaine/coauthor/blob/99169115fc7ed37cd3d0fc9ec5de4f2d9e7151e1/client/messageImage.coffee

For information, Safari Mobile correctly interprets EXIF orientation and obey it to present images upright, since many years; so that, for instance, in [1], all three images are correctly oriented in that browser, even though Safari Mobile does not support `image-orientation`.

[1]: http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/

[Empty comment from Monorail migration]

If browsers didn't improve because there are already existing hacky work-arounds, we would still be watching videos in Adobe Flash instead of using HTML5.  EXIF based image orientation should be natively supported.  It's in the JPEG spec.

Chrome already reads, interprets, and uses the EXIF image orientation.  You can test this by viewing the image directly.  But when it's displayed on an HTML page, the EXIF data is ignored.

Example:

HTML: https://github.com/recurser/exif-orientation-examples/blob/master/Landscape_2.jpg
Direct URL: https://raw.githubusercontent.com/recurser/exif-orientation-examples/master/Landscape_2.jpg

[Empty comment from Monorail migration]

please support the image-orientation from-image feature.  On websites like this https://www.fabsurplus.com/sdi_catalog/salesItemDetails.do?id=87930  with user generated content images, orientating the pictures correctly would require development work in order to show correctly, while they look correctly already in a browser like Mozilla Firefox that already implements this CSS3 feature that is indeed very handy in a case like this. Thanks!

Please support the image-orientation feature.

The CSSWG has agreed to change the initial value of image-orientation to "from-image" (aka respect the EXIF orientation by default), and I've made the edits to the spec.

Let's see how many years it will take before it's actually fixed.

Now that we have spec clarity, it possibly won't take too long to fix (relatively speaking).

It seems we do already have code for this:

https://cs.chromium.org/chromium/src/third_party/blink/web_tests/images/exif-orientation.html

But the test runner modifies flags for this for some reason (see WebKitShouldRespectImageOrientation).

Does fixing this bug amount to inverting this flag?

https://cs.chromium.org/chromium/src/content/public/common/web_preferences.h?type=cs&sq=package:chromium&g=0&l=166

@chris - As was mentioned previously, viewing a photo directly with exif orientation data will apply the rotation/flipping.  Does that code path use WebKitShouldRespectImageOrientation?

My comments were about how to implement the CSSWG resolution in terms of Chrome C++ code changes. Nothing for you to worry about. :)

https://crbug.com/chromium/158753#c78: yes we have code for this already, and an initial test set images/exif-orientation*

> Does fixing this bug amount to inverting this flag?

Yeap that, plus some more compat tests, and code updates to account for the spec changes https://crbug.com/chromium/158753#c75.

Compat story: Mozilla (see https://crbug.com/chromium/158753#c69), Webkit implementing https://bugs.webkit.org/show_bug.cgi?id=89052 and adding tests [1].

[1] Chrome added the initial implementation to WebKit; it remained with us after the Blink fork.  Hopefully our code has not diverged to far from that initial implementation in WebKit, promoting good and easy compat by simple comparison with the active webkit code implementation bug and code sharing [2].

[2] CamelCase-ing thread on blink-dev, and /me expecting possible changes to CSS C++ code here => schenney@ might want to get a new keyboard with a robust shift-key :) and the same for any folks implementing DOMCore in blink/core, imho.

[Empty comment from Monorail migration]

This is the only browser ignoring alignments.  Look how embarrassing this page is:
https://www.tennis-miami.com/champions

If someone has written a chrome specific function to fix this please email us at Tennis.League.Network@gmail.com

Been watching this for over 4 years now and nothing has changed

This is the only browser ignoring alignments.  Look how embarrassing this page is:
https://www.tennis-miami.com/champions

Chrome, you're suppose to be the class act browser!!!

Has there been an update that I missed?

Work has begun. With luck it might make M-79, if not it will be in M-80.

Tremendous news, thanks for the update.

Yes~!! This will be sooo helpful

great news!
please remember we need JPEG orientation support in background-image, svg, canvas and img, so the correct orientation should be used regardless of any weird css properties.

backward compatibility is obviously irrelevant here because workarounds are impossible to implement. all oriented images are currently just being displayed wrong, always.

When would M-80 be released if it made it into that build?

#92 - https://chromiumdash.appspot.com/schedule

There is some ongoing spec discussion that will need to be resolved, so it's looking more like M-81 at this point.

The basic question is whether this feature should exist at all, instead just always applying the image orientation from the image in all situations where an image is used (including backgrounds, borders, etc). Comments from developers would be appreciated over at https://github.com/w3c/csswg-drafts/issues/4164

[Empty comment from Monorail migration]

Just feel like the need to have chrome developers to look at this page.  In all other browsers these images are aligned with the correct presentation. Only on chrome it looks this poorly:  

https://www.tennislosangeles.com/champions
scroll down.

All these pics are aligned correctly in our repository.

You'll have your wish real soon, and thanks for the test page.

Noting here on the bug report, that the IDL for various image types calls into intrinsic size methods on CSSURLImageValue that do not have access to the image-orientation property, and so must default to respecting the image orientation.

It seems to fix this we might need a spec change, though I'm not sure what at this point. Filed https://bugs.chromium.org/p/chromium/issues/detail?id=1033617

[Empty comment from Monorail migration]

[Empty comment from Monorail migration]

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/0f40bb895ba85e8ba7bbc2d431512d33c7a55020

commit 0f40bb895ba85e8ba7bbc2d431512d33c7a55020
Author: Stephen Chenney <schenney@chromium.org>
Date: Tue Dec 17 03:00:12 2019

Enable the CSS image-orientation always

The spec has been updated to something we can commit to.
Intent to Ship has been approved.

So implement the CSS image-orientation property for all
images (content and style) and change the valid values
to "from-image" or "none". Update tests accordingly.

This does not remove the flag in case we need to turn it
off.

Intent to Ship:
https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/image-orientation%7Csort:date/blink-dev/jPgnRoivOis/X1E6SuOoAwAJ

Bug: 158753
Change-Id: Ib50d263b01f7cf6b2d17174138fd223a8105da8e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1846319
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#725393}

[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/css/css_properties.json5
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/css/cssom/css_url_image_value.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/css/cssom/paint_worklet_deferred_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/css/cssom/paint_worklet_deferred_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/css/properties/longhands/longhands_custom.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/css/resolver/style_builder_converter.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/layout/layout_image_resource_style_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/layout/layout_list_marker.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/layout/layout_object.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/layout/shapes/shape.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/layout/shapes/shape.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/layout/shapes/shape_outside_info.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/loader/resource/image_resource_content.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/page/drag_controller.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/page/drag_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/page/drag_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/page/drag_image_test.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/paint/background_image_geometry.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/paint/box_model_object_painter.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/paint/box_painter_base.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/paint/box_painter_base.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/paint/image_element_timing.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/paint/ng/ng_box_fragment_painter.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/paint/nine_piece_image_painter.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/fill_layer.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/style_fetched_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/style_fetched_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/style_fetched_image_set.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/style_fetched_image_set.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/style_generated_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/style_generated_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/style_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/style/style_pending_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/svg/graphics/svg_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/svg/graphics/svg_image_for_container.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/svg/graphics/svg_image_for_container.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/core/svg/graphics/svg_image_test.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/modules/webgl/webgl_rendering_context_base.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/exported/web_cursor_info.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/crossfade_generated_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/crossfade_generated_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/generated_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/generated_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/gradient_generated_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/gradient_generated_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/graphics_context.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/graphics_context.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/graphics_layer.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/paint_generated_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/paint_generated_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/placeholder_image.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/placeholder_image.h
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/graphics/placeholder_image_test.cc
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/renderer/platform/runtime_enabled_features.json5
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/css-parser/image-orientation.html
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/css-parser/unitless-zero-angle.html
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/external/wpt/css/css-images/inheritance.html
[delete] https://crrev.com/bedd1bd8b8257c363712af3ea7648fc8db408137/third_party/blink/web_tests/external/wpt/css/css-images/parsing/image-orientation-computed-expected.txt
[delete] https://crrev.com/bedd1bd8b8257c363712af3ea7648fc8db408137/third_party/blink/web_tests/external/wpt/css/css-images/parsing/image-orientation-valid-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/external/wpt/web-animations/animation-model/animation-types/accumulation-per-property-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/external/wpt/web-animations/animation-model/animation-types/addition-per-property-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/external/wpt/web-animations/animation-model/animation-types/interpolation-per-property-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/getComputedStyle/computed-style-listing-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/getComputedStyle/computed-style-without-renderer-listing-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-default-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-default.html
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-expected.txt
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-none-expected.txt
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-none.html
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-none.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/fast/css/image-orientation/image-orientation.html
[rename] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/flag-specific/disable-layout-ng/fast/css/image-orientation/image-orientation-none-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/images/exif-orientation-css-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/images/exif-orientation-css.html
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/images/exif-orientation-none-css-expected.txt
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/images/exif-orientation-none-css.html
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/fast/backgrounds/background-svg-scaling-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/fast/css/image-orientation/image-orientation-default-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/fast/css/image-orientation/image-orientation-none-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/images/exif-orientation-none-css-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/virtual/exotic-color-space/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/virtual/exotic-color-space/images/exif-orientation-none-css-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/virtual/gpu-rasterization/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/linux/virtual/gpu-rasterization/images/exif-orientation-none-css-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/fast/backgrounds/background-svg-scaling-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/fast/css/image-orientation/image-orientation-default-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/fast/css/image-orientation/image-orientation-none-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/images/exif-orientation-none-css-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/svg/as-image/image-respects-deviceScaleFactor-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/virtual/exotic-color-space/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/virtual/exotic-color-space/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/bedd1bd8b8257c363712af3ea7648fc8db408137/third_party/blink/web_tests/platform/mac/virtual/gpu-rasterization/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/mac/virtual/gpu-rasterization/images/exif-orientation-none-css-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/fast/backgrounds/background-svg-scaling-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/fast/css/image-orientation/image-orientation-default-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/fast/css/image-orientation/image-orientation-none-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/images/exif-orientation-none-css-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/svg/as-image/image-respects-deviceScaleFactor-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/virtual/exotic-color-space/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/virtual/exotic-color-space/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/bedd1bd8b8257c363712af3ea7648fc8db408137/third_party/blink/web_tests/platform/win/virtual/gpu-rasterization/images/exif-orientation-css-expected.png
[add] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/platform/win/virtual/gpu-rasterization/images/exif-orientation-none-css-expected.png
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/svg/css/getComputedStyle-listing-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/0f40bb895ba85e8ba7bbc2d431512d33c7a55020/third_party/blink/web_tests/virtual/stable/webexposed/css-property-listing-expected.txt

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/1906aa6e35a7aa8921bfe6e70377697078424079

commit 1906aa6e35a7aa8921bfe6e70377697078424079
Author: Stephen Chenney <schenney@chromium.org>
Date: Sat Jan 04 02:02:38 2020

[image-orientation] Move tests to WPT and add additional tests

Move all the web_tests for image-orientation to external/wpt.

Update the testing methods to wpt standards.

Adjust the test images to be ammenable to ref tests, though fuzzy matching
is still required.

Round out the test suite for <img> tags, content images and image documents.

Bug: 158753
Change-Id: Iff393f350cbecfc66a91811c72b0ee6274289e5c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1980505
Auto-Submit: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#728358}

[modify] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/SmokeTests
[modify] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/TestExpectations
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-default.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-composited.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-computed-style.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-content-images.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image-image-document.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-from-image.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-none-computed-style.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-none-content-images.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-none-image-document.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/image-orientation-none.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-default-ref.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-from-image-image-document-ref.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/reference/image-orientation-none-ref.html
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg
[add] https://crrev.com/1906aa6e35a7aa8921bfe6e70377697078424079/third_party/blink/web_tests/external/wpt/css/css-images/image-orientation/support/exif-orientation-9-u.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-default-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-default.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-dynamic-expected.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-dynamic.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-from-image-composited-dynamic-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-from-image-composited-dynamic.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-from-image-composited-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-from-image-composited.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-from-image-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-from-image.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-none-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-none.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation-none.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/fast/css/image-orientation/image-orientation.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation-css-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation-css.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation-height-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation-height-image-document.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation-image-document.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation-none-css-expected.txt
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation-none-css.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/exif-orientation.html
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-1-ul.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-2-ur.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-3-lr.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-4-lol.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-5-lu.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-6-ru.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-7-rl.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-8-llo.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/images/resources/exif-orientation-9-u.jpg
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/fast/css/image-orientation/image-orientation-default-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/fast/css/image-orientation/image-orientation-from-image-composited-dynamic-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/fast/css/image-orientation/image-orientation-from-image-composited-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/fast/css/image-orientation/image-orientation-from-image-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/fast/css/image-orientation/image-orientation-none-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/images/exif-orientation-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/virtual/exotic-color-space/images/exif-orientation-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/virtual/exotic-color-space/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/virtual/exotic-color-space/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/virtual/exotic-color-space/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/virtual/gpu-rasterization/images/exif-orientation-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/virtual/gpu-rasterization/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/virtual/gpu-rasterization/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/linux/virtual/gpu-rasterization/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac-mac10.10/virtual/exotic-color-space/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac-mac10.11/virtual/exotic-color-space/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac-mac10.12/virtual/exotic-color-space/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac-retina/virtual/exotic-color-space/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/fast/css/image-orientation/image-orientation-default-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/fast/css/image-orientation/image-orientation-from-image-composited-dynamic-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/fast/css/image-orientation/image-orientation-from-image-composited-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/fast/css/image-orientation/image-orientation-from-image-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/fast/css/image-orientation/image-orientation-none-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/images/exif-orientation-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/virtual/exotic-color-space/images/exif-orientation-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/virtual/exotic-color-space/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/virtual/exotic-color-space/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/virtual/exotic-color-space/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/virtual/gpu-rasterization/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/virtual/gpu-rasterization/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/mac/virtual/gpu-rasterization/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/fast/css/image-orientation/image-orientation-default-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/fast/css/image-orientation/image-orientation-from-image-composited-dynamic-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/fast/css/image-orientation/image-orientation-from-image-composited-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/fast/css/image-orientation/image-orientation-from-image-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/fast/css/image-orientation/image-orientation-none-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/images/exif-orientation-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/virtual/exotic-color-space/images/exif-orientation-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/virtual/exotic-color-space/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/virtual/exotic-color-space/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/virtual/exotic-color-space/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/virtual/gpu-rasterization/images/exif-orientation-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/virtual/gpu-rasterization/images/exif-orientation-image-document-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win/virtual/gpu-rasterization/images/exif-orientation-none-css-expected.png
[delete] https://crrev.com/fd26f60054bcce316d75904939f33e1be682f34b/third_party/blink/web_tests/platform/win7/virtual/exotic-color-space/images/exif-orientation-expected.png

Wondering if there's a time table for this fix?

The change is in Chrome 81. That will roll out to the public as the Stable version in 8-10 week's time, but meanwhile you can try it out in Chrome Canary or Dev.

Wow, the pics are aligned correctly in chrome canary.    Can't wait to see this fix progress to the main browser.  Thanks developers!!!

Other bugs track additional testing and perf issue.

Are we close to having an exact date for delivery of this fix?

No exact date. The change is in Chrome 81, so as that rolls to Beta and then to Stable everyone will pick up the changes. Maybe 8 weeks or so to Stable.

[Comment Deleted]

When I use `URL.createObjectURL` to load an image file with exif orientation 6 and set it in `img` element `img.src` on chrome 81, the orientation is displayed correctly. However when I try to display it on the canvas `ctx.drawImage(img, 0, 0);`, the bottom part of image got cut off and image is sketched vertically.

```
        const img = document.createElement("img");
        img.src = window.URL.createObjectURL(fileInput.files[0]);
        img.onload = function() {
              function getBase64Image(img) {
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
                var dataURL = canvas.toDataURL("image/png");
                return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
              }

            var base64 = getBase64Image(img);
            console.log(base64)
        };
```
Might need some help over here.

There's a bug existing for that and the fix is in review right now. We'll try merge it back to M-81 once it lands and gets some Canary testing.

[Empty comment from Monorail migration]

Hello,

Does anyone know if you can DISABLE auto-rotate on "canvas.drawImage()"?

I'm having a problem, because in the past I used to adjust the BACKEND, and now the image is already rotated when it arrives at the backend, but the orientation header also.

Please help!

If you have image-orientation: none on the style of the canvas element we will not rotate to respect EXIF if the canvas is in the DOM. For elements not attached you will need to attach them (with visibility: none) to compute the style and have it apply.

There is a bug that image-orientation is not applied on iOS Chrome 81 Stable.

Tested with image with orientation 6 exif property. It should be rotate 90 degree clockwise and it does on desktop and android Chrome 81, but it is not rotate correctly on iOS Chrome 81. Tested on both iOS 13.3 and iOS 12.1.

@Stephen (https://crbug.com/chromium/158753#c114) I just discovered Chrome 81 enabled this behaviour and this is breaking some apps that rely on the previous behaviour.
Also it has a performance impact for some apps to need to attach the element before drawing it.

This appears in latest Safari as well, I reported it as a bug with a code repro and it has been fixed in the latest Safari Tech Preview: https://bugs.webkit.org/show_bug.cgi?id=209849

Should I open a new bug in Chromium for this?

@schenny Regarding https://crbug.com/chromium/158753#c114 above - should the `visibility` be 'hidden' and / or the `display` be `none`?  The visibility CSS property doesn't have a value of 'none'.

What if you have "image-orientation:none" on the image you are using to draw to the canvas?  Why is the image orientation a canvas property at all?

Why was it coded so it has to be attached to the DOM?  Is that a hack while you work out the details or is that a permanent decision?  (I seriously hope it's not permanent)

Finding that restriction now is incredibly frustrating and would explain why I've been having so many problems.  This behavior is incredibly unintuitive.

Regarding comments 114 and 117, I should have said "display: none".

Regarding 118, we decided the property on the canvas element should always apply because many images drawn to canvas do not come from <img> elements and any algorithm that choses one value sometimes and another at other times is more confusing than a single reference point.

You need to attach to the DOM to get computed style to see the property. Objects not in the DOM do not have computed style because the rules for style resolution do not make sense in that situation.

It's not clear to me what WebKit are doing. I interpret it to mean they are respecting image-orientation: none when previously they always applied orientation, and before that never applied orientation.

Basically, browsers are converging to aways applying orientation because that is what developers have seemed to want for a long time and the spec has been changed to reflect that. The spec issue accepted feedback and it was acted on, with chromium deciding to give the "image-orientation: none" option as a workaround until all workflows for all developers have had a chance to adapt.

Gaps in support for "image-orientation: none" are bugs and will get fixed. The "must be in the DOM" issue is not isolated to this property, and I'll look at some workaround (e.g. using the element's style directly and not computed style). There;'s a bug for it: https://bugs.chromium.org/p/chromium/issues/detail?id=1054878

Please file other bugs as necessary.

If styles are ignored for non-DOM objects, should there be a non-css property (an attribute) to also specify the image orientation?  Like width and height.

Yes, an attribute would work, or a parameter to the canvas drawing methods. This is a spec issue, see https://github.com/whatwg/html/issues/4495 which is sort of what you're asking for.

I have proposed a new "orientation" attribute for img elements [1] to solve the issue with auto-rotation if image/canvas elements are not in the DOM. Anyone interested in this is welcome to participate in the discussion at GitHub.

[1] https://github.com/whatwg/html/issues/4495#issuecomment-626488831

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b1a9263176865b979cac774238d7b68ade2cd112

commit b1a9263176865b979cac774238d7b68ade2cd112
Author: Fredrik Söderqvist <fs@opera.com>
Date: Thu Jun 25 17:55:27 2020

Remove the shouldRespectImageOrientation Blink setting

This setting has not been doing anything since
0f40bb895ba85e8ba7bbc2d431512d33c7a55020. Before that it would force
image orientation to be applied on <img> elements.

Bug: 158753
Change-Id: Ic8e77f728bbb478c83469399b01abbd1e83cf02c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2264332
Reviewed-by: Daniel Cheng <dcheng@chromium.org>
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Reviewed-by: Jochen Eisinger <jochen@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#782533}

[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/content/public/common/common_param_traits_macros.h
[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/content/public/common/web_preferences.cc
[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/content/public/common/web_preferences.h
[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/content/renderer/render_view_impl.cc
[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/content/shell/renderer/web_test/blink_test_helpers.cc
[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/third_party/blink/public/web/web_settings.h
[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/third_party/blink/renderer/core/exported/web_settings_impl.cc
[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/third_party/blink/renderer/core/exported/web_settings_impl.h
[modify] https://crrev.com/b1a9263176865b979cac774238d7b68ade2cd112/third_party/blink/renderer/core/frame/settings.json5

I believe there is still an issue with feature when using oriented images in WebGL. I have created a Fiddle to demonstrate the issue here:

https://jsfiddle.net/ghxr4Lso/

Basically, when loading an rotated image (Exif orientation 6) into the GPU with `texImage2D()` the resulting texture seems to be based on the original (unrotated) image data. It's still possible to draw this data correctly, in theory, if you already know the original dimensions, but working just with the dimensions reported by the Image object that's not possible.

You can also test `ImageBitmap` in the fiddle by un-commenting line 164. In Chromium 83 using an `ImageBitmap` works because the reported dimensions are actually the original dimensions (and the uploaded image data too). In Chromium 85 it does not work anymore (but the drawn texture is cropped and repeated instead scaled).

Testing the Fiddle in Firefox using both `Image` and `ImageBitmap` works (reported dimensions and image data are in-sync, using the oriented values).

Note that setting `image-orientation:  none` on the Canvas has no effect (I don't know if it should?), In general, I think a developer could work around this if there was a way to tell whether or not a given `Image` instance has been automatically oriented or not (i.e., whether the reported dimensions are the same as the bitmap data that's loaded into the GPU), but it would be desirable for the data loaded via WebGL methods to be orientated as indicated by the source object (i.e., either fully oriented like Firefox or not oriented as in previous Chromium versions).

I'm happy to report this as a new bug, but thought I'd post here first in case this is already a known issue.

Thank you!

I'll start a new bug with your comment. Thanks for reporting.

[Empty comment from Monorail migration]

[Empty comment from Monorail migration]

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src/+/e598129ad77c09283f4e76dd6972f3edbab13a92

commit e598129ad77c09283f4e76dd6972f3edbab13a92
Author: Stephen Chenney <schenney@chromium.org>
Date: Wed Jan 27 01:22:14 2021

[Image-Orientation] Remove the runtime and test flags

The feature has been in place for several chrome releases.
So remove the runtime flag. As far as I can tell it is not
used anywhere in the code.

Bug: 158753
Change-Id: Ia57d7814eed13efedcb16885a4ed9e57c3659d46
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2644568
Reviewed-by: danakj <danakj@chromium.org>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#847426}

[modify] https://crrev.com/e598129ad77c09283f4e76dd6972f3edbab13a92/content/web_test/renderer/test_preferences.cc
[modify] https://crrev.com/e598129ad77c09283f4e76dd6972f3edbab13a92/third_party/blink/renderer/core/css/properties/longhands/longhands_custom.cc
[modify] https://crrev.com/e598129ad77c09283f4e76dd6972f3edbab13a92/content/web_test/renderer/test_runner.cc
[modify] https://crrev.com/e598129ad77c09283f4e76dd6972f3edbab13a92/third_party/blink/renderer/core/css/css_properties.json5
[modify] https://crrev.com/e598129ad77c09283f4e76dd6972f3edbab13a92/content/web_test/renderer/test_preferences.h
[modify] https://crrev.com/e598129ad77c09283f4e76dd6972f3edbab13a92/third_party/blink/renderer/platform/runtime_enabled_features.json5

[Empty comment from Monorail migration]

This issue was migrated from crbug.com/chromium/158753?no_tracker_redirect=1

[Monorail blocked-on: crbug.com/chromium/502267]
[Monorail blocking: crbug.com/chromium/1033629, crbug.com/chromium/1034283, crbug.com/chromium/1100470, crbug.com/chromium/1125337, crbug.com/chromium/498233, crbug.com/chromium/682593, crbug.com/chromium/797280]
[Monorail mergedwith: crbug.com/chromium/1002067, crbug.com/chromium/229572, crbug.com/chromium/413272, crbug.com/chromium/532961, crbug.com/chromium/892267]
[Monorail components added to Component Tags custom field.]