Bug 1473450 - Remove angle values from image-orientation. r=emilio

MozReview-Commit-ID: FB74ILJM6Fm --HG-- extra : rebase_source : 8c13a67086aedad73a642b5125bbb44f48068f5d
2018-07-05 12:04:58 +10:00 · 2018-07-05 12:04:58 +10:00 · e2ce31efc1
--- a/js/src/devtools/rootAnalysis/analyzeHeapWrites.js
+++ b/js/src/devtools/rootAnalysis/analyzeHeapWrites.js
@ -163,9 +163,6 @@ function treatAsSafeArgument(entry, varName, csuName)
        ["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],
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@ -7163,18 +7163,13 @@ nsLayoutUtils::GetWholeImageDestination(const nsSize& aWholeImageSize,

 /* 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();
--- a/layout/base/nsLayoutUtils.h
+++ b/layout/base/nsLayoutUtils.h
@ -61,7 +61,6 @@ class nsPIDOMWindowOuter;
 class imgIRequest;
 class nsIDocument;
 struct nsStyleFont;
-struct nsStyleImageOrientation;
 struct nsOverflowAreas;

 namespace mozilla {
@ -75,6 +74,7 @@ class WritingMode;
 class DisplayItemClip;
 class EffectSet;
 struct ActiveScrolledRoot;
+enum class StyleImageOrientation : uint8_t;
 namespace dom {
 class CanvasRenderingContext2D;
 class DOMRectList;
@ -1990,7 +1990,7 @@ public:
   */
  static already_AddRefed<imgIContainer>
  OrientImage(imgIContainer* aContainer,
-              const nsStyleImageOrientation& aOrientation);
+              const mozilla::StyleImageOrientation& aOrientation);

  /**
   * Determine if any corner radius is of nonzero size
--- a/layout/generic/nsImageFrame.cpp
+++ b/layout/generic/nsImageFrame.cpp
@ -262,7 +262,7 @@ nsImageFrame::DidSetComputedStyle(ComputedStyle* aOldComputedStyle)
    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
--- a/layout/reftests/image/image-orientation-background.html
+++ b/layout/reftests/image/image-orientation-background.html
@ -25,19 +25,14 @@
  <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.
--- a/layout/reftests/image/image-orientation-border-image.html
+++ b/layout/reftests/image/image-orientation-border-image.html
@ -23,19 +23,14 @@
  <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.
--- 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,9 +1,16 @@
 <!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>
--- a/layout/reftests/image/image-orientation-explicit-none.html
+++ 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>
--- a/layout/reftests/image/image-orientation-explicit.html
+++ b/layout/reftests/image/image-orientation-explicit.html
@ -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
@ -9,67 +9,25 @@
    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
@ -6,6 +6,9 @@
      margin:  0px;
      padding: 0px;
    }
+    p {
+      image-orientation: from-image;
+    }
    p:before {
      content: url(image-exif-270-deg-flip.jpg);
    }
@ -13,26 +16,4 @@
 </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>
--- a/layout/reftests/image/image-orientation-none.html
+++ 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
@ -32,76 +32,18 @@ fuzzy(1,1) == image-orientation-from-image.html?90&flip  image-orientation-ref.h
 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
--- a/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html
+++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html
@ -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>
--- a/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg
+++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg
@ -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>
--- a/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html
+++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html
@ -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>
--- a/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg
+++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg
@ -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
@ -9,67 +9,25 @@
    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
@ -10,26 +10,10 @@
 </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
@ -6,45 +6,17 @@
      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
@ -198,62 +198,9 @@ HTTP == svg-stylesheet-external-1.html blue100x100.svg
 # 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
--- a/layout/style/ServoBindings.cpp
+++ b/layout/style/ServoBindings.cpp
@ -1424,27 +1424,6 @@ Gecko_CopyAlternateValuesFrom(nsFont* aDest, const nsFont* aSrc)
  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)
--- a/layout/style/ServoBindings.toml
+++ b/layout/style/ServoBindings.toml
@ -140,7 +140,6 @@ rusty-enums = [
    "nsresult",
    "nsAtom_AtomKind",
    "nsStyleImageLayers_LayerType",
-    "nsStyleImageOrientation_Angles",
    "nsTimingFunction_Type",
    "mozilla::ServoElementSnapshotFlags",
    "mozilla::Side",
@ -156,6 +155,7 @@ rusty-enums = [
    "mozilla::StyleClear",
    "mozilla::StyleComplexColor_Tag",
    "mozilla::StyleFloat",
+    "mozilla::StyleImageOrientation",
    "mozilla::StyleUserModify",
    "mozilla::StyleUserInput",
    "mozilla::StyleBoxDirection",
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@ -3746,27 +3746,6 @@ nsComputedDOMStyle::DoGetForceBrokenImageIcon()
  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");
-    }
-  }
-
-  val->SetString(string);
-  return val.forget();
-}
-
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetDisplay()
 {
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@ -390,7 +390,6 @@ private:
  already_AddRefed<CSSValue> DoGetDisplay();
  already_AddRefed<CSSValue> DoGetContain();
  already_AddRefed<CSSValue> DoGetClip();
-  already_AddRefed<CSSValue> DoGetImageOrientation();
  already_AddRefed<CSSValue> DoGetWillChange();
  already_AddRefed<CSSValue> DoGetOverflow();
  already_AddRefed<CSSValue> DoGetOverflowY();
--- a/layout/style/nsStyleConsts.h
+++ b/layout/style/nsStyleConsts.h
@ -161,6 +161,12 @@ enum class StyleHyphens : uint8_t {
  Auto,
 };

+// image-orientation
+enum class StyleImageOrientation : uint8_t {
+  None,
+  FromImage,
+};
+
 // <shape-radius> for <basic-shape>
 enum class StyleShapeRadius : uint8_t {
  ClosestSide,
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@ -1765,112 +1765,6 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleText
  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);
@ -1883,7 +1777,7 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleVisibility

  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_*
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@ -2931,7 +2931,7 @@ 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?
--- a/servo/components/style/properties/data.py
+++ b/servo/components/style/properties/data.py
@ -285,7 +285,6 @@ class Longhand(object):
                "FontSynthesis",
                "FontWeight",
                "GridAutoFlow",
-                "ImageOrientation",
                "InitialLetter",
                "Integer",
                "JustifyContent",
--- a/servo/components/style/properties/gecko.mako.rs
+++ b/servo/components/style/properties/gecko.mako.rs
@ -4533,64 +4533,7 @@ fn static_assert() {

 </%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"
--- a/servo/components/style/properties/longhands/inherited_box.mako.rs
+++ b/servo/components/style/properties/longhands/inherited_box.mako.rs
@ -76,11 +76,12 @@ ${helpers.single_keyword(
    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",
+)}
--- a/servo/components/style/values/computed/inherited_box.rs
+++ b/servo/components/style/values/computed/inherited_box.rs
@ -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
@ -51,7 +51,6 @@ 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;
@ -98,7 +97,6 @@ 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;
--- a/servo/components/style/values/specified/inherited_box.rs
+++ b/servo/components/style/values/specified/inherited_box.rs
@ -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
@ -48,7 +48,6 @@ pub use self::flex::FlexBasis;
 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};
@ -98,7 +97,6 @@ pub mod font;
 pub mod gecko;
 pub mod grid;
 pub mod image;
-pub mod inherited_box;
 pub mod length;
 pub mod list;
 pub mod outline;
--- 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
@ -5,7 +5,7 @@
 <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>
@ -13,7 +13,6 @@
 <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");
@ -21,6 +20,13 @@ 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");
+
+// An older version of the spec allowed [ <angle> | <angle>? flip ] values,
+// so test that we no longer support them.
+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
@ -5,7 +5,7 @@
 <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>
@ -13,9 +13,7 @@
 <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>