summaryrefslogtreecommitdiffstats
path: root/layout/reftests/image
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/image')
-rw-r--r--layout/reftests/image/100.pngbin0 -> 91 bytes
-rw-r--r--layout/reftests/image/200.pngbin0 -> 100 bytes
-rw-r--r--layout/reftests/image/300.pngbin0 -> 106 bytes
-rw-r--r--layout/reftests/image/400.pngbin0 -> 114 bytes
-rw-r--r--layout/reftests/image/50.pngbin0 -> 85 bytes
-rw-r--r--layout/reftests/image/500.svg9
-rw-r--r--layout/reftests/image/background-image-zoom-1-ref.html23
-rw-r--r--layout/reftests/image/background-image-zoom-1.html24
-rw-r--r--layout/reftests/image/background-image-zoom-2.html23
-rw-r--r--layout/reftests/image/big.pngbin0 -> 82 bytes
-rw-r--r--layout/reftests/image/blue-100x50.pngbin0 -> 219 bytes
-rw-r--r--layout/reftests/image/blue-16x20.pngbin0 -> 118 bytes
-rw-r--r--layout/reftests/image/blue-32x32.pngbin0 -> 110 bytes
-rw-r--r--layout/reftests/image/blue-50x100.pngbin0 -> 220 bytes
-rw-r--r--layout/reftests/image/blue-50x50.pngbin0 -> 191 bytes
-rw-r--r--layout/reftests/image/image-exif-0-deg-flip.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-0-deg.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-180-deg-flip.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-180-deg.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-270-deg-flip.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-270-deg.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-90-deg-flip.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-90-deg.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-none.jpgbin0 -> 1776 bytes
-rw-r--r--layout/reftests/image/image-in-iframe-1-ref.html6
-rw-r--r--layout/reftests/image/image-in-iframe-1.html16
-rw-r--r--layout/reftests/image/image-object-fit-dyn-1-ref.html24
-rw-r--r--layout/reftests/image/image-object-fit-dyn-1.html45
-rw-r--r--layout/reftests/image/image-object-fit-with-background-1-ref.html26
-rw-r--r--layout/reftests/image/image-object-fit-with-background-1.html34
-rw-r--r--layout/reftests/image/image-object-fit-with-background-2-ref.html28
-rw-r--r--layout/reftests/image/image-object-fit-with-background-2.html40
-rw-r--r--layout/reftests/image/image-object-position-dyn-1-ref.html25
-rw-r--r--layout/reftests/image/image-object-position-dyn-1.html45
-rw-r--r--layout/reftests/image/image-object-position-with-background-1-ref.html42
-rw-r--r--layout/reftests/image/image-object-position-with-background-1.html35
-rw-r--r--layout/reftests/image/image-object-position-with-background-2-ref.html23
-rw-r--r--layout/reftests/image/image-object-position-with-background-2.html31
-rw-r--r--layout/reftests/image/image-orientation-background.html43
-rw-r--r--layout/reftests/image/image-orientation-dynamic-ref.html33
-rw-r--r--layout/reftests/image/image-orientation-dynamic.html17
-rw-r--r--layout/reftests/image/image-orientation-explicit-none.html21
-rw-r--r--layout/reftests/image/image-orientation-from-image.html40
-rw-r--r--layout/reftests/image/image-orientation-generated-content-ref.html33
-rw-r--r--layout/reftests/image/image-orientation-generated-content.html19
-rw-r--r--layout/reftests/image/image-orientation-ref.html80
-rw-r--r--layout/reftests/image/image-resize-percent-height.html15
-rw-r--r--layout/reftests/image/image-resize-percent-width.html15
-rw-r--r--layout/reftests/image/image-resize-ref.html3
-rw-r--r--layout/reftests/image/image-seam-1-ref.html14
-rw-r--r--layout/reftests/image/image-seam-1a.html17
-rw-r--r--layout/reftests/image/image-seam-1b.html17
-rw-r--r--layout/reftests/image/image-seam-2-ref.html17
-rw-r--r--layout/reftests/image/image-seam-2.html18
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.1x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.5x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.6x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-1.5x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-0.5x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-10x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-default-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-default-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-default-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-default-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-default-src-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-default-src-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-default-src-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-default-src-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-isize-ref.html25
-rw-r--r--layout/reftests/image/image-srcset-isize.html41
-rw-r--r--layout/reftests/image/image-srcset-svg-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-svg-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-svg-3x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-3x.html26
-rw-r--r--layout/reftests/image/image-srcset-svg-default-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-default-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-svg-default-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-default-2x.html26
-rw-r--r--layout/reftests/image/image-zoom-1-ref.html16
-rw-r--r--layout/reftests/image/image-zoom-1.html16
-rw-r--r--layout/reftests/image/image-zoom-2.html16
-rw-r--r--layout/reftests/image/img-invalidation-local-transform-1-ref.html17
-rw-r--r--layout/reftests/image/img-invalidation-local-transform-1-ref.pngbin0 -> 3757 bytes
-rw-r--r--layout/reftests/image/img-invalidation-local-transform-1.html51
-rw-r--r--layout/reftests/image/img-invalidation-local-transform-1.pngbin0 -> 5834 bytes
-rw-r--r--layout/reftests/image/invalid-url-image-1-ref.html7
-rw-r--r--layout/reftests/image/invalid-url-image-1.html7
-rw-r--r--layout/reftests/image/moz-broken-matching-1-ref.html7
-rw-r--r--layout/reftests/image/moz-broken-matching-1.html7
-rw-r--r--layout/reftests/image/moz-broken-matching-lazy-load.html13
-rw-r--r--layout/reftests/image/nearly-white.pngbin0 -> 115 bytes
-rw-r--r--layout/reftests/image/no-intrinsic-size.svg9
-rw-r--r--layout/reftests/image/reftest.list73
-rw-r--r--layout/reftests/image/small.pngbin0 -> 85 bytes
-rw-r--r--layout/reftests/image/sync-image-switch-1-ref.html4
-rw-r--r--layout/reftests/image/sync-image-switch-1a.html16
-rw-r--r--layout/reftests/image/sync-image-switch-1b.html16
-rw-r--r--layout/reftests/image/sync-image-switch-1c.html16
-rw-r--r--layout/reftests/image/sync-image-switch-1d.html16
-rw-r--r--layout/reftests/image/unknown-protocol-ref.html1
-rw-r--r--layout/reftests/image/unknown-protocol.html1
117 files changed, 1979 insertions, 0 deletions
diff --git a/layout/reftests/image/100.png b/layout/reftests/image/100.png
new file mode 100644
index 0000000000..df421453c2
--- /dev/null
+++ b/layout/reftests/image/100.png
Binary files differ
diff --git a/layout/reftests/image/200.png b/layout/reftests/image/200.png
new file mode 100644
index 0000000000..6f76d44387
--- /dev/null
+++ b/layout/reftests/image/200.png
Binary files differ
diff --git a/layout/reftests/image/300.png b/layout/reftests/image/300.png
new file mode 100644
index 0000000000..c12b7ceea1
--- /dev/null
+++ b/layout/reftests/image/300.png
Binary files differ
diff --git a/layout/reftests/image/400.png b/layout/reftests/image/400.png
new file mode 100644
index 0000000000..8855fc6d46
--- /dev/null
+++ b/layout/reftests/image/400.png
Binary files differ
diff --git a/layout/reftests/image/50.png b/layout/reftests/image/50.png
new file mode 100644
index 0000000000..144a2f0b93
--- /dev/null
+++ b/layout/reftests/image/50.png
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/big.png
Binary files differ
diff --git a/layout/reftests/image/blue-100x50.png b/layout/reftests/image/blue-100x50.png
new file mode 100644
index 0000000000..85d980424c
--- /dev/null
+++ b/layout/reftests/image/blue-100x50.png
Binary files differ
diff --git a/layout/reftests/image/blue-16x20.png b/layout/reftests/image/blue-16x20.png
new file mode 100644
index 0000000000..f0f4d319e8
--- /dev/null
+++ b/layout/reftests/image/blue-16x20.png
Binary files differ
diff --git a/layout/reftests/image/blue-32x32.png b/layout/reftests/image/blue-32x32.png
new file mode 100644
index 0000000000..deefd19b2a
--- /dev/null
+++ b/layout/reftests/image/blue-32x32.png
Binary files differ
diff --git a/layout/reftests/image/blue-50x100.png b/layout/reftests/image/blue-50x100.png
new file mode 100644
index 0000000000..d09f03b25f
--- /dev/null
+++ b/layout/reftests/image/blue-50x100.png
Binary files differ
diff --git a/layout/reftests/image/blue-50x50.png b/layout/reftests/image/blue-50x50.png
new file mode 100644
index 0000000000..bdb91e34c8
--- /dev/null
+++ b/layout/reftests/image/blue-50x50.png
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-0-deg-flip.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-0-deg.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-180-deg-flip.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-180-deg.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-270-deg-flip.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-270-deg.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-90-deg-flip.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-90-deg.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/image-exif-none.jpg
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/img-invalidation-local-transform-1-ref.png
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/img-invalidation-local-transform-1.png
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/nearly-white.png
Binary files 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
--- /dev/null
+++ b/layout/reftests/image/small.png
Binary files 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">