Bug 1473450 - Remove angle values from image-orientation. r=emilio
authorCameron McCormack <cam@mcc.id.au>
Thu, 05 Jul 2018 12:04:58 +1000
changeset 425746 6a6bef7a9177f97f6995139c1f0ebaa3a613dfbf
parent 425745 101f97abc1d417f8fe1dfcf67c78e4d2680f2502
child 425747 509e37adf069e9f73d68327b916255e16137a6ef
push id34264
push usershindli@mozilla.com
push dateWed, 11 Jul 2018 09:41:50 +0000
treeherdermozilla-central@5a5c74e9ccc0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1473450
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1473450 - Remove angle values from image-orientation. r=emilio MozReview-Commit-ID: FB74ILJM6Fm
devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
devtools/shared/css/generated/properties-db.js
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/image-srcset-orientation-1x-ref.html
layout/reftests/image/image-srcset-orientation-1x.html
layout/reftests/image/image-srcset-orientation-2x-ref.html
layout/reftests/image/image-srcset-orientation-2x.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/nsComputedDOMStyle.h
layout/style/nsStyleConsts.h
layout/style/nsStyleStruct.h
layout/style/test/property_database.js
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/meta/MANIFEST.json
testing/web-platform/tests/css/css-images/img-orient-012.xht
testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
--- a/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
@@ -4,30 +4,29 @@
 
 "use strict";
 
 // Test cycling angle units in the rule view.
 
 const TEST_URI = `
   <style type="text/css">
     body {
-      image-orientation: 1turn;
+      filter: hue-rotate(1turn);
     }
     div {
-      image-orientation: 180deg;
+      filter: hue-rotate(180deg);
     }
   </style>
   <body><div>Test</div>cycling angle units in the rule view!</body>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const {inspector, view} = await openRuleView();
-  const container = getRuleViewProperty(
-    view, "body", "image-orientation").valueSpan;
+  const container = getRuleViewProperty(view, "body", "filter").valueSpan;
   await checkAngleCycling(container, view);
   await checkAngleCyclingPersist(inspector, view);
 });
 
 async function checkAngleCycling(container, view) {
   const valueNode = container.querySelector(".ruleview-angle");
   const win = view.styleWindow;
 
@@ -50,35 +49,34 @@ async function checkAngleCycling(contain
 
   for (const test of tests) {
     await checkSwatchShiftClick(container, win, test.value, test.comment);
   }
 }
 
 async function checkAngleCyclingPersist(inspector, view) {
   await selectNode("div", inspector);
-  let container = getRuleViewProperty(
-    view, "div", "image-orientation").valueSpan;
+  let container = getRuleViewProperty(view, "div", "filter").valueSpan;
   let valueNode = container.querySelector(".ruleview-angle");
   const win = view.styleWindow;
 
   is(valueNode.textContent, "180deg", "Angle displayed as a degree value.");
 
   await checkSwatchShiftClick(container, win,
     `${Math.round(Math.PI * 10000) / 10000}rad`,
     "Angle displayed as a radian value.");
 
   // Select the body and reselect the div to see
   // if the new angle unit persisted
   await selectNode("body", inspector);
   await selectNode("div", inspector);
 
   // We have to query for the container and the swatch because
   // they've been re-generated
-  container = getRuleViewProperty(view, "div", "image-orientation").valueSpan;
+  container = getRuleViewProperty(view, "div", "filter").valueSpan;
   valueNode = container.querySelector(".ruleview-angle");
   is(valueNode.textContent, `${Math.round(Math.PI * 10000) / 10000}rad`,
     "Angle still displayed as a radian value.");
 }
 
 async function checkSwatchShiftClick(container, win, expectedValue, comment) {
   const swatch = container.querySelector(".ruleview-angleswatch");
   const valueNode = container.querySelector(".ruleview-angle");
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -6192,20 +6192,20 @@ exports.CSS_PROPERTIES = {
   },
   "image-orientation": {
     "isInherited": true,
     "subproperties": [
       "image-orientation"
     ],
     "supports": [],
     "values": [
-      "flip",
       "from-image",
       "inherit",
       "initial",
+      "none",
       "unset"
     ]
   },
   "image-rendering": {
     "isInherited": true,
     "subproperties": [
       "image-rendering"
     ],
--- 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
@@ -7166,28 +7166,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
@@ -257,17 +257,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>
deleted file mode 100644
--- a/layout/reftests/image/image-srcset-orientation-1x-ref.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-<!DOCTYPE html>
-<html reftest-zoom="1">
-<head>
-    <style>img { image-orientation: 90deg flip; }</style>
-</head>
-<body>
-  <img src="100.png" width="100">
-  <p>Make sure orientation is respected when using both srcset and fallback-src selections</p>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/image/image-srcset-orientation-1x.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-<!DOCTYPE html>
-<html reftest-zoom="1" class="reftest-wait">
-<head>
-    <style>img { image-orientation: 90deg flip; }</style>
-    <script type="application/javascript">
-    // reftest-zoom is only applied at onload, so ensure the source-selection
-    // has happened after that
-    function clearWait() {
-      document.documentElement.classList.remove("reftest-wait");
-    }
-    window.addEventListener("load", function() {
-      setTimeout(function() {
-        var img = document.querySelector("img");
-        img.onload = clearWait;
-        img.onerror = clearWait;
-        img.src = img.src;
-      }, 0);
-    });
-  </script>
-</head>
-<body>
-  <img srcset="200.png 2x" src="100.png">
-  <p>Make sure orientation is respected when using both srcset and fallback-src selections</p>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/image/image-srcset-orientation-2x-ref.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-<!DOCTYPE html>
-<html reftest-zoom="2">
-<head>
-    <style>img { image-orientation: 90deg flip; }</style>
-</head>
-<body>
-  <img src="200.png" width="100">
-  <p>Make sure orientation is respected when using both srcset and fallback-src selections</p>
-</body>
-</html>
deleted file mode 100644
--- a/layout/reftests/image/image-srcset-orientation-2x.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-<!DOCTYPE html>
-<html reftest-zoom="2" class="reftest-wait">
-<head>
-    <style>img { image-orientation: 90deg flip; }</style>
-    <script type="application/javascript">
-    // reftest-zoom is only applied at onload, so ensure the source-selection
-    // has happened after that
-    function clearWait() {
-      document.documentElement.classList.remove("reftest-wait");
-    }
-    window.addEventListener("load", function() {
-      setTimeout(function() {
-        var img = document.querySelector("img");
-        img.onload = clearWait;
-        img.onerror = clearWait;
-        img.src = img.src;
-      }, 0);
-    });
-  </script>
-</head>
-<body>
-  <img srcset="200.png 2x" src="100.png">
-  <p>Make sure orientation is respected when using both srcset and fallback-src selections</p>
-</body>
-</html>
--- 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
@@ -114,18 +56,16 @@ random-if(/^Windows\x20NT\x206\.1/.test(
 == image-srcset-basic-selection-width-10x.html image-srcset-basic-selection-width-10x-ref.html
 == image-srcset-basic-selection-width-2x.html image-srcset-basic-selection-width-2x-ref.html
 == image-srcset-basic-selection-width-1x.html image-srcset-basic-selection-width-1x-ref.html
 == image-srcset-default-2x.html image-srcset-default-2x-ref.html
 == image-srcset-default-1x.html image-srcset-default-1x-ref.html
 == image-srcset-default-src-2x.html image-srcset-default-src-2x-ref.html
 == image-srcset-default-src-1x.html image-srcset-default-src-1x-ref.html
 == image-srcset-isize.html image-srcset-isize-ref.html
-== image-srcset-orientation-2x.html image-srcset-orientation-2x-ref.html
-== image-srcset-orientation-1x.html image-srcset-orientation-1x-ref.html
 == image-srcset-svg-3x.html image-srcset-svg-3x-ref.html
 == image-srcset-svg-2x.html image-srcset-svg-2x-ref.html
 == image-srcset-svg-1x.html image-srcset-svg-1x-ref.html
 == image-srcset-svg-default-2x.html image-srcset-svg-default-2x-ref.html
 == image-srcset-svg-default-1x.html image-srcset-svg-default-1x-ref.html
 
 == image-resize-percent-height.html image-resize-ref.html
 == image-resize-percent-width.html image-resize-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
@@ -3742,37 +3742,16 @@ already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetForceBrokenImageIcon()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   val->SetNumber(StyleUIReset()->mForceBrokenImageIcon);
   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()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
   val->SetIdent(nsCSSProps::ValueToKeywordEnum(StyleDisplay()->mDisplay,
                                                nsCSSProps::kDisplayKTable));
   return val.forget();
 }
 
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -385,17 +385,16 @@ private:
 
   /* Direction properties */
 
   /* Display properties */
   already_AddRefed<CSSValue> DoGetBinding();
   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();
   already_AddRefed<CSSValue> DoGetOverflowClipBoxBlock();
   already_AddRefed<CSSValue> DoGetOverflowClipBoxInline();
   already_AddRefed<CSSValue> DoGetTouchAction();
   already_AddRefed<CSSValue> DoGetTransform();
   already_AddRefed<CSSValue> DoGetTranslate();
--- 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/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -7126,83 +7126,19 @@ if (IsCSSPropertyPrefEnabled("layout.css
   };
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.image-orientation.enabled")) {
   gCSSProperties["image-orientation"] = {
     domProp: "imageOrientation",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [
-      "0deg",
-      "0grad",
-      "0rad",
-      "0turn",
-
-      // Rounded initial values.
-      "15deg",
-      "360deg",
-    ],
-    other_values: [
-      "-90deg",
-      "0deg flip",
-      "90deg",
-      "90deg flip",
-      "180deg",
-      "180deg flip",
-      "270deg",
-      "270deg flip",
-      "flip",
-      "from-image",
-
-      // Grad units.
-      "0grad flip",
-      "100grad",
-      "100grad flip",
-      "200grad",
-      "200grad flip",
-      "300grad",
-      "300grad flip",
-
-      // Radian units.
-      "0rad flip",
-      "1.57079633rad",
-      "1.57079633rad flip",
-      "3.14159265rad",
-      "3.14159265rad flip",
-      "4.71238898rad",
-      "4.71238898rad flip",
-
-      // Turn units.
-      "0turn flip",
-      "0.25turn",
-      "0.25turn flip",
-      "0.5turn",
-      "0.5turn flip",
-      "0.75turn",
-      "0.75turn flip",
-
-      // Rounded values.
-      "-45deg flip",
-      "65deg flip",
-      "400deg flip",
-    ],
-    invalid_values: [
-      "none",
-      "0deg none",
-      "flip 0deg",
-      "flip 0deg",
-      "0",
-      "0 flip",
-      "flip 0",
-      "0deg from-image",
-      "from-image 0deg",
-      "flip from-image",
-      "from-image flip",
-    ]
+    initial_values: [ "none" ],
+    other_values: [ "from-image" ],
+    invalid_values: [ "0", "0deg" ]
   };
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.initial-letter.enabled")) {
   gCSSProperties["initial-letter"] = {
     domProp: "initialLetter",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -2930,17 +2930,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
@@ -4528,74 +4528,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
@@ -71,16 +71,17 @@
     "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/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -404559,22 +404559,16 @@
     ]
    ],
    "css/css-images/image-fit-006.xht": [
     [
      "/css/css-images/image-fit-006.xht",
      {}
     ]
    ],
-   "css/css-images/img-orient-012.xht": [
-    [
-     "/css/css-images/img-orient-012.xht",
-     {}
-    ]
-   ],
    "css/css-lists/list-style-type-armenian-002.xht": [
     [
      "/css/css-lists/list-style-type-armenian-002.xht",
      {}
     ]
    ],
    "css/css-lists/list-style-type-armenian-003.xht": [
     [
@@ -518158,20 +518152,16 @@
   "css/css-images/image-fit-001.xht": [
    "868d9469f57e6013a024efa5e04ef2455d97296e",
    "visual"
   ],
   "css/css-images/image-fit-006.xht": [
    "223fe97a140e0cfb52709f02c72d8d32c5e6ae95",
    "visual"
   ],
-  "css/css-images/img-orient-012.xht": [
-   "6075765bed0ae20451c82a7d9802e7453ae8fcdc",
-   "visual"
-  ],
   "css/css-images/linear-gradient-1.html": [
    "fc00201e827325dc3897b789d0e6be920eb4e38b",
    "reftest"
   ],
   "css/css-images/linear-gradient-2.html": [
    "00eadc3f3b8e6debd50af1455f781591d32e56b2",
    "reftest"
   ],
@@ -518183,21 +518173,21 @@
    "5bae73095070f46bc8f38a58fb3808d473d60058",
    "testharness"
   ],
   "css/css-images/parsing/gradient-position-valid.html": [
    "b939e0d37a56ee607a4b7b4c59721c8facabb049",
    "testharness"
   ],
   "css/css-images/parsing/image-orientation-invalid.html": [
-   "d73028ae4b50467e1a04a80c9b0a33a1f195ba5b",
+   "4e0fc11d78b4e9aa36d558d16e6d3740ef01d6a6",
    "testharness"
   ],
   "css/css-images/parsing/image-orientation-valid.html": [
-   "07a4e4f0d471c1482ec55c1237c39791590158e8",
+   "5f7c8f0abf80cb663ff4bd76cfeef5e76f5814b4",
    "testharness"
   ],
   "css/css-images/parsing/image-rendering-invalid.html": [
    "b053afe022c8928c8c18dc4e2dbba3c7224fe8c1",
    "testharness"
   ],
   "css/css-images/parsing/image-rendering-valid.html": [
    "ee2bd095839ad643e8e1fc4e9924d11ee8befc22",
deleted file mode 100644
--- a/testing/web-platform/tests/css/css-images/img-orient-012.xht
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
-  <title>CSS Test: Image Orientation - Negative Values</title>
-  <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
-  <link rel="help" href="http://www.w3.org/TR/css3-images/#image-orientation"/>
-  <meta name="assert" content="A negative value for 'image-orientation' rotates the image to the left (in a counter-clockwise direction) by the given number of degrees. "/>
-  <style type="text/css"><![CDATA[
-   img.turn { image-orientation: -90deg; }
-  ]]></style>
- </head>
- <body>
-  	<div>
-		<p>This arrow should appear sideways, with the tip of the arrow pointing left.</p>
-		<img src="support/intrinsic-size.png" alt="FAIL: missing image" class="turn" />
-	</div>
- </body>
-</html>
\ No newline at end of file
--- 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,32 @@
 <!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");
+
+// 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
@@ -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>
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -706,17 +706,17 @@ const gCSSProperties = {
     // https://drafts.csswg.org/css-text-3/#propdef-hyphens
     types: [
       { type: 'discrete', options: [ [ 'manual', 'auto' ] ] }
     ]
   },
   'image-orientation': {
     // https://drafts.csswg.org/css-images-3/#propdef-image-orientation
     types: [
-      { type: 'discrete', options: [ [ '0deg', '90deg' ] ] }
+      { type: 'discrete', options: [ [ 'none', 'from-image' ] ] }
     ]
   },
   'image-rendering': {
     // https://drafts.csswg.org/css-images-3/#propdef-image-rendering
     types: [
     ]
   },
   'ime-mode': {