From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/image/100.png                      | Bin 0 -> 91 bytes
 layout/reftests/image/200.png                      | Bin 0 -> 100 bytes
 layout/reftests/image/300.png                      | Bin 0 -> 106 bytes
 layout/reftests/image/400.png                      | Bin 0 -> 114 bytes
 layout/reftests/image/50.png                       | Bin 0 -> 85 bytes
 layout/reftests/image/500.svg                      |   9 +++
 .../image/background-image-zoom-1-ref.html         |  23 ++++++
 layout/reftests/image/background-image-zoom-1.html |  24 +++++++
 layout/reftests/image/background-image-zoom-2.html |  23 ++++++
 layout/reftests/image/big.png                      | Bin 0 -> 82 bytes
 layout/reftests/image/blue-100x50.png              | Bin 0 -> 219 bytes
 layout/reftests/image/blue-16x20.png               | Bin 0 -> 118 bytes
 layout/reftests/image/blue-32x32.png               | Bin 0 -> 110 bytes
 layout/reftests/image/blue-50x100.png              | Bin 0 -> 220 bytes
 layout/reftests/image/blue-50x50.png               | Bin 0 -> 191 bytes
 layout/reftests/image/image-exif-0-deg-flip.jpg    | Bin 0 -> 6872 bytes
 layout/reftests/image/image-exif-0-deg.jpg         | Bin 0 -> 6872 bytes
 layout/reftests/image/image-exif-180-deg-flip.jpg  | Bin 0 -> 6872 bytes
 layout/reftests/image/image-exif-180-deg.jpg       | Bin 0 -> 6872 bytes
 layout/reftests/image/image-exif-270-deg-flip.jpg  | Bin 0 -> 6872 bytes
 layout/reftests/image/image-exif-270-deg.jpg       | Bin 0 -> 6872 bytes
 layout/reftests/image/image-exif-90-deg-flip.jpg   | Bin 0 -> 6872 bytes
 layout/reftests/image/image-exif-90-deg.jpg        | Bin 0 -> 6872 bytes
 layout/reftests/image/image-exif-none.jpg          | Bin 0 -> 1776 bytes
 layout/reftests/image/image-in-iframe-1-ref.html   |   6 ++
 layout/reftests/image/image-in-iframe-1.html       |  16 +++++
 .../reftests/image/image-object-fit-dyn-1-ref.html |  24 +++++++
 layout/reftests/image/image-object-fit-dyn-1.html  |  45 ++++++++++++
 .../image-object-fit-with-background-1-ref.html    |  26 +++++++
 .../image/image-object-fit-with-background-1.html  |  34 +++++++++
 .../image-object-fit-with-background-2-ref.html    |  28 ++++++++
 .../image/image-object-fit-with-background-2.html  |  40 +++++++++++
 .../image/image-object-position-dyn-1-ref.html     |  25 +++++++
 .../image/image-object-position-dyn-1.html         |  45 ++++++++++++
 ...mage-object-position-with-background-1-ref.html |  42 +++++++++++
 .../image-object-position-with-background-1.html   |  35 +++++++++
 ...mage-object-position-with-background-2-ref.html |  23 ++++++
 .../image-object-position-with-background-2.html   |  31 ++++++++
 .../image/image-orientation-background.html        |  43 +++++++++++
 .../image/image-orientation-dynamic-ref.html       |  33 +++++++++
 .../reftests/image/image-orientation-dynamic.html  |  17 +++++
 .../image/image-orientation-explicit-none.html     |  21 ++++++
 .../image/image-orientation-from-image.html        |  40 +++++++++++
 .../image-orientation-generated-content-ref.html   |  33 +++++++++
 .../image/image-orientation-generated-content.html |  19 +++++
 layout/reftests/image/image-orientation-ref.html   |  80 +++++++++++++++++++++
 .../image/image-resize-percent-height.html         |  15 ++++
 .../reftests/image/image-resize-percent-width.html |  15 ++++
 layout/reftests/image/image-resize-ref.html        |   3 +
 layout/reftests/image/image-seam-1-ref.html        |  14 ++++
 layout/reftests/image/image-seam-1a.html           |  17 +++++
 layout/reftests/image/image-seam-1b.html           |  17 +++++
 layout/reftests/image/image-seam-2-ref.html        |  17 +++++
 layout/reftests/image/image-seam-2.html            |  18 +++++
 .../image-srcset-basic-selection-0.1x-ref.html     |  11 +++
 .../image/image-srcset-basic-selection-0.1x.html   |  26 +++++++
 .../image-srcset-basic-selection-0.5x-ref.html     |  11 +++
 .../image/image-srcset-basic-selection-0.5x.html   |  26 +++++++
 .../image-srcset-basic-selection-0.6x-ref.html     |  11 +++
 .../image/image-srcset-basic-selection-0.6x.html   |  26 +++++++
 .../image-srcset-basic-selection-1.5x-ref.html     |  11 +++
 .../image/image-srcset-basic-selection-1.5x.html   |  26 +++++++
 .../image/image-srcset-basic-selection-1x-ref.html |  11 +++
 .../image/image-srcset-basic-selection-1x.html     |  26 +++++++
 .../image/image-srcset-basic-selection-2x-ref.html |  11 +++
 .../image/image-srcset-basic-selection-2x.html     |  26 +++++++
 ...mage-srcset-basic-selection-width-0.5x-ref.html |  11 +++
 .../image-srcset-basic-selection-width-0.5x.html   |  26 +++++++
 ...image-srcset-basic-selection-width-10x-ref.html |  11 +++
 .../image-srcset-basic-selection-width-10x.html    |  26 +++++++
 .../image-srcset-basic-selection-width-1x-ref.html |  11 +++
 .../image-srcset-basic-selection-width-1x.html     |  26 +++++++
 .../image-srcset-basic-selection-width-2x-ref.html |  11 +++
 .../image-srcset-basic-selection-width-2x.html     |  26 +++++++
 .../image/image-srcset-default-1x-ref.html         |  11 +++
 layout/reftests/image/image-srcset-default-1x.html |  26 +++++++
 .../image/image-srcset-default-2x-ref.html         |  11 +++
 layout/reftests/image/image-srcset-default-2x.html |  26 +++++++
 .../image/image-srcset-default-src-1x-ref.html     |  11 +++
 .../image/image-srcset-default-src-1x.html         |  26 +++++++
 .../image/image-srcset-default-src-2x-ref.html     |  11 +++
 .../image/image-srcset-default-src-2x.html         |  26 +++++++
 layout/reftests/image/image-srcset-isize-ref.html  |  25 +++++++
 layout/reftests/image/image-srcset-isize.html      |  41 +++++++++++
 layout/reftests/image/image-srcset-svg-1x-ref.html |  11 +++
 layout/reftests/image/image-srcset-svg-1x.html     |  26 +++++++
 layout/reftests/image/image-srcset-svg-2x-ref.html |  11 +++
 layout/reftests/image/image-srcset-svg-2x.html     |  26 +++++++
 layout/reftests/image/image-srcset-svg-3x-ref.html |  11 +++
 layout/reftests/image/image-srcset-svg-3x.html     |  26 +++++++
 .../image/image-srcset-svg-default-1x-ref.html     |  11 +++
 .../image/image-srcset-svg-default-1x.html         |  26 +++++++
 .../image/image-srcset-svg-default-2x-ref.html     |  11 +++
 .../image/image-srcset-svg-default-2x.html         |  26 +++++++
 layout/reftests/image/image-zoom-1-ref.html        |  16 +++++
 layout/reftests/image/image-zoom-1.html            |  16 +++++
 layout/reftests/image/image-zoom-2.html            |  16 +++++
 .../img-invalidation-local-transform-1-ref.html    |  17 +++++
 .../img-invalidation-local-transform-1-ref.png     | Bin 0 -> 3757 bytes
 .../image/img-invalidation-local-transform-1.html  |  51 +++++++++++++
 .../image/img-invalidation-local-transform-1.png   | Bin 0 -> 5834 bytes
 layout/reftests/image/invalid-url-image-1-ref.html |   7 ++
 layout/reftests/image/invalid-url-image-1.html     |   7 ++
 .../reftests/image/moz-broken-matching-1-ref.html  |   7 ++
 layout/reftests/image/moz-broken-matching-1.html   |   7 ++
 .../image/moz-broken-matching-lazy-load.html       |  13 ++++
 layout/reftests/image/nearly-white.png             | Bin 0 -> 115 bytes
 layout/reftests/image/no-intrinsic-size.svg        |   9 +++
 layout/reftests/image/reftest.list                 |  73 +++++++++++++++++++
 layout/reftests/image/small.png                    | Bin 0 -> 85 bytes
 layout/reftests/image/sync-image-switch-1-ref.html |   4 ++
 layout/reftests/image/sync-image-switch-1a.html    |  16 +++++
 layout/reftests/image/sync-image-switch-1b.html    |  16 +++++
 layout/reftests/image/sync-image-switch-1c.html    |  16 +++++
 layout/reftests/image/sync-image-switch-1d.html    |  16 +++++
 layout/reftests/image/unknown-protocol-ref.html    |   1 +
 layout/reftests/image/unknown-protocol.html        |   1 +
 117 files changed, 1979 insertions(+)
 create mode 100644 layout/reftests/image/100.png
 create mode 100644 layout/reftests/image/200.png
 create mode 100644 layout/reftests/image/300.png
 create mode 100644 layout/reftests/image/400.png
 create mode 100644 layout/reftests/image/50.png
 create mode 100644 layout/reftests/image/500.svg
 create mode 100644 layout/reftests/image/background-image-zoom-1-ref.html
 create mode 100644 layout/reftests/image/background-image-zoom-1.html
 create mode 100644 layout/reftests/image/background-image-zoom-2.html
 create mode 100644 layout/reftests/image/big.png
 create mode 100644 layout/reftests/image/blue-100x50.png
 create mode 100644 layout/reftests/image/blue-16x20.png
 create mode 100644 layout/reftests/image/blue-32x32.png
 create mode 100644 layout/reftests/image/blue-50x100.png
 create mode 100644 layout/reftests/image/blue-50x50.png
 create mode 100644 layout/reftests/image/image-exif-0-deg-flip.jpg
 create mode 100644 layout/reftests/image/image-exif-0-deg.jpg
 create mode 100644 layout/reftests/image/image-exif-180-deg-flip.jpg
 create mode 100644 layout/reftests/image/image-exif-180-deg.jpg
 create mode 100644 layout/reftests/image/image-exif-270-deg-flip.jpg
 create mode 100644 layout/reftests/image/image-exif-270-deg.jpg
 create mode 100644 layout/reftests/image/image-exif-90-deg-flip.jpg
 create mode 100644 layout/reftests/image/image-exif-90-deg.jpg
 create mode 100644 layout/reftests/image/image-exif-none.jpg
 create mode 100644 layout/reftests/image/image-in-iframe-1-ref.html
 create mode 100644 layout/reftests/image/image-in-iframe-1.html
 create mode 100644 layout/reftests/image/image-object-fit-dyn-1-ref.html
 create mode 100644 layout/reftests/image/image-object-fit-dyn-1.html
 create mode 100644 layout/reftests/image/image-object-fit-with-background-1-ref.html
 create mode 100644 layout/reftests/image/image-object-fit-with-background-1.html
 create mode 100644 layout/reftests/image/image-object-fit-with-background-2-ref.html
 create mode 100644 layout/reftests/image/image-object-fit-with-background-2.html
 create mode 100644 layout/reftests/image/image-object-position-dyn-1-ref.html
 create mode 100644 layout/reftests/image/image-object-position-dyn-1.html
 create mode 100644 layout/reftests/image/image-object-position-with-background-1-ref.html
 create mode 100644 layout/reftests/image/image-object-position-with-background-1.html
 create mode 100644 layout/reftests/image/image-object-position-with-background-2-ref.html
 create mode 100644 layout/reftests/image/image-object-position-with-background-2.html
 create mode 100644 layout/reftests/image/image-orientation-background.html
 create mode 100644 layout/reftests/image/image-orientation-dynamic-ref.html
 create mode 100644 layout/reftests/image/image-orientation-dynamic.html
 create mode 100644 layout/reftests/image/image-orientation-explicit-none.html
 create mode 100644 layout/reftests/image/image-orientation-from-image.html
 create mode 100644 layout/reftests/image/image-orientation-generated-content-ref.html
 create mode 100644 layout/reftests/image/image-orientation-generated-content.html
 create mode 100644 layout/reftests/image/image-orientation-ref.html
 create mode 100644 layout/reftests/image/image-resize-percent-height.html
 create mode 100644 layout/reftests/image/image-resize-percent-width.html
 create mode 100644 layout/reftests/image/image-resize-ref.html
 create mode 100644 layout/reftests/image/image-seam-1-ref.html
 create mode 100644 layout/reftests/image/image-seam-1a.html
 create mode 100644 layout/reftests/image/image-seam-1b.html
 create mode 100644 layout/reftests/image/image-seam-2-ref.html
 create mode 100644 layout/reftests/image/image-seam-2.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-0.1x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-0.5x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-0.6x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-1.5x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-1x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-1x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-2x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-2x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-width-0.5x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-width-10x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-width-1x.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-basic-selection-width-2x.html
 create mode 100644 layout/reftests/image/image-srcset-default-1x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-default-1x.html
 create mode 100644 layout/reftests/image/image-srcset-default-2x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-default-2x.html
 create mode 100644 layout/reftests/image/image-srcset-default-src-1x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-default-src-1x.html
 create mode 100644 layout/reftests/image/image-srcset-default-src-2x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-default-src-2x.html
 create mode 100644 layout/reftests/image/image-srcset-isize-ref.html
 create mode 100644 layout/reftests/image/image-srcset-isize.html
 create mode 100644 layout/reftests/image/image-srcset-svg-1x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-svg-1x.html
 create mode 100644 layout/reftests/image/image-srcset-svg-2x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-svg-2x.html
 create mode 100644 layout/reftests/image/image-srcset-svg-3x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-svg-3x.html
 create mode 100644 layout/reftests/image/image-srcset-svg-default-1x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-svg-default-1x.html
 create mode 100644 layout/reftests/image/image-srcset-svg-default-2x-ref.html
 create mode 100644 layout/reftests/image/image-srcset-svg-default-2x.html
 create mode 100644 layout/reftests/image/image-zoom-1-ref.html
 create mode 100644 layout/reftests/image/image-zoom-1.html
 create mode 100644 layout/reftests/image/image-zoom-2.html
 create mode 100644 layout/reftests/image/img-invalidation-local-transform-1-ref.html
 create mode 100644 layout/reftests/image/img-invalidation-local-transform-1-ref.png
 create mode 100644 layout/reftests/image/img-invalidation-local-transform-1.html
 create mode 100644 layout/reftests/image/img-invalidation-local-transform-1.png
 create mode 100644 layout/reftests/image/invalid-url-image-1-ref.html
 create mode 100644 layout/reftests/image/invalid-url-image-1.html
 create mode 100644 layout/reftests/image/moz-broken-matching-1-ref.html
 create mode 100644 layout/reftests/image/moz-broken-matching-1.html
 create mode 100644 layout/reftests/image/moz-broken-matching-lazy-load.html
 create mode 100644 layout/reftests/image/nearly-white.png
 create mode 100644 layout/reftests/image/no-intrinsic-size.svg
 create mode 100644 layout/reftests/image/reftest.list
 create mode 100644 layout/reftests/image/small.png
 create mode 100644 layout/reftests/image/sync-image-switch-1-ref.html
 create mode 100644 layout/reftests/image/sync-image-switch-1a.html
 create mode 100644 layout/reftests/image/sync-image-switch-1b.html
 create mode 100644 layout/reftests/image/sync-image-switch-1c.html
 create mode 100644 layout/reftests/image/sync-image-switch-1d.html
 create mode 100644 layout/reftests/image/unknown-protocol-ref.html
 create mode 100644 layout/reftests/image/unknown-protocol.html

(limited to 'layout/reftests/image')

diff --git a/layout/reftests/image/100.png b/layout/reftests/image/100.png
new file mode 100644
index 0000000000..df421453c2
Binary files /dev/null and b/layout/reftests/image/100.png differ
diff --git a/layout/reftests/image/200.png b/layout/reftests/image/200.png
new file mode 100644
index 0000000000..6f76d44387
Binary files /dev/null and b/layout/reftests/image/200.png differ
diff --git a/layout/reftests/image/300.png b/layout/reftests/image/300.png
new file mode 100644
index 0000000000..c12b7ceea1
Binary files /dev/null and b/layout/reftests/image/300.png differ
diff --git a/layout/reftests/image/400.png b/layout/reftests/image/400.png
new file mode 100644
index 0000000000..8855fc6d46
Binary files /dev/null and b/layout/reftests/image/400.png differ
diff --git a/layout/reftests/image/50.png b/layout/reftests/image/50.png
new file mode 100644
index 0000000000..144a2f0b93
Binary files /dev/null and b/layout/reftests/image/50.png differ
diff --git a/layout/reftests/image/500.svg b/layout/reftests/image/500.svg
new file mode 100644
index 0000000000..35ad0db4f0
--- /dev/null
+++ b/layout/reftests/image/500.svg
@@ -0,0 +1,9 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px">
+
+<title>Simple SVG with 500x500 intrinsic size</title>
+  <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/image/background-image-zoom-1-ref.html b/layout/reftests/image/background-image-zoom-1-ref.html
new file mode 100644
index 0000000000..b23048bb61
--- /dev/null
+++ b/layout/reftests/image/background-image-zoom-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+    -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" />
+<title>reference background-image-rendering: -moz-crisp-edges</title>
+<style>
+html
+{ 
+background-image: url('big.png');
+background-attachment:fixed;
+background-position: 20px 20px;
+background-repeat: no-repeat;
+overflow: hidden;
+}
+</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/image/background-image-zoom-1.html b/layout/reftests/image/background-image-zoom-1.html
new file mode 100644
index 0000000000..0572099a37
--- /dev/null
+++ b/layout/reftests/image/background-image-zoom-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+    -->
+<html reftest-zoom="5">
+<head>
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" />
+<title>test background-image-rendering: -moz-crisp-edges</title>
+<style>
+html
+{ 
+background-image: url('small.png');
+image-rendering: -moz-crisp-edges;
+background-attachment:fixed;
+background-position: 4px 4px;
+background-repeat: no-repeat;
+overflow: hidden;
+}
+</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/image/background-image-zoom-2.html b/layout/reftests/image/background-image-zoom-2.html
new file mode 100644
index 0000000000..18a41ea430
--- /dev/null
+++ b/layout/reftests/image/background-image-zoom-2.html
@@ -0,0 +1,23 @@
+<html reftest-zoom="1.8">
+<style>
+  a{
+    background-repeat: inherit;
+    background-position: inherit;
+    /* this image has a red pixel at the bottom to
+    prevent image lib from optimizing it into a
+    solid color fill */
+    background-image:url("nearly-white.png");
+    line-height: 20px; /* set the line height so that the red pixel is not drawn */ 
+  }
+</style>
+<div style="background-repeat: no-repeat">
+    <a>&nbsp;</a><a>&nbsp;</a>
+</div>
+<p>
+<div style="background-position: right top">
+    <a>&nbsp;</a><a>&nbsp;</a>
+</div>
+<p>
+<div>
+    <a>&nbsp;</a><a>&nbsp;</a>
+</div>
diff --git a/layout/reftests/image/big.png b/layout/reftests/image/big.png
new file mode 100644
index 0000000000..76a32497c7
Binary files /dev/null and b/layout/reftests/image/big.png differ
diff --git a/layout/reftests/image/blue-100x50.png b/layout/reftests/image/blue-100x50.png
new file mode 100644
index 0000000000..85d980424c
Binary files /dev/null and b/layout/reftests/image/blue-100x50.png differ
diff --git a/layout/reftests/image/blue-16x20.png b/layout/reftests/image/blue-16x20.png
new file mode 100644
index 0000000000..f0f4d319e8
Binary files /dev/null and b/layout/reftests/image/blue-16x20.png differ
diff --git a/layout/reftests/image/blue-32x32.png b/layout/reftests/image/blue-32x32.png
new file mode 100644
index 0000000000..deefd19b2a
Binary files /dev/null and b/layout/reftests/image/blue-32x32.png differ
diff --git a/layout/reftests/image/blue-50x100.png b/layout/reftests/image/blue-50x100.png
new file mode 100644
index 0000000000..d09f03b25f
Binary files /dev/null and b/layout/reftests/image/blue-50x100.png differ
diff --git a/layout/reftests/image/blue-50x50.png b/layout/reftests/image/blue-50x50.png
new file mode 100644
index 0000000000..bdb91e34c8
Binary files /dev/null and b/layout/reftests/image/blue-50x50.png differ
diff --git a/layout/reftests/image/image-exif-0-deg-flip.jpg b/layout/reftests/image/image-exif-0-deg-flip.jpg
new file mode 100644
index 0000000000..727bb34a8c
Binary files /dev/null and b/layout/reftests/image/image-exif-0-deg-flip.jpg differ
diff --git a/layout/reftests/image/image-exif-0-deg.jpg b/layout/reftests/image/image-exif-0-deg.jpg
new file mode 100644
index 0000000000..92eb2605bf
Binary files /dev/null and b/layout/reftests/image/image-exif-0-deg.jpg differ
diff --git a/layout/reftests/image/image-exif-180-deg-flip.jpg b/layout/reftests/image/image-exif-180-deg-flip.jpg
new file mode 100644
index 0000000000..a450d3db4e
Binary files /dev/null and b/layout/reftests/image/image-exif-180-deg-flip.jpg differ
diff --git a/layout/reftests/image/image-exif-180-deg.jpg b/layout/reftests/image/image-exif-180-deg.jpg
new file mode 100644
index 0000000000..cefa5c8b3e
Binary files /dev/null and b/layout/reftests/image/image-exif-180-deg.jpg differ
diff --git a/layout/reftests/image/image-exif-270-deg-flip.jpg b/layout/reftests/image/image-exif-270-deg-flip.jpg
new file mode 100644
index 0000000000..1881be3c3b
Binary files /dev/null and b/layout/reftests/image/image-exif-270-deg-flip.jpg differ
diff --git a/layout/reftests/image/image-exif-270-deg.jpg b/layout/reftests/image/image-exif-270-deg.jpg
new file mode 100644
index 0000000000..eb3f240f4d
Binary files /dev/null and b/layout/reftests/image/image-exif-270-deg.jpg differ
diff --git a/layout/reftests/image/image-exif-90-deg-flip.jpg b/layout/reftests/image/image-exif-90-deg-flip.jpg
new file mode 100644
index 0000000000..60538724fc
Binary files /dev/null and b/layout/reftests/image/image-exif-90-deg-flip.jpg differ
diff --git a/layout/reftests/image/image-exif-90-deg.jpg b/layout/reftests/image/image-exif-90-deg.jpg
new file mode 100644
index 0000000000..249cfeab72
Binary files /dev/null and b/layout/reftests/image/image-exif-90-deg.jpg differ
diff --git a/layout/reftests/image/image-exif-none.jpg b/layout/reftests/image/image-exif-none.jpg
new file mode 100644
index 0000000000..78e3584eef
Binary files /dev/null and b/layout/reftests/image/image-exif-none.jpg differ
diff --git a/layout/reftests/image/image-in-iframe-1-ref.html b/layout/reftests/image/image-in-iframe-1-ref.html
new file mode 100644
index 0000000000..b1e54684cd
--- /dev/null
+++ b/layout/reftests/image/image-in-iframe-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<img src="blue-50x50.png">
diff --git a/layout/reftests/image/image-in-iframe-1.html b/layout/reftests/image/image-in-iframe-1.html
new file mode 100644
index 0000000000..c84789c869
--- /dev/null
+++ b/layout/reftests/image/image-in-iframe-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<style>
+  iframe {
+    border: none;
+    /* This fixed size is just so that we would cause overflow & trigger
+       scrollbars, if we were adding any margin to the internal document.
+       (We're not intending to do so...)  */
+    height: 51px;
+    width: 51px;
+  }
+</style>
+<iframe src="blue-50x50.png"></iframe>
diff --git a/layout/reftests/image/image-object-fit-dyn-1-ref.html b/layout/reftests/image/image-object-fit-dyn-1-ref.html
new file mode 100644
index 0000000000..497c70c883
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-dyn-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      embed, img, object, video {
+        object-fit: cover;
+        background: red;
+        width: 50px;
+        height: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <embed src="500.svg">
+    <img src="500.svg">
+    <object data="500.svg"></object>
+    <video poster="500.svg"></video>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-dyn-1.html b/layout/reftests/image/image-object-fit-dyn-1.html
new file mode 100644
index 0000000000..4d10a285ae
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-dyn-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase ensures that we repaint correctly when "object-fit" is
+     adjusted on a replaced element with SVG content.  We start with
+     "object-fit: contain", which lets some of the red background show through
+     as we fit the SVG's square aspect-ratio into the wide rectangular
+     container elements. We then change dynamically to "object-fit: cover",
+     which should scale our SVG content to cover each replaced element's
+     content-box. No red should ultimately be visible in the reftest snapshot.
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      embed, img, object, video {
+        object-fit: contain;
+        background: red;
+        width: 50px;
+        height: 30px;
+      }
+    </style>
+    <script>
+      function go() {
+        var elemsToTweak = ["embed", "img", "object", "video"];
+        elemsToTweak.forEach(tweakElemObjectFit);
+        document.documentElement.removeAttribute("class");
+      }
+      function tweakElemObjectFit(tagName) {
+        var elem = document.getElementsByTagName(tagName)[0];
+        elem.style.objectFit = "cover";
+      }
+      document.addEventListener("MozReftestInvalidate", go);
+    </script>
+  </head>
+  <body>
+    <embed src="500.svg">
+    <img src="500.svg">
+    <object data="500.svg"></object>
+    <video poster="500.svg"></video>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-with-background-1-ref.html b/layout/reftests/image/image-object-fit-with-background-1-ref.html
new file mode 100644
index 0000000000..dc62869fdf
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-with-background-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      .test {
+        background: salmon;
+        padding: 4px;
+        width: 32px;
+        height: 32px;
+        display: block;
+        margin-bottom: 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <img    class="test"    src="blue-32x32.png">
+    <embed  class="test"    src="blue-32x32.png">
+    <object class="test"   data="blue-32x32.png"></object>
+    <video  class="test" poster="blue-32x32.png"></video>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-with-background-1.html b/layout/reftests/image/image-object-fit-with-background-1.html
new file mode 100644
index 0000000000..e44e22e7bd
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-with-background-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase ensures that we paint the background around an opaque image,
+     when the image is kept from filling the container via 'object-fit'. This
+     is an interesting case because, by default, images fill their container,
+     which means we can often optimize away the background completely. BUT, if
+     "object-fit" prevents the image from filling its container, we can't
+     optimize away the background; it need to be painted in the uncovered area.
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      .test {
+        background: salmon;
+        object-fit: none;
+        width: 40px;
+        height: 40px;
+        display: block;
+        margin-bottom: 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <img    class="test"    src="blue-32x32.png">
+    <embed  class="test"    src="blue-32x32.png">
+    <object class="test"   data="blue-32x32.png"></object>
+    <video  class="test" poster="blue-32x32.png"></video>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-with-background-2-ref.html b/layout/reftests/image/image-object-fit-with-background-2-ref.html
new file mode 100644
index 0000000000..cccdaa3a7b
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-with-background-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      .fakeBackground {
+        background: salmon;
+        height: 3in;
+        width: 32px;
+      }
+
+      img.test {
+        width: 32px;
+        height: 32px;
+        display: block; /* Required for fragmentation */
+      }
+    </style>
+  </head>
+  <body>
+    <div class="fakeBackground"></div>
+    <img class="test" src="blue-32x32.png">
+    <div class="fakeBackground"></div>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-with-background-2.html b/layout/reftests/image/image-object-fit-with-background-2.html
new file mode 100644
index 0000000000..6f0219a289
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-with-background-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase ensures that we paint the background around an opaque image,
+     when the image is kept from filling the container via 'object-fit' (and
+     the img element is fragmented). This is an interesting case because, by
+     default, images fill their container, which means we can often optimize
+     away the background completely. BUT, if "object-fit" prevents the image
+     from filling its container, we can't optimize away the background; it need
+     to be painted in the uncovered area.
+-->
+<html class="reftest-paged">
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      img.test {
+        background: salmon;
+        object-fit: none;
+        width: 32px;
+        /* We make the height 6in larger than the image's intrinsic height,
+         * which gives us the following happy results:
+         *  (1) the <img> will split over several 3in tall reftest-paged cards
+         *      (so, we get to test fragmentation).
+         *  (2) the image pixels end up on the second fragment (not the first),
+         *      so we get to test image-data painting on later fragments.
+         *  (3) the reference case can easily match us using a simple img
+         *      with 3in-tall divs before & after it.
+         */
+        height: calc(32px + 6in);
+        display: block; /* Required for fragmentation */
+      }
+    </style>
+  </head>
+  <body>
+    <img class="test" src="blue-32x32.png">
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-dyn-1-ref.html b/layout/reftests/image/image-object-position-dyn-1-ref.html
new file mode 100644
index 0000000000..81c3fe6376
--- /dev/null
+++ b/layout/reftests/image/image-object-position-dyn-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      embed, img, object, video {
+        object-fit: fill;
+        object-position: 0 0;
+        background: red;
+        width: 50px;
+        height: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <embed src="500.svg">
+    <img src="500.svg">
+    <object data="500.svg"></object>
+    <video poster="500.svg"></video>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-dyn-1.html b/layout/reftests/image/image-object-position-dyn-1.html
new file mode 100644
index 0000000000..54341e4499
--- /dev/null
+++ b/layout/reftests/image/image-object-position-dyn-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase ensures that we repaint correctly when "object-position" is
+     adjusted on a replaced element with SVG content.  We start with
+     "object-position: 10px 15px", which lets a strip of the red background
+     show through on the top and left edges. We then change dynamically to
+     "object-position: 0 0", which (given our "object-fit: fill" value) lets
+     the SVG image fill each replaced element without any uncovered edges.
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      embed, img, object, video {
+        object-fit: fill;
+        object-position: 10px 15px;
+        background: red;
+        width: 50px;
+        height: 30px;
+      }
+    </style>
+    <script>
+      function go() {
+        var elemsToTweak = ["embed", "img", "object", "video"];
+        elemsToTweak.forEach(tweakElemObjectFit);
+        document.documentElement.removeAttribute("class");
+      }
+      function tweakElemObjectFit(tagName) {
+        var elem = document.getElementsByTagName(tagName)[0];
+        elem.style.objectPosition = "0 0";
+      }
+      document.addEventListener("MozReftestInvalidate", go);
+    </script>
+  </head>
+  <body>
+    <embed src="500.svg">
+    <img src="500.svg">
+    <object data="500.svg"></object>
+    <video poster="500.svg"></video>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-with-background-1-ref.html b/layout/reftests/image/image-object-position-with-background-1-ref.html
new file mode 100644
index 0000000000..510e494051
--- /dev/null
+++ b/layout/reftests/image/image-object-position-with-background-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      .crop {
+        /* Wrapper-div to simulate the cropping that happens in
+           the testcase. (In the testcase, "object-position" pushes
+           the image's destination rect off towards the bottom-right,
+           and crops it to the content-box.) */
+        height: 32px;
+        width: 32px;
+        overflow: hidden;
+        margin-bottom: 2px;
+      }
+      .test {
+        background: salmon;
+        padding-top: 5px;
+        padding-left: 5px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="crop">
+      <img    class="test"    src="blue-32x32.png">
+    </div>
+    <div class="crop">
+      <embed  class="test"    src="blue-32x32.png">
+    </div>
+    <div class="crop">
+      <object class="test"   data="blue-32x32.png"></object>
+    </div>
+    <div class="crop">
+      <video  class="test" poster="blue-32x32.png"></video>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-with-background-1.html b/layout/reftests/image/image-object-position-with-background-1.html
new file mode 100644
index 0000000000..ae7a0a2916
--- /dev/null
+++ b/layout/reftests/image/image-object-position-with-background-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase ensures that we paint the background around an opaque image,
+     when the image is offset from the container via 'object-position'. This is
+     an interesting case because, by default, images fill their container,
+     which means we can often optimize away the background completely. BUT, if
+     "object-position" offsets the image from its container's content-box, we
+     can't optimize away the background; it need to be painted in the uncovered
+     area.
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      .test {
+        background: salmon;
+        object-position: 5px 5px;
+        width: 32px;
+        height: 32px;
+        display: block;
+        margin-bottom: 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <img    class="test"    src="blue-32x32.png">
+    <embed  class="test"    src="blue-32x32.png">
+    <object class="test"   data="blue-32x32.png"></object>
+    <video  class="test" poster="blue-32x32.png"></video>
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-with-background-2-ref.html b/layout/reftests/image/image-object-position-with-background-2-ref.html
new file mode 100644
index 0000000000..5088e21a1b
--- /dev/null
+++ b/layout/reftests/image/image-object-position-with-background-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      img.test {
+        background: salmon;
+        padding-left: 10px;
+        padding-top: 20px;
+        width: 22px;
+        height: calc(5in - 20px);
+        display: block; /* Required for fragmentation */
+      }
+    </style>
+  </head>
+  <body>
+    <img class="test" src="blue-32x32.png">
+  </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-with-background-2.html b/layout/reftests/image/image-object-position-with-background-2.html
new file mode 100644
index 0000000000..72c81076d6
--- /dev/null
+++ b/layout/reftests/image/image-object-position-with-background-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase ensures that we paint the background around an opaque image,
+     when the image is offset from the container via 'object-position' (and
+     the img element is fragmented). This is an interesting case because, by
+     default, images fill their container, which means we can often optimize
+     away the background completely. BUT, if "object-position" offsets the
+     image from its container's content-box, we can't optimize away the
+     background; it need to be painted in the uncovered area.
+-->
+<html class="reftest-paged">
+  <head>
+    <meta charset="utf-8">
+    <style type="text/css">
+      img.test {
+        background: salmon;
+        object-position: 10px 20px;
+        width: 32px;
+        height: 5in;
+        display: block; /* Required for fragmentation */
+      }
+    </style>
+  </head>
+  <body>
+    <img class="test" src="blue-32x32.png">
+  </body>
+</html>
diff --git a/layout/reftests/image/image-orientation-background.html b/layout/reftests/image/image-orientation-background.html
new file mode 100644
index 0000000000..0d1a193358
--- /dev/null
+++ b/layout/reftests/image/image-orientation-background.html
@@ -0,0 +1,43 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    div {
+      width:   100px;
+      height:  200px;
+      border:  50px solid black;
+      margin:  50px;
+      padding: 50px;
+
+      /* This is deliberately an image with a non-neutral inherent orientation to */
+      /* ensure that the inherent orientation is irrelevant. */
+      background-image:    url(image-exif-90-deg-flip.jpg);
+      background-position: center;
+      background-repeat:   no-repeat;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+
+  <script>
+    var fromImage = location.search == "from-image";
+
+    // Construct a style.
+    var style;
+    if (fromImage) {
+      style = "div { image-orientation: from-image; }\n";
+    } else {
+      style = "div { image-orientation: none; }\n";
+    }
+
+    // Apply the style to the document.
+    var sheet = document.createElement('style');
+    sheet.innerHTML = style;
+    document.body.appendChild(sheet);
+  </script>
+</body>
diff --git a/layout/reftests/image/image-orientation-dynamic-ref.html b/layout/reftests/image/image-orientation-dynamic-ref.html
new file mode 100644
index 0000000000..8a2cd4c9bd
--- /dev/null
+++ b/layout/reftests/image/image-orientation-dynamic-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    table {
+      border-spacing: 0px;
+    }
+    div {
+      width: 100px; height: 200px;
+    }
+    td {
+      width: 50px; height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <table>
+      <tr>
+        <td style="background-color: rgb(254, 0, 122);"></td>
+        <td style="background-color: rgb(191, 0, 93);"></td>
+      </tr>
+      <tr>
+        <td style="background-color: rgb(0, 255, 1);"></td>
+        <td style="background-color: rgb(0, 191, 0);"></td>
+      </tr>
+    </table>
+  </div>
+</body>
diff --git a/layout/reftests/image/image-orientation-dynamic.html b/layout/reftests/image/image-orientation-dynamic.html
new file mode 100644
index 0000000000..a636b98f43
--- /dev/null
+++ b/layout/reftests/image/image-orientation-dynamic.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+  </style>
+  <img src="image-exif-180-deg.jpg">
+  <script>
+    document.addEventListener("MozReftestInvalidate", function() {
+      document.querySelector("img").style.imageOrientation = "from-image";
+      document.documentElement.className = "";
+    });
+  </script>
+</html>
diff --git a/layout/reftests/image/image-orientation-explicit-none.html b/layout/reftests/image/image-orientation-explicit-none.html
new file mode 100644
index 0000000000..5fad591ca3
--- /dev/null
+++ b/layout/reftests/image/image-orientation-explicit-none.html
@@ -0,0 +1,21 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    img {
+      border:  50px solid black;
+      margin:  50px;
+      padding: 50px;
+      image-orientation: none;
+    }
+  </style>
+</head>
+<body>
+  <!-- This is deliberately an image with a non-neutral inherent orientation to
+       ensure that the inherent orientation is irrelevant. -->
+  <img src="image-exif-90-deg-flip.jpg">
+</body>
diff --git a/layout/reftests/image/image-orientation-from-image.html b/layout/reftests/image/image-orientation-from-image.html
new file mode 100644
index 0000000000..ec46986569
--- /dev/null
+++ b/layout/reftests/image/image-orientation-from-image.html
@@ -0,0 +1,40 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    img {
+      image-orientation: from-image;
+      border:  50px solid black;
+      margin:  50px;
+      padding: 50px;
+    }
+  </style>
+</head>
+<body>
+  <img id="image">
+
+  <script>
+    var orientationInfo = location.search.substring(1).split("&");
+    var angle = orientationInfo[0];
+    var flip = orientationInfo[1] == "flip" ? true : false;
+
+    // Determine the final image file. 'none' is special-cased since its
+    // filename doesn't quite follow the same pattern as the others.
+    var imageFile;
+    if (angle == "none") {
+      imageFile = "image-exif-none.jpg";
+    } else {
+      var imageFile = "image-exif-"
+                    + angle
+                    + "-deg"
+                    + (flip ? "-flip" : "")
+                    + ".jpg";
+    }
+
+    document.getElementById('image').src = imageFile;
+  </script>
+</body>
diff --git a/layout/reftests/image/image-orientation-generated-content-ref.html b/layout/reftests/image/image-orientation-generated-content-ref.html
new file mode 100644
index 0000000000..4a1969360c
--- /dev/null
+++ b/layout/reftests/image/image-orientation-generated-content-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    table {
+      border-spacing: 0px;
+    }
+    div {
+      width: 200px; height: 100px;
+    }
+    td {
+      width: 100px; height: 50px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <table>
+      <tr>
+        <td style="background-color: rgb(254, 0, 122);"></td>
+        <td style="background-color: rgb(0, 255, 1);"></td>
+      </tr>
+      <tr>
+        <td style="background-color: rgb(191, 0, 93);"></td>
+        <td style="background-color: rgb(0, 191, 0);"></td>
+      </tr>
+    </table>
+  </div>
+</body>
diff --git a/layout/reftests/image/image-orientation-generated-content.html b/layout/reftests/image/image-orientation-generated-content.html
new file mode 100644
index 0000000000..ebf4b09d88
--- /dev/null
+++ b/layout/reftests/image/image-orientation-generated-content.html
@@ -0,0 +1,19 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    p {
+      image-orientation: from-image;
+    }
+    p:before {
+      content: url(image-exif-270-deg-flip.jpg);
+    }
+  </style>
+</head>
+<body>
+  <p></p>
+</body>
diff --git a/layout/reftests/image/image-orientation-ref.html b/layout/reftests/image/image-orientation-ref.html
new file mode 100644
index 0000000000..598f3761b4
--- /dev/null
+++ b/layout/reftests/image/image-orientation-ref.html
@@ -0,0 +1,80 @@
+<!DOCTYPE>
+<head>
+  <style>
+    body {
+      border:  0px;
+      margin:  0px;
+      padding: 0px;
+    }
+    div {
+      border:  50px solid black;
+      margin:  50px;
+      padding: 50px;
+    }
+    table {
+      border-spacing: 0px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <table>
+      <tr>
+        <td id="ul"></td>
+        <td id="ur"></td>
+      </tr>
+      <tr>
+        <td id="ll"></td>
+        <td id="lr"></td>
+      </tr>
+    </table>
+  </div>
+
+  <script>
+    var orientationInfo = location.search.substring(1).split("&");
+    var angle = parseInt(orientationInfo[0]);
+    var flip = orientationInfo[1] == "flip" ? true : false;
+
+    // Each id corresponds to a color.
+    var ids = ["ul", "ur", "lr", "ll"];
+    var colors = [
+      "rgb(0, 191, 0)",
+      "rgb(0, 255, 1)",
+      "rgb(254, 0, 122)",
+      "rgb(191, 0, 93)",
+    ];
+
+    // 'Rotate' the colors according to the angle.
+    colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length));
+
+    // 'Flip' the colors if requested.
+    if (flip) {
+        var tmp = colors[0];
+        colors[0] = colors[1];
+        colors[1] = tmp;
+        tmp = colors[2];
+        colors[2] = colors[3];
+        colors[3] = tmp;
+    }
+
+    // Construct a style.
+    var style = "";
+
+    if (angle == 90 || angle == 270) {
+      style += "div { width: 200px; height: 100px; }\n";
+      style += "td { width: 100px; height: 50px; }\n";
+    } else {
+      style += "div { width: 100px; height: 200px; }\n";
+      style += "td { width: 50px; height: 100px; }\n";
+    }
+
+    for (var i = 0 ; i < 4 ; ++i) {
+      style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n";
+    }
+
+    // Apply the style to the document.
+    var sheet = document.createElement('style');
+    sheet.innerHTML = style;
+    document.body.appendChild(sheet);
+  </script>
+</body>
diff --git a/layout/reftests/image/image-resize-percent-height.html b/layout/reftests/image/image-resize-percent-height.html
new file mode 100644
index 0000000000..4365164c52
--- /dev/null
+++ b/layout/reftests/image/image-resize-percent-height.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<script>
+function run() {
+  var img = document.getElementsByTagName("img")[0];
+  img.offsetWidth; // flush layout
+  img.onload = imgload;
+  img.src = "blue-50x50.png";
+}
+function imgload() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+</script>
+<body onload="run()">
+<div><img src="blue-50x100.png" style="width: 50px; height: 100%"></div>
diff --git a/layout/reftests/image/image-resize-percent-width.html b/layout/reftests/image/image-resize-percent-width.html
new file mode 100644
index 0000000000..edbed2623b
--- /dev/null
+++ b/layout/reftests/image/image-resize-percent-width.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<script>
+function run() {
+  var img = document.getElementsByTagName("img")[0];
+  img.offsetWidth; // flush layout
+  img.onload = imgload;
+  img.src = "blue-50x50.png";
+}
+function imgload() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+</script>
+<body onload="run()">
+<div style="width: max-content"><img src="blue-100x50.png" style="width: 100%; height: 50px"></div>
diff --git a/layout/reftests/image/image-resize-ref.html b/layout/reftests/image/image-resize-ref.html
new file mode 100644
index 0000000000..c51f11f91b
--- /dev/null
+++ b/layout/reftests/image/image-resize-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<body>
+<div><img src="blue-50x50.png"></div>
diff --git a/layout/reftests/image/image-seam-1-ref.html b/layout/reftests/image/image-seam-1-ref.html
new file mode 100644
index 0000000000..5253219238
--- /dev/null
+++ b/layout/reftests/image/image-seam-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color:black;
+}
+div {
+  transform: scale(0.3);
+  transform-origin: 0 0;
+  width: 512px;
+  height: 256px;
+  background: white;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/image/image-seam-1a.html b/layout/reftests/image/image-seam-1a.html
new file mode 100644
index 0000000000..511ce5bbdd
--- /dev/null
+++ b/layout/reftests/image/image-seam-1a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color:black;
+}
+div {
+  transform: scale(0.3);
+  transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of (scaled) single pixel images is snapped -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+P//PwAF/gL+3MxZ5wAAAABJRU5ErkJggg=="
+><img style="width:256px; height:256px"
+  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+P//PwAF/gL+3MxZ5wAAAABJRU5ErkJggg==">
+</div>
diff --git a/layout/reftests/image/image-seam-1b.html b/layout/reftests/image/image-seam-1b.html
new file mode 100644
index 0000000000..8f03ac0e1a
--- /dev/null
+++ b/layout/reftests/image/image-seam-1b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color:black;
+}
+div {
+  transform: scale(0.3);
+  transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of a 20x20 image with all pixels the same color is snapped -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAG0lEQVQ4jWP4T2XAMGrgqIGjBo4aOGrgSDUQAOdROhuRCSeMAAAAAElFTkSuQmCC"
+><img style="width:256px; height:256px"
+  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAG0lEQVQ4jWP4T2XAMGrgqIGjBo4aOGrgSDUQAOdROhuRCSeMAAAAAElFTkSuQmCC">
+</div>
diff --git a/layout/reftests/image/image-seam-2-ref.html b/layout/reftests/image/image-seam-2-ref.html
new file mode 100644
index 0000000000..d49b9c9cfc
--- /dev/null
+++ b/layout/reftests/image/image-seam-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color:black;
+}
+div {
+  transform: scale(0.3);
+  transform-origin: 0 0;
+}
+</style>
+<div>
+<img style="width:412px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAADklEQVQImWP4jwYY0AEAlpkP8c9bnjkAAAAASUVORK5CYII="
+><img style="width:100px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAADklEQVQImWP4jwYY0AEAlpkP8c9bnjkAAAAASUVORK5CYII="
+>
+</div>
diff --git a/layout/reftests/image/image-seam-2.html b/layout/reftests/image/image-seam-2.html
new file mode 100644
index 0000000000..8a45e0e5d6
--- /dev/null
+++ b/layout/reftests/image/image-seam-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color:black;
+}
+div {
+  transform: scale(0.3);
+  transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of nonuniform images is snapped -->
+<!-- This is a 2x2 image where the top row is white and the bottom row is transpraent -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="
+><img style="width:256px; height:256px"
+  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+</div>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html
new file mode 100644
index 0000000000..6110dace27
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.1">
+<head>
+
+</head>
+<body>
+  <img src="50.png" width="100">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.1x.html b/layout/reftests/image/image-srcset-basic-selection-0.1x.html
new file mode 100644
index 0000000000..784c142559
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.1" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html
new file mode 100644
index 0000000000..e297d1be21
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.5">
+<head>
+
+</head>
+<body>
+  <img src="50.png" width="100">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.5x.html b/layout/reftests/image/image-srcset-basic-selection-0.5x.html
new file mode 100644
index 0000000000..6268b6783b
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.5x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.5" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html
new file mode 100644
index 0000000000..eaed1e41b9
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.6">
+<head>
+
+</head>
+<body>
+  <img src="100.png" width="100">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.6x.html b/layout/reftests/image/image-srcset-basic-selection-0.6x.html
new file mode 100644
index 0000000000..2bb6105708
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.6x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.6" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html
new file mode 100644
index 0000000000..d17550ec3f
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1.5">
+<head>
+
+</head>
+<body>
+  <img src="200.png" width="100">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-1.5x.html b/layout/reftests/image/image-srcset-basic-selection-1.5x.html
new file mode 100644
index 0000000000..8a119d09b8
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-1.5x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1.5" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-1x-ref.html
new file mode 100644
index 0000000000..838c06f743
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+  <img src="100.png" width="100">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-1x.html b/layout/reftests/image/image-srcset-basic-selection-1x.html
new file mode 100644
index 0000000000..7ca617b3af
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-2x-ref.html b/layout/reftests/image/image-srcset-basic-selection-2x-ref.html
new file mode 100644
index 0000000000..aaaac0bde9
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+  <img src="200.png" width="100">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-2x.html b/layout/reftests/image/image-srcset-basic-selection-2x.html
new file mode 100644
index 0000000000..b03ac55969
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+  <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html
new file mode 100644
index 0000000000..05ee254151
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.5">
+<head>
+    <style>img { width: 50px; }</style>
+</head>
+<body>
+  <img src="50.png" width="50">
+  <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html b/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html
new file mode 100644
index 0000000000..fc811c2cfc
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.5" class="reftest-wait">
+<head>
+    <style>img { width: 50px; }</style>
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000">
+  <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html
new file mode 100644
index 0000000000..2dcbb8d20f
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="10">
+<head>
+    <style>img { width: 50px; }</style>
+</head>
+<body>
+  <img src="300.png" width="50">
+  <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-10x.html b/layout/reftests/image/image-srcset-basic-selection-width-10x.html
new file mode 100644
index 0000000000..4ec1264a48
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-10x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="10" class="reftest-wait">
+<head>
+    <style>img { width: 50px; }</style>
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000">
+  <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html
new file mode 100644
index 0000000000..b5e1718976
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+    <style>img { width: 50px; }</style>
+</head>
+<body>
+  <img src="100.png" width="50">
+  <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-1x.html b/layout/reftests/image/image-srcset-basic-selection-width-1x.html
new file mode 100644
index 0000000000..e4d45c887b
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+    <style>img { width: 50px; }</style>
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000">
+  <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html
new file mode 100644
index 0000000000..041b493d3e
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+    <style>img { width: 50px; }</style>
+</head>
+<body>
+  <img src="200.png" width="50">
+  <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-2x.html b/layout/reftests/image/image-srcset-basic-selection-width-2x.html
new file mode 100644
index 0000000000..c4f86a18a8
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+    <style>img { width: 50px; }</style>
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000">
+  <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-1x-ref.html b/layout/reftests/image/image-srcset-default-1x-ref.html
new file mode 100644
index 0000000000..9e077b78af
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+  <img src="100.png" width="100">
+  <p>Test default source in sourceset, src should be ignored</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-1x.html b/layout/reftests/image/image-srcset-default-1x.html
new file mode 100644
index 0000000000..9cb108ccc0
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="200.png 2x, 100.png" src="50.png">
+  <p>Test default source in sourceset, src should be ignored</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-2x-ref.html b/layout/reftests/image/image-srcset-default-2x-ref.html
new file mode 100644
index 0000000000..a6e264563d
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+  <img src="200.png" width="100">
+  <p>Test default source in sourceset, src should be ignored</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-2x.html b/layout/reftests/image/image-srcset-default-2x.html
new file mode 100644
index 0000000000..b53d099cc8
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="200.png 2x, 100.png" src="50.png">
+  <p>Test default source in sourceset, src should be ignored</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-src-1x-ref.html b/layout/reftests/image/image-srcset-default-src-1x-ref.html
new file mode 100644
index 0000000000..e87c72953c
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-src-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+  <img src="50.png" width="50">
+  <p>Test default source provided in src, with no default/1x in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-src-1x.html b/layout/reftests/image/image-srcset-default-src-1x.html
new file mode 100644
index 0000000000..247ce733d0
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-src-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="200.png 2x" src="50.png">
+  <p>Test default source provided in src, with no default/1x in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-src-2x-ref.html b/layout/reftests/image/image-srcset-default-src-2x-ref.html
new file mode 100644
index 0000000000..0128d05dd0
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-src-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+  <img src="200.png" width="100">
+  <p>Test default source provided in src, with no default/1x in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-src-2x.html b/layout/reftests/image/image-srcset-default-src-2x.html
new file mode 100644
index 0000000000..ec92de752e
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-src-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="200.png 2x" src="50.png">
+  <p>Test default source provided in src, with no default/1x in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-isize-ref.html b/layout/reftests/image/image-srcset-isize-ref.html
new file mode 100644
index 0000000000..8dd146f480
--- /dev/null
+++ b/layout/reftests/image/image-srcset-isize-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html reftest-zoom="2">
+<title>CSS Test Reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<style>
+.image-container {
+  display: inline;
+}
+.content-container {
+  display: inline-block;
+}
+.flex-container {
+  align-items: center;
+  display: flex;
+}
+</style>
+<div class="flex-container">
+  <div class="image-container">
+    <img src="200.png" width="100">
+  </div>
+  <div class="content-container">
+    Should see me right by the side of the image.
+  </div>
+</div>
+</html>
diff --git a/layout/reftests/image/image-srcset-isize.html b/layout/reftests/image/image-srcset-isize.html
new file mode 100644
index 0000000000..2189c2bee9
--- /dev/null
+++ b/layout/reftests/image/image-srcset-isize.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html reftest-zoom="2" class="reftest-wait">
+<title>CSS Test: srcset intrinsic size isn't confused</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1149357">
+<style>
+.image-container {
+  display: inline;
+}
+.content-container {
+  display: inline-block;
+}
+.flex-container {
+  align-items: center;
+  display: flex;
+}
+</style>
+<script>
+  // reftest-zoom is only applied at onload, so ensure the source-selection
+  // has happened after that
+  function clearWait() {
+    document.documentElement.classList.remove("reftest-wait");
+  }
+  window.addEventListener("load", function() {
+    setTimeout(function() {
+      var img = document.querySelector("img");
+      img.onload = clearWait;
+      img.onerror = clearWait;
+      img.src = img.src;
+    }, 0);
+  });
+</script>
+<div class="flex-container">
+  <div class="image-container">
+    <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+  </div>
+  <div class="content-container">
+    Should see me right by the side of the image.
+  </div>
+</div>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-1x-ref.html b/layout/reftests/image/image-srcset-svg-1x-ref.html
new file mode 100644
index 0000000000..d696bba0a9
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+  <img src="50.png" width="50">
+  <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-1x.html b/layout/reftests/image/image-srcset-svg-1x.html
new file mode 100644
index 0000000000..3e84709267
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png">
+  <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-2x-ref.html b/layout/reftests/image/image-srcset-svg-2x-ref.html
new file mode 100644
index 0000000000..95bd377f5a
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+  <img src="500.svg" width="250">
+  <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-2x.html b/layout/reftests/image/image-srcset-svg-2x.html
new file mode 100644
index 0000000000..1c90fd4a22
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png">
+  <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-3x-ref.html b/layout/reftests/image/image-srcset-svg-3x-ref.html
new file mode 100644
index 0000000000..c0e3487fc6
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-3x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="3">
+<head>
+
+</head>
+<body>
+  <img src="no-intrinsic-size.svg">
+  <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-3x.html b/layout/reftests/image/image-srcset-svg-3x.html
new file mode 100644
index 0000000000..531c17991c
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-3x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="3" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png">
+  <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-default-1x-ref.html b/layout/reftests/image/image-srcset-svg-default-1x-ref.html
new file mode 100644
index 0000000000..b4857f6fc1
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-default-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+  <img src="no-intrinsic-size.svg">
+  <p>Test that svgs work as expected as the fallback from a srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-default-1x.html b/layout/reftests/image/image-srcset-svg-default-1x.html
new file mode 100644
index 0000000000..3b79ce37fa
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-default-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="200.png 2x" src="no-intrinsic-size.svg">
+  <p>Test that svgs work as expected as the fallback from a srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-default-2x-ref.html b/layout/reftests/image/image-srcset-svg-default-2x-ref.html
new file mode 100644
index 0000000000..2ee1007427
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-default-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+  <img src="200.png" width="100">
+  <p>Test that svgs work as expected as the fallback from a srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-default-2x.html b/layout/reftests/image/image-srcset-svg-default-2x.html
new file mode 100644
index 0000000000..ea13f13f8c
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-default-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+    <script type="application/javascript">
+    // reftest-zoom is only applied at onload, so ensure the source-selection
+    // has happened after that
+    function clearWait() {
+      document.documentElement.classList.remove("reftest-wait");
+    }
+    window.addEventListener("load", function() {
+      setTimeout(function() {
+        var img = document.querySelector("img");
+        img.onload = clearWait;
+        img.onerror = clearWait;
+        img.src = img.src;
+      }, 0);
+    });
+  </script>
+</head>
+<body>
+  <img srcset="200.png 2x" src="no-intrinsic-size.svg">
+  <p>Test that svgs work as expected as the fallback from a srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-zoom-1-ref.html b/layout/reftests/image/image-zoom-1-ref.html
new file mode 100644
index 0000000000..58bd5b8c69
--- /dev/null
+++ b/layout/reftests/image/image-zoom-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+    -->
+<html>
+<head>
+<title>reference image-rendering: -moz-crisp-edges</title>
+<style>
+img { position:absolute;left:20px;top:20px; }
+</style>
+</head>
+<body>
+<img width="10" height="10" src="big.png"/>
+</body>
+</html>
diff --git a/layout/reftests/image/image-zoom-1.html b/layout/reftests/image/image-zoom-1.html
new file mode 100644
index 0000000000..fa4a791391
--- /dev/null
+++ b/layout/reftests/image/image-zoom-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+    -->
+<html reftest-zoom="5">
+<head>
+<title>test image-rendering: -moz-crisp-edges</title>
+<style>
+img { position:absolute;left:4px;top:4px; }
+</style>
+</head>
+<body>
+<img style="image-rendering: -moz-crisp-edges;" width="10" height="10" src="small.png"/>
+</body>
+</html>
diff --git a/layout/reftests/image/image-zoom-2.html b/layout/reftests/image/image-zoom-2.html
new file mode 100644
index 0000000000..d058dc81f6
--- /dev/null
+++ b/layout/reftests/image/image-zoom-2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+    -->
+<html reftest-zoom="5">
+<head>
+<title>test image-rendering: -moz-crisp-edges</title>
+<style>
+img { position:absolute;left:4px;top:4px; opacity:0.9999; }
+</style>
+</head>
+<body>
+<img style="image-rendering: -moz-crisp-edges;" width="10" height="10" src="small.png"/>
+</body>
+</html>
diff --git a/layout/reftests/image/img-invalidation-local-transform-1-ref.html b/layout/reftests/image/img-invalidation-local-transform-1-ref.html
new file mode 100644
index 0000000000..75cb2b6cb8
--- /dev/null
+++ b/layout/reftests/image/img-invalidation-local-transform-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+</style>
+</head>
+<body>
+<div style="width: 450px">
+<img src="img-invalidation-local-transform-1-ref.png">
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/image/img-invalidation-local-transform-1-ref.png b/layout/reftests/image/img-invalidation-local-transform-1-ref.png
new file mode 100644
index 0000000000..1835692bcd
Binary files /dev/null and b/layout/reftests/image/img-invalidation-local-transform-1-ref.png differ
diff --git a/layout/reftests/image/img-invalidation-local-transform-1.html b/layout/reftests/image/img-invalidation-local-transform-1.html
new file mode 100644
index 0000000000..9bc45ad759
--- /dev/null
+++ b/layout/reftests/image/img-invalidation-local-transform-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<!-- test for bug 1469000 https://bugzilla.mozilla.org/show_bug.cgi?id=1469000 -->
+<!-- this based on image/*/delaytest.html tests -->
+<head>
+<style>
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+</style>
+</head>
+<body>
+<div style="width: 450px">
+<img id="image1" src="img-invalidation-local-transform-1.png" srcset="img-invalidation-local-transform-1.png 400w, img-invalidation-local-transform-1.png 217w, img-invalidation-local-transform-1.png 100w">
+</div>
+
+
+<script>
+window.addEventListener("load", forceDecode);
+window.addEventListener("MozReftestInvalidate", reftestInvalidateListener);
+
+let decodeComplete = false;
+let gotReftestInvalidate = false;
+
+function forceDecode() {
+  let img = document.getElementById("image1");
+  img.decode().then(function() {
+    decodeComplete = true;
+    maybeStartTimer();
+  });
+}
+
+function reftestInvalidateListener() {
+  gotReftestInvalidate = true;
+  maybeStartTimer();
+}
+
+function maybeStartTimer() {
+  if (decodeComplete && gotReftestInvalidate) {
+    startTimer();
+  }
+}
+
+function startTimer() {
+  const delay = 2000;
+  setTimeout("document.documentElement.className = '';", delay);
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/image/img-invalidation-local-transform-1.png b/layout/reftests/image/img-invalidation-local-transform-1.png
new file mode 100644
index 0000000000..778613d851
Binary files /dev/null and b/layout/reftests/image/img-invalidation-local-transform-1.png differ
diff --git a/layout/reftests/image/invalid-url-image-1-ref.html b/layout/reftests/image/invalid-url-image-1-ref.html
new file mode 100644
index 0000000000..737210be8e
--- /dev/null
+++ b/layout/reftests/image/invalid-url-image-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <img>
+    <input type="image">
+  </body>
+</html>
diff --git a/layout/reftests/image/invalid-url-image-1.html b/layout/reftests/image/invalid-url-image-1.html
new file mode 100644
index 0000000000..85fad81e4b
--- /dev/null
+++ b/layout/reftests/image/invalid-url-image-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <img src="http://www.foo  oo.com" alt="">
+    <input type="image" src="http://www.foo  oo.com">
+  </body>
+</html>
diff --git a/layout/reftests/image/moz-broken-matching-1-ref.html b/layout/reftests/image/moz-broken-matching-1-ref.html
new file mode 100644
index 0000000000..94bb5e4962
--- /dev/null
+++ b/layout/reftests/image/moz-broken-matching-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+  img {
+    border: 10px solid green;
+  }
+</style>
+<img src="nosuch:url">
diff --git a/layout/reftests/image/moz-broken-matching-1.html b/layout/reftests/image/moz-broken-matching-1.html
new file mode 100644
index 0000000000..eb63194e14
--- /dev/null
+++ b/layout/reftests/image/moz-broken-matching-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+  :-moz-broken {
+    border: 10px solid green;
+  }
+</style>
+<img src="nosuch:url">
diff --git a/layout/reftests/image/moz-broken-matching-lazy-load.html b/layout/reftests/image/moz-broken-matching-lazy-load.html
new file mode 100644
index 0000000000..696560ac5c
--- /dev/null
+++ b/layout/reftests/image/moz-broken-matching-lazy-load.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+  :-moz-broken {
+    border: 10px solid green;
+  }
+</style>
+<!--
+  We need to wait for an error event since we consider lazy load images are NOT
+  broken initially until loaded.
+-->
+<img loading="lazy" src="nosuch:url" onerror="document.documentElement.className=''">
+</html>
diff --git a/layout/reftests/image/nearly-white.png b/layout/reftests/image/nearly-white.png
new file mode 100644
index 0000000000..128d151100
Binary files /dev/null and b/layout/reftests/image/nearly-white.png differ
diff --git a/layout/reftests/image/no-intrinsic-size.svg b/layout/reftests/image/no-intrinsic-size.svg
new file mode 100644
index 0000000000..7024583524
--- /dev/null
+++ b/layout/reftests/image/no-intrinsic-size.svg
@@ -0,0 +1,9 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+<title>Simple SVG with no intrinsic size</title>
+  <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/image/reftest.list b/layout/reftests/image/reftest.list
new file mode 100644
index 0000000000..82e788ecc1
--- /dev/null
+++ b/layout/reftests/image/reftest.list
@@ -0,0 +1,73 @@
+fuzzy-if(Android,0-8,0-30) fails-if(useDrawSnapshot) == background-image-zoom-1.html background-image-zoom-1-ref.html
+fails-if(usesRepeatResampling&&!winWidget) fails-if(useDrawSnapshot) == background-image-zoom-2.html about:blank
+== image-in-iframe-1.html image-in-iframe-1-ref.html
+== image-seam-1a.html image-seam-1-ref.html
+== image-seam-1b.html image-seam-1-ref.html
+fuzzy-if(Android,0-255,0-154) == image-seam-2.html  image-seam-2-ref.html  # Bug 1128229
+fails-if(useDrawSnapshot) == image-zoom-1.html image-zoom-1-ref.html
+fails-if(useDrawSnapshot) == image-zoom-2.html image-zoom-1-ref.html
+== invalid-url-image-1.html invalid-url-image-1-ref.html
+== sync-image-switch-1a.html sync-image-switch-1-ref.html
+== sync-image-switch-1b.html sync-image-switch-1-ref.html
+== sync-image-switch-1c.html sync-image-switch-1-ref.html
+== sync-image-switch-1d.html sync-image-switch-1-ref.html
+
+# Tests for "object-fit" & "object-position"
+== image-object-fit-dyn-1.html image-object-fit-dyn-1-ref.html
+== image-object-fit-with-background-1.html image-object-fit-with-background-1-ref.html
+fuzzy-if(swgl&&cocoaWidget,0-1,0-2) == image-object-fit-with-background-2.html image-object-fit-with-background-2-ref.html
+== image-object-position-dyn-1.html image-object-position-dyn-1-ref.html
+== image-object-position-with-background-1.html image-object-position-with-background-1-ref.html
+fuzzy-if(winWidget,0-117,0-374) fuzzy-if(cocoaWidget&&swgl,0-1,0-3) == image-object-position-with-background-2.html image-object-position-with-background-2-ref.html  # Bug 1128229
+
+# Tests for image-orientation used with 'from-image' (note that all
+# image-orientation tests are fuzzy because the JPEG images do not perfectly
+# reproduce blocks of solid color, even at maximum quality):
+fuzzy(0-2,0-5) == image-orientation-from-image.html?none     image-orientation-ref.html?0
+fuzzy(0-1,0-1) == image-orientation-from-image.html?0        image-orientation-ref.html?0
+fuzzy(0-1,0-1) == image-orientation-from-image.html?90       image-orientation-ref.html?90
+fuzzy(0-1,0-1) == image-orientation-from-image.html?180      image-orientation-ref.html?180
+fuzzy(0-1,0-1) == image-orientation-from-image.html?270      image-orientation-ref.html?270
+fuzzy(0-1,0-1) == image-orientation-from-image.html?0&flip   image-orientation-ref.html?0&flip
+fuzzy(0-1,0-1) == image-orientation-from-image.html?90&flip  image-orientation-ref.html?90&flip
+fuzzy(0-1,0-1) == image-orientation-from-image.html?180&flip image-orientation-ref.html?180&flip
+fuzzy(0-1,0-1) == image-orientation-from-image.html?270&flip image-orientation-ref.html?270&flip
+
+# Tests for image-orientation used with an explicit 'none' orientation:
+fuzzy(0-1,0-1) == image-orientation-explicit-none.html image-orientation-ref.html?0
+
+# Tests for image-orientation:from-image used on generated content:
+fuzzy(0-1,0-1) == image-orientation-generated-content.html image-orientation-generated-content-ref.html
+
+fuzzy(0-1,0-1) == image-orientation-dynamic.html image-orientation-dynamic-ref.html
+
+# <img srcset> tests
+== image-srcset-basic-selection-0.1x.html image-srcset-basic-selection-0.1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-basic-selection-2x.html image-srcset-basic-selection-2x-ref.html
+== image-srcset-basic-selection-0.5x.html image-srcset-basic-selection-0.5x-ref.html
+== image-srcset-basic-selection-0.6x.html image-srcset-basic-selection-0.6x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-basic-selection-1.5x.html image-srcset-basic-selection-1.5x-ref.html
+== image-srcset-basic-selection-1x.html image-srcset-basic-selection-1x-ref.html
+== image-srcset-basic-selection-width-0.5x.html image-srcset-basic-selection-width-0.5x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-basic-selection-width-10x.html image-srcset-basic-selection-width-10x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-basic-selection-width-2x.html image-srcset-basic-selection-width-2x-ref.html
+== image-srcset-basic-selection-width-1x.html image-srcset-basic-selection-width-1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-default-2x.html image-srcset-default-2x-ref.html
+== image-srcset-default-1x.html image-srcset-default-1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-default-src-2x.html image-srcset-default-src-2x-ref.html
+== image-srcset-default-src-1x.html image-srcset-default-src-1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-isize.html image-srcset-isize-ref.html
+fails-if(useDrawSnapshot) == image-srcset-svg-3x.html image-srcset-svg-3x-ref.html
+== image-srcset-svg-2x.html image-srcset-svg-2x-ref.html
+== image-srcset-svg-1x.html image-srcset-svg-1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-svg-default-2x.html image-srcset-svg-default-2x-ref.html
+== image-srcset-svg-default-1x.html image-srcset-svg-default-1x-ref.html
+
+== image-resize-percent-height.html image-resize-ref.html
+== image-resize-percent-width.html image-resize-ref.html
+
+== moz-broken-matching-1.html moz-broken-matching-1-ref.html
+pref(dom.image-lazy-loading.enabled,true) == moz-broken-matching-lazy-load.html moz-broken-matching-1-ref.html
+
+== img-invalidation-local-transform-1.html img-invalidation-local-transform-1-ref.html
+== unknown-protocol.html unknown-protocol-ref.html
diff --git a/layout/reftests/image/small.png b/layout/reftests/image/small.png
new file mode 100644
index 0000000000..9ff11a9932
Binary files /dev/null and b/layout/reftests/image/small.png differ
diff --git a/layout/reftests/image/sync-image-switch-1-ref.html b/layout/reftests/image/sync-image-switch-1-ref.html
new file mode 100644
index 0000000000..654d1a9b70
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+  <img src="blue-32x32.png">
+</html>
diff --git a/layout/reftests/image/sync-image-switch-1a.html b/layout/reftests/image/sync-image-switch-1a.html
new file mode 100644
index 0000000000..f1b7d6316f
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1a.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <img src="blue-16x20.png">
+  <script>
+    var otherImageSrc = "blue-32x32.png"
+    window.onload = function() {
+      var img = document.querySelector("img");
+      img.src = otherImageSrc;
+      img.style.width = img.naturalWidth + "px";
+      img.style.height = img.naturalHeight + "px";
+      document.documentElement.className = "";
+    }
+    var otherImage = new Image;
+    otherImage.src = otherImageSrc;
+  </script>
+</html>
diff --git a/layout/reftests/image/sync-image-switch-1b.html b/layout/reftests/image/sync-image-switch-1b.html
new file mode 100644
index 0000000000..7462ec696d
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1b.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <img src="blue-16x20.png">
+  <script>
+    var otherImageSrc = "blue-32x32.png"
+    window.onload = function() {
+      var img = document.querySelector("img");
+      img.src = otherImageSrc;
+      img.style.width = img.width + "px";
+      img.style.height = img.height + "px";
+      document.documentElement.className = "";
+    }
+    var otherImage = new Image;
+    otherImage.src = otherImageSrc;
+  </script>
+</html>
diff --git a/layout/reftests/image/sync-image-switch-1c.html b/layout/reftests/image/sync-image-switch-1c.html
new file mode 100644
index 0000000000..2182e40db9
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1c.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <input type="image" src="blue-16x20.png">
+  <script>
+    var otherImageSrc = "blue-32x32.png"
+    window.onload = function() {
+      var img = document.querySelector("input");
+      img.src = otherImageSrc;
+      img.style.width = img.naturalWidth + "px";
+      img.style.height = img.naturalHeight + "px";
+      document.documentElement.className = "";
+    }
+    var otherImage = new Image;
+    otherImage.src = otherImageSrc;
+  </script>
+</html>
diff --git a/layout/reftests/image/sync-image-switch-1d.html b/layout/reftests/image/sync-image-switch-1d.html
new file mode 100644
index 0000000000..3001305b0c
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1d.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <input type="image" src="blue-16x20.png">
+  <script>
+    var otherImageSrc = "blue-32x32.png"
+    window.onload = function() {
+      var img = document.querySelector("input");
+      img.src = otherImageSrc;
+      img.style.width = img.width + "px";
+      img.style.height = img.height + "px";
+      document.documentElement.className = "";
+    }
+    var otherImage = new Image;
+    otherImage.src = otherImageSrc;
+  </script>
+</html>
diff --git a/layout/reftests/image/unknown-protocol-ref.html b/layout/reftests/image/unknown-protocol-ref.html
new file mode 100644
index 0000000000..b5bb326eef
--- /dev/null
+++ b/layout/reftests/image/unknown-protocol-ref.html
@@ -0,0 +1 @@
+<img src="mailto://foo">
diff --git a/layout/reftests/image/unknown-protocol.html b/layout/reftests/image/unknown-protocol.html
new file mode 100644
index 0000000000..ef06881b7b
--- /dev/null
+++ b/layout/reftests/image/unknown-protocol.html
@@ -0,0 +1 @@
+<img src="foobar://baz">
-- 
cgit v1.2.3