Bug 1473450 - Remove angle values from image-orientation. r?emilio draft
authorCameron McCormack <cam@mcc.id.au>
Thu, 05 Jul 2018 12:04:58 +1000
changeset 814383 8b5e9c1940ac30442faed71666d657e8b5d64ae3
parent 813360 7d20e7fae1039720f92db1a3a72bc2c7424b5f98
push id115177
push userbmo:cam@mcc.id.au
push dateThu, 05 Jul 2018 06:06:51 +0000
reviewersemilio
bugs1473450
milestone63.0a1
Bug 1473450 - Remove angle values from image-orientation. r?emilio MozReview-Commit-ID: FB74ILJM6Fm
js/src/devtools/rootAnalysis/analyzeHeapWrites.js
layout/base/nsLayoutUtils.cpp
layout/base/nsLayoutUtils.h
layout/generic/nsImageFrame.cpp
layout/reftests/image/image-orientation-background.html
layout/reftests/image/image-orientation-border-image.html
layout/reftests/image/image-orientation-dynamic-ref.html
layout/reftests/image/image-orientation-dynamic.html
layout/reftests/image/image-orientation-explicit-none.html
layout/reftests/image/image-orientation-explicit.html
layout/reftests/image/image-orientation-generated-content-ref.html
layout/reftests/image/image-orientation-generated-content.html
layout/reftests/image/image-orientation-none.html
layout/reftests/image/reftest.list
layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html
layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg
layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html
layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg
layout/reftests/svg/as-image/image-orientation-ref.html
layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html
layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html
layout/reftests/svg/as-image/reftest.list
layout/style/ServoBindings.cpp
layout/style/ServoBindings.toml
layout/style/nsComputedDOMStyle.cpp
layout/style/nsStyleConsts.h
layout/style/nsStyleStruct.h
modules/libpref/init/all.js
servo/components/style/properties/data.py
servo/components/style/properties/gecko.mako.rs
servo/components/style/properties/longhands/inherited_box.mako.rs
servo/components/style/values/computed/inherited_box.rs
servo/components/style/values/computed/mod.rs
servo/components/style/values/specified/inherited_box.rs
servo/components/style/values/specified/mod.rs
testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
--- a/js/src/devtools/rootAnalysis/analyzeHeapWrites.js
+++ b/js/src/devtools/rootAnalysis/analyzeHeapWrites.js
@@ -158,19 +158,16 @@ function treatAsSafeArgument(entry, varN
         ["Gecko_SetCounterStyleToString", "aPtr", null],
         ["Gecko_CopyCounterStyle", "aDst", null],
         ["Gecko_SetMozBinding", "aDisplay", null],
         [/ClassOrClassList/, /aClass/, null],
         ["Gecko_GetAtomAsUTF16", "aLength", null],
         ["Gecko_CopyMozBindingFrom", "aDest", null],
         ["Gecko_SetNullImageValue", "aImage", null],
         ["Gecko_SetGradientImageValue", "aImage", null],
-        ["Gecko_SetImageOrientation", "aVisibility", null],
-        ["Gecko_SetImageOrientationAsFromImage", "aVisibility", null],
-        ["Gecko_CopyImageOrientationFrom", "aDst", null],
         ["Gecko_SetImageElement", "aImage", null],
         ["Gecko_SetLayerImageImageValue", "aImage", null],
         ["Gecko_CopyImageValueFrom", "aImage", null],
         ["Gecko_SetCursorArrayLength", "aStyleUI", null],
         ["Gecko_CopyCursorArrayFrom", "aDest", null],
         ["Gecko_SetCursorImageValue", "aCursor", null],
         ["Gecko_SetListStyleImageImageValue", "aList", null],
         ["Gecko_SetListStyleImageNone", "aList", null],
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -7174,28 +7174,23 @@ nsLayoutUtils::GetWholeImageDestination(
   nscoord wholeSizeX = NSToCoordRound(aWholeImageSize.width*scaleX);
   nscoord wholeSizeY = NSToCoordRound(aWholeImageSize.height*scaleY);
   return nsRect(aDestArea.TopLeft() - nsPoint(destOffsetX, destOffsetY),
                 nsSize(wholeSizeX, wholeSizeY));
 }
 
 /* static */ already_AddRefed<imgIContainer>
 nsLayoutUtils::OrientImage(imgIContainer* aContainer,
-                           const nsStyleImageOrientation& aOrientation)
+                           const StyleImageOrientation& aOrientation)
 {
   MOZ_ASSERT(aContainer, "Should have an image container");
   nsCOMPtr<imgIContainer> img(aContainer);
 
-  if (aOrientation.IsFromImage()) {
+  if (aOrientation == StyleImageOrientation::FromImage) {
     img = ImageOps::Orient(img, img->GetOrientation());
-  } else if (!aOrientation.IsDefault()) {
-    Angle angle = aOrientation.Angle();
-    Flip flip  = aOrientation.IsFlipped() ? Flip::Horizontal
-                                          : Flip::Unflipped;
-    img = ImageOps::Orient(img, Orientation(angle, flip));
   }
 
   return img.forget();
 }
 
 static bool NonZeroStyleCoord(const nsStyleCoord& aCoord)
 {
   if (aCoord.IsCoordPercentCalcUnit()) {
--- a/layout/base/nsLayoutUtils.h
+++ b/layout/base/nsLayoutUtils.h
@@ -56,30 +56,30 @@ class nsContainerFrame;
 class nsView;
 class nsIFrame;
 class nsStyleCoord;
 class nsStyleCorners;
 class nsPIDOMWindowOuter;
 class imgIRequest;
 class nsIDocument;
 struct nsStyleFont;
-struct nsStyleImageOrientation;
 struct nsOverflowAreas;
 
 namespace mozilla {
 class ComputedStyle;
 enum class CSSPseudoElementType : uint8_t;
 class EventListenerManager;
 enum class LayoutFrameType : uint8_t;
 struct IntrinsicSize;
 struct ContainerLayerParameters;
 class WritingMode;
 class DisplayItemClip;
 class EffectSet;
 struct ActiveScrolledRoot;
+enum class StyleImageOrientation : uint8_t;
 namespace dom {
 class CanvasRenderingContext2D;
 class DOMRectList;
 class Element;
 class Event;
 class HTMLImageElement;
 class HTMLCanvasElement;
 class HTMLVideoElement;
@@ -1985,17 +1985,17 @@ public:
    * that contains the same image, reoriented appropriately. May return the
    * original image container if no changes are needed.
    *
    * @param aContainer   The image container to apply the orientation to.
    * @param aOrientation The desired orientation.
    */
   static already_AddRefed<imgIContainer>
   OrientImage(imgIContainer* aContainer,
-              const nsStyleImageOrientation& aOrientation);
+              const mozilla::StyleImageOrientation& aOrientation);
 
   /**
    * Determine if any corner radius is of nonzero size
    *   @param aCorners the |nsStyleCorners| object to check
    *   @return true unless all the coordinates are 0%, 0 or null.
    *
    * A corner radius with one dimension zero and one nonzero is
    * treated as a nonzero-radius corner, even though it will end up
--- a/layout/generic/nsImageFrame.cpp
+++ b/layout/generic/nsImageFrame.cpp
@@ -252,17 +252,17 @@ nsImageFrame::DidSetComputedStyle(Comput
 {
   nsAtomicContainerFrame::DidSetComputedStyle(aOldComputedStyle);
 
   if (!mImage) {
     // We'll pick this change up whenever we do get an image.
     return;
   }
 
-  nsStyleImageOrientation newOrientation = StyleVisibility()->mImageOrientation;
+  auto newOrientation = StyleVisibility()->mImageOrientation;
 
   // We need to update our orientation either if we had no ComputedStyle before
   // because this is the first time it's been set, or if the image-orientation
   // property changed from its previous value.
   bool shouldUpdateOrientation =
     !aOldComputedStyle ||
     aOldComputedStyle->StyleVisibility()->mImageOrientation != newOrientation;
 
--- a/layout/reftests/image/image-orientation-background.html
+++ b/layout/reftests/image/image-orientation-background.html
@@ -20,29 +20,24 @@
       background-repeat:   no-repeat;
     }
   </style>
 </head>
 <body>
   <div></div>
 
   <script>
-    var orientation = location.search.substring(1).split("&");
-    var angle = orientation[0];
-    var flip = orientation[1] == "flip" ? true : false;
+    var fromImage = location.search == "from-image";
 
-    // Construct a style. "from-image" is special-cased.
+    // Construct a style.
     var style;
-    if (angle == "from-image") {
+    if (fromImage) {
       style = "div { image-orientation: from-image; }\n";
     } else {
-      style = "div { image-orientation: "
-            + angle + "deg"
-            + (flip ? " flip" : "")
-            + "; }\n";
+      style = "div { image-orientation: none; }\n";
     }
 
     // Apply the style to the document.
     var sheet = document.createElement('style');
     sheet.innerHTML = style;
     document.body.appendChild(sheet);
   </script>
 </body>
--- a/layout/reftests/image/image-orientation-border-image.html
+++ b/layout/reftests/image/image-orientation-border-image.html
@@ -18,29 +18,24 @@
       border-image: url(image-exif-90-deg-flip.jpg) 27 repeat;
     }
   </style>
 </head>
 <body>
   <div></div>
 
   <script>
-    var orientation = location.search.substring(1).split("&");
-    var angle = orientation[0];
-    var flip = orientation[1] == "flip" ? true : false;
+    var fromImage = location.search == "from-image";
 
-    // Construct a style. "from-image" is special-cased.
+    // Construct a style.
     var style;
-    if (angle == "from-image") {
+    if (fromImage) {
       style = "div { image-orientation: from-image; }\n";
     } else {
-      style = "div { image-orientation: "
-            + angle + "deg"
-            + (flip ? " flip" : "")
-            + "; }\n";
+      style = "div { image-orientation: none; }\n";
     }
 
     // Apply the style to the document.
     var sheet = document.createElement('style');
     sheet.innerHTML = style;
     document.body.appendChild(sheet);
   </script>
 </body>
--- a/layout/reftests/image/image-orientation-dynamic-ref.html
+++ b/layout/reftests/image/image-orientation-dynamic-ref.html
@@ -1,2 +1,33 @@
-<!DOCTYPE html>
-<img src="big.png" style="image-orientation: 90deg">
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    table {
+      border-spacing: 0px;
+    }
+    div {
+      width: 100px; height: 200px;
+    }
+    td {
+      width: 50px; height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <table>
+      <tr>
+        <td style="background-color: rgb(254, 0, 122);"></td>
+        <td style="background-color: rgb(191, 0, 93);"></td>
+      </tr>
+      <tr>
+        <td style="background-color: rgb(0, 255, 1);"></td>
+        <td style="background-color: rgb(0, 191, 0);"></td>
+      </tr>
+    </table>
+  </div>
+</body>
--- a/layout/reftests/image/image-orientation-dynamic.html
+++ b/layout/reftests/image/image-orientation-dynamic.html
@@ -1,10 +1,17 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-  <img src="big.png">
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+  </style>
+  <img src="image-exif-180-deg.jpg">
   <script>
     document.addEventListener("MozReftestInvalidate", function() {
-      document.querySelector("img").style.imageOrientation = "90deg";
+      document.querySelector("img").style.imageOrientation = "from-image";
       document.documentElement.className = "";
     });
   </script>
 </html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/image/image-orientation-explicit-none.html
@@ -0,0 +1,21 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    img {
+      border:  50px solid black;
+      margin:  50px;
+      padding: 50px;
+      image-orientation: none;
+    }
+  </style>
+</head>
+<body>
+  <!-- This is deliberately an image with a non-neutral inherent orientation to
+       ensure that the inherent orientation is irrelevant. -->
+  <img src="image-exif-90-deg-flip.jpg">
+</body>
deleted file mode 100644
--- a/layout/reftests/image/image-orientation-explicit.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE>
-<head>
-  <style>
-    body {
-      border:  0px;
-      margin:  0px;
-      padding: 0px;
-    }
-    img {
-      border:  50px solid black;
-      margin:  50px;
-      padding: 50px;
-    }
-  </style>
-</head>
-<body>
-  <!-- This is deliberately an image with a non-neutral inherent orientation to
-       ensure that the inherent orientation is irrelevant. -->
-  <img src="image-exif-90-deg-flip.jpg">
-
-  <script>
-    var orientationInfo = location.search.substring(1).split("&");
-    var angle = orientationInfo[0];
-    var flip = orientationInfo[1] == "flip" ? true : false;
-
-    // Construct a style.
-    var style = "img { image-orientation: "
-              + angle + "deg"
-              + (flip ? " flip" : "")
-              + "; }\n";
-
-    // Apply the style to the document.
-    var sheet = document.createElement('style');
-    sheet.innerHTML = style;
-    document.body.appendChild(sheet);
-  </script>
-</body>
--- a/layout/reftests/image/image-orientation-generated-content-ref.html
+++ b/layout/reftests/image/image-orientation-generated-content-ref.html
@@ -4,72 +4,30 @@
     body {
       border:  0px;
       margin:  0px;
       padding: 0px;
     }
     table {
       border-spacing: 0px;
     }
+    div {
+      width: 200px; height: 100px;
+    }
+    td {
+      width: 100px; height: 50px;
+    }
   </style>
 </head>
 <body>
   <div>
     <table>
       <tr>
-        <td id="ul"></td>
-        <td id="ur"></td>
+        <td style="background-color: rgb(254, 0, 122);"></td>
+        <td style="background-color: rgb(0, 255, 1);"></td>
       </tr>
       <tr>
-        <td id="ll"></td>
-        <td id="lr"></td>
+        <td style="background-color: rgb(191, 0, 93);"></td>
+        <td style="background-color: rgb(0, 191, 0);"></td>
       </tr>
     </table>
   </div>
-
-  <script>
-    var orientationInfo = location.search.substring(1).split("&");
-    var angle = parseInt(orientationInfo[0]);
-    var flip = orientationInfo[1] == "flip" ? true : false;
-
-    // Each id corresponds to a color.
-    var ids = ["ul", "ur", "lr", "ll"];
-    var colors = [
-      "rgb(0, 191, 0)",
-      "rgb(0, 255, 1)",
-      "rgb(254, 0, 122)",
-      "rgb(191, 0, 93)",
-    ];
-
-    // 'Rotate' the colors according to the angle.
-    colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length));
-
-    // 'Flip' the colors if requested.
-    if (flip) {
-        var tmp = colors[0];
-        colors[0] = colors[1];
-        colors[1] = tmp;
-        tmp = colors[2];
-        colors[2] = colors[3];
-        colors[3] = tmp;
-    }
-
-    // Construct a style.
-    var style = "";
-
-    if (angle == 90 || angle == 270) {
-      style += "div { width: 200px; height: 100px; }\n";
-      style += "td { width: 100px; height: 50px; }\n";
-    } else {
-      style += "div { width: 100px; height: 200px; }\n";
-      style += "td { width: 50px; height: 100px; }\n";
-    }
-
-    for (var i = 0 ; i < 4 ; ++i) {
-      style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n";
-    }
-
-    // Apply the style to the document.
-    var sheet = document.createElement('style');
-    sheet.innerHTML = style;
-    document.body.appendChild(sheet);
-  </script>
 </body>
--- a/layout/reftests/image/image-orientation-generated-content.html
+++ b/layout/reftests/image/image-orientation-generated-content.html
@@ -1,38 +1,19 @@
 <!DOCTYPE>
 <head>
   <style>
     body {
       border:  0px;
       margin:  0px;
       padding: 0px;
     }
+    p {
+      image-orientation: from-image;
+    }
     p:before {
       content: url(image-exif-270-deg-flip.jpg);
     }
   </style>
 </head>
 <body>
   <p></p>
-
-  <script>
-    var orientationInfo = location.search.substring(1).split("&");
-    var angle = orientationInfo[0];
-    var flip = orientationInfo[1] == "flip" ? true : false;
-
-    // Construct a style. "from-image" is special-cased.
-    var style;
-    if (angle == "from-image") {
-      style = "p { image-orientation: from-image; }\n";
-    } else {
-      style = "p { image-orientation: "
-            + angle + "deg"
-            + (flip ? " flip" : "")
-            + "; }\n";
-    }
-
-    // Apply the style to the document.
-    var sheet = document.createElement('style');
-    sheet.innerHTML = style;
-    document.body.appendChild(sheet);
-  </script>
 </body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/image/image-orientation-none.html
@@ -0,0 +1,20 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    img {
+      border:  50px solid black;
+      margin:  50px;
+      padding: 50px;
+    }
+  </style>
+</head>
+<body>
+  <!-- This is deliberately an image with a non-neutral inherent orientation to
+       ensure that the inherent orientation is irrelevant. -->
+  <img src="image-exif-90-deg-flip.jpg" style="image-orientation: none;">
+</body>
--- a/layout/reftests/image/reftest.list
+++ b/layout/reftests/image/reftest.list
@@ -27,86 +27,28 @@ fuzzy(1,1) == image-orientation-from-ima
 fuzzy(1,1) == image-orientation-from-image.html?90       image-orientation-ref.html?90
 fuzzy(1,1) == image-orientation-from-image.html?180      image-orientation-ref.html?180
 fuzzy(1,1) == image-orientation-from-image.html?270      image-orientation-ref.html?270
 fuzzy(1,1) == image-orientation-from-image.html?0&flip   image-orientation-ref.html?0&flip
 fuzzy(1,1) == image-orientation-from-image.html?90&flip  image-orientation-ref.html?90&flip
 fuzzy(1,1) == image-orientation-from-image.html?180&flip image-orientation-ref.html?180&flip
 fuzzy(1,1) == image-orientation-from-image.html?270&flip image-orientation-ref.html?270&flip
 
-# Tests for image-orientation used with an explicit orientation:
-fuzzy(1,1) == image-orientation-explicit.html?-900     image-orientation-ref.html?180
-fuzzy(1,1) == image-orientation-explicit.html?0        image-orientation-ref.html?0
-fuzzy(1,1) == image-orientation-explicit.html?90       image-orientation-ref.html?90
-fuzzy(1,1) == image-orientation-explicit.html?180      image-orientation-ref.html?180
-fuzzy(1,1) == image-orientation-explicit.html?270      image-orientation-ref.html?270
-fuzzy(1,1) == image-orientation-explicit.html?0&flip   image-orientation-ref.html?0&flip
-fuzzy(1,1) == image-orientation-explicit.html?90&flip  image-orientation-ref.html?90&flip
-fuzzy(1,1) == image-orientation-explicit.html?180&flip image-orientation-ref.html?180&flip
-fuzzy(1,1) == image-orientation-explicit.html?270&flip image-orientation-ref.html?270&flip
+# Tests for image-orientation used with an explicit 'none' orientation:
+fuzzy(1,1) == image-orientation-explicit-none.html image-orientation-ref.html?0
 
-# Tests for image-orientation used with non-axis-aligned angles:
-fuzzy(1,1) == image-orientation-explicit.html?-46      image-orientation-ref.html?270
-fuzzy(1,1) == image-orientation-explicit.html?-45      image-orientation-ref.html?0
-fuzzy(1,1) == image-orientation-explicit.html?-15      image-orientation-ref.html?0
-fuzzy(1,1) == image-orientation-explicit.html?15       image-orientation-ref.html?0
-fuzzy(1,1) == image-orientation-explicit.html?45       image-orientation-ref.html?90
-fuzzy(1,1) == image-orientation-explicit.html?75       image-orientation-ref.html?90
-fuzzy(1,1) == image-orientation-explicit.html?105      image-orientation-ref.html?90
-fuzzy(1,1) == image-orientation-explicit.html?135      image-orientation-ref.html?180
-fuzzy(1,1) == image-orientation-explicit.html?165      image-orientation-ref.html?180
-fuzzy(1,1) == image-orientation-explicit.html?195      image-orientation-ref.html?180
-fuzzy(1,1) == image-orientation-explicit.html?225      image-orientation-ref.html?270
-fuzzy(1,1) == image-orientation-explicit.html?255      image-orientation-ref.html?270
-fuzzy(1,1) == image-orientation-explicit.html?285      image-orientation-ref.html?270
-fuzzy(1,1) == image-orientation-explicit.html?315      image-orientation-ref.html?0
-fuzzy(1,1) == image-orientation-explicit.html?345      image-orientation-ref.html?0
-
-# Tests for image-orientation used on generated content:
-fuzzy(1,1) == image-orientation-generated-content.html?from-image image-orientation-generated-content-ref.html?270&flip
-fuzzy(1,1) == image-orientation-generated-content.html?0          image-orientation-generated-content-ref.html?0
-fuzzy(1,1) == image-orientation-generated-content.html?90         image-orientation-generated-content-ref.html?90
-fuzzy(1,1) == image-orientation-generated-content.html?180        image-orientation-generated-content-ref.html?180
-fuzzy(1,1) == image-orientation-generated-content.html?270        image-orientation-generated-content-ref.html?270
-fuzzy(1,1) == image-orientation-generated-content.html?0&flip     image-orientation-generated-content-ref.html?0&flip
-fuzzy(1,1) == image-orientation-generated-content.html?90&flip    image-orientation-generated-content-ref.html?90&flip
-fuzzy(1,1) == image-orientation-generated-content.html?180&flip   image-orientation-generated-content-ref.html?180&flip
-fuzzy(1,1) == image-orientation-generated-content.html?270&flip   image-orientation-generated-content-ref.html?270&flip
+# Tests for image-orientation:from-image used on generated content:
+fuzzy(1,1) == image-orientation-generated-content.html image-orientation-generated-content-ref.html
 
 # Tests that image-orientation does not apply to decorative images:
-fuzzy(1,1) == image-orientation-background.html?from-image   image-orientation-ref.html?0
-fuzzy(1,1) == image-orientation-background.html?90&flip      image-orientation-ref.html?0
-== image-orientation-border-image.html?from-image            image-orientation-border-image.html?0
-== image-orientation-border-image.html?90&flip               image-orientation-border-image.html?0
-== image-orientation-list-style-image.html?from-image        image-orientation-list-style-image.html?0
-== image-orientation-list-style-image.html?90&flip           image-orientation-list-style-image.html?0
+fuzzy(1,1) == image-orientation-background.html?from-image   image-orientation-ref.html?none
+== image-orientation-border-image.html?from-image            image-orientation-border-image.html?none
+== image-orientation-list-style-image.html?from-image        image-orientation-list-style-image.html?none
 
-# Sanity checks for the image-orientation tests. Ensures that the various
-# combinations of rotations and flips actually look different from each other.
-!= image-orientation-ref.html?0    image-orientation-ref.html?90
-!= image-orientation-ref.html?0    image-orientation-ref.html?180
-!= image-orientation-ref.html?0    image-orientation-ref.html?270
-!= image-orientation-ref.html?90   image-orientation-ref.html?180
-!= image-orientation-ref.html?90   image-orientation-ref.html?270
-!= image-orientation-ref.html?180  image-orientation-ref.html?270
-!= image-orientation-ref.html?0    image-orientation-ref.html?0&flip
-!= image-orientation-ref.html?90   image-orientation-ref.html?90&flip
-!= image-orientation-ref.html?180  image-orientation-ref.html?180&flip
-!= image-orientation-ref.html?270  image-orientation-ref.html?270&flip
-!= image-orientation-generated-content-ref.html?0    image-orientation-generated-content-ref.html?90
-!= image-orientation-generated-content-ref.html?0    image-orientation-generated-content-ref.html?180
-!= image-orientation-generated-content-ref.html?0    image-orientation-generated-content-ref.html?270
-!= image-orientation-generated-content-ref.html?90   image-orientation-generated-content-ref.html?180
-!= image-orientation-generated-content-ref.html?90   image-orientation-generated-content-ref.html?270
-!= image-orientation-generated-content-ref.html?180  image-orientation-generated-content-ref.html?270
-!= image-orientation-generated-content-ref.html?0    image-orientation-generated-content-ref.html?0&flip
-!= image-orientation-generated-content-ref.html?90   image-orientation-generated-content-ref.html?90&flip
-!= image-orientation-generated-content-ref.html?180  image-orientation-generated-content-ref.html?180&flip
-!= image-orientation-generated-content-ref.html?270  image-orientation-generated-content-ref.html?270&flip
-== image-orientation-dynamic.html image-orientation-dynamic-ref.html
+fuzzy(1,1) == image-orientation-dynamic.html image-orientation-dynamic-ref.html
 
 # <img srcset> tests
 == image-srcset-basic-selection-0.1x.html image-srcset-basic-selection-0.1x-ref.html
 == image-srcset-basic-selection-2x.html image-srcset-basic-selection-2x-ref.html
 == image-srcset-basic-selection-0.5x.html image-srcset-basic-selection-0.5x-ref.html
 == image-srcset-basic-selection-0.6x.html image-srcset-basic-selection-0.6x-ref.html
 random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == image-srcset-basic-selection-1.5x.html image-srcset-basic-selection-1.5x-ref.html # Bug 1392106
 == image-srcset-basic-selection-1x.html image-srcset-basic-selection-1x-ref.html
deleted file mode 100644
--- a/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE>
-<head>
-  <style>
-    body {
-      border:  0px;
-      margin:  0px;
-      padding: 0px;
-    }
-  </style>
-</head>
-<body>
-  <img src="image-orientation-no-viewbox-and-size.svg">
-
-  <script>
-    var orientationInfo = location.search.substring(1).split("&");
-    var angle = orientationInfo[0];
-    var flip = orientationInfo[1] == "flip" ? true : false;
-
-    // Construct a style. "from-image" is special-cased.
-    var style;
-    if (angle == "from-image") {
-      style = "img { image-orientation: from-image; }\n";
-    } else {
-      style = "img { image-orientation: "
-            + angle + "deg"
-            + (flip ? " flip" : "")
-            + "; }\n";
-    }
-
-    // Apply the style to the document.
-    var sheet = document.createElement('style');
-    sheet.innerHTML = style;
-    document.body.appendChild(sheet);
-  </script>
-</body>
deleted file mode 100644
--- a/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
-     width="100" height="200">
-  <rect x="0"  y="0"   width="50" height="100" fill="rgb(0, 191, 0)"/>
-  <rect x="50" y="0"   width="50" height="100" fill="rgb(0, 255, 1)"/>
-  <rect x="50" y="100" width="50" height="100" fill="rgb(254, 0, 122)"/>
-  <rect x="0"  y="100" width="50" height="100" fill="rgb(191, 0, 93)"/>
-</svg>
deleted file mode 100644
--- a/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE>
-<head>
-  <style>
-    body {
-      border:  0px;
-      margin:  0px;
-      padding: 0px;
-    }
-    img {
-      width:  100px;
-      height: 200px;
-    }
-  </style>
-</head>
-<body>
-  <img src="image-orientation-no-viewbox-no-size.svg">
-
-  <script>
-    var orientationInfo = location.search.substring(1).split("&");
-    var angle = orientationInfo[0];
-    var flip = orientationInfo[1] == "flip" ? true : false;
-
-    // Construct a style. "from-image" is special-cased.
-    var orientationStyle;
-    if (angle == "from-image") {
-      orientationStyle = "image-orientation: from-image;";
-    } else {
-      orientationStyle = "image-orientation: "
-                       + angle + "deg"
-                       + (flip ? " flip" : "")
-                       + ";";
-    }
-
-    // Since the SVG image has no intrinsic size, we need to apply an
-    // appropriate size to the <img> element to match the reference.
-    var boxStyle;
-    if (angle == "90" || angle == "270") {
-      boxStyle = "width: 200px; height: 100px;";
-    } else {
-      boxStyle = "width: 100px; height: 200px;";
-    }
-
-    var style = "img { "
-              + orientationStyle
-              + " "
-              + boxStyle
-              + " }\n";
-
-    // Apply the style to the document.
-    var sheet = document.createElement('style');
-    sheet.innerHTML = style;
-    document.body.appendChild(sheet);
-  </script>
-</body>
deleted file mode 100644
--- a/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <rect x="0"  y="0"   width="50" height="100" fill="rgb(0, 191, 0)"/>
-  <rect x="50" y="0"   width="50" height="100" fill="rgb(0, 255, 1)"/>
-  <rect x="50" y="100" width="50" height="100" fill="rgb(254, 0, 122)"/>
-  <rect x="0"  y="100" width="50" height="100" fill="rgb(191, 0, 93)"/>
-</svg>
--- a/layout/reftests/svg/as-image/image-orientation-ref.html
+++ b/layout/reftests/svg/as-image/image-orientation-ref.html
@@ -4,72 +4,30 @@
     body {
       border:  0px;
       margin:  0px;
       padding: 0px;
     }
     table {
       border-spacing: 0px;
     }
+    div {
+      width: 100px; height: 200px;
+    }
+    td {
+      width: 50px; height: 100px;
+    }
   </style>
 </head>
 <body>
   <div>
     <table>
       <tr>
-        <td id="ul"></td>
-        <td id="ur"></td>
+        <td style="background-color: rgb(0, 191, 0)"></td>
+        <td style="background-color: rgb(0, 255, 1)"></td>
       </tr>
       <tr>
-        <td id="ll"></td>
-        <td id="lr"></td>
+        <td style="background-color: rgb(254, 0, 122)"></td>
+        <td style="background-color: rgb(254, 0, 122)"></td>
       </tr>
     </table>
   </div>
-
-  <script>
-    var orientationInfo = location.search.substring(1).split("&");
-    var angle = parseInt(orientationInfo[0]);
-    var flip = orientationInfo[1] == "flip" ? true : false;
-
-    // Each id corresponds to a color.
-    var ids = ["ul", "ur", "lr", "ll"];
-    var colors = [
-      "rgb(0, 191, 0)",
-      "rgb(0, 255, 1)",
-      "rgb(254, 0, 122)",
-      "rgb(191, 0, 93)",
-    ];
-
-    // 'Rotate' the colors according to the angle.
-    colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length));
-
-    // 'Flip' the colors if requested.
-    if (flip) {
-        var tmp = colors[0];
-        colors[0] = colors[1];
-        colors[1] = tmp;
-        tmp = colors[2];
-        colors[2] = colors[3];
-        colors[3] = tmp;
-    }
-
-    // Construct a style.
-    var style = "";
-
-    if (angle == 90 || angle == 270) {
-      style += "div { width: 200px; height: 100px; }\n";
-      style += "td { width: 100px; height: 50px; }\n";
-    } else {
-      style += "div { width: 100px; height: 200px; }\n";
-      style += "td { width: 50px; height: 100px; }\n";
-    }
-
-    for (var i = 0 ; i < 4 ; ++i) {
-      style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n";
-    }
-
-    // Apply the style to the document.
-    var sheet = document.createElement('style');
-    sheet.innerHTML = style;
-    document.body.appendChild(sheet);
-  </script>
 </body>
--- a/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html
@@ -5,31 +5,15 @@
       border:  0px;
       margin:  0px;
       padding: 0px;
     }
   </style>
 </head>
 <body>
   <img src="image-orientation-viewbox-and-size.svg">
-
   <script>
-    var orientationInfo = location.search.substring(1).split("&");
-    var angle = orientationInfo[0];
-    var flip = orientationInfo[1] == "flip" ? true : false;
-
-    // Construct a style. "from-image" is special-cased.
-    var style;
-    if (angle == "from-image") {
-      style = "img { image-orientation: from-image; }\n";
-    } else {
-      style = "img { image-orientation: "
-            + angle + "deg"
-            + (flip ? " flip" : "")
-            + "; }\n";
+    let fromImage = location.search == "from-image";
+    if (fromImage) {
+      document.querySelector("img").style.imageOrientation = "from-image";
     }
-
-    // Apply the style to the document.
-    var sheet = document.createElement('style');
-    sheet.innerHTML = style;
-    document.body.appendChild(sheet);
   </script>
 </body>
--- a/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html
@@ -1,50 +1,22 @@
 <!DOCTYPE>
 <head>
   <style>
     body {
       border:  0px;
       margin:  0px;
       padding: 0px;
     }
+    img {
+      image-orientation: from-image;
+    }
   </style>
 </head>
 <body>
   <img src="image-orientation-viewbox-no-size.svg">
-
   <script>
-    var orientationInfo = location.search.substring(1).split("&");
-    var angle = orientationInfo[0];
-    var flip = orientationInfo[1] == "flip" ? true : false;
-
-    // Construct a style. "from-image" is special-cased.
-    var orientationStyle;
-    if (angle == "from-image") {
-      orientationStyle = "image-orientation: from-image;";
-    } else {
-      orientationStyle = "image-orientation: "
-                       + angle + "deg"
-                       + (flip ? " flip" : "")
-                       + ";";
+    let fromImage = location.search == "from-image";
+    if (fromImage) {
+      document.querySelector("img").style.imageOrientation = "from-image";
     }
-
-    // Since the SVG image has no intrinsic size, we need to apply an
-    // appropriate size to the <img> element to match the reference.
-    var boxStyle;
-    if (angle == "90" || angle == "270") {
-      boxStyle = "width: 200px; height: 100px;";
-    } else {
-      boxStyle = "width: 100px; height: 200px;";
-    }
-
-    var style = "img { "
-              + orientationStyle
-              + " "
-              + boxStyle
-              + " }\n";
-
-    // Apply the style to the document.
-    var sheet = document.createElement('style');
-    sheet.innerHTML = style;
-    document.body.appendChild(sheet);
   </script>
 </body>
--- a/layout/reftests/svg/as-image/reftest.list
+++ b/layout/reftests/svg/as-image/reftest.list
@@ -193,72 +193,19 @@ HTTP == svg-stylesheet-external-1.html b
 == svg-image-synthetic-viewBox-01.svg svg-image-synthetic-viewBox-01-ref.svg
 
 # Test for painting problems with SVGs used in border images.
 # XXXseth: The underlying problems also apply to media fragments,
 # but the test case would be much simpler. This should be switched
 # over to use media fragments once bug 790640 lands.
 fuzzy(2,1) == svg-border-image-repaint-1.html svg-border-image-repaint-1-ref.html
 
-# Tests for image-orientation with a viewbox and an intrinsic size:
-== image-orientation-viewbox-and-size.html?0        image-orientation-ref.html?0
-== image-orientation-viewbox-and-size.html?90       image-orientation-ref.html?90
-== image-orientation-viewbox-and-size.html?180      image-orientation-ref.html?180
-== image-orientation-viewbox-and-size.html?270      image-orientation-ref.html?270
-== image-orientation-viewbox-and-size.html?0&flip   image-orientation-ref.html?0&flip
-== image-orientation-viewbox-and-size.html?90&flip  image-orientation-ref.html?90&flip
-== image-orientation-viewbox-and-size.html?180&flip image-orientation-ref.html?180&flip
-== image-orientation-viewbox-and-size.html?270&flip image-orientation-ref.html?270&flip
-
-# Tests for image-orientation with a viewbox and no intrinsic size:
-== image-orientation-viewbox-no-size.html?0        image-orientation-ref.html?0
-== image-orientation-viewbox-no-size.html?90       image-orientation-ref.html?90
-== image-orientation-viewbox-no-size.html?180      image-orientation-ref.html?180
-== image-orientation-viewbox-no-size.html?270      image-orientation-ref.html?270
-== image-orientation-viewbox-no-size.html?0&flip   image-orientation-ref.html?0&flip
-== image-orientation-viewbox-no-size.html?90&flip  image-orientation-ref.html?90&flip
-== image-orientation-viewbox-no-size.html?180&flip image-orientation-ref.html?180&flip
-== image-orientation-viewbox-no-size.html?270&flip image-orientation-ref.html?270&flip
-
-# Tests for image-orientation with no viewbox and an intrinsic size:
-== image-orientation-no-viewbox-and-size.html?0        image-orientation-ref.html?0
-== image-orientation-no-viewbox-and-size.html?90       image-orientation-ref.html?90
-== image-orientation-no-viewbox-and-size.html?180      image-orientation-ref.html?180
-== image-orientation-no-viewbox-and-size.html?270      image-orientation-ref.html?270
-== image-orientation-no-viewbox-and-size.html?0&flip   image-orientation-ref.html?0&flip
-== image-orientation-no-viewbox-and-size.html?90&flip  image-orientation-ref.html?90&flip
-== image-orientation-no-viewbox-and-size.html?180&flip image-orientation-ref.html?180&flip
-== image-orientation-no-viewbox-and-size.html?270&flip image-orientation-ref.html?270&flip
-
-# Tests for image-orientation with no viewbox and no intrinsic size:
-== image-orientation-no-viewbox-no-size.html?0        image-orientation-ref.html?0
-== image-orientation-no-viewbox-no-size.html?90       image-orientation-ref.html?90
-== image-orientation-no-viewbox-no-size.html?180      image-orientation-ref.html?180
-== image-orientation-no-viewbox-no-size.html?270      image-orientation-ref.html?270
-== image-orientation-no-viewbox-no-size.html?0&flip   image-orientation-ref.html?0&flip
-== image-orientation-no-viewbox-no-size.html?90&flip  image-orientation-ref.html?90&flip
-== image-orientation-no-viewbox-no-size.html?180&flip image-orientation-ref.html?180&flip
-== image-orientation-no-viewbox-no-size.html?270&flip image-orientation-ref.html?270&flip
-
 # Test that 'image-orientation: from-image' has no effect, since SVGs don't have EXIF data.
-== image-orientation-viewbox-and-size.html?from-image  image-orientation-ref.html?0
-== image-orientation-viewbox-no-size.html?from-image   image-orientation-ref.html?0
-
-# Sanity checks for the image-orientation tests. Ensures that the various
-# combinations of rotations and flips actually look different from each other.
-!= image-orientation-ref.html?0    image-orientation-ref.html?90
-!= image-orientation-ref.html?0    image-orientation-ref.html?180
-!= image-orientation-ref.html?0    image-orientation-ref.html?270
-!= image-orientation-ref.html?90   image-orientation-ref.html?180
-!= image-orientation-ref.html?90   image-orientation-ref.html?270
-!= image-orientation-ref.html?180  image-orientation-ref.html?270
-!= image-orientation-ref.html?0    image-orientation-ref.html?0&flip
-!= image-orientation-ref.html?90   image-orientation-ref.html?90&flip
-!= image-orientation-ref.html?180  image-orientation-ref.html?180&flip
-!= image-orientation-ref.html?270  image-orientation-ref.html?270&flip
+== image-orientation-viewbox-and-size.html?from-image  image-orientation-viewbox-and-size.html?none
+== image-orientation-viewbox-no-size.html?from-image   image-orientation-viewbox-no-size.html?none
 
 # Tests that nonuniform scales work with SVG-as-image.
 == nonuniform-scale-2d.html?0.5&1.0  nonuniform-scale-ref.html?50&100
 == nonuniform-scale-2d.html?1.0&0.5  nonuniform-scale-ref.html?100&50
 == nonuniform-scale-3d.html?0.5&1.0&0.5  nonuniform-scale-ref.html?50&100
 == nonuniform-scale-3d.html?1.0&0.5&0.5  nonuniform-scale-ref.html?100&50
 
 # Sanity checks that nonuniform scales don't devolve to uniform scales.
--- a/layout/style/ServoBindings.cpp
+++ b/layout/style/ServoBindings.cpp
@@ -1420,37 +1420,16 @@ void
 Gecko_CopyAlternateValuesFrom(nsFont* aDest, const nsFont* aSrc)
 {
   aDest->alternateValues.Clear();
   aDest->alternateValues.AppendElements(aSrc->alternateValues);
   aDest->featureValueLookup = aSrc->featureValueLookup;
 }
 
 void
-Gecko_SetImageOrientation(nsStyleVisibility* aVisibility,
-                          uint8_t aOrientation, bool aFlip)
-{
-  aVisibility->mImageOrientation =
-    nsStyleImageOrientation::CreateAsOrientationAndFlip(aOrientation, aFlip);
-}
-
-void
-Gecko_SetImageOrientationAsFromImage(nsStyleVisibility* aVisibility)
-{
-  aVisibility->mImageOrientation = nsStyleImageOrientation::CreateAsFromImage();
-}
-
-void
-Gecko_CopyImageOrientationFrom(nsStyleVisibility* aDst,
-                               const nsStyleVisibility* aSrc)
-{
-  aDst->mImageOrientation = aSrc->mImageOrientation;
-}
-
-void
 Gecko_SetCounterStyleToName(CounterStylePtr* aPtr, nsAtom* aName,
                             RawGeckoPresContextBorrowed aPresContext)
 {
   // Try resolving the counter style if possible, and keep it unresolved
   // otherwise.
   CounterStyleManager* manager = aPresContext->CounterStyleManager();
   RefPtr<nsAtom> name = already_AddRefed<nsAtom>(aName);
   if (CounterStyle* style = manager->GetCounterStyle(name)) {
--- a/layout/style/ServoBindings.toml
+++ b/layout/style/ServoBindings.toml
@@ -135,32 +135,32 @@ rusty-enums = [
     "nsCSSFontDesc",
     "nsCSSPropertyID",
     "nsCSSCounterDesc",
     "nsMediaFeature_RangeType",
     "nsMediaFeature_ValueType",
     "nsresult",
     "nsAtom_AtomKind",
     "nsStyleImageLayers_LayerType",
-    "nsStyleImageOrientation_Angles",
     "nsTimingFunction_Type",
     "mozilla::ServoElementSnapshotFlags",
     "mozilla::Side",
     "mozilla::dom::PlaybackDirection",
     "mozilla::dom::FillMode",
     "mozilla::HalfCorner",
     "mozilla::StyleDisplay",
     "mozilla::StyleFloatEdge",
     "mozilla::StyleShapeRadius",
     "mozilla::StyleWindowDragging",
     "mozilla::StyleOrient",
     "mozilla::StyleBoxSizing",
     "mozilla::StyleClear",
     "mozilla::StyleComplexColor_Tag",
     "mozilla::StyleFloat",
+    "mozilla::StyleImageOrientation",
     "mozilla::StyleUserModify",
     "mozilla::StyleUserInput",
     "mozilla::StyleBoxDirection",
     "mozilla::StyleTextJustify",
     "mozilla::StyleHyphens",
     "mozilla::StyleFillRule",
     "mozilla::StyleShapeSourceType",
     "mozilla::StyleBasicShapeType",
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -3754,26 +3754,24 @@ nsComputedDOMStyle::DoGetForceBrokenImag
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetImageOrientation()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   nsAutoString string;
-  nsStyleImageOrientation orientation = StyleVisibility()->mImageOrientation;
-
-  if (orientation.IsFromImage()) {
-    string.AppendLiteral("from-image");
-  } else {
-    nsStyleUtil::AppendAngleValue(orientation.AngleAsCoord(), string);
-
-    if (orientation.IsFlipped()) {
-      string.AppendLiteral(" flip");
-    }
+
+  switch (StyleVisibility()->mImageOrientation) {
+    case StyleImageOrientation::None:
+      string.AppendLiteral("none");
+      break;
+    case StyleImageOrientation::FromImage:
+      string.AppendLiteral("from-image");
+      break;
   }
 
   val->SetString(string);
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetDisplay()
--- a/layout/style/nsStyleConsts.h
+++ b/layout/style/nsStyleConsts.h
@@ -156,16 +156,22 @@ enum class StyleFloatEdge : uint8_t {
 
 // Hyphens
 enum class StyleHyphens : uint8_t {
   None,
   Manual,
   Auto,
 };
 
+// image-orientation
+enum class StyleImageOrientation : uint8_t {
+  None,
+  FromImage,
+};
+
 // <shape-radius> for <basic-shape>
 enum class StyleShapeRadius : uint8_t {
   ClosestSide,
   FarthestSide,
 };
 
 // Shape source type
 enum class StyleShapeSourceType : uint8_t {
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -1760,135 +1760,29 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsSt
   // for those cases.
   inline bool NewlineIsSignificant(const nsTextFrame* aContextFrame) const;
   inline bool WhiteSpaceCanWrap(const nsIFrame* aContextFrame) const;
   inline bool WordCanWrap(const nsIFrame* aContextFrame) const;
 
   mozilla::LogicalSide TextEmphasisSide(mozilla::WritingMode aWM) const;
 };
 
-struct nsStyleImageOrientation
-{
-  static nsStyleImageOrientation CreateAsAngleAndFlip(double aRadians,
-                                                      bool aFlip) {
-    uint8_t orientation(0);
-
-    // Compute the final angle value, rounding to the closest quarter turn.
-    double roundedAngle = fmod(aRadians, 2 * M_PI);
-    if (roundedAngle < 0) {
-      roundedAngle = roundedAngle + 2 * M_PI;
-    }
-    if      (roundedAngle < 0.25 * M_PI) { orientation = ANGLE_0;  }
-    else if (roundedAngle < 0.75 * M_PI) { orientation = ANGLE_90; }
-    else if (roundedAngle < 1.25 * M_PI) { orientation = ANGLE_180;}
-    else if (roundedAngle < 1.75 * M_PI) { orientation = ANGLE_270;}
-    else                                 { orientation = ANGLE_0;  }
-
-    // Add a bit for 'flip' if needed.
-    if (aFlip) {
-      orientation |= FLIP_MASK;
-    }
-
-    return nsStyleImageOrientation(orientation);
-  }
-
-  static nsStyleImageOrientation CreateAsOrientationAndFlip(uint8_t aOrientation,
-                                                            bool aFlip) {
-    MOZ_ASSERT(aOrientation <= ANGLE_270);
-    if (aFlip) {
-      aOrientation |= FLIP_MASK;
-    }
-    return nsStyleImageOrientation(aOrientation);
-  }
-
-  static nsStyleImageOrientation CreateAsFlip() {
-    return nsStyleImageOrientation(FLIP_MASK);
-  }
-
-  static nsStyleImageOrientation CreateAsFromImage() {
-    return nsStyleImageOrientation(FROM_IMAGE_MASK);
-  }
-
-  // The default constructor yields 0 degrees of rotation and no flip.
-  nsStyleImageOrientation() : mOrientation(0) { }
-
-  bool IsDefault()   const { return mOrientation == 0; }
-  bool IsFlipped()   const { return mOrientation & FLIP_MASK; }
-  bool IsFromImage() const { return mOrientation & FROM_IMAGE_MASK; }
-  bool SwapsWidthAndHeight() const {
-    uint8_t angle = mOrientation & ORIENTATION_MASK;
-    return (angle == ANGLE_90) || (angle == ANGLE_270);
-  }
-
-  mozilla::image::Angle Angle() const {
-    switch (mOrientation & ORIENTATION_MASK) {
-      case ANGLE_0:   return mozilla::image::Angle::D0;
-      case ANGLE_90:  return mozilla::image::Angle::D90;
-      case ANGLE_180: return mozilla::image::Angle::D180;
-      case ANGLE_270: return mozilla::image::Angle::D270;
-      default:
-        MOZ_ASSERT_UNREACHABLE("Unexpected angle");
-        return mozilla::image::Angle::D0;
-    }
-  }
-
-  nsStyleCoord AngleAsCoord() const {
-    switch (mOrientation & ORIENTATION_MASK) {
-      case ANGLE_0:   return nsStyleCoord(0.0f,   eStyleUnit_Degree);
-      case ANGLE_90:  return nsStyleCoord(90.0f,  eStyleUnit_Degree);
-      case ANGLE_180: return nsStyleCoord(180.0f, eStyleUnit_Degree);
-      case ANGLE_270: return nsStyleCoord(270.0f, eStyleUnit_Degree);
-      default:
-        MOZ_ASSERT_UNREACHABLE("Unexpected angle");
-        return nsStyleCoord();
-    }
-  }
-
-  bool operator==(const nsStyleImageOrientation& aOther) const {
-    return aOther.mOrientation == mOrientation;
-  }
-
-  bool operator!=(const nsStyleImageOrientation& aOther) const {
-    return !(*this == aOther);
-  }
-
-protected:
-  enum Bits {
-    ORIENTATION_MASK = 0x1 | 0x2,  // The bottom two bits are the angle.
-    FLIP_MASK        = 0x4,        // Whether the image should be flipped.
-    FROM_IMAGE_MASK  = 0x8,        // Whether the image's inherent orientation
-  };                               // should be used.
-
-  enum Angles {
-    ANGLE_0   = 0,
-    ANGLE_90  = 1,
-    ANGLE_180 = 2,
-    ANGLE_270 = 3,
-  };
-
-  explicit nsStyleImageOrientation(uint8_t aOrientation)
-    : mOrientation(aOrientation)
-  { }
-
-  uint8_t mOrientation;
-};
-
 struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleVisibility
 {
   explicit nsStyleVisibility(const nsPresContext* aContext);
   nsStyleVisibility(const nsStyleVisibility& aVisibility);
   ~nsStyleVisibility() {
     MOZ_COUNT_DTOR(nsStyleVisibility);
   }
   void FinishStyle(nsPresContext*, const nsStyleVisibility*) {}
   const static bool kHasFinishStyle = false;
 
   nsChangeHint CalcDifference(const nsStyleVisibility& aNewData) const;
 
-  nsStyleImageOrientation mImageOrientation;
+  mozilla::StyleImageOrientation mImageOrientation;
   uint8_t mDirection;                  // NS_STYLE_DIRECTION_*
   uint8_t mVisible;                    // NS_STYLE_VISIBILITY_VISIBLE_*
   uint8_t mImageRendering;             // NS_STYLE_IMAGE_RENDERING_*
   uint8_t mWritingMode;                // NS_STYLE_WRITING_MODE_*
   uint8_t mTextOrientation;            // NS_STYLE_TEXT_ORIENTATION_MIXED_*
   uint8_t mColorAdjust;                // NS_STYLE_COLOR_ADJUST_ECONOMY_*
 
   bool IsVisible() const {
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -2920,17 +2920,17 @@ pref("layout.css.convertFromNode.enabled
 #endif
 
 // Is support for CSS "text-align: unsafe X" enabled?
 pref("layout.css.text-align-unsafe-value.enabled", false);
 
 // Is support for CSS text-justify property enabled?
 pref("layout.css.text-justify.enabled", true);
 
-// Is support for the CSS4 image-orientation property enabled?
+// Is support for the CSS image-orientation property enabled?
 pref("layout.css.image-orientation.enabled", true);
 
 // Is the paint-order property supported for HTML text?
 // (It is always supported for SVG.)
 pref("layout.css.paint-order.enabled", true);
 
 // Are sets of prefixed properties supported?
 pref("layout.css.prefixes.border-image", true);
--- a/servo/components/style/properties/data.py
+++ b/servo/components/style/properties/data.py
@@ -280,17 +280,16 @@ class Longhand(object):
                 "BorderImageRepeat",
                 "BorderStyle",
                 "ColumnCount",
                 "Contain",
                 "FontStyleAdjust",
                 "FontSynthesis",
                 "FontWeight",
                 "GridAutoFlow",
-                "ImageOrientation",
                 "InitialLetter",
                 "Integer",
                 "JustifyContent",
                 "JustifyItems",
                 "JustifySelf",
                 "MozForceBrokenImageIcon",
                 "MozScriptLevel",
                 "MozScriptMinSize",
--- a/servo/components/style/properties/gecko.mako.rs
+++ b/servo/components/style/properties/gecko.mako.rs
@@ -4553,74 +4553,17 @@ fn static_assert() {
                 _ => {},
             }
         }
         longhands::filter::computed_value::List(filters)
     }
 
 </%self:impl_trait>
 
-<%self:impl_trait style_struct_name="InheritedBox"
-                  skip_longhands="image-orientation">
-    // FIXME: Gecko uses a tricky way to store computed value of image-orientation
-    //        within an u8. We could inline following glue codes by implementing all
-    //        those tricky parts for Servo as well. But, it's not done yet just for
-    //        convenience.
-    pub fn set_image_orientation(&mut self, v: longhands::image_orientation::computed_value::T) {
-        use properties::longhands::image_orientation::computed_value::T;
-        match v {
-            T::FromImage => {
-                unsafe {
-                    bindings::Gecko_SetImageOrientationAsFromImage(&mut self.gecko);
-                }
-            },
-            T::AngleWithFlipped(ref orientation, flipped) => {
-                unsafe {
-                    bindings::Gecko_SetImageOrientation(&mut self.gecko, *orientation as u8, flipped);
-                }
-            }
-        }
-    }
-
-    pub fn copy_image_orientation_from(&mut self, other: &Self) {
-        unsafe {
-            bindings::Gecko_CopyImageOrientationFrom(&mut self.gecko, &other.gecko);
-        }
-    }
-
-    pub fn reset_image_orientation(&mut self, other: &Self) {
-        self.copy_image_orientation_from(other)
-    }
-
-    pub fn clone_image_orientation(&self) -> longhands::image_orientation::computed_value::T {
-        use gecko_bindings::structs::nsStyleImageOrientation_Angles;
-        use properties::longhands::image_orientation::computed_value::T;
-        use values::computed::Orientation;
-
-        let gecko_orientation = self.gecko.mImageOrientation.mOrientation;
-        if gecko_orientation & structs::nsStyleImageOrientation_Bits_FROM_IMAGE_MASK as u8 != 0 {
-            T::FromImage
-        } else {
-            const ANGLE0: u8 = nsStyleImageOrientation_Angles::ANGLE_0 as u8;
-            const ANGLE90: u8 = nsStyleImageOrientation_Angles::ANGLE_90 as u8;
-            const ANGLE180: u8 = nsStyleImageOrientation_Angles::ANGLE_180 as u8;
-            const ANGLE270: u8 = nsStyleImageOrientation_Angles::ANGLE_270 as u8;
-
-            let flip = gecko_orientation & structs::nsStyleImageOrientation_Bits_FLIP_MASK as u8 != 0;
-            let orientation =
-                match gecko_orientation & structs::nsStyleImageOrientation_Bits_ORIENTATION_MASK as u8 {
-                    ANGLE0 => Orientation::Angle0,
-                    ANGLE90 => Orientation::Angle90,
-                    ANGLE180 => Orientation::Angle180,
-                    ANGLE270 => Orientation::Angle270,
-                    _ => unreachable!()
-                };
-            T::AngleWithFlipped(orientation, flip)
-        }
-    }
+<%self:impl_trait style_struct_name="InheritedBox">
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="InheritedTable"
                   skip_longhands="border-spacing">
 
     pub fn set_border_spacing(&mut self, v: longhands::border_spacing::computed_value::T) {
         self.gecko.mBorderSpacingCol = v.horizontal().0;
         self.gecko.mBorderSpacingRow = v.vertical().0;
--- a/servo/components/style/properties/longhands/inherited_box.mako.rs
+++ b/servo/components/style/properties/longhands/inherited_box.mako.rs
@@ -54,16 +54,15 @@
 ${helpers.single_keyword("image-rendering",
                          "auto",
                          extra_gecko_values="optimizespeed optimizequality -moz-crisp-edges",
                          extra_servo_values="pixelated crisp-edges",
                          custom_consts=image_rendering_custom_consts,
                          animation_value_type="discrete",
                          spec="https://drafts.csswg.org/css-images/#propdef-image-rendering")}
 
-${helpers.predefined_type("image-orientation",
-                          "ImageOrientation",
-                          "computed::ImageOrientation::zero()",
-                          products="gecko",
-                          animation_value_type="discrete",
-                          gecko_pref="layout.css.image-orientation.enabled",
-                          spec="https://drafts.csswg.org/css-images/#propdef-image-orientation, \
-                    /// additional values in https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation")}
+${helpers.single_keyword("image-orientation",
+                         "none from-image",
+                         products="gecko",
+                         gecko_enum_prefix="StyleImageOrientation",
+                         animation_value_type="discrete",
+                         gecko_pref="layout.css.image-orientation.enabled",
+                         spec="https://drafts.csswg.org/css-images/#propdef-image-orientation")}
deleted file mode 100644
--- a/servo/components/style/values/computed/inherited_box.rs
+++ /dev/null
@@ -1,81 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-//! Computed values for inherited box
-
-use std::fmt::{self, Write};
-use style_traits::{CssWriter, ToCss};
-use values::specified::Angle;
-
-/// An angle rounded and normalized per https://drafts.csswg.org/css-images/#propdef-image-orientation
-#[allow(missing_docs)]
-#[derive(Clone, Copy, Debug, Eq, MallocSizeOf, PartialEq)]
-pub enum Orientation {
-    Angle0 = 0,
-    Angle90,
-    Angle180,
-    Angle270,
-}
-
-impl Orientation {
-    /// Get the actual angle that this orientation value represents.
-    pub fn angle(&self) -> Angle {
-        match *self {
-            Orientation::Angle0 => Angle::from_degrees(0.0, false),
-            Orientation::Angle90 => Angle::from_degrees(90.0, false),
-            Orientation::Angle180 => Angle::from_degrees(180.0, false),
-            Orientation::Angle270 => Angle::from_degrees(270.0, false),
-        }
-    }
-}
-
-impl ToCss for Orientation {
-    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
-    where
-        W: Write,
-    {
-        // Should agree with Angle::to_css.
-        match *self {
-            Orientation::Angle0 => dest.write_str("0deg"),
-            Orientation::Angle90 => dest.write_str("90deg"),
-            Orientation::Angle180 => dest.write_str("180deg"),
-            Orientation::Angle270 => dest.write_str("270deg"),
-        }
-    }
-}
-
-/// https://drafts.csswg.org/css-images/#propdef-image-orientation
-#[derive(Clone, Copy, Debug, MallocSizeOf, PartialEq)]
-pub enum ImageOrientation {
-    /// 'from-image'
-    FromImage,
-
-    /// '<angle>' | '<angle>? flip'
-    AngleWithFlipped(Orientation, bool),
-}
-
-impl ImageOrientation {
-    #[allow(missing_docs)]
-    pub fn zero() -> Self {
-        ImageOrientation::AngleWithFlipped(Orientation::Angle0, false)
-    }
-}
-
-impl ToCss for ImageOrientation {
-    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
-    where
-        W: Write,
-    {
-        match *self {
-            ImageOrientation::FromImage => dest.write_str("from-image"),
-            ImageOrientation::AngleWithFlipped(angle, flipped) => {
-                angle.to_css(dest)?;
-                if flipped {
-                    dest.write_str(" flip")?;
-                }
-                Ok(())
-            },
-        }
-    }
-}
--- a/servo/components/style/values/computed/mod.rs
+++ b/servo/components/style/values/computed/mod.rs
@@ -46,17 +46,16 @@ pub use self::box_::{AnimationIterationC
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective};
 pub use self::box_::{ScrollSnapType, TouchAction, VerticalAlign, WillChange};
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};
 pub use self::column::ColumnCount;
 pub use self::counters::{Content, ContentItem, CounterIncrement, CounterReset};
 pub use self::effects::{BoxShadow, Filter, SimpleShadow};
 pub use self::flex::FlexBasis;
 pub use self::image::{Gradient, GradientItem, Image, ImageLayer, LineDirection, MozImageRect};
-pub use self::inherited_box::{ImageOrientation, Orientation};
 #[cfg(feature = "gecko")]
 pub use self::gecko::ScrollSnapPoint;
 pub use self::rect::LengthOrNumberRect;
 pub use self::resolution::Resolution;
 pub use super::{Auto, Either, None_};
 pub use super::specified::{BorderStyle, TextDecorationLine};
 pub use self::length::{CalcLengthOrPercentage, Length, LengthOrNumber, LengthOrPercentage};
 pub use self::length::{LengthOrPercentageOrAuto, LengthOrPercentageOrNone, MaxLength, MozLength};
@@ -93,17 +92,16 @@ pub mod color;
 pub mod column;
 pub mod counters;
 pub mod effects;
 pub mod flex;
 pub mod font;
 #[cfg(feature = "gecko")]
 pub mod gecko;
 pub mod image;
-pub mod inherited_box;
 pub mod length;
 pub mod list;
 pub mod outline;
 pub mod percentage;
 pub mod position;
 pub mod rect;
 pub mod resolution;
 pub mod svg;
deleted file mode 100644
--- a/servo/components/style/values/specified/inherited_box.rs
+++ /dev/null
@@ -1,158 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-//! Specified values for inherited box
-
-use cssparser::Parser;
-use parser::{Parse, ParserContext};
-use std::f64::consts::PI;
-use std::fmt::{self, Write};
-use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
-use values::computed;
-use values::computed::{Context, Orientation, ToComputedValue};
-use values::specified::Angle;
-
-/// The specified value of the `image-orientation` property.
-/// https://drafts.csswg.org/css-images/#propdef-image-orientation
-#[derive(Clone, Copy, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo)]
-pub struct ImageOrientation {
-    /// The angle specified, if any
-    pub angle: Option<Angle>,
-
-    /// Whether or not "flip" was specified
-    #[value_info(other_values = "flip,from-image")]
-    pub flipped: bool,
-}
-
-impl ToCss for ImageOrientation {
-    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
-    where
-        W: Write,
-    {
-        if let Some(angle) = self.angle {
-            angle.to_css(dest)?;
-            if self.flipped {
-                dest.write_str(" flip")
-            } else {
-                Ok(())
-            }
-        } else {
-            if self.flipped {
-                dest.write_str("flip")
-            } else {
-                dest.write_str("from-image")
-            }
-        }
-    }
-}
-
-const TWO_PI: f64 = 2.0 * PI;
-
-// According to CSS Content Module Level 3:
-// The computed value of the property is calculated by rounding the specified angle
-// to the nearest quarter-turn, rounding away from 0, then moduloing the value by 1 turn.
-// This mirrors the Gecko implementation in
-// nsStyleImageOrientation::CreateAsAngleAndFlip.
-#[inline]
-fn orientation_of_angle(angle: &computed::Angle) -> Orientation {
-    // Note that `angle` can be negative.
-    let mut rounded_angle = angle.radians64() % TWO_PI;
-    if rounded_angle < 0.0 {
-        // This computation introduces rounding error. Gecko previously
-        // didn't handle the negative case correctly; by branching we can
-        // match Gecko's behavior when it was correct.
-        rounded_angle += TWO_PI;
-    }
-    if rounded_angle < 0.25 * PI {
-        return Orientation::Angle0;
-    }
-    if rounded_angle < 0.75 * PI {
-        return Orientation::Angle90;
-    }
-    if rounded_angle < 1.25 * PI {
-        return Orientation::Angle180;
-    }
-    if rounded_angle < 1.75 * PI {
-        return Orientation::Angle270;
-    }
-    Orientation::Angle0
-}
-
-impl ToComputedValue for ImageOrientation {
-    type ComputedValue = computed::ImageOrientation;
-
-    #[inline]
-    fn to_computed_value(&self, context: &Context) -> computed::ImageOrientation {
-        if let Some(ref angle) = self.angle {
-            let angle = angle.to_computed_value(context);
-            let orientation = orientation_of_angle(&angle);
-            computed::ImageOrientation::AngleWithFlipped(orientation, self.flipped)
-        } else {
-            if self.flipped {
-                computed::ImageOrientation::zero()
-            } else {
-                computed::ImageOrientation::FromImage
-            }
-        }
-    }
-
-    #[inline]
-    fn from_computed_value(computed: &computed::ImageOrientation) -> Self {
-        match *computed {
-            computed::ImageOrientation::FromImage => ImageOrientation {
-                angle: None,
-                flipped: false,
-            },
-
-            computed::ImageOrientation::AngleWithFlipped(ref orientation, flipped) => {
-                ImageOrientation {
-                    angle: Some(orientation.angle()),
-                    flipped: flipped,
-                }
-            },
-        }
-    }
-}
-
-impl Parse for ImageOrientation {
-    // from-image | <angle> | [<angle>? flip]
-    fn parse<'i, 't>(
-        context: &ParserContext,
-        input: &mut Parser<'i, 't>,
-    ) -> Result<Self, ParseError<'i>> {
-        if input
-            .try(|input| input.expect_ident_matching("from-image"))
-            .is_ok()
-        {
-            // Handle from-image
-            Ok(ImageOrientation {
-                angle: None,
-                flipped: false,
-            })
-        } else if input
-            .try(|input| input.expect_ident_matching("flip"))
-            .is_ok()
-        {
-            // Handle flip
-            Ok(ImageOrientation {
-                angle: Some(Angle::zero()),
-                flipped: true,
-            })
-        } else {
-            // Handle <angle> | <angle> flip
-            let angle = input.try(|input| Angle::parse(context, input)).ok();
-            if angle.is_none() {
-                return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
-            }
-
-            let flipped = input
-                .try(|input| input.expect_ident_matching("flip"))
-                .is_ok();
-            Ok(ImageOrientation {
-                angle: angle,
-                flipped: flipped,
-            })
-        }
-    }
-}
--- a/servo/components/style/values/specified/mod.rs
+++ b/servo/components/style/values/specified/mod.rs
@@ -43,17 +43,16 @@ pub use self::box_::{ScrollSnapType, Tou
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};
 pub use self::counters::{Content, ContentItem, CounterIncrement, CounterReset};
 pub use self::effects::{BoxShadow, Filter, SimpleShadow};
 pub use self::flex::FlexBasis;
 #[cfg(feature = "gecko")]
 pub use self::gecko::ScrollSnapPoint;
 pub use self::image::{ColorStop, EndingShape as GradientEndingShape, Gradient};
 pub use self::image::{GradientItem, GradientKind, Image, ImageLayer, MozImageRect};
-pub use self::inherited_box::ImageOrientation;
 pub use self::length::{AbsoluteLength, CalcLengthOrPercentage, CharacterWidth};
 pub use self::length::{FontRelativeLength, Length, LengthOrNumber};
 pub use self::length::{LengthOrPercentage, LengthOrPercentageOrAuto};
 pub use self::length::{LengthOrPercentageOrNone, MaxLength, MozLength};
 pub use self::length::{NoCalcLength, ViewportPercentageLength};
 pub use self::length::{NonNegativeLengthOrPercentage, NonNegativeLengthOrPercentageOrAuto};
 pub use self::list::Quotes;
 #[cfg(feature = "gecko")]
@@ -93,17 +92,16 @@ pub mod column;
 pub mod counters;
 pub mod effects;
 pub mod flex;
 pub mod font;
 #[cfg(feature = "gecko")]
 pub mod gecko;
 pub mod grid;
 pub mod image;
-pub mod inherited_box;
 pub mod length;
 pub mod list;
 pub mod outline;
 pub mod percentage;
 pub mod position;
 pub mod rect;
 pub mod resolution;
 pub mod source_size_list;
--- a/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
+++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
@@ -1,26 +1,29 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>CSS Images Module Level 3: parsing image-orientation with invalid values</title>
 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
-<meta name="assert" content="image-orientation supports only the grammar 'from-image | <angle> | [ <angle>? flip ]'.">
+<meta name="assert" content="image-orientation supports only the grammar 'from-image | none'.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="resources/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_invalid_value("image-orientation", "auto");
-test_invalid_value("image-orientation", "none");
 test_invalid_value("image-orientation", "0");
 test_invalid_value("image-orientation", "0 flip");
 test_invalid_value("image-orientation", "0deg from-image");
 test_invalid_value("image-orientation", "flip 0deg");
 test_invalid_value("image-orientation", "flip from-image");
 test_invalid_value("image-orientation", "from-image 0deg");
 test_invalid_value("image-orientation", "from-image flip");
+test_invalid_value("image-orientation", "30deg");
+test_invalid_value("image-orientation", "flip");
+test_invalid_value("image-orientation", "0deg flip");
+test_invalid_value("image-orientation", "-1.25turn flip");
 </script>
 </body>
 </html>
--- a/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
+++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>CSS Images Module Level 3: parsing image-orientation with valid values</title>
 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
-<meta name="assert" content="image-orientation supports the full grammar 'from-image | <angle> | [ <angle>? flip ]'.">
+<meta name="assert" content="image-orientation supports the full grammar 'from-image | none'.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="resources/parsing-testcommon.js"></script>
 </head>
 <body>
 <script>
 test_valid_value("image-orientation", "from-image");
-test_valid_value("image-orientation", "30deg");
-test_valid_value("image-orientation", "flip", "0deg flip"); // "0deg flip" in Firefox.
-test_valid_value("image-orientation", "-1.25turn flip");
+test_valid_value("image-orientation", "none");
 </script>
 </body>
 </html>