From c7b8a0ec839d04ac0b05f04d12e4fe111389e84d Mon Sep 17 00:00:00 2001
From: Cameron McCormack <cam@mcc.id.au>
Date: Wed, 8 Jul 2020 23:51:15 +0000
Subject: [PATCH] Bug 1650715 - Make image-orientation apply to all CSS images
 associated with an element. r=dholbert

Differential Revision: https://phabricator.services.mozilla.com/D82471
---
 dom/events/EventStateManager.cpp              |   2 ++
 layout/generic/nsBulletFrame.cpp              |   2 ++
 layout/painting/nsImageRenderer.cpp           |   5 +++++
 ...mage-orientation-background-image.html.ini |   2 +-
 .../image-orientation-mask-image.html.ini     |   2 +-
 .../image-orientation-background-image.html   |   2 +-
 .../image-orientation-border-image.html       |   2 +-
 .../image-orientation-cursor.html             |  21 ++++++++++++++++++
 .../image-orientation-iframe.html             |  11 +++++++++
 .../image-orientation-list-style-image.html   |   2 +-
 ...mage-orientation-background-image-ref.html |   9 ++++----
 .../image-orientation-border-image-ref.html   |   7 +++---
 .../image-orientation-iframe-ref.html         |   5 +++++
 ...mage-orientation-list-style-image-ref.html |   8 ++++---
 .../image-orientation-mask-image-ref.html     |   7 +++---
 .../support/cursor-8-llo.jpg                  | Bin 0 -> 1270 bytes
 16 files changed, 69 insertions(+), 18 deletions(-)
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg

diff --git a/dom/events/EventStateManager.cpp b/dom/events/EventStateManager.cpp
index b05ca2d560e2..ee125437513c 100644
--- a/dom/events/EventStateManager.cpp
+++ b/dom/events/EventStateManager.cpp
@@ -3873,6 +3873,8 @@ static CursorImage ComputeCustomCursor(nsPresContext* aPresContext,
     if (!container) {
       continue;
     }
+    container = nsLayoutUtils::OrientImage(
+        container, aFrame.StyleVisibility()->mImageOrientation);
     Maybe<gfx::Point> specifiedHotspot =
         image.has_hotspot ? Some(gfx::Point{image.hotspot_x, image.hotspot_y})
                           : Nothing();
diff --git a/layout/generic/nsBulletFrame.cpp b/layout/generic/nsBulletFrame.cpp
index 75aa277411ba..b1f4cd56b71e 100644
--- a/layout/generic/nsBulletFrame.cpp
+++ b/layout/generic/nsBulletFrame.cpp
@@ -667,6 +667,8 @@ Maybe<BulletRenderer> nsBulletFrame::CreateBulletRenderer(
         nsCOMPtr<imgIContainer> imageCon;
         mImageRequest->GetImage(getter_AddRefs(imageCon));
         if (imageCon) {
+          imageCon = nsLayoutUtils::OrientImage(
+              imageCon, StyleVisibility()->mImageOrientation);
           nsRect dest(padding.left, padding.top,
                       mRect.width - (padding.left + padding.right),
                       mRect.height - (padding.top + padding.bottom));
diff --git a/layout/painting/nsImageRenderer.cpp b/layout/painting/nsImageRenderer.cpp
index 19b3781f6e10..45900f6ddf5a 100644
--- a/layout/painting/nsImageRenderer.cpp
+++ b/layout/painting/nsImageRenderer.cpp
@@ -134,6 +134,11 @@ bool nsImageRenderer::PrepareImage() {
                "If GetImage() is failing, mImage->IsComplete() "
                "should have returned false");
 
+    if (srcImage) {
+      srcImage = nsLayoutUtils::OrientImage(
+          srcImage, mForFrame->StyleVisibility()->mImageOrientation);
+    }
+
     if (!mImage->IsRect()) {
       mImageContainer.swap(srcImage);
     } else {
diff --git a/testing/web-platform/meta/css/css-images/image-orientation/image-orientation-background-image.html.ini b/testing/web-platform/meta/css/css-images/image-orientation/image-orientation-background-image.html.ini
index 897f3912bdda..477da859fbec 100644
--- a/testing/web-platform/meta/css/css-images/image-orientation/image-orientation-background-image.html.ini
+++ b/testing/web-platform/meta/css/css-images/image-orientation/image-orientation-background-image.html.ini
@@ -1,2 +1,2 @@
 [image-orientation-background-image.html]
-  fuzzy: 2;40
+  fuzzy: 3;49
diff --git a/testing/web-platform/meta/css/css-images/image-orientation/image-orientation-mask-image.html.ini b/testing/web-platform/meta/css/css-images/image-orientation/image-orientation-mask-image.html.ini
index 20246281a511..d1364b6ffd2e 100644
--- a/testing/web-platform/meta/css/css-images/image-orientation/image-orientation-mask-image.html.ini
+++ b/testing/web-platform/meta/css/css-images/image-orientation/image-orientation-mask-image.html.ini
@@ -1,2 +1,2 @@
 [image-orientation-mask-image.html]
-  fuzzy: 1;22
+  fuzzy: 2;26
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html
index 2687a5c64b51..d294b669e35d 100644
--- a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Images Module Level 3: image-orientation does not apply to background-image</title>
+<title>CSS Images Module Level 3: image-orientation does apply to background-image</title>
 <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
 <link rel="match" href="reference/image-orientation-background-image-ref.html">
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html
index 85b363ecc2fd..312c6736fb52 100644
--- a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Images Module Level 3: image-orientation does not apply to border images</title>
+<title>CSS Images Module Level 3: image-orientation does apply to border images</title>
 <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
 <link rel="match" href="reference/image-orientation-border-image-ref.html">
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html
new file mode 100644
index 000000000000..00a80d46ba9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to cursor</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="flags" content="interact">
+<style>
+div { width: 100px; height: 100px; border: solid blue; margin-left: 64px; }
+.orient { cursor: url(support/cursor-8-llo.jpg) 33 0, default; }
+.no-orient { cursor: url(support/cursor-8-llo.jpg) 64 33, default; image-orientation: none; }
+</style>
+<p>The test passes if</p>
+<ul>
+  <li>when moved inside either of the blue boxes, the cursor is shown as a
+  black arrow on a white background, with the point of the arrow at the current
+  cursor location</li>
+  <li>in the first box, the cursor points up and to the right</li>
+  <li>in the second box, the cursor points down and to the right</li>
+</ul>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html
new file mode 100644
index 000000000000..69cfb5ceae4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does not apply to iframe contents</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-iframe-ref.html">
+<style>
+.no-orient { image-orientation: none; }
+</style>
+<iframe src="support/exif-orientation-2-ur.jpg"></iframe>
+<iframe src="support/exif-orientation-2-ur.jpg" class="no-orient"></iframe>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html
index 33730a323ada..926b3ab9ff02 100644
--- a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Images Module Level 3: image-orientation does not apply to list-style-image</title>
+<title>CSS Images Module Level 3: image-orientation does apply to list-style-image</title>
 <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
 <link rel="match" href="reference/image-orientation-list-style-image-ref.html">
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html
index e57090647984..a3e2ece6e7c2 100644
--- a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html
@@ -2,8 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Reference</title>
 <style>
-div { width: 100px; height: 50px; background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+div { width: 100px; height: 50px; }
+.orient { background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { background-image: url(../support/exif-orientation-9-u.jpg); }
 </style>
-<div></div>
-<div></div>
-
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html
index 3f9b68832b12..51aa8d0e4672 100644
--- a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html
@@ -6,8 +6,9 @@ div {
   width: 100px;
   height: 50px;
   border: 10px solid black;
-  border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10;
 }
+.orient { border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10; }
+.no-orient { border-image: url(../support/exif-orientation-9-u.jpg) 10; }
 </style>
-<div></div>
-<div></div>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html
new file mode 100644
index 000000000000..a9e9b3fbe308
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
+<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html
index 433cf98e636b..8dcef6a24392 100644
--- a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html
@@ -2,7 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Reference</title>
 <style>
-ul { margin-left: 100px; list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+ul { margin-left: 100px; }
+.orient { list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { list-style-image: url(../support/exif-orientation-9-u.jpg); }
 </style>
-<ul><li>&nbsp;</li></ul>
-<ul><li>&nbsp;</li></ul>
+<ul class="orient"><li>&nbsp;</li></ul>
+<ul class="no-orient"><li>&nbsp;</li></ul>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html
index ff0782441512..ba593032456f 100644
--- a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html
@@ -6,9 +6,10 @@ div {
   width: 100px;
   height: 50px;
   background: blue;
-  mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg);
   mask-mode: luminance;
 }
+.orient { mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { mask-image: url(../support/exif-orientation-9-u.jpg); }
 </style>
-<div></div>
-<div></div>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ef26ad4aaaee12269323379e36c5274aad44d00b
GIT binary patch
literal 1270
zcmex=<NpH&0WUXCHwH!^&|%bJVEF%#A<4BOGmU}4*Ox(yfq{X8ft68+ff>kR1hN?z
zr5ISjYz77|Mrk-Zh*1NohKYfJNf^pz1gZoBkjX&(3=sPNKL%mvqSVBa)D(sC%#sWR
zcTeAd|F;>O!Oj3Vg<JqKgj~IFeg6+J2y!qeGB_|Z3NkPWGBOJ?{y)MX0dXAELtu)F
zos$D7Bf<#xCrtMLEe0NDMg}GUW&xn5-#=iOF4W!Iz`)o)*(vDb1_lPhPZ_=qOCK<>
zT$q!n|AB$uej*z`&?FfF1}0_(phh@gV`t@15D-&02b#zMw1<(E>ByhoO}i`@{n{lK
z&$42bN$RVz^-6A<%V+3rQo?0%ROU<7l;gFx_+E>zcKF?GdOP{)oO+NW1(8ez8y^5R
zl9`dwo>3W(0w$OOO`zkL7@3)w*g%N^1ejTvSlJkbMFfQu*hN)cLsN=d1j@ESUCL(9
z^kKsZBW^aM38^|+r_UR&xxVcD%IR|wIgSZ*y1Ey-DfO0$#1vl_y_Ognu(x}UVvPEf
zq<2NDZ@n^RndOonW@B;4=jtt8$;sUb>z<gi-*cFu!n{&;)wd}*|NN4EI@PTDwo5=w
zZlm<oem>)_Yg2Phu{^q=z0-D6nSdH6-{b{ZdzW3YziRl~|I}WwLYJNO$+tdn?Q_3l
z>GW9M<oH`Vvw4BtJ5R08UU5b!Q*dv@hsT`8;Tc=f{B)akPq-sr$&@gGZ%NteTY;N@
zT6RC>{IvSk3x^q1M?kJRryUi#Swk4)s&6N609|F}*SPB2?129aA;;g^Yki44D)jVk
zfA$HjpYjDyxqE6Z%WwH{$57rsH8HyXX83xWX%`oMc&lUCeW3kVi-o|PsITRwL0=y0
z{C(OX$?C0Br)uZ;RNuc)BK&6Z*KN#MmsMxI-uX_f^PNM|u|5ys?znXi-KwveHjCRn
z4P|zhpLlvgW!3b*%trqitdsxzX8^{dga9xBp~N+#f}?-~EdAIk##ZfTXzgV;7x^5t
zyK03T!y>t?@cd9U2NAB@g{vx8#_kQ_X9(ms)!x2pav#Hju-m=1nn(6(SMSaZDVaX?
z-rFLeEzr~r&gB9OoD2+{3Ji=Y3=BXL<OF<aO@L5ZgD4O{@c}TcK~gI)1K0~Fyjh^v
zW7c2Sx1{bSmu8sbmHyj`u39J5R^59aWS`S2vRdJl``ZbNrltso=9jHu`_Hgl<~{Q=
Ow)?mHs*+axzX<@+0Af)9

literal 0
HcmV?d00001