summaryrefslogtreecommitdiffstats
path: root/layout/reftests/image
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/reftests/image
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
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-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.html48
-rw-r--r--layout/reftests/image/image-orientation-border-image.html46
-rw-r--r--layout/reftests/image/image-orientation-dynamic-ref.html2
-rw-r--r--layout/reftests/image/image-orientation-dynamic.html10
-rw-r--r--layout/reftests/image/image-orientation-explicit.html37
-rw-r--r--layout/reftests/image/image-orientation-from-image.html40
-rw-r--r--layout/reftests/image/image-orientation-generated-content-ref.html75
-rw-r--r--layout/reftests/image/image-orientation-generated-content.html38
-rw-r--r--layout/reftests/image/image-orientation-list-style-image.html39
-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-orientation-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-orientation-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-orientation-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-orientation-2x.html26
-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/invalid-url-image-1-ref.html7
-rw-r--r--layout/reftests/image/invalid-url-image-1.html7
-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-stylo.list137
-rw-r--r--layout/reftests/image/reftest.list128
-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
111 files changed, 2189 insertions, 0 deletions
diff --git a/layout/reftests/image/100.png b/layout/reftests/image/100.png
new file mode 100644
index 000000000..df421453c
--- /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 000000000..6f76d4438
--- /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 000000000..c12b7ceea
--- /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 000000000..8855fc6d4
--- /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 000000000..144a2f0b9
--- /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 000000000..35ad0db4f
--- /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 000000000..b23048bb6
--- /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 000000000..0572099a3
--- /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 000000000..18a41ea43
--- /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 000000000..76a32497c
--- /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 000000000..85d980424
--- /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 000000000..f0f4d319e
--- /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 000000000..deefd19b2
--- /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 000000000..d09f03b25
--- /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 000000000..bdb91e34c
--- /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 000000000..727bb34a8
--- /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 000000000..92eb2605b
--- /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 000000000..a450d3db4
--- /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 000000000..cefa5c8b3
--- /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 000000000..1881be3c3
--- /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 000000000..eb3f240f4
--- /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 000000000..60538724f
--- /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 000000000..249cfeab7
--- /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 000000000..78e3584ee
--- /dev/null
+++ b/layout/reftests/image/image-exif-none.jpg
Binary files differ
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 000000000..497c70c88
--- /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 000000000..4d10a285a
--- /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 000000000..dc62869fd
--- /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 000000000..e44e22e7b
--- /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 000000000..d3c5e69ec
--- /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-print">
+ <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 000000000..e5107a2fd
--- /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-print">
+ <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-print 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 000000000..81c3fe637
--- /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 000000000..54341e449
--- /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 000000000..510e49405
--- /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 000000000..ae7a0a291
--- /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 000000000..9daa6b731
--- /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-print">
+ <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 000000000..e02da36a0
--- /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-print">
+ <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 000000000..f02411366
--- /dev/null
+++ b/layout/reftests/image/image-orientation-background.html
@@ -0,0 +1,48 @@
+<!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 orientation = location.search.substring(1).split("&");
+ var angle = orientation[0];
+ var flip = orientation[1] == "flip" ? true : false;
+
+ // Construct a style. "from-image" is special-cased.
+ var style;
+ if (angle == "from-image") {
+ style = "div { image-orientation: from-image; }\n";
+ } else {
+ style = "div { image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + "; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
diff --git a/layout/reftests/image/image-orientation-border-image.html b/layout/reftests/image/image-orientation-border-image.html
new file mode 100644
index 000000000..7d58b9af1
--- /dev/null
+++ b/layout/reftests/image/image-orientation-border-image.html
@@ -0,0 +1,46 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ div {
+ width: 100px;
+ height: 100px;
+ margin: 50px;
+
+ /* This is deliberately an image with a non-neutral inherent orientation to */
+ /* ensure that the inherent orientation is irrelevant. */
+ border-style: solid;
+ border-width: 20px;
+ border-image: url(image-exif-90-deg-flip.jpg) 27 repeat;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+
+ <script>
+ var orientation = location.search.substring(1).split("&");
+ var angle = orientation[0];
+ var flip = orientation[1] == "flip" ? true : false;
+
+ // Construct a style. "from-image" is special-cased.
+ var style;
+ if (angle == "from-image") {
+ style = "div { image-orientation: from-image; }\n";
+ } else {
+ style = "div { image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + "; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
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 000000000..750ae0836
--- /dev/null
+++ b/layout/reftests/image/image-orientation-dynamic-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<img src="big.png" style="image-orientation: 90deg">
diff --git a/layout/reftests/image/image-orientation-dynamic.html b/layout/reftests/image/image-orientation-dynamic.html
new file mode 100644
index 000000000..f58cb600d
--- /dev/null
+++ b/layout/reftests/image/image-orientation-dynamic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <img src="big.png">
+ <script>
+ document.addEventListener("MozReftestInvalidate", function() {
+ document.querySelector("img").style.imageOrientation = "90deg";
+ document.documentElement.className = "";
+ });
+ </script>
+</html>
diff --git a/layout/reftests/image/image-orientation-explicit.html b/layout/reftests/image/image-orientation-explicit.html
new file mode 100644
index 000000000..321c16a37
--- /dev/null
+++ b/layout/reftests/image/image-orientation-explicit.html
@@ -0,0 +1,37 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ img {
+ border: 50px solid black;
+ margin: 50px;
+ padding: 50px;
+ }
+ </style>
+</head>
+<body>
+ <!-- This is deliberately an image with a non-neutral inherent orientation to
+ ensure that the inherent orientation is irrelevant. -->
+ <img src="image-exif-90-deg-flip.jpg">
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = orientationInfo[0];
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Construct a style.
+ var style = "img { image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + "; }\n";
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
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 000000000..ec4698656
--- /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 000000000..bb65deae6
--- /dev/null
+++ b/layout/reftests/image/image-orientation-generated-content-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ 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-orientation-generated-content.html b/layout/reftests/image/image-orientation-generated-content.html
new file mode 100644
index 000000000..2aa415df8
--- /dev/null
+++ b/layout/reftests/image/image-orientation-generated-content.html
@@ -0,0 +1,38 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ p:before {
+ content: url(image-exif-270-deg-flip.jpg);
+ }
+ </style>
+</head>
+<body>
+ <p></p>
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = orientationInfo[0];
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Construct a style. "from-image" is special-cased.
+ var style;
+ if (angle == "from-image") {
+ style = "p { image-orientation: from-image; }\n";
+ } else {
+ style = "p { image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + "; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
diff --git a/layout/reftests/image/image-orientation-list-style-image.html b/layout/reftests/image/image-orientation-list-style-image.html
new file mode 100644
index 000000000..af3ff247b
--- /dev/null
+++ b/layout/reftests/image/image-orientation-list-style-image.html
@@ -0,0 +1,39 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ ul {
+ list-style-position: inside;
+ list-style-image: url(image-exif-270-deg-flip.jpg);
+ }
+ </style>
+</head>
+<body>
+ <ul><li></li></ul>
+
+ <script>
+ var orientation = location.search.substring(1).split("&");
+ var angle = orientation[0];
+ var flip = orientation[1] == "flip" ? true : false;
+
+ // Construct a style. "from-image" is special-cased.
+ var style;
+ if (angle == "from-image") {
+ style = "ul { image-orientation: from-image; }\n";
+ } else {
+ style = "ul { image-orientation: "
+ + angle + "deg"
+ + (flip ? " flip" : "")
+ + "; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
diff --git a/layout/reftests/image/image-orientation-ref.html b/layout/reftests/image/image-orientation-ref.html
new file mode 100644
index 000000000..598f3761b
--- /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 000000000..4365164c5
--- /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 000000000..b54785d7a
--- /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: -moz-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 000000000..c51f11f91
--- /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 000000000..525321923
--- /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 000000000..511ce5bbd
--- /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 000000000..8f03ac0e1
--- /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 000000000..d49b9c9cf
--- /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 000000000..8a45e0e5d
--- /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 000000000..6110dace2
--- /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 000000000..784c14255
--- /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 000000000..e297d1be2
--- /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 000000000..6268b6783
--- /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 000000000..eaed1e41b
--- /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 000000000..2bb610570
--- /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 000000000..d17550ec3
--- /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 000000000..8a119d09b
--- /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 000000000..838c06f74
--- /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 000000000..7ca617b3a
--- /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 000000000..aaaac0bde
--- /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 000000000..b03ac5596
--- /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 000000000..05ee25415
--- /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 000000000..fc811c2cf
--- /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 000000000..2dcbb8d20
--- /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 000000000..4ec1264a4
--- /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 000000000..b5e171897
--- /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 000000000..e4d45c887
--- /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 000000000..041b493d3
--- /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 000000000..c4f86a18a
--- /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 000000000..9e077b78a
--- /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 000000000..9cb108ccc
--- /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 000000000..a6e264563
--- /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 000000000..b53d099cc
--- /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 000000000..e87c72953
--- /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 000000000..247ce733d
--- /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 000000000..0128d05dd
--- /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 000000000..ec92de752
--- /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-orientation-1x-ref.html b/layout/reftests/image/image-srcset-orientation-1x-ref.html
new file mode 100644
index 000000000..013ccd4e8
--- /dev/null
+++ b/layout/reftests/image/image-srcset-orientation-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+ <style>img { image-orientation: 90deg flip; }</style>
+</head>
+<body>
+ <img src="100.png" width="100">
+ <p>Make sure orientation is respected when using both srcset and fallback-src selections</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-orientation-1x.html b/layout/reftests/image/image-srcset-orientation-1x.html
new file mode 100644
index 000000000..d509b64a4
--- /dev/null
+++ b/layout/reftests/image/image-srcset-orientation-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+ <style>img { image-orientation: 90deg flip; }</style>
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="200.png 2x" src="100.png">
+ <p>Make sure orientation is respected when using both srcset and fallback-src selections</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-orientation-2x-ref.html b/layout/reftests/image/image-srcset-orientation-2x-ref.html
new file mode 100644
index 000000000..a85f9d2a1
--- /dev/null
+++ b/layout/reftests/image/image-srcset-orientation-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+ <style>img { image-orientation: 90deg flip; }</style>
+</head>
+<body>
+ <img src="200.png" width="100">
+ <p>Make sure orientation is respected when using both srcset and fallback-src selections</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-orientation-2x.html b/layout/reftests/image/image-srcset-orientation-2x.html
new file mode 100644
index 000000000..18a7799e2
--- /dev/null
+++ b/layout/reftests/image/image-srcset-orientation-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+ <style>img { image-orientation: 90deg flip; }</style>
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="200.png 2x" src="100.png">
+ <p>Make sure orientation is respected when using both srcset and fallback-src selections</p>
+</body>
+</html>
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 000000000..d696bba0a
--- /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 000000000..3e8470926
--- /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 000000000..95bd377f5
--- /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 000000000..1c90fd4a2
--- /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 000000000..c0e3487fc
--- /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 000000000..531c17991
--- /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 000000000..b4857f6fc
--- /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 000000000..3b79ce37f
--- /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 000000000..2ee100742
--- /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 000000000..ea13f13f8
--- /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 000000000..58bd5b8c6
--- /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 000000000..fa4a79139
--- /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 000000000..d058dc81f
--- /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/invalid-url-image-1-ref.html b/layout/reftests/image/invalid-url-image-1-ref.html
new file mode 100644
index 000000000..737210be8
--- /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 000000000..85fad81e4
--- /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/nearly-white.png b/layout/reftests/image/nearly-white.png
new file mode 100644
index 000000000..128d15110
--- /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 000000000..702458352
--- /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-stylo.list b/layout/reftests/image/reftest-stylo.list
new file mode 100644
index 000000000..23d4783a3
--- /dev/null
+++ b/layout/reftests/image/reftest-stylo.list
@@ -0,0 +1,137 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+fuzzy-if(Android,8,30) == background-image-zoom-1.html background-image-zoom-1.html
+fails-if(usesRepeatResampling) == background-image-zoom-2.html background-image-zoom-2.html
+== image-seam-1a.html image-seam-1a.html
+== image-seam-1b.html image-seam-1b.html
+fuzzy-if(Android,255,154) == image-seam-2.html image-seam-2.html
+# Bug 1128229
+skip-if((B2G&&browserIsRemote)||Mulet) == image-zoom-1.html image-zoom-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if((B2G&&browserIsRemote)||Mulet) == image-zoom-2.html image-zoom-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== invalid-url-image-1.html invalid-url-image-1.html
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1a.html sync-image-switch-1a.html
+# bug 855050 for WinXP
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1b.html sync-image-switch-1b.html
+# bug 855050 for WinXP
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1c.html sync-image-switch-1c.html
+# bug 855050 for WinXP
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1d.html sync-image-switch-1d.html
+# bug 855050 for WinXP
+
+# Tests for "object-fit" & "object-position"
+skip == image-object-fit-dyn-1.html image-object-fit-dyn-1.html
+skip == image-object-fit-with-background-1.html image-object-fit-with-background-1.html
+skip == image-object-fit-with-background-2.html image-object-fit-with-background-2.html
+skip == image-object-position-dyn-1.html image-object-position-dyn-1.html
+skip == image-object-position-with-background-1.html image-object-position-with-background-1.html
+skip == image-object-position-with-background-2.html image-object-position-with-background-2.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):
+== image-orientation-from-image.html?none image-orientation-from-image.html?none
+== image-orientation-from-image.html?0 image-orientation-from-image.html?0
+== image-orientation-from-image.html?90 image-orientation-from-image.html?90
+== image-orientation-from-image.html?180 image-orientation-from-image.html?180
+== image-orientation-from-image.html?270 image-orientation-from-image.html?270
+== image-orientation-from-image.html?0&flip image-orientation-from-image.html?0&flip
+== image-orientation-from-image.html?90&flip image-orientation-from-image.html?90&flip
+== image-orientation-from-image.html?180&flip image-orientation-from-image.html?180&flip
+== image-orientation-from-image.html?270&flip image-orientation-from-image.html?270&flip
+
+# Tests for image-orientation used with an explicit orientation:
+fuzzy(1,1) == image-orientation-explicit.html?0 image-orientation-explicit.html?0
+== image-orientation-explicit.html?90 image-orientation-explicit.html?90
+== image-orientation-explicit.html?180 image-orientation-explicit.html?180
+== image-orientation-explicit.html?270 image-orientation-explicit.html?270
+== image-orientation-explicit.html?0&flip image-orientation-explicit.html?0&flip
+== image-orientation-explicit.html?90&flip image-orientation-explicit.html?90&flip
+== image-orientation-explicit.html?180&flip image-orientation-explicit.html?180&flip
+== image-orientation-explicit.html?270&flip image-orientation-explicit.html?270&flip
+
+# Tests for image-orientation used with non-axis-aligned angles:
+fuzzy(1,1) == image-orientation-explicit.html?-45 image-orientation-explicit.html?-45
+fuzzy(1,1) == image-orientation-explicit.html?-15 image-orientation-explicit.html?-15
+fuzzy(1,1) == image-orientation-explicit.html?15 image-orientation-explicit.html?15
+== image-orientation-explicit.html?45 image-orientation-explicit.html?45
+== image-orientation-explicit.html?75 image-orientation-explicit.html?75
+== image-orientation-explicit.html?105 image-orientation-explicit.html?105
+== image-orientation-explicit.html?135 image-orientation-explicit.html?135
+== image-orientation-explicit.html?165 image-orientation-explicit.html?165
+== image-orientation-explicit.html?195 image-orientation-explicit.html?195
+== image-orientation-explicit.html?225 image-orientation-explicit.html?225
+== image-orientation-explicit.html?255 image-orientation-explicit.html?255
+== image-orientation-explicit.html?285 image-orientation-explicit.html?285
+fuzzy(1,1) == image-orientation-explicit.html?315 image-orientation-explicit.html?315
+fuzzy(1,1) == image-orientation-explicit.html?345 image-orientation-explicit.html?345
+
+# Tests for image-orientation used on generated content:
+== image-orientation-generated-content.html?from-image image-orientation-generated-content.html?from-image
+== image-orientation-generated-content.html?0 image-orientation-generated-content.html?0
+== image-orientation-generated-content.html?90 image-orientation-generated-content.html?90
+== image-orientation-generated-content.html?180 image-orientation-generated-content.html?180
+== image-orientation-generated-content.html?270 image-orientation-generated-content.html?270
+== image-orientation-generated-content.html?0&flip image-orientation-generated-content.html?0&flip
+== image-orientation-generated-content.html?90&flip image-orientation-generated-content.html?90&flip
+== image-orientation-generated-content.html?180&flip image-orientation-generated-content.html?180&flip
+== image-orientation-generated-content.html?270&flip image-orientation-generated-content.html?270&flip
+
+# Tests that image-orientation does not apply to decorative images:
+== image-orientation-background.html?from-image image-orientation-background.html?from-image
+== image-orientation-background.html?90&flip image-orientation-background.html?90&flip
+== image-orientation-border-image.html?from-image image-orientation-border-image.html?from-image
+== image-orientation-border-image.html?90&flip image-orientation-border-image.html?90&flip
+== image-orientation-list-style-image.html?from-image image-orientation-list-style-image.html?from-image
+== image-orientation-list-style-image.html?90&flip image-orientation-list-style-image.html?90&flip
+
+# Sanity checks for the image-orientation tests. Ensures that the various
+# combinations of rotations and flips actually look different from each other.
+== image-orientation-ref.html?0 image-orientation-ref.html?0
+== image-orientation-ref.html?0 image-orientation-ref.html?0
+== image-orientation-ref.html?0 image-orientation-ref.html?0
+== image-orientation-ref.html?90 image-orientation-ref.html?90
+== image-orientation-ref.html?90 image-orientation-ref.html?90
+== image-orientation-ref.html?180 image-orientation-ref.html?180
+== image-orientation-ref.html?0 image-orientation-ref.html?0
+== image-orientation-ref.html?90 image-orientation-ref.html?90
+== image-orientation-ref.html?180 image-orientation-ref.html?180
+== image-orientation-ref.html?270 image-orientation-ref.html?270
+== image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0
+== image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0
+== image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0
+== image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?90
+== image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?90
+== image-orientation-generated-content-ref.html?180 image-orientation-generated-content-ref.html?180
+== image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0
+== image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?90
+== image-orientation-generated-content-ref.html?180 image-orientation-generated-content-ref.html?180
+== image-orientation-generated-content-ref.html?270 image-orientation-generated-content-ref.html?270
+== image-orientation-dynamic.html image-orientation-dynamic.html
+
+# <img srcset> tests
+skip == image-srcset-basic-selection-0.1x.html image-srcset-basic-selection-0.1x.html
+skip == image-srcset-basic-selection-2x.html image-srcset-basic-selection-2x.html
+skip == image-srcset-basic-selection-0.5x.html image-srcset-basic-selection-0.5x.html
+skip == image-srcset-basic-selection-0.6x.html image-srcset-basic-selection-0.6x.html
+skip == image-srcset-basic-selection-1.5x.html image-srcset-basic-selection-1.5x.html
+skip == image-srcset-basic-selection-1x.html image-srcset-basic-selection-1x.html
+skip == image-srcset-basic-selection-width-0.5x.html image-srcset-basic-selection-width-0.5x.html
+skip == image-srcset-basic-selection-width-10x.html image-srcset-basic-selection-width-10x.html
+skip == image-srcset-basic-selection-width-2x.html image-srcset-basic-selection-width-2x.html
+skip == image-srcset-basic-selection-width-1x.html image-srcset-basic-selection-width-1x.html
+== image-srcset-default-2x.html image-srcset-default-2x.html
+== image-srcset-default-1x.html image-srcset-default-1x.html
+== image-srcset-default-src-2x.html image-srcset-default-src-2x.html
+== image-srcset-default-src-1x.html image-srcset-default-src-1x.html
+== image-srcset-orientation-2x.html image-srcset-orientation-2x.html
+== image-srcset-orientation-1x.html image-srcset-orientation-1x.html
+== image-srcset-svg-3x.html image-srcset-svg-3x.html
+== image-srcset-svg-2x.html image-srcset-svg-2x.html
+== image-srcset-svg-1x.html image-srcset-svg-1x.html
+== image-srcset-svg-default-2x.html image-srcset-svg-default-2x.html
+== image-srcset-svg-default-1x.html image-srcset-svg-default-1x.html
+
+== image-resize-percent-height.html image-resize-percent-height.html
+== image-resize-percent-width.html image-resize-percent-width.html
diff --git a/layout/reftests/image/reftest.list b/layout/reftests/image/reftest.list
new file mode 100644
index 000000000..1a610811d
--- /dev/null
+++ b/layout/reftests/image/reftest.list
@@ -0,0 +1,128 @@
+fuzzy-if(Android,8,30) == background-image-zoom-1.html background-image-zoom-1-ref.html
+fails-if(usesRepeatResampling) == background-image-zoom-2.html about:blank
+== image-seam-1a.html image-seam-1-ref.html
+== image-seam-1b.html image-seam-1-ref.html
+fuzzy-if(Android,255,154) == image-seam-2.html image-seam-2-ref.html # Bug 1128229
+== image-zoom-1.html image-zoom-1-ref.html
+== image-zoom-2.html image-zoom-1-ref.html
+== invalid-url-image-1.html invalid-url-image-1-ref.html
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1a.html sync-image-switch-1-ref.html # bug 855050 for WinXP
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1b.html sync-image-switch-1-ref.html # bug 855050 for WinXP
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1c.html sync-image-switch-1-ref.html # bug 855050 for WinXP
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1d.html sync-image-switch-1-ref.html # bug 855050 for WinXP
+
+# Tests for "object-fit" & "object-position"
+test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-dyn-1.html image-object-fit-dyn-1-ref.html
+test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-with-background-1.html image-object-fit-with-background-1-ref.html
+test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-with-background-2.html image-object-fit-with-background-2-ref.html
+test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-position-dyn-1.html image-object-position-dyn-1-ref.html
+test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-position-with-background-1.html image-object-position-with-background-1-ref.html
+test-pref(layout.css.object-fit-and-position.enabled,true) fuzzy-if(winWidget,117,374) == 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(2,5) == image-orientation-from-image.html?none image-orientation-ref.html?0
+fuzzy(1,1) == image-orientation-from-image.html?0 image-orientation-ref.html?0
+fuzzy(1,1) == image-orientation-from-image.html?90 image-orientation-ref.html?90
+fuzzy(1,1) == image-orientation-from-image.html?180 image-orientation-ref.html?180
+fuzzy(1,1) == image-orientation-from-image.html?270 image-orientation-ref.html?270
+fuzzy(1,1) == image-orientation-from-image.html?0&flip image-orientation-ref.html?0&flip
+fuzzy(1,1) == image-orientation-from-image.html?90&flip image-orientation-ref.html?90&flip
+fuzzy(1,1) == image-orientation-from-image.html?180&flip image-orientation-ref.html?180&flip
+fuzzy(1,1) == image-orientation-from-image.html?270&flip image-orientation-ref.html?270&flip
+
+# Tests for image-orientation used with an explicit orientation:
+fuzzy(1,1) == image-orientation-explicit.html?0 image-orientation-ref.html?0
+fuzzy(1,1) == image-orientation-explicit.html?90 image-orientation-ref.html?90
+fuzzy(1,1) == image-orientation-explicit.html?180 image-orientation-ref.html?180
+fuzzy(1,1) == image-orientation-explicit.html?270 image-orientation-ref.html?270
+fuzzy(1,1) == image-orientation-explicit.html?0&flip image-orientation-ref.html?0&flip
+fuzzy(1,1) == image-orientation-explicit.html?90&flip image-orientation-ref.html?90&flip
+fuzzy(1,1) == image-orientation-explicit.html?180&flip image-orientation-ref.html?180&flip
+fuzzy(1,1) == image-orientation-explicit.html?270&flip image-orientation-ref.html?270&flip
+
+# Tests for image-orientation used with non-axis-aligned angles:
+fuzzy(1,1) == image-orientation-explicit.html?-45 image-orientation-ref.html?0
+fuzzy(1,1) == image-orientation-explicit.html?-15 image-orientation-ref.html?0
+fuzzy(1,1) == image-orientation-explicit.html?15 image-orientation-ref.html?0
+fuzzy(1,1) == image-orientation-explicit.html?45 image-orientation-ref.html?90
+fuzzy(1,1) == image-orientation-explicit.html?75 image-orientation-ref.html?90
+fuzzy(1,1) == image-orientation-explicit.html?105 image-orientation-ref.html?90
+fuzzy(1,1) == image-orientation-explicit.html?135 image-orientation-ref.html?180
+fuzzy(1,1) == image-orientation-explicit.html?165 image-orientation-ref.html?180
+fuzzy(1,1) == image-orientation-explicit.html?195 image-orientation-ref.html?180
+fuzzy(1,1) == image-orientation-explicit.html?225 image-orientation-ref.html?270
+fuzzy(1,1) == image-orientation-explicit.html?255 image-orientation-ref.html?270
+fuzzy(1,1) == image-orientation-explicit.html?285 image-orientation-ref.html?270
+fuzzy(1,1) == image-orientation-explicit.html?315 image-orientation-ref.html?0
+fuzzy(1,1) == image-orientation-explicit.html?345 image-orientation-ref.html?0
+
+# Tests for image-orientation used on generated content:
+fuzzy(1,1) == image-orientation-generated-content.html?from-image image-orientation-generated-content-ref.html?270&flip
+fuzzy(1,1) == image-orientation-generated-content.html?0 image-orientation-generated-content-ref.html?0
+fuzzy(1,1) == image-orientation-generated-content.html?90 image-orientation-generated-content-ref.html?90
+fuzzy(1,1) == image-orientation-generated-content.html?180 image-orientation-generated-content-ref.html?180
+fuzzy(1,1) == image-orientation-generated-content.html?270 image-orientation-generated-content-ref.html?270
+fuzzy(1,1) == image-orientation-generated-content.html?0&flip image-orientation-generated-content-ref.html?0&flip
+fuzzy(1,1) == image-orientation-generated-content.html?90&flip image-orientation-generated-content-ref.html?90&flip
+fuzzy(1,1) == image-orientation-generated-content.html?180&flip image-orientation-generated-content-ref.html?180&flip
+fuzzy(1,1) == image-orientation-generated-content.html?270&flip image-orientation-generated-content-ref.html?270&flip
+
+# Tests that image-orientation does not apply to decorative images:
+fuzzy(1,1) == image-orientation-background.html?from-image image-orientation-ref.html?0
+fuzzy(1,1) == image-orientation-background.html?90&flip image-orientation-ref.html?0
+== image-orientation-border-image.html?from-image image-orientation-border-image.html?0
+== image-orientation-border-image.html?90&flip image-orientation-border-image.html?0
+== image-orientation-list-style-image.html?from-image image-orientation-list-style-image.html?0
+== image-orientation-list-style-image.html?90&flip image-orientation-list-style-image.html?0
+
+# Sanity checks for the image-orientation tests. Ensures that the various
+# combinations of rotations and flips actually look different from each other.
+!= image-orientation-ref.html?0 image-orientation-ref.html?90
+!= image-orientation-ref.html?0 image-orientation-ref.html?180
+!= image-orientation-ref.html?0 image-orientation-ref.html?270
+!= image-orientation-ref.html?90 image-orientation-ref.html?180
+!= image-orientation-ref.html?90 image-orientation-ref.html?270
+!= image-orientation-ref.html?180 image-orientation-ref.html?270
+!= image-orientation-ref.html?0 image-orientation-ref.html?0&flip
+!= image-orientation-ref.html?90 image-orientation-ref.html?90&flip
+!= image-orientation-ref.html?180 image-orientation-ref.html?180&flip
+!= image-orientation-ref.html?270 image-orientation-ref.html?270&flip
+!= image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?90
+!= image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?180
+!= image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?270
+!= image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?180
+!= image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?270
+!= image-orientation-generated-content-ref.html?180 image-orientation-generated-content-ref.html?270
+!= image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0&flip
+!= image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?90&flip
+!= image-orientation-generated-content-ref.html?180 image-orientation-generated-content-ref.html?180&flip
+!= image-orientation-generated-content-ref.html?270 image-orientation-generated-content-ref.html?270&flip
+== image-orientation-dynamic.html image-orientation-dynamic-ref.html
+
+# <img srcset> tests
+== image-srcset-basic-selection-0.1x.html image-srcset-basic-selection-0.1x-ref.html
+== image-srcset-basic-selection-2x.html image-srcset-basic-selection-2x-ref.html
+== image-srcset-basic-selection-0.5x.html image-srcset-basic-selection-0.5x-ref.html
+== image-srcset-basic-selection-0.6x.html image-srcset-basic-selection-0.6x-ref.html
+== 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
+== image-srcset-basic-selection-width-10x.html image-srcset-basic-selection-width-10x-ref.html
+== image-srcset-basic-selection-width-2x.html image-srcset-basic-selection-width-2x-ref.html
+== image-srcset-basic-selection-width-1x.html image-srcset-basic-selection-width-1x-ref.html
+== image-srcset-default-2x.html image-srcset-default-2x-ref.html
+== image-srcset-default-1x.html image-srcset-default-1x-ref.html
+== image-srcset-default-src-2x.html image-srcset-default-src-2x-ref.html
+== image-srcset-default-src-1x.html image-srcset-default-src-1x-ref.html
+== image-srcset-orientation-2x.html image-srcset-orientation-2x-ref.html
+== image-srcset-orientation-1x.html image-srcset-orientation-1x-ref.html
+== image-srcset-svg-3x.html image-srcset-svg-3x-ref.html
+== image-srcset-svg-2x.html image-srcset-svg-2x-ref.html
+== image-srcset-svg-1x.html image-srcset-svg-1x-ref.html
+== image-srcset-svg-default-2x.html image-srcset-svg-default-2x-ref.html
+== image-srcset-svg-default-1x.html image-srcset-svg-default-1x-ref.html
+
+== image-resize-percent-height.html image-resize-ref.html
+== image-resize-percent-width.html image-resize-ref.html
diff --git a/layout/reftests/image/small.png b/layout/reftests/image/small.png
new file mode 100644
index 000000000..9ff11a993
--- /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 000000000..654d1a9b7
--- /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 000000000..f1b7d6316
--- /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 000000000..7462ec696
--- /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 000000000..2182e40db
--- /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 000000000..3001305b0
--- /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>