Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-images/image-orientation
parent: Initial commit. (diff)
download: firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
78 files changed, 2382 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html
new file mode 100644
index 0000000000..866e945960
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to background-image</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-image-ref.html">
+<meta name=fuzzy content="0-3;0-50">
+<style>
+div { width: 100px; height: 50px; background-image: url(support/exif-orientation-2-ur.jpg); }
+.no-orient { image-orientation: none; }
+</style>
+<div></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html
new file mode 100644
index 0000000000..d90035728b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background positions</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-position-ref.html">
+<meta name="fuzzy" content="0-5;0-50">
+<style>
+    .exif-2 {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 50px;
+        height: 50PX;
+        background-color: grey;
+        background-image: url(support/exif-orientation-2-ur.jpg);
+        background-repeat: no-repeat;
+        background-position: -30px -20px;
+    }
+
+    .exif-6 {
+        position: absolute;
+        top: 10px;
+        left: 70px;
+        width: 50px;
+        height: 50PX;
+        background-color: grey;
+        background-image: url(support/exif-orientation-6-ru.jpg);
+        background-repeat: no-repeat;
+        background-position: -20px -30px;
+    }
+
+</style>
+</head>
+<body>
+    <div class="exif-2">
+    </div>
+    <div class="exif-6">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html
new file mode 100644
index 0000000000..d7ddabf966
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-properties-border-radius-ref.html">
+<meta name=fuzzy content="0-3;0-331">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(support/exif-orientation-5-lu.jpg);
+        background-repeat: no-repeat;
+        border-radius: 5px;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html
new file mode 100644
index 0000000000..431fba1330
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-background-properties-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-313">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(support/exif-orientation-5-lu.jpg);
+        background-repeat: no-repeat;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html
new file mode 100644
index 0000000000..29ff38cc48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to border images</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-border-image-ref.html">
+<meta name="fuzzy" content="0-16;0-80">
+<style>
+div {
+  width: 100px;
+  height: 50px;
+  border: 10px solid black;
+  border-image: url(support/exif-orientation-2-ur.jpg) 10;
+}
+.no-orient { image-orientation: none; }
+</style>
+<div></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html
new file mode 100644
index 0000000000..00a80d46ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to cursor</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="flags" content="interact">
+<style>
+div { width: 100px; height: 100px; border: solid blue; margin-left: 64px; }
+.orient { cursor: url(support/cursor-8-llo.jpg) 33 0, default; }
+.no-orient { cursor: url(support/cursor-8-llo.jpg) 64 33, default; image-orientation: none; }
+</style>
+<p>The test passes if</p>
+<ul>
+  <li>when moved inside either of the blue boxes, the cursor is shown as a
+  black arrow on a white background, with the point of the arrow at the current
+  cursor location</li>
+  <li>in the first box, the cursor points up and to the right</li>
+  <li>in the second box, the cursor points down and to the right</li>
+</ul>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html
new file mode 100644
index 0000000000..3fefbd073a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation defaults to from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-default-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       no image-orientation property is given.</p>
+    <div>
+        <img src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html
new file mode 100644
index 0000000000..85d807e398
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: late EXIF data is ignored</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#url-metadata">
+<link rel="match" href="reference/image-orientation-exif-png-ref.html">
+<img src="support/F-exif-early.png">
+<img src="support/F-exif-late.png">
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html
new file mode 100644
index 0000000000..b42b010d62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: change from image-orientation: none to from-image with will-change: transform</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;}
+    img {
+        will-change: transform;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+    function runTest() {
+        for (var i = 1; i <= 9; i++) {
+            document.getElementById("img" + i).style.imageOrientation = "from-image";
+        }
+    }
+</script>
+</head>
+<body onload="runTest()">
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img id="img1" src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img id="img2" src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img id="img3" src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img id="img4" src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img id="img5" src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img id="img6" src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img id="img7" src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img id="img8" src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img id="img9" src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html
new file mode 100644
index 0000000000..39f23621a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: change from image-orientation: from-image to none with will-change: transform</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123">
+<style>
+    body {
+        overflow: hidden;
+    }
+    img {
+        will-change: transform;
+        image-orientation: from-image;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+    function runTest() {
+        for (var i = 1; i <= 9; i++) {
+            document.getElementById("img" + i).style.imageOrientation = "none";
+        }
+    }
+</script>
+</head>
+<body onload="runTest()">
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div>
+        <img id="img1" src="support/exif-orientation-1-ul.jpg"/>
+    </div>
+    <div>
+        <img id="img2" src="support/exif-orientation-2-ur.jpg"/>
+    </div>
+    <div>
+        <img id="img3" src="support/exif-orientation-3-lr.jpg"/>
+    </div>
+    <div>
+        <img id="img4" src="support/exif-orientation-4-lol.jpg"/>
+    </div>
+    <div>
+        <img id="img5" src="support/exif-orientation-5-lu.jpg"/>
+    </div>
+    <div>
+        <img id="img6" src="support/exif-orientation-6-ru.jpg"/>
+    </div>
+    <div>
+        <img id="img7" src="support/exif-orientation-7-rl.jpg"/>
+    </div>
+    <div>
+        <img id="img8" src="support/exif-orientation-8-llo.jpg"/>
+    </div>
+    <div>
+        <img id="img9" src="support/exif-orientation-9-u.jpg"/>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html
new file mode 100644
index 0000000000..4e5032779d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image with will-change: transform</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    img {
+        will-change: transform;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html
new file mode 100644
index 0000000000..a8ded7c226
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation:none computed style</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+function run_tests() {
+    test(function() {
+        for (var i = 1; i <= 4; i++) {
+            var el = document.getElementById("img" + i);
+            var computedStyle = window.getComputedStyle(el);
+            assert_equals(computedStyle.width, "100px");
+            assert_equals(computedStyle.height, "50px");
+            assert_equals(computedStyle.imageOrientation, "from-image");
+        }
+        for (var i = 5; i <= 8; i++) {
+            var el = document.getElementById("img" + i);
+            var computedStyle = window.getComputedStyle(el);
+            assert_equals(computedStyle.width, "50px");
+            assert_equals(computedStyle.height, "100px");
+            assert_equals(computedStyle.imageOrientation, "from-image");
+        }
+        var el = document.getElementById("img9");
+        var computedStyle = window.getComputedStyle(el);
+        assert_equals(computedStyle.width, "100px");
+        assert_equals(computedStyle.height, "50px");
+        assert_equals(computedStyle.imageOrientation, "from-image");
+      }, "image-orientation:from-image computed style reports correct values");
+}
+</script>
+</head>
+<body onload="run_tests()">
+    <div><img id="img1" src="support/exif-orientation-1-ul.jpg"/></div>
+    <div><img id="img2" src="support/exif-orientation-2-ur.jpg"/></div>
+    <div><img id="img3" src="support/exif-orientation-3-lr.jpg"/></div>
+    <div><img id="img4" src="support/exif-orientation-4-lol.jpg"/></div>
+    <div><img id="img5" src="support/exif-orientation-5-lu.jpg"/></div>
+    <div><img id="img6" src="support/exif-orientation-6-ru.jpg"/></div>
+    <div><img id="img7" src="support/exif-orientation-7-rl.jpg"/></div>
+    <div><img id="img8" src="support/exif-orientation-8-llo.jpg"/></div>
+    <div><img id="img9" src="support/exif-orientation-9-u.jpg"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html
new file mode 100644
index 0000000000..a5be8c2277
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image for content images</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-content-images-ref.html">
+<meta name=fuzzy content="0-5;0-250">
+<style>
+    div.image {
+        display: inline-block;
+    }
+    div.container {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+        image-orientation: from-image;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+        background-repeat: no-repeat;
+    }
+    body {
+        overflow: hidden;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-1-ul.jpg)"></div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-2-ur.jpg)"></div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-3-lr.jpg)"></div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-4-lol.jpg)"></div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-5-lu.jpg)"></div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <br>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-9-u.jpg)"></div>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html
new file mode 100644
index 0000000000..d97492b7f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: change from image-orientation: none to from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;
+    }
+    img {
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+    function runTest() {
+        for (var i = 1; i <= 9; i++) {
+            document.getElementById("img" + i).style.imageOrientation = "from-image";
+        }
+    }
+</script>
+</head>
+<body onload="runTest()">
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img id="img1" src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img id="img2" src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img id="img3" src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img id="img4" src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img id="img5" src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img id="img6" src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img id="img7" src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img id="img8" src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img id="img9" src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html
new file mode 100644
index 0000000000..ee4c3ff1fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: change from image-orientation: from-image to none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123">
+<style>
+    body {
+        overflow: hidden;
+    }
+    img {
+        image-orientation: from-image;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+    function runTest() {
+        for (var i = 1; i <= 9; i++) {
+            document.getElementById("img" + i).style.imageOrientation = "none";
+        }
+    }
+</script>
+</head>
+<body onload="runTest()">
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div>
+        <img id="img1" src="support/exif-orientation-1-ul.jpg"/>
+    </div>
+    <div>
+        <img id="img2" src="support/exif-orientation-2-ur.jpg"/>
+    </div>
+    <div>
+        <img id="img3" src="support/exif-orientation-3-lr.jpg"/>
+    </div>
+    <div>
+        <img id="img4" src="support/exif-orientation-4-lol.jpg"/>
+    </div>
+    <div>
+        <img id="img5" src="support/exif-orientation-5-lu.jpg"/>
+    </div>
+    <div>
+        <img id="img6" src="support/exif-orientation-6-ru.jpg"/>
+    </div>
+    <div>
+        <img id="img7" src="support/exif-orientation-7-rl.jpg"/>
+    </div>
+    <div>
+        <img id="img8" src="support/exif-orientation-8-llo.jpg"/>
+    </div>
+    <div>
+        <img id="img9" src="support/exif-orientation-9-u.jpg"/>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html
new file mode 100644
index 0000000000..a07db17a5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image in embedded content</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-embedded-content-ref.html">
+<meta name=fuzzy content="0-5;0-200">
+<style>
+    iframe {
+        display: inline-block;
+        width: 120px;
+        height: 110px;
+        vertical-align: top;
+        image-orientation: from-image;
+    }
+    embed {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+    object {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because image
+       documents always respect the orientation, regardless of the image-orientation
+       property.</p>
+    <iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="support/exif-orientation-2-ur.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="support/exif-orientation-3-lr.jpg" width="120" height="110px"></object>
+    <iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="support/exif-orientation-6-ru.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="support/exif-orientation-7-rl.jpg" width="120" height="110px"></object>
+    <iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html
new file mode 100644
index 0000000000..00d87fc406
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-from-image-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img src="support/exif-orientation-1-ul.jpg"/>
+        <br>Normal
+    </div>
+    <div>
+        <img src="support/exif-orientation-2-ur.jpg"/>
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="support/exif-orientation-3-lr.jpg"/>
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="support/exif-orientation-4-lol.jpg"/>
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-5-lu.jpg"/>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-6-ru.jpg"/>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="support/exif-orientation-7-rl.jpg"/>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="support/exif-orientation-8-llo.jpg"/>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="support/exif-orientation-9-u.jpg"/>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html
new file mode 100644
index 0000000000..69cfb5ceae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does not apply to iframe contents</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-iframe-ref.html">
+<style>
+.no-orient { image-orientation: none; }
+</style>
+<iframe src="support/exif-orientation-2-ur.jpg"></iframe>
+<iframe src="support/exif-orientation-2-ur.jpg" class="no-orient"></iframe>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html
new file mode 100644
index 0000000000..5551eb9384
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-img-object-fit-ref.html">
+<meta name=fuzzy content="0-5;0-375">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    img {
+        position: absolute;
+        vertical-align: top;
+    }
+    .cover {
+        object-fit: cover;
+        top: 10px;
+    }
+    .contain {
+        object-fit: contain;
+        top: 150px;
+    }
+    .wide {
+        width: 100px;
+        height: 50px;
+        left: 10px;
+    }
+    .tall {
+        width: 50px;
+        height: 100px;
+        left: 150px;
+    }
+</style>
+</head>
+<body>
+  <img class="cover wide" src="support/exif-orientation-5-lu.jpg"/>
+  <img class="cover tall" src="support/exif-orientation-5-lu.jpg"/>
+  <img class="contain wide" src="support/exif-orientation-5-lu.jpg"/>
+  <img class="contain tall" src="support/exif-orientation-5-lu.jpg"/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html
new file mode 100644
index 0000000000..ac735626db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does apply to list-style-image</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-list-style-image-ref.html">
+<meta name=fuzzy content="0-3;0-50">
+<style>
+ul { margin-left: 100px; list-style-image: url(support/exif-orientation-2-ur.jpg); }
+.no-orient { image-orientation: none; }
+</style>
+<ul><li>&nbsp;</li></ul>
+<ul class="no-orient"><li>&nbsp;</li></ul>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html
new file mode 100644
index 0000000000..7bae0cf4dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation does not apply to mask-image</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-mask-image-ref.html">
+<meta name=fuzzy content="0-2;0-26">
+<style>
+div {
+  width: 100px;
+  height: 50px;
+  background: blue;
+  mask-image: url(support/exif-orientation-2-ur.jpg);
+  mask-mode: luminance;
+}
+.no-orient { image-orientation: none; }
+</style>
+<div></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html
new file mode 100644
index 0000000000..49919288b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none computed style</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+<script>
+function run_tests() {
+    test(function() {
+        for (var i = 1; i <= 9; i++) {
+            var el = document.getElementById("img" + i);
+            var computedStyle = window.getComputedStyle(el);
+            assert_equals(computedStyle.width, "100px");
+            assert_equals(computedStyle.height, "50px");
+            assert_equals(computedStyle.imageOrientation, "none");
+        }
+      }, "image-orientation:none computed style reports correct values");
+
+}
+</script>
+</head>
+<body onload="run_tests()">
+    <div><img id="img1" src="support/exif-orientation-1-ul.jpg"/></div>
+    <div><img id="img2" src="support/exif-orientation-2-ur.jpg"/></div>
+    <div><img id="img3" src="support/exif-orientation-3-lr.jpg"/></div>
+    <div><img id="img4" src="support/exif-orientation-4-lol.jpg"/></div>
+    <div><img id="img5" src="support/exif-orientation-5-lu.jpg"/></div>
+    <div><img id="img6" src="support/exif-orientation-6-ru.jpg"/></div>
+    <div><img id="img7" src="support/exif-orientation-7-rl.jpg"/></div>
+    <div><img id="img8" src="support/exif-orientation-8-llo.jpg"/></div>
+    <div><img id="img9" src="support/exif-orientation-9-u.jpg"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html
new file mode 100644
index 0000000000..ed1657505c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none for content images</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-content-images-ref.html">
+<meta name=fuzzy content="0-5;0-150">
+<style>
+    div.image {
+        display: inline-block;
+    }
+    div.container {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+        image-orientation: none;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+        background-repeat: no-repeat;
+    }
+    body {
+        overflow: hidden;
+    }
+</style>
+</head>
+<body>
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-2-ur.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-3-lr.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-4-lol.jpg)"></div>
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-5-lu.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div>
+    </div>
+    <br>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img>
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(support/exif-orientation-9-u.jpg)"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html
new file mode 100644
index 0000000000..9753e9ab37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<script src=/common/get-host-info.sub.js></script>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<link rel="match" href="reference/image-orientation-none-cross-origin-canvas-ref.html">
+<style>
+    img {display: none}
+    canvas {
+        width: 20px;
+        height: 20px;
+        margin: 10px;
+    }
+</style>
+<script>
+    const src1 = 'support/exif-orientation-1-ul.jpg';
+    const src2 = 'support/exif-orientation-3-lr.jpg';
+    function toCors(src) {
+        return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
+    }
+    function createImage({cors, src, orientation, shouldBeRotated}) {
+        const img = document.createElement('img');
+        img.src = src
+        if (cors)
+            img.src = toCors(img.src)
+        img.style.imageOrientation = orientation
+        img.style.display = 'none'
+        img.dataset.shouldBeRotated = shouldBeRotated
+        document.body.appendChild(img)
+        return img
+    }
+
+    window.onload = () => {
+        const images = [
+            createImage({cors: true, src: src1, orientation: 'from-image', shouldBeRotated: false}),
+            createImage({cors: true, src: src1, orientation: 'none', shouldBeRotated: false}),
+            createImage({cors: true, src: src2, orientation: 'from-image', shouldBeRotated: true}),
+            createImage({cors: true, src: src2, orientation: 'none', shouldBeRotated: true}),
+            createImage({cors: false, src: src1, orientation: 'from-image', shouldBeRotated: false}),
+            createImage({cors: false, src: src1, orientation: 'none', shouldBeRotated: false}),
+            createImage({cors: false, src: src2, orientation: 'from-image', shouldBeRotated: true}),
+            createImage({cors: false, src: src2, orientation: 'none', shouldBeRotated: false}),
+        ]
+
+        const dimension = 1
+
+        images.forEach(image => {
+            const canvas = document.createElement('canvas')
+            canvas.width = canvas.height = dimension
+            // The source of image-orientation preference for canvas drawImage
+            // is currently not standardized.
+            // See https://github.com/w3c/csswg-drafts/issues/4666
+            canvas.style.imageOrientation = image.style.imageOrientation
+            document.body.appendChild(canvas)
+            const ctx = canvas.getContext('2d')
+            const sx = image.dataset.shouldBeRotated === 'true' ? image.width * .8 : 0
+            const sy = image.dataset.shouldBeRotated === 'true' ? image.height * .8 : 0
+            ctx.drawImage(image, sx, sy, 1, 1, 0, 0, dimension, dimension)
+        })
+    }
+
+</script>
+</head>
+<body>
+    <p>You should see 8 green rectangles, no red.</p>
+</body>
+<script>
+    [src1, src2].forEach(src => {
+        const img = document.createElement('img')
+        img.src = src
+        const imgCors = document.createElement('img')
+        imgCors.src = src
+        imgCors.src = toCors(imgCors.src)
+        document.body.appendChild(img)
+        document.body.appendChild(imgCors)
+    })
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html
new file mode 100644
index 0000000000..4fc9474edf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>CSS Images: image-orientation, CORS detection for SVG content</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<link rel="match" href="reference/image-orientation-none-cross-origin-svg-ref.html">
+<script src="/common/get-host-info.sub.js"></script>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+    .image {
+        width: 40px;
+        height: 20px;
+        position: fixed;
+    }
+</style>
+<script>
+    function toCors(src) {
+        return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
+    }
+
+    window.onload = () => {
+        const images = [
+            {
+                id_image: "cors_from_image",
+                id_foreign: "cors_from_foreign",
+                cors: true,
+                orientation: 'from-image',
+                shouldBeRotated: true,
+                left: '10px'
+            },
+            {
+                id_image: "cors_none_image",
+                id_foreign: "cors_none_foreign",
+                cors: true,
+                orientation: 'none',
+                shouldBeRotated: true,
+                left: '60px'
+            },
+            {
+                id_image: "same_from_image",
+                id_foreign: "same_from_foreign",
+                cors: false,
+                orientation: 'from-image',
+                shouldBeRotated: true,
+                left: '110px'
+            },
+            {
+                id_image: "same_none_image",
+                id_foreign: "same_none_foreign",
+                cors: false,
+                orientation: 'none',
+                shouldBeRotated: false,
+                left: '160px'
+            },
+        ];
+
+        images.forEach(data => {
+            if (data.cors) {
+                image_src = document.getElementById("cors_img");
+                image = document.getElementById(data.id_image);
+                image.setAttribute("href", image_src.src);
+                foreign = document.getElementById(data.id_foreign);
+                foreign.src = image_src.src;
+            } else {
+                image_src = document.getElementById("same_img");
+                image = document.getElementById(data.id_image);
+                image.setAttribute("href", image_src.src);
+                foreign = document.getElementById(data.id_foreign);
+                foreign.src = image_src.src;
+            }
+
+            const canvas_svg_image = document.createElement('canvas');
+            canvas_svg_image.className = "image";
+            canvas_svg_image.width = canvas_svg_image.height = 1;
+            canvas_svg_image.style.left = data.left;
+            canvas_svg_image.style.top = "140px";
+            // The source of image-orientation preference for canvas drawImage
+            // is currently not standardized.
+            // See https://github.com/w3c/csswg-drafts/issues/4666
+            canvas_svg_image.style.imageOrientation = data.orientation;
+            document.body.appendChild(canvas_svg_image);
+            ctx = canvas_svg_image.getContext('2d');
+            sx = data.shouldBeRotated ? 80 : 0;
+            sy = data.shouldBeRotated ? 40 : 0;
+            ctx.drawImage(image, sx, sy, 1, 1, 0, 0, 1, 1);
+
+            const canvas_svg_foreign = document.createElement('canvas');
+            canvas_svg_foreign.className = "image";
+            canvas_svg_foreign.width = canvas_svg_foreign.height = 1;
+            canvas_svg_foreign.style.left = data.left;
+            canvas_svg_foreign.style.top = "170px";
+            canvas_svg_foreign.style.imageOrientation = data.orientation;
+            document.body.appendChild(canvas_svg_foreign);
+            ctx = canvas_svg_foreign.getContext('2d');
+            sx = data.shouldBeRotated ? 80 : 0;
+            sy = data.shouldBeRotated ? 40 : 0;
+            ctx.drawImage(foreign, sx, sy, 1, 1, 0, 0, 1, 1);
+        })
+        waitForAtLeastOneFrame().then(() => { takeScreenshot() });
+    }
+
+</script>
+</head>
+<body>
+    <svg class="image" id="svg_cors_from" style="left: 10px; top: 50px; image-orientation: from-image;">
+        <image id="cors_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
+    </svg>
+    <!-- This should be functionally identical to a plain <img> element. We test it here to verify
+         that SVG foreign object correctly tracks the security origin for the image. -->
+    <svg class="image" style="left: 10px; top: 80px; image-orientation: from-image;">
+        <foreignObject  x="-57" y="-27" width="100" height="50">
+            <img id="cors_from_foreign" src="support/exif-orientation-3-lr.jpg"></img>
+        </foreignObject>
+    </svg>
+    <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
+         never be cross origin. This just tests that we don't crash or do other strange things. -->
+    <img class="image" id="img_cors_from" src="support/svg-with-image-rotated.svg" style="left: 10px; top: 110px; image-orientation: from-image;"/>
+
+    <svg class="image" style="left: 60px; top: 50px; image-orientation: none;">
+        <image id="cors_none_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
+    </svg>
+    <!-- This should be functionally identical to a plain <img> element. We test it here to verify
+         that SVG foreign object correctly tracks the security origin for the image. -->
+    <svg class="image" style="left: 60px; top: 80px; image-orientation: none;">
+        <foreignObject  x="-57" y="-27" width="100" height="50">
+            <img id="cors_none_foreign" src="support/exif-orientation-3-lr.jpg"></img>
+        </foreignObject>
+    </svg>
+    <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
+         never be cross origin. This just tests that we don't crash or do other strange things. -->
+    <img class="image" id="img_cors_none" src="support/svg-with-image-rotated.svg" style="left: 60px; top: 110px; image-orientation: none;"/>
+
+    <svg class="image" style="left: 110px; top: 50px; image-orientation: from-image;">
+        <image id="same_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
+    </svg>
+    <!-- This should be functionally identical to a plain <img> element. We test it here to verify
+         that SVG foreign object correctly tracks the security origin for the image. -->
+    <svg class="image" style="left: 110px; top: 80px; image-orientation: from-image;">
+        <foreignObject  x="-57" y="-27" width="100" height="50">
+            <img id="same_from_foreign" src="support/exif-orientation-3-lr.jpg"></img>
+        </foreignObject>
+    </svg>
+    <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
+         never be cross origin. This just tests that we don't crash or do other strange things. -->
+    <img class="image" id="img_same_from" src="support/svg-with-image-rotated.svg" style="left: 110px; top: 110px; image-orientation: from-image;"/>
+
+    <svg class="image" style="left: 160px; top: 50px; image-orientation: none;">
+        <image id="same_none_image" href="support/exif-orientation-3-lr.jpg" X="0" Y="0"></image>
+    </svg>
+    <!-- This should be functionally identical to a plain <img> element. We test it here to verify
+         that SVG foreign object correctly tracks the security origin for the image. -->
+    <svg class="image" style="left: 160px; top: 80px; image-orientation: none;">
+        <foreignObject x="0" y="0" width="100" height="50">
+            <img id="same_none_foreign" src="support/exif-orientation-3-lr.jpg"></img>
+        </foreignObject>
+    </svg>
+    <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
+         never be cross origin. This just tests that we don't crash or do other strange things. -->
+    <img class="image" id="img_same_none" src="support/svg-with-image-rotated.svg" style="left: 160px; top: 110px; image-orientation: none;"/>
+
+    <!-- This is the easiest way to get a cross origin url for SVG <image> -->
+    <script>
+        const img = document.createElement('img')
+        img.src = "support/exif-orientation-3-lr.jpg"
+        img.id = "same_img";
+        img.style.display = "none";
+        document.body.appendChild(img)
+        const imgCors = document.createElement('img')
+        imgCors.src = img.src
+        imgCors.src = toCors(imgCors.src)
+        imgCors.id = "cors_img";
+        imgCors.style.display = "none";
+        document.body.appendChild(imgCors)
+    </script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html
new file mode 100644
index 0000000000..e36c1295d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<script src=/common/get-host-info.sub.js></script>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<link rel="match" href="reference/image-orientation-none-cross-origin-ref.html">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The following images should not be identical.</p>
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img src="support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>This image should rotate respecting their EXIF orientation because
+       image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p>
+    <div><img id="corsImage" src="support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img id="blobImage"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img id="dataImage"/></div>
+</body>
+<script>
+  const testImage = 'support/exif-orientation-3-lr.jpg';
+  let sPendingImagesToLoad = 3;
+
+  function pendingImageLoaded() {
+    if (!--sPendingImagesToLoad) {
+      document.documentElement.removeAttribute('class');
+    }
+  }
+
+  const img = document.getElementById('corsImage')
+  img.onload = pendingImageLoaded;
+  img.src = img.src.replace(new URL(img.src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
+
+  const blobImg = document.getElementById('blobImage');
+  fetch(testImage).then((resp) => {
+    return resp.blob();
+  }).then((blob) => {
+    blobImg.onload = pendingImageLoaded;
+    blobImg.src = URL.createObjectURL(blob);
+  });
+
+  const dataImg = document.getElementById('dataImage');
+  fetch(testImage).then((resp) => {
+    return resp.blob();
+  }).then((blob) => {
+    const reader = new FileReader();
+
+    reader.addEventListener("load", () => {
+      dataImg.onload = pendingImageLoaded;
+      dataImg.src = reader.result;
+    });
+
+    reader.readAsDataURL(blob);
+  });
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html
new file mode 100644
index 0000000000..05dd66e1e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none in image documents</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-image-document-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236">
+<style>
+    iframe {
+        display: inline-block;
+        margin-right: 20px;
+        margin-bottom: 10px;
+        width: 120px;
+        height: 110px;
+        vertical-align: top;
+        image-orientation: none;
+     }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because image
+       documents always respect the orientation, regardless of the image-orientation
+       property.</p>
+    <iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-2-ur.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-3-lr.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-6-ru.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-7-rl.jpg" frameborder=0></iframe>
+    <iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html
new file mode 100644
index 0000000000..d689b5af06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/image-orientation-none-ref.html">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img src="support/exif-orientation-1-ul.jpg"/></div>
+    <div><img src="support/exif-orientation-2-ur.jpg"/></div>
+    <div><img src="support/exif-orientation-3-lr.jpg"/></div>
+    <div><img src="support/exif-orientation-4-lol.jpg"/></div>
+    <div><img src="support/exif-orientation-5-lu.jpg"/></div>
+    <div><img src="support/exif-orientation-6-ru.jpg"/></div>
+    <div><img src="support/exif-orientation-7-rl.jpg"/></div>
+    <div><img src="support/exif-orientation-8-llo.jpg"/></div>
+    <div><img src="support/exif-orientation-9-u.jpg"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html
new file mode 100644
index 0000000000..a3e2ece6e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+div { width: 100px; height: 50px; }
+.orient { background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { background-image: url(../support/exif-orientation-9-u.jpg); }
+</style>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html
new file mode 100644
index 0000000000..a19e535dab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background positions reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    .exif-2 {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 50px;
+        height: 50PX;
+        background-color: grey;
+        background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg);
+        background-repeat: no-repeat;
+        background-position: -30px -20px;
+    }
+
+    .exif-6 {
+        position: absolute;
+        top: 10px;
+        left: 70px;
+        width: 50px;
+        height: 50PX;
+        background-color: grey;
+        background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg);
+        background-repeat: no-repeat;
+        background-position: -20px -30px;
+    }
+
+</style>
+</head>
+<body>
+    <div class="exif-2">
+    </div>
+    <div class="exif-6">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html
new file mode 100644
index 0000000000..4a7e00c646
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg);
+        background-repeat: no-repeat;
+        border-radius: 5px;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html
new file mode 100644
index 0000000000..be5edf420b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation with background properties reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div {
+        position: absolute;
+        width: 200px;
+        height: 200PX;
+        background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg);
+        background-repeat: no-repeat;
+    }
+
+    .repeat {
+        background-repeat: repeat;
+        top: 20px;
+        left: 20px;
+    }
+
+    .position {
+        background-position: bottom right;
+        top: 20px;
+        left: 240px;
+    }
+
+    .cover {
+        background-size: cover;
+        top: 240px;
+        left: 20px;
+    }
+
+    .contain {
+        background-size: contain;
+        top: 240px;
+        left: 240px;
+    }
+</style>
+</head>
+<body>
+    <div class="repeat">
+    </div>
+    <div class="position">
+    </div>
+    <div class="cover">
+    </div>
+    <div class="contain">
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html
new file mode 100644
index 0000000000..51aa8d0e46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+div {
+  width: 100px;
+  height: 50px;
+  border: 10px solid black;
+}
+.orient { border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10; }
+.no-orient { border-image: url(../support/exif-orientation-9-u.jpg) 10; }
+</style>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html
new file mode 100644
index 0000000000..a146af3657
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    body {
+        overflow: hidden;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       no image-orientation property is given.</p>
+    <div>
+        <img src="../support/exif-orientation-1-ul-pre-rotated.jpg">
+        <br>Normal
+    </div>
+    <div>
+        <img src="../support/exif-orientation-2-ur-pre-rotated.jpg">
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="../support/exif-orientation-3-lr-pre-rotated.jpg">
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="../support/exif-orientation-4-lol-pre-rotated.jpg">
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-5-lu-pre-rotated.jpg">
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-6-ru-pre-rotated.jpg">
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="../support/exif-orientation-7-rl-pre-rotated.jpg">
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-8-llo-pre-rotated.jpg">
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="../support/exif-orientation-9-u-pre-rotated.jpg">
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html
new file mode 100644
index 0000000000..39e361d80c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: late EXIF data is ignored (PNG)</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<img src="../support/F-rotated.png">
+<img src="../support/F-upright.png">
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html
new file mode 100644
index 0000000000..c0d29909f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Images Module Level 3: image-orientation: from-image for content images</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div.image {
+        display: inline-block;
+    }
+    div.container {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+        background-repeat: no-repeat;
+    }
+    body {
+        overflow: hidden;
+    }
+</style>
+</head>
+<body >
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.
+    </p>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul-pre-rotated.jpg)"></div>
+        <br>Normal
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-2-ur-pre-rotated.jpg)"></div>
+        <br>Flipped horizontally
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-3-lr-pre-rotated.jpg)"></div>
+        <br>Rotated 180&deg;
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-4-lol-pre-rotated.jpg)"></div>
+        <br>Flipped vertically
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></div>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></div>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></div>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></div>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <br>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></img>
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></img>
+        <br>Rotated 90&deg; CW
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></img>
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></img>
+        <br>Rotated 90&deg; CCW
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-9-u-pre-rotated.jpg)"></div>
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html
new file mode 100644
index 0000000000..343d0668d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image in embedded content (reference)</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    iframe {
+        display: inline-block;
+        width: 120px;
+        height: 110px;
+        vertical-align: top;
+    }
+    embed {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+    object {
+        object-fit: none;
+        object-position: top left;
+        image-orientation: from-image;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because image
+       documents always respect the orientation, regardless of the image-orientation
+       property.</p>
+    <iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="../support/exif-orientation-2-ur-pre-rotated.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="../support/exif-orientation-3-lr-pre-rotated.jpg" width="120" height="110px"></object>
+    <iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe>
+    <embed type="image/jpeg" src="../support/exif-orientation-6-ru-pre-rotated.jpg" width="120" height="110px">
+    <object type="image/jpeg" data="../support/exif-orientation-7-rl-pre-rotated.jpg" width="120" height="110px"></object>
+    <iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html
new file mode 100644
index 0000000000..c569690967
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    body {
+        overflow: hidden;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because
+       image-orientation: from-image is specified.</p>
+    <div>
+        <img src="../support/exif-orientation-1-ul-pre-rotated.jpg">
+        <br>Normal
+    </div>
+    <div>
+        <img src="../support/exif-orientation-2-ur-pre-rotated.jpg">
+        <br>Flipped horizontally
+    </div>
+    <div>
+        <img src="../support/exif-orientation-3-lr-pre-rotated.jpg">
+        <br>Rotated 180&deg;
+    </div>
+    <div>
+        <img src="../support/exif-orientation-4-lol-pre-rotated.jpg">
+        <br>Flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-5-lu-pre-rotated.jpg">
+        <br>Rotated 90&deg; CCW and flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-6-ru-pre-rotated.jpg">
+        <br>Rotated 90&deg; CW
+    </div>
+    <div>
+        <img src="../support/exif-orientation-7-rl-pre-rotated.jpg">
+        <br>Rotated 90&deg; CW and flipped vertically
+    </div>
+    <div>
+        <img src="../support/exif-orientation-8-llo-pre-rotated.jpg">
+        <br>Rotated 90&deg; CCW
+    </div>
+    <div>
+        <img src="../support/exif-orientation-9-u-pre-rotated.jpg">
+        <br>Undefined (invalid value)
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html
new file mode 100644
index 0000000000..a9e9b3fbe3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
+<iframe src="../support/exif-orientation-2-ur.jpg"></iframe>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html
new file mode 100644
index 0000000000..0d84291e8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: from-image;
+    }
+    img {
+        position: absolute;
+        vertical-align: top;
+    }
+    .cover {
+        object-fit: cover;
+        top: 10px;
+    }
+    .contain {
+        object-fit: contain;
+        top: 150px;
+    }
+    .wide {
+        width: 100px;
+        height: 50px;
+        left: 10px;
+    }
+    .tall {
+        width: 50px;
+        height: 100px;
+        left: 150px;
+    }
+</style>
+</head>
+<body>
+  <img class="cover wide" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/>
+  <img class="cover tall" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/>
+  <img class="contain wide" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/>
+  <img class="contain tall" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html
new file mode 100644
index 0000000000..8dcef6a243
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+ul { margin-left: 100px; }
+.orient { list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { list-style-image: url(../support/exif-orientation-9-u.jpg); }
+</style>
+<ul class="orient"><li>&nbsp;</li></ul>
+<ul class="no-orient"><li>&nbsp;</li></ul>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html
new file mode 100644
index 0000000000..ba59303245
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+div {
+  width: 100px;
+  height: 50px;
+  background: blue;
+  mask-mode: luminance;
+}
+.orient { mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); }
+.no-orient { mask-image: url(../support/exif-orientation-9-u.jpg); }
+</style>
+<div class="orient"></div>
+<div class="no-orient"></div>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html
new file mode 100644
index 0000000000..5192f5c35a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none for content images</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    div.image {
+        display: inline-block;
+    }
+    div.container {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+        background-repeat: no-repeat;
+    }
+    body {
+        overflow: hidden;
+    }
+</style>
+</head>
+<body>
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+    <br>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
+    </div>
+    <div class="container">
+        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
+    </div>
+    <br>
+    <div class="container">
+        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html
new file mode 100644
index 0000000000..c82f135a09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    img {display: none}
+    canvas {
+        width: 20px;
+        height: 20px;
+        margin: 10px;
+    }
+</style>
+<body>
+    <p>You should see 8 green rectangles, no red.</p>
+</body>
+<script>
+    const img = document.createElement('img')
+    img.src = '../support/exif-orientation-1-ul.jpg'
+
+    document.body.appendChild(img)
+
+    const dimension = 5
+    window.onload = () => {
+        for (let i = 0; i < 8; ++i) {
+            const canvas = document.createElement('canvas')
+            canvas.width = canvas.height = dimension
+            const ctx = canvas.getContext('2d')
+            ctx.drawImage(img, 0, 0)
+            document.body.appendChild(canvas)
+        }
+
+    }
+</script>
+</head>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html
new file mode 100644
index 0000000000..c4d72fc823
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
+<style>
+    body {
+        overflow: hidden;
+        image-orientation: none;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The following images should not be identical.</p>
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>This image should rotate respecting their EXIF orientation because
+       image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg" style="image-orientation: from-image" /></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg"/></div>
+
+    <p>The image should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img src="../support/exif-orientation-3-lr.jpg"/></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html
new file mode 100644
index 0000000000..e34a7087d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images: image-orientation, CORS detection for SVG content, reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<style>
+    div {
+        background-image: url("../support/exif-orientation-1-ul.jpg");
+        width: 40px;
+        height: 20px;
+        position: fixed;
+    }
+</style>
+</head>
+<body>
+    <div style="left: 10px; top: 50px"></div>
+    <div style="left: 10px; top: 80px"></div>
+    <div style="left: 10px; top: 110px"></div>
+    <div style="left: 10px; top: 140px"></div>
+    <div style="left: 10px; top: 170px"></div>
+
+    <div style="left: 60px; top: 50px"></div>
+    <div style="left: 60px; top: 80px"></div>
+    <div style="left: 60px; top: 110px"></div>
+    <div style="left: 60px; top: 140px"></div>
+    <div style="left: 60px; top: 170px"></div>
+
+    <div style="left: 110px; top: 50px"></div>
+    <div style="left: 110px; top: 80px"></div>
+    <div style="left: 110px; top: 110px"></div>
+    <div style="left: 110px; top: 140px"></div>
+    <div style="left: 110px; top: 170px"></div>
+
+    <div style="left: 160px; top: 50px"></div>
+    <div style="left: 160px; top: 80px"></div>
+    <div style="left: 160px; top: 110px"></div>
+    <div style="left: 160px; top: 140px"></div>
+    <div style="left: 160px; top: 170px"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html
new file mode 100644
index 0000000000..90eaeaa3da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none in image documents</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    iframe {
+        display: inline-block;
+        margin-right: 20px;
+        margin-bottom: 10px;
+        width: 120px;
+        height: 110px;
+        vertical-align: top;
+     }
+</style>
+</head>
+<body>
+    <p>The images should rotate respecting their EXIF orientation because image
+       documents always respect the orientation, regardless of the image-orientation
+       property.</p>
+    <iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-2-ur-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-3-lr-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-6-ru-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-7-rl-pre-rotated.jpg" frameborder=0></iframe>
+    <iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe>
+    <br>
+    <iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html
new file mode 100644
index 0000000000..c4d140f153
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: image-orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<style>
+    body {
+        overflow: hidden;
+    }
+    div {
+        display: inline-block;
+        width: 100px;
+        vertical-align: top;
+    }
+</style>
+</head>
+<body>
+    <p>The images should not rotate respecting their EXIF orientation because
+       image-orientation: none is specified.</p>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+    <div><img src="../support/exif-orientation-1-ul.jpg"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html
new file mode 100644
index 0000000000..728bfb202f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image respects orientation</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+</head>
+<body style="margin:0">
+    <svg style="width: 600px; height: 600px">
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="0" y="0" width="150" height="150" preserveAspectRatio="xMinYMin meet"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="200" y="0" width="150" height="150" preserveAspectRatio="xMidYMin meet"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="400" y="0" width="150" height="150" preserveAspectRatio="xMaxYMin meet"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="0" y="150" width="150" height="150" preserveAspectRatio="xMinYMid slice"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="200" y="150" width="150" height="150" preserveAspectRatio="xMidYMid slice"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="400" y="150" width="150" height="150" preserveAspectRatio="xMaxYMid slice"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="0" y="300" width="150" height="150" preserveAspectRatio="xMinYMax meet"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="200" y="300" width="150" height="150" preserveAspectRatio="xMidYMax meet"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="400" y="300" width="150" height="150" preserveAspectRatio="xMaxYMax meet"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="0" y="450" width="150" height="150" preserveAspectRatio="none"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="200" y="450" width="150" height="150" preserveAspectRatio="none"></image>
+    </svg>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html
new file mode 100644
index 0000000000..c7feb1dfee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image ignores orientation with image-orientation:none: Reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+    <svg style="width: 500px; height: 650px;">
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="125" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="250" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="375" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="125" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="250" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="375" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="250"></image>
+    </svg>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html
new file mode 100644
index 0000000000..bd8310d4d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image respects orientation</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+</head>
+<body>
+    <svg style="width: 500px; height: 650px">
+        <image xlink:href="../support/exif-orientation-1-ul-pre-rotated.jpg" X="0" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" X="125" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-3-lr-pre-rotated.jpg" X="250" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-4-lol-pre-rotated.jpg" X="375" Y="0"></image>
+        <image xlink:href="../support/exif-orientation-5-lu-pre-rotated.jpg" X="0" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-6-ru-pre-rotated.jpg" X="125" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-7-rl-pre-rotated.jpg" X="250" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" X="375" Y="125"></image>
+        <image xlink:href="../support/exif-orientation-9-u-pre-rotated.jpg" X="0" Y="250"></image>
+    </svg>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png
new file mode 100644
index 0000000000..6714cec825
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png
new file mode 100644
index 0000000000..38f6defc58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png
new file mode 100644
index 0000000000..f515edd823
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png
new file mode 100644
index 0000000000..c44e72d0f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg
new file mode 100644
index 0000000000..ef26ad4aaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg
new file mode 100644
index 0000000000..33abbd152a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg
new file mode 100644
index 0000000000..5125ede0bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg
new file mode 100644
index 0000000000..03d33ddfc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg
new file mode 100644
index 0000000000..20c4b791b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg
new file mode 100644
index 0000000000..9e9cdc04a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg
new file mode 100644
index 0000000000..818e573af4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg
new file mode 100644
index 0000000000..08f0f9123d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg
new file mode 100644
index 0000000000..ec8caf84fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg
new file mode 100644
index 0000000000..6f92942419
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg
new file mode 100644
index 0000000000..06f0f66333
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg
new file mode 100644
index 0000000000..4b9a33549e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg
new file mode 100644
index 0000000000..08d03f0a53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg
new file mode 100644
index 0000000000..1838fcbcff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg
new file mode 100644
index 0000000000..28a9d07a22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg
new file mode 100644
index 0000000000..08af29d4fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg
new file mode 100644
index 0000000000..c396925e71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg
new file mode 100644
index 0000000000..5c579b392c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg
new file mode 100644
index 0000000000..7d41aead39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg b/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg
new file mode 100644
index 0000000000..e46581663c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+    <image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QDGRXhpZgAASUkqAAgAAAAHABIBAwABAAAAAwAAABoBBQABAAAAYgAAABsBBQABAAAAagAAACgBAwABAAAAAgAAADEBAgANAAAAcgAAADIBAgAUAAAAgAAAAGmHBAABAAAAlAAAAAAAAABIAAAAAQAAAEgAAAABAAAAR0lNUCAyLjEwLjE0AAAyMDIwOjAyOjEzIDExOjMyOjIwAAMAAaADAAEAAAABAAAAAqAEAAEAAABkAAAAA6AEAAEAAAAyAAAAAAAAAP/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/CABEIADIAZAMBEQACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAACAYJCv/EABgBAQEBAQEAAAAAAAAAAAAAAAAJCAoH/9oADAMBAAIQAxAAAAGK8r4nAAHcWfu4aX8p9LAAHmjqxNMAAdxZ+7hpfyn0sAAeaOrE0wAB3Fn7uGl/KfSwAB5Au6fIwAArSENod5l/RYAA58dafPIAAKNgDbzX5V0oAAJD6qOa8AAUbAG3mvyrpQAASH1Uc14AAo2ANvNflXSgAA//xAAeEAAABQUBAAAAAAAAAAAAAAAABAYVFgUHIDA1N//aAAgBAQABBQLKz/nWyz/nWyz/AJ1k4Hw4Hw4Hw4Hw4Hw4HwmVWqClEmixE0WImixE0WImixE0WOdB5Wyg8rZQeVl//8QAMBEAAAIECgsBAQAAAAAAAAAABQYAAgQHAwgVF1VWlJbT1AESEyAwNziFhrW2ERb/2gAIAQMBAT8B3nP8ui73b3onxXP8ui73b3onxXP8ui73b3onvyQFUYH2Jmw0kgKowPsTNhpJAVRgfYmbDSSAqjA+xM2GkkBVGB9iZsNJICqMD7EzYaRTSERhCL+QWtvJhTbmuF/qtq1NZdB2lohdmdTHBKbSHhmNeEX1INRSDU1ltOqooqro/FVdGhJtndVBJV1gPIpNs7qoJKusB5FJtndVBJV1gPIpNs7qoJKusB5FJtndVBJV1gPIpNs7qoJKusB5HfihdOzvfLPuDNxYoXTs73yz7gzcWKF07O98s+4M2/8A/8QALxEAAAIECwkBAQAAAAAAAAAABgcAAgMFBAgTFhdWV5aX1NUBIDA3OIWGtrcSEf/aAAgBAgEBPwHeO7meJ+y+vOnindzPE/ZfXnTxTu5nifsvrzp36CiRscKvD0I6QlBRI2OFXh6EdISgokbHCrw9COkJQUSNjhV4ehHSEoKJGxwq8PQjpCUFEjY4VeHoR0hI5hbF07IyZkQJ2gEFO+BMZnyMEgQWccFgrKUAQXatJNgwgLNkpKNV12q/5V2fpousut/Vltu1JiAipoVu86MmkxARU0K3edGTSYgIqaFbvOjJpMQEVNCt3nRk0mICKmhW7zoyaTEBFTQrd50ZPfjtdTpmeGfPgpxY7XU6Znhnz4KcWO11OmZ4Z8+Cm/8A/8QAKxAAAAMECAYDAAAAAAAAAAAAAgMEAAUGNAEgMDaUldLUEiGDhbS1ERMU/9oACAEBAAY/Aq0O929687WHe7e9edrDvdvevOvOq8SdradV4k7W06rxJ2tp1XiTtbTqvEna2nVeJO1siTpIkf6Ygv8AT9ZCd8PAkkHErPGLgLLUBAHiGIQhfFHMQqRU86aWvZEuevTdNeyJc9em6a9kS569N017Ilz16bpr2RLnr03TXsiXPXpuq6Xr+Sdapev5J1ql6/knV//EABcQAAMBAAAAAAAAAAAAAAAAAAEhUGH/2gAIAQEAAT8hm6aaGDBgwYMZeGBv3BW9CjNGDBgwYMYYY//aAAwDAQACAAMAAAAQAAAAAAAAAAAAAAAAAAADbbYSSSAAAAAAAAAAAAAAAAAAAH//xAAVEQEBAAAAAAAAAAAAAAAAAABQgf/aAAgBAwEBPxA1RRRy5cuXLmH8VsUvwlxG9+/fv373XXf/xAAVEQEBAAAAAAAAAAAAAAAAAABQgf/aAAgBAgEBPxA3DDB69evXr24QT7b2b5BGrFixYsWEkk//xAAVEAEBAAAAAAAAAAAAAAAAAABQAf/aAAgBAQABPxA3XXUGDBgwYOgVjhxRPtxEgYMGDBg8MMP/2Q==" x="-57" y="-27"></image>
+</svg>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html
new file mode 100644
index 0000000000..d378dbfe54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image respects orientation and preserveAspectRatio</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/svg-image-orientation-aspect-ratio-ref.html">
+<meta name=fuzzy content="0-3;0-1432">
+</head>
+<body style="margin:0">
+    <svg style="width: 600px; height: 600px">
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="0" y="0" width="150" height="150" preserveAspectRatio="xMinYMin meet"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="200" y="0" width="150" height="150" preserveAspectRatio="xMidYMin meet"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="400" y="0" width="150" height="150" preserveAspectRatio="xMaxYMin meet"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="0" y="150" width="150" height="150" preserveAspectRatio="xMinYMid slice"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="200" y="150" width="150" height="150" preserveAspectRatio="xMidYMid slice"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="400" y="150" width="150" height="150" preserveAspectRatio="xMaxYMid slice"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="0" y="300" width="150" height="150" preserveAspectRatio="xMinYMax meet"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="200" y="300" width="150" height="150" preserveAspectRatio="xMidYMax meet"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="400" y="300" width="150" height="150" preserveAspectRatio="xMaxYMax meet"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" x="0" y="450" width="150" height="150" preserveAspectRatio="none"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" x="200" y="450" width="150" height="150" preserveAspectRatio="none"></image>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html
new file mode 100644
index 0000000000..f585cdb76b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image ignores orientation with image-orientation:none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/svg-image-orientation-none-ref.html">
+<meta name=fuzzy content="0-5;0-100">
+</head>
+<body>
+    <svg style="width: 500px; height: 650px; image-orientation: none;">
+        <image xlink:href="support/exif-orientation-1-ul.jpg" X="0" Y="0"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" X="125" Y="0"></image>
+        <image xlink:href="support/exif-orientation-3-lr.jpg" X="250" Y="0"></image>
+        <image xlink:href="support/exif-orientation-4-lol.jpg" X="375" Y="0"></image>
+        <image xlink:href="support/exif-orientation-5-lu.jpg" X="0" Y="125"></image>
+        <image xlink:href="support/exif-orientation-6-ru.jpg" X="125" Y="125"></image>
+        <image xlink:href="support/exif-orientation-7-rl.jpg" X="250" Y="125"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" X="375" Y="125"></image>
+        <image xlink:href="support/exif-orientation-9-u.jpg" X="0" Y="250"></image>
+    </svg>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html
new file mode 100644
index 0000000000..758e900e91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: svg image respects orientation</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="reference/svg-image-orientation-ref.html">
+<meta name=fuzzy content="0-5;0-200">
+</head>
+<body>
+    <svg style="width: 500px; height: 650px">
+        <image xlink:href="support/exif-orientation-1-ul.jpg" X="0" Y="0"></image>
+        <image xlink:href="support/exif-orientation-2-ur.jpg" X="125" Y="0"></image>
+        <image xlink:href="support/exif-orientation-3-lr.jpg" X="250" Y="0"></image>
+        <image xlink:href="support/exif-orientation-4-lol.jpg" X="375" Y="0"></image>
+        <image xlink:href="support/exif-orientation-5-lu.jpg" X="0" Y="125"></image>
+        <image xlink:href="support/exif-orientation-6-ru.jpg" X="125" Y="125"></image>
+        <image xlink:href="support/exif-orientation-7-rl.jpg" X="250" Y="125"></image>
+        <image xlink:href="support/exif-orientation-8-llo.jpg" X="375" Y="125"></image>
+        <image xlink:href="support/exif-orientation-9-u.jpg" X="0" Y="250"></image>
+    </svg>
+</body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-images/image-orientation
parent	Initial commit. (diff)
download	firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip