summaryrefslogtreecommitdiffstats
path: root/layout/reftests/image
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /layout/reftests/image
parentInitial commit. (diff)
downloadfirefox-upstream/124.0.1.tar.xz
firefox-upstream/124.0.1.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r--layout/reftests/image-element/broken-icon.html9
-rw-r--r--layout/reftests/image-element/bug-364968-ref.html24
-rw-r--r--layout/reftests/image-element/bug-364968.html19
-rw-r--r--layout/reftests/image-element/bug-463204-ref.html35
-rw-r--r--layout/reftests/image-element/bug-463204.html36
-rw-r--r--layout/reftests/image-element/canvas-drawing.js11
-rw-r--r--layout/reftests/image-element/canvas-inside-document.html12
-rw-r--r--layout/reftests/image-element/canvas-outside-document-invalidate-01.html30
-rw-r--r--layout/reftests/image-element/canvas-outside-document-invalidate-02.html33
-rw-r--r--layout/reftests/image-element/canvas-outside-document.html18
-rw-r--r--layout/reftests/image-element/element-paint-background-size-01-ref.html12
-rw-r--r--layout/reftests/image-element/element-paint-background-size-01.html17
-rw-r--r--layout/reftests/image-element/element-paint-background-size-02-ref.html22
-rw-r--r--layout/reftests/image-element/element-paint-background-size-02.html27
-rw-r--r--layout/reftests/image-element/element-paint-clippath-ref.html9
-rw-r--r--layout/reftests/image-element/element-paint-clippath.html23
-rw-r--r--layout/reftests/image-element/element-paint-continuation-ref.html25
-rw-r--r--layout/reftests/image-element/element-paint-continuation.html26
-rw-r--r--layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html30
-rw-r--r--layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html33
-rw-r--r--layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html44
-rw-r--r--layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html45
-rw-r--r--layout/reftests/image-element/element-paint-native-widget-ref.html14
-rw-r--r--layout/reftests/image-element/element-paint-native-widget.html21
-rw-r--r--layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html31
-rw-r--r--layout/reftests/image-element/element-paint-paintserversize-rounding-01.html39
-rw-r--r--layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html24
-rw-r--r--layout/reftests/image-element/element-paint-paintserversize-rounding-02.html37
-rw-r--r--layout/reftests/image-element/element-paint-recursion-ref.html21
-rw-r--r--layout/reftests/image-element/element-paint-recursion.html28
-rw-r--r--layout/reftests/image-element/element-paint-repeated-ref.html16
-rw-r--r--layout/reftests/image-element/element-paint-repeated.html17
-rw-r--r--layout/reftests/image-element/element-paint-sharpness-01a.html17
-rw-r--r--layout/reftests/image-element/element-paint-sharpness-01b.html12
-rw-r--r--layout/reftests/image-element/element-paint-sharpness-01c.html12
-rw-r--r--layout/reftests/image-element/element-paint-sharpness-01d.html17
-rw-r--r--layout/reftests/image-element/element-paint-sharpness-02a.html17
-rw-r--r--layout/reftests/image-element/element-paint-sharpness-02b.html17
-rw-r--r--layout/reftests/image-element/element-paint-sharpness-02c.html17
-rw-r--r--layout/reftests/image-element/element-paint-simple-ref.html20
-rw-r--r--layout/reftests/image-element/element-paint-simple.html28
-rw-r--r--layout/reftests/image-element/element-paint-subimage-sampling-restriction.html39
-rw-r--r--layout/reftests/image-element/element-paint-transform-01-ref.html13
-rw-r--r--layout/reftests/image-element/element-paint-transform-01.html18
-rw-r--r--layout/reftests/image-element/element-paint-transform-02-ref.html23
-rw-r--r--layout/reftests/image-element/element-paint-transform-02.html28
-rw-r--r--layout/reftests/image-element/element-paint-transform-03-ref.html49
-rw-r--r--layout/reftests/image-element/element-paint-transform-03.html37
-rw-r--r--layout/reftests/image-element/element-paint-transform-repeated-ref.html19
-rw-r--r--layout/reftests/image-element/element-paint-transform-repeated.html30
-rw-r--r--layout/reftests/image-element/empty-src.html9
-rw-r--r--layout/reftests/image-element/gradient-html-01-ref.svg11
-rw-r--r--layout/reftests/image-element/gradient-html-01.html16
-rw-r--r--layout/reftests/image-element/gradient-html-02-ref.svg12
-rw-r--r--layout/reftests/image-element/gradient-html-02.html21
-rw-r--r--layout/reftests/image-element/gradient-html-03-ref.svg12
-rw-r--r--layout/reftests/image-element/gradient-html-03.html19
-rw-r--r--layout/reftests/image-element/gradient-html-04-ref.html17
-rw-r--r--layout/reftests/image-element/gradient-html-04.html24
-rw-r--r--layout/reftests/image-element/gradient-html-05-ref.html17
-rw-r--r--layout/reftests/image-element/gradient-html-05.html26
-rw-r--r--layout/reftests/image-element/gradient-html-06a.html18
-rw-r--r--layout/reftests/image-element/gradient-html-06b.html13
-rw-r--r--layout/reftests/image-element/gradient-html-06c.html19
-rw-r--r--layout/reftests/image-element/gradient-html-06d.html23
-rw-r--r--layout/reftests/image-element/gradient-html-06e.html23
-rw-r--r--layout/reftests/image-element/gradient-html-07a.html18
-rw-r--r--layout/reftests/image-element/gradient-html-07b.html12
-rw-r--r--layout/reftests/image-element/gradient-html-07c.html19
-rw-r--r--layout/reftests/image-element/gradient-html-07d.html12
-rw-r--r--layout/reftests/image-element/image-outside-document-invalidate.html24
-rw-r--r--layout/reftests/image-element/invalid-src-2.html9
-rw-r--r--layout/reftests/image-element/invalid-src.html9
-rw-r--r--layout/reftests/image-element/invalidate-1-ref.html7
-rw-r--r--layout/reftests/image-element/invalidate-1.html18
-rw-r--r--layout/reftests/image-element/mask-image-element-ref.html48
-rw-r--r--layout/reftests/image-element/mask-image-element.html63
-rw-r--r--layout/reftests/image-element/mozsetimageelement-01-ref.html19
-rw-r--r--layout/reftests/image-element/mozsetimageelement-01.html44
-rw-r--r--layout/reftests/image-element/mozsetimageelement-02.html25
-rw-r--r--layout/reftests/image-element/no-src.html9
-rw-r--r--layout/reftests/image-element/orientation-1-ref.html3
-rw-r--r--layout/reftests/image-element/orientation-1.html4
-rw-r--r--layout/reftests/image-element/pattern-html-01-ref.svg14
-rw-r--r--layout/reftests/image-element/pattern-html-01.html21
-rw-r--r--layout/reftests/image-element/pattern-html-02-ref.svg27
-rw-r--r--layout/reftests/image-element/pattern-html-02.html26
-rw-r--r--layout/reftests/image-element/reftest.list59
-rw-r--r--layout/reftests/image-element/repeatable-diagonal-gradient.pngbin0 -> 14520 bytes
-rw-r--r--layout/reftests/image/100.pngbin0 -> 91 bytes
-rw-r--r--layout/reftests/image/200.pngbin0 -> 100 bytes
-rw-r--r--layout/reftests/image/300.pngbin0 -> 106 bytes
-rw-r--r--layout/reftests/image/400.pngbin0 -> 114 bytes
-rw-r--r--layout/reftests/image/50.pngbin0 -> 85 bytes
-rw-r--r--layout/reftests/image/500.svg9
-rw-r--r--layout/reftests/image/background-image-zoom-1-ref.html23
-rw-r--r--layout/reftests/image/background-image-zoom-1.html24
-rw-r--r--layout/reftests/image/background-image-zoom-2.html23
-rw-r--r--layout/reftests/image/big.pngbin0 -> 82 bytes
-rw-r--r--layout/reftests/image/blue-100x50.pngbin0 -> 219 bytes
-rw-r--r--layout/reftests/image/blue-16x20.pngbin0 -> 118 bytes
-rw-r--r--layout/reftests/image/blue-32x32.pngbin0 -> 110 bytes
-rw-r--r--layout/reftests/image/blue-50x100.pngbin0 -> 220 bytes
-rw-r--r--layout/reftests/image/blue-50x50.pngbin0 -> 191 bytes
-rw-r--r--layout/reftests/image/image-exif-0-deg-flip.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-0-deg.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-180-deg-flip.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-180-deg.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-270-deg-flip.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-270-deg.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-90-deg-flip.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-90-deg.jpgbin0 -> 6872 bytes
-rw-r--r--layout/reftests/image/image-exif-none.jpgbin0 -> 1776 bytes
-rw-r--r--layout/reftests/image/image-in-iframe-1-ref.html6
-rw-r--r--layout/reftests/image/image-in-iframe-1.html16
-rw-r--r--layout/reftests/image/image-object-fit-dyn-1-ref.html24
-rw-r--r--layout/reftests/image/image-object-fit-dyn-1.html45
-rw-r--r--layout/reftests/image/image-object-fit-with-background-1-ref.html26
-rw-r--r--layout/reftests/image/image-object-fit-with-background-1.html34
-rw-r--r--layout/reftests/image/image-object-fit-with-background-2-ref.html28
-rw-r--r--layout/reftests/image/image-object-fit-with-background-2.html40
-rw-r--r--layout/reftests/image/image-object-position-dyn-1-ref.html25
-rw-r--r--layout/reftests/image/image-object-position-dyn-1.html45
-rw-r--r--layout/reftests/image/image-object-position-with-background-1-ref.html42
-rw-r--r--layout/reftests/image/image-object-position-with-background-1.html35
-rw-r--r--layout/reftests/image/image-object-position-with-background-2-ref.html23
-rw-r--r--layout/reftests/image/image-object-position-with-background-2.html31
-rw-r--r--layout/reftests/image/image-orientation-background.html43
-rw-r--r--layout/reftests/image/image-orientation-dynamic-ref.html33
-rw-r--r--layout/reftests/image/image-orientation-dynamic.html17
-rw-r--r--layout/reftests/image/image-orientation-explicit-none.html21
-rw-r--r--layout/reftests/image/image-orientation-from-image.html40
-rw-r--r--layout/reftests/image/image-orientation-generated-content-ref.html33
-rw-r--r--layout/reftests/image/image-orientation-generated-content.html19
-rw-r--r--layout/reftests/image/image-orientation-ref.html80
-rw-r--r--layout/reftests/image/image-resize-percent-height.html15
-rw-r--r--layout/reftests/image/image-resize-percent-width.html15
-rw-r--r--layout/reftests/image/image-resize-ref.html3
-rw-r--r--layout/reftests/image/image-seam-1-ref.html14
-rw-r--r--layout/reftests/image/image-seam-1a.html17
-rw-r--r--layout/reftests/image/image-seam-1b.html17
-rw-r--r--layout/reftests/image/image-seam-2-ref.html17
-rw-r--r--layout/reftests/image/image-seam-2.html18
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.1x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.5x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-0.6x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-1.5x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-0.5x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-10x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-basic-selection-width-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-default-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-default-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-default-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-default-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-default-src-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-default-src-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-default-src-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-default-src-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-isize-ref.html25
-rw-r--r--layout/reftests/image/image-srcset-isize.html41
-rw-r--r--layout/reftests/image/image-srcset-svg-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-svg-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-2x.html26
-rw-r--r--layout/reftests/image/image-srcset-svg-3x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-3x.html26
-rw-r--r--layout/reftests/image/image-srcset-svg-default-1x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-default-1x.html26
-rw-r--r--layout/reftests/image/image-srcset-svg-default-2x-ref.html11
-rw-r--r--layout/reftests/image/image-srcset-svg-default-2x.html26
-rw-r--r--layout/reftests/image/image-zoom-1-ref.html16
-rw-r--r--layout/reftests/image/image-zoom-1.html16
-rw-r--r--layout/reftests/image/image-zoom-2.html16
-rw-r--r--layout/reftests/image/img-invalidation-local-transform-1-ref.html17
-rw-r--r--layout/reftests/image/img-invalidation-local-transform-1-ref.pngbin0 -> 3757 bytes
-rw-r--r--layout/reftests/image/img-invalidation-local-transform-1.html51
-rw-r--r--layout/reftests/image/img-invalidation-local-transform-1.pngbin0 -> 5834 bytes
-rw-r--r--layout/reftests/image/invalid-url-image-1-ref.html7
-rw-r--r--layout/reftests/image/invalid-url-image-1.html7
-rw-r--r--layout/reftests/image/moz-broken-matching-1-ref.html7
-rw-r--r--layout/reftests/image/moz-broken-matching-1.html7
-rw-r--r--layout/reftests/image/moz-broken-matching-lazy-load.html13
-rw-r--r--layout/reftests/image/nearly-white.pngbin0 -> 115 bytes
-rw-r--r--layout/reftests/image/no-intrinsic-size.svg9
-rw-r--r--layout/reftests/image/reftest.list73
-rw-r--r--layout/reftests/image/small.pngbin0 -> 85 bytes
-rw-r--r--layout/reftests/image/sync-image-switch-1-ref.html4
-rw-r--r--layout/reftests/image/sync-image-switch-1a.html16
-rw-r--r--layout/reftests/image/sync-image-switch-1b.html16
-rw-r--r--layout/reftests/image/sync-image-switch-1c.html16
-rw-r--r--layout/reftests/image/sync-image-switch-1d.html16
-rw-r--r--layout/reftests/image/unknown-protocol-ref.html1
-rw-r--r--layout/reftests/image/unknown-protocol.html1
206 files changed, 3950 insertions, 0 deletions
diff --git a/layout/reftests/image-element/broken-icon.html b/layout/reftests/image-element/broken-icon.html
new file mode 100644
index 0000000000..f2f6b7c451
--- /dev/null
+++ b/layout/reftests/image-element/broken-icon.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ img {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<img src="broken">
diff --git a/layout/reftests/image-element/bug-364968-ref.html b/layout/reftests/image-element/bug-364968-ref.html
new file mode 100644
index 0000000000..4ce9909969
--- /dev/null
+++ b/layout/reftests/image-element/bug-364968-ref.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test if an excessive downscaling works correctly.
+ (related to bug 364968)
+-->
+<html>
+<style>
+ img {
+ -moz-image-rendering: fast;
+ }
+</style>
+<body style="margin:0">
+ <div style="width:32px; height:16px; margin-left:256px;
+ background:-moz-element(#g) no-repeat;
+ background-size:32px 16px;"></div>
+ <div style="overflow:hidden; height:0;">
+ <div id="g" style="width:4096px; height:32px;">
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAAgCAYAAACG5JhhAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1wUdBDEnzSKcAAAAAXpJREFUeJzt3MEJwDAMBEE5pP+WnSKCMSwzFdxXsGjtmT0AAABA2nL9AwAAQN5zewAAAAAAAAAA8J8AAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAgAAAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAgAABAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAAAB75p9ewMAAABw2J51ewIAAABwmA8AAAAAAAAAABAgAAAAAAAAAACAAAEAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAwAdutQVA2w3ITgAAAABJRU5ErkJggg=="/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAAgCAYAAACG5JhhAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1wUdBDEnzSKcAAAAAXpJREFUeJzt3MEJwDAMBEE5pP+WnSKCMSwzFdxXsGjtmT0AAABA2nL9AwAAQN5zewAAAAAAAAAA8J8AAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAgAAAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAgAABAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAAAB75p9ewMAAABw2J51ewIAAABwmA8AAAAAAAAAABAgAAAAAAAAAACAAAEAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAwAdutQVA2w3ITgAAAABJRU5ErkJggg=="/>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/bug-364968.html b/layout/reftests/image-element/bug-364968.html
new file mode 100644
index 0000000000..69db6e1dfc
--- /dev/null
+++ b/layout/reftests/image-element/bug-364968.html
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test if an excessive downscaling works correctly.
+ (related to bug 364968)
+-->
+<html>
+<body style="margin:0">
+ <div style="width:32px; height:16px; margin-left:256px;
+ background:-moz-element(#g) no-repeat;
+ background-size:32px 16px;"></div>
+ <div style="overflow:hidden; height:0;">
+ <div id="g" style="width:4096px; height:32px;">
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAAgCAYAAACG5JhhAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1wUdBDEnzSKcAAAAAXpJREFUeJzt3MEJwDAMBEE5pP+WnSKCMSwzFdxXsGjtmT0AAABA2nL9AwAAQN5zewAAAAAAAAAA8J8AAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAgAAAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAgAABAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAAAB75p9ewMAAABw2J51ewIAAABwmA8AAAAAAAAAABAgAAAAAAAAAACAAAEAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAwAdutQVA2w3ITgAAAABJRU5ErkJggg=="/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAAgCAYAAACG5JhhAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1wUdBDEnzSKcAAAAAXpJREFUeJzt3MEJwDAMBEE5pP+WnSKCMSwzFdxXsGjtmT0AAABA2nL9AwAAQN5zewAAAAAAAAAA8J8AAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAgAAAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAgAABAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAAAB75p9ewMAAABw2J51ewIAAABwmA8AAAAAAAAAABAgAAAAAAAAAACAAAEAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAwAdutQVA2w3ITgAAAABJRU5ErkJggg=="/>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/bug-463204-ref.html b/layout/reftests/image-element/bug-463204-ref.html
new file mode 100644
index 0000000000..6d427a0c6f
--- /dev/null
+++ b/layout/reftests/image-element/bug-463204-ref.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+ <head>
+ <style>
+ span {
+ background-image: -moz-element(#g);
+ display: inline-block;
+ margin-left: 1px;
+ }
+ #repeat {
+ width: 38px;
+ height: 38px;
+ background-repeat: repeat;
+ }
+ #norepeat {
+ width: 19px;
+ height: 19px;
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+ </style>
+ </head>
+ <body>
+ <span id="repeat"></span><br/>
+ <span id="norepeat"></span>
+ <div style="overflow:hidden; height:0px">
+ <div id="g" style="width:17px; height:17px; border:1px solid red;
+ background: orange;"></div>
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/image-element/bug-463204.html b/layout/reftests/image-element/bug-463204.html
new file mode 100644
index 0000000000..89e91fa87e
--- /dev/null
+++ b/layout/reftests/image-element/bug-463204.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ bug 463204
+-->
+<html>
+ <head>
+ <style>
+ span {
+ background-image: -moz-element(#g);
+ display: inline-block;
+ margin-left: 0.6px;
+ }
+ #repeat {
+ width: 38px;
+ height: 38px;
+ background-repeat: repeat;
+ }
+ #norepeat {
+ width: 19px;
+ height: 19px;
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+ </style>
+ </head>
+ <body>
+ <span id="repeat"></span><br/>
+ <span id="norepeat"></span>
+ <div style="overflow:hidden; height:0px">
+ <div id="g" style="width:17px; height:17px; border:1px solid red;
+ background: orange;"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/image-element/canvas-drawing.js b/layout/reftests/image-element/canvas-drawing.js
new file mode 100644
index 0000000000..dff8217d77
--- /dev/null
+++ b/layout/reftests/image-element/canvas-drawing.js
@@ -0,0 +1,11 @@
+function createCanvas() {
+ var canvas = document.createElement("canvas");
+ canvas.setAttribute("width", 100);
+ canvas.setAttribute("height", 100);
+ var ctx = canvas.getContext("2d");
+ ctx.fillStyle = "rgb(200,0,0)";
+ ctx.fillRect(10, 10, 55, 50);
+ ctx.fillStyle = "rgba(0,0,200,0.5)";
+ ctx.fillRect(30, 30, 55, 50);
+ return canvas;
+}
diff --git a/layout/reftests/image-element/canvas-inside-document.html b/layout/reftests/image-element/canvas-inside-document.html
new file mode 100644
index 0000000000..8ee561356e
--- /dev/null
+++ b/layout/reftests/image-element/canvas-inside-document.html
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body style="margin:0">
+ <script src="canvas-drawing.js"></script>
+ <script>
+ document.body.appendChild(createCanvas());
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/canvas-outside-document-invalidate-01.html b/layout/reftests/image-element/canvas-outside-document-invalidate-01.html
new file mode 100644
index 0000000000..0b4a1d851e
--- /dev/null
+++ b/layout/reftests/image-element/canvas-outside-document-invalidate-01.html
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that painting in an out-of-document canvas causes a repaint.
+-->
+<!DOCTYPE html>
+<html class="reftest-wait">
+<body style="background: -moz-element(#e) darkred">
+
+<script>
+
+var canvas = document.createElement("canvas");
+canvas.width = canvas.height = 1;
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = "red";
+ctx.fillRect(0, 0, 1, 1);
+window.addEventListener("MozReftestInvalidate", function () {
+ setTimeout(function () {
+ ctx.fillStyle = "white";
+ ctx.fillRect(0, 0, 1, 1);
+ document.documentElement.className = "";
+ }, 0);
+});
+
+document.mozSetImageElement("e", canvas);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/canvas-outside-document-invalidate-02.html b/layout/reftests/image-element/canvas-outside-document-invalidate-02.html
new file mode 100644
index 0000000000..22f5910627
--- /dev/null
+++ b/layout/reftests/image-element/canvas-outside-document-invalidate-02.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that a complete redraw of the context invalidates the rendering observer, too.
+ (mozDrawText calls nsCanvasRenderingContext2D::Redraw() without a dirty rect to invalidate everything.)
+-->
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<body style="background: -moz-element(#e) white">
+
+<script>
+
+var canvas = document.createElement("canvas");
+canvas.width = canvas.height = 1;
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = "red";
+ctx.fillRect(0, 0, 1, 1);
+window.addEventListener("MozReftestInvalidate", function () {
+ ctx.strokeStyle = "white";
+ ctx.font = "50px bold Arial";
+ ctx.translate(-8, 18);
+ ctx.lineWidth = 50;
+ ctx.strokeText("•", 0, 0);
+ document.documentElement.className = "";
+});
+
+document.mozSetImageElement("e", canvas);
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/canvas-outside-document.html b/layout/reftests/image-element/canvas-outside-document.html
new file mode 100644
index 0000000000..259b69e731
--- /dev/null
+++ b/layout/reftests/image-element/canvas-outside-document.html
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test document.mozSetImageElement() with a DOM element not in a document.
+-->
+<html>
+<body style="margin:0">
+ <div style="width:100px; height:100px;
+ background:-moz-element(#d);"></div>
+
+ <script src="canvas-drawing.js"></script>
+ <script>
+ var canvas = createCanvas();
+ document.mozSetImageElement("d", canvas);
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-background-size-01-ref.html b/layout/reftests/image-element/element-paint-background-size-01-ref.html
new file mode 100644
index 0000000000..473c7c3a33
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-background-size-01-ref.html
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body>
+ <div style="width:120px; height:120px; border: 1px solid black;">
+ <div style="border:30px solid red; width:60px; height:60px;
+ background:orange;"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-background-size-01.html b/layout/reftests/image-element/element-paint-background-size-01.html
new file mode 100644
index 0000000000..9d70cc1e39
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-background-size-01.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test with background-size.
+-->
+<html>
+<body>
+ <div style="width:120px; height:120px; border:1px solid black;
+ background:-moz-element(#d) no-repeat;
+ background-size:100%"></div>
+ <div style="overflow:hidden; height:0;">
+ <div id="d" style="border:10px solid red; width:20px; height:20px;
+ background:orange;"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-background-size-02-ref.html b/layout/reftests/image-element/element-paint-background-size-02-ref.html
new file mode 100644
index 0000000000..08664176e1
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-background-size-02-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body style="filter:url(#thresholdAt128);">
+ <div style="width:80px; height:80px; border: 1px solid black;">
+ <div style="border:20px solid red; width:40px; height:40px;
+ background:yellow;"></div>
+ </div>
+ <svg>
+ <filter id="thresholdAt128" color-interpolation-filters="sRGB">
+ <feColorMatrix type="matrix"
+ values="255 0 0 0 -128
+ 0 255 0 0 -128
+ 0 0 255 0 -128
+ 0 0 0 255 -128"/>
+
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-background-size-02.html b/layout/reftests/image-element/element-paint-background-size-02.html
new file mode 100644
index 0000000000..91cea3e3fa
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-background-size-02.html
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test with background-size.
+-->
+<html>
+<body style="filter:url(#thresholdAt128);">
+ <div style="width:80px; height:80px; border:1px solid black;
+ background:-moz-element(#d) no-repeat;
+ background-size:100%"></div>
+ <div style="overflow:hidden; height:0;">
+ <div id="d" style="border:10px solid red; width:20px; height:20px;
+ background:yellow;"></div>
+ </div>
+ <svg>
+ <filter id="thresholdAt128" color-interpolation-filters="sRGB">
+ <feColorMatrix type="matrix"
+ values="255 0 0 0 -128
+ 0 255 0 0 -128
+ 0 0 255 0 -128
+ 0 0 0 255 -128"/>
+
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-clippath-ref.html b/layout/reftests/image-element/element-paint-clippath-ref.html
new file mode 100644
index 0000000000..12cebc2bad
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-clippath-ref.html
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body style="margin:0">
+ <div style="margin:50px; width:50px; height:50px; background:lime;"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-clippath.html b/layout/reftests/image-element/element-paint-clippath.html
new file mode 100644
index 0000000000..e393d277c3
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-clippath.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test with clip-path.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:200px; height:200px;
+ clip-path:url(#c);
+ background:-moz-element(#d);"></div>
+
+ <div style="overflow:hidden; height:0;">
+ <div id="d" style="width:200px; height:200px; background:lime;"></div>
+ </div>
+ <svg height="0">
+ <clipPath id="c" clipPathUnits="userSpaceOnUse">
+ <rect x="50" y="50" width="50" height="50"></rect>
+ </clipPath>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-continuation-ref.html b/layout/reftests/image-element/element-paint-continuation-ref.html
new file mode 100644
index 0000000000..efc86d99ed
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-continuation-ref.html
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test painting a continuation.
+-->
+<html>
+<style>
+@font-face
+{
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+}
+</style>
+<body style="line-height:1; font-family: Ahem; color: transparent;">
+ <div style="width:100px; height:100px; border:10px solid black;">
+ <div style="width:50px;">
+ <span style="display:inline-block; width:25px; height:1px;"></span
+ ><span id="d" style="background:linear-gradient(to left, yellow, yellow);"
+ ><span style="display:inline-block; width:25px; height:1px;"></span>
+ AA</span>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-continuation.html b/layout/reftests/image-element/element-paint-continuation.html
new file mode 100644
index 0000000000..c90c582170
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-continuation.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test painting a continuation.
+-->
+<html>
+<style>
+@font-face
+{
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+}
+</style>
+<meta name="flags" content="ahem" />
+<body style="line-height:1; font-family: Ahem; color: transparent;">
+ <div style="width:100px; height:100px; border:10px solid black;
+ background:-moz-element(#d) no-repeat;"></div>
+ <div style="overflow:hidden; height:0; width:50px;">
+ <span style="display:inline-block; width:25px; height:1px;"></span
+ ><span id="d" style="background:yellow;"
+ ><span style="display:inline-block; width:25px; height:1px;"></span>
+ AA</span>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html b/layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html
new file mode 100644
index 0000000000..25e31fd3ad
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Multiple -moz-element background images
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+#box {
+ height: 100px;
+ width: 200px;
+ background: linear-gradient(lime,lime) top left no-repeat,
+ linear-gradient(green,green) top right no-repeat red;
+ background-size: 100px 100px;
+}
+
+div > div {
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+</head>
+<body style="margin:0">
+<div id="box"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html b/layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html
new file mode 100644
index 0000000000..f36280a243
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Multiple -moz-element background images
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+#box {
+ height: 100px;
+ width: 200px;
+ background: -moz-element(#lime) top left no-repeat,
+ -moz-element(#green) top right no-repeat red;
+}
+
+div > div {
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+</head>
+<body style="margin:0">
+<div id="box"></div>
+
+<div style="overflow:hidden; height:0">
+ <div id="lime" style="background-color: lime"></div>
+ <div id="green" style="background-color: green"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html b/layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html
new file mode 100644
index 0000000000..f11f092b55
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Dynamic repaint with multiple -moz-element background images
+-->
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+
+#box {
+ height: 100px;
+ width: 200px;
+ background: -moz-element(#lime) top left no-repeat,
+ -moz-element(#green) top right no-repeat red;
+}
+
+div > div {
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+</head>
+<body style="margin:0">
+<div id="box"></div>
+
+<div style="overflow:hidden; height:0">
+ <div id="lime" style="background-color: darkred"></div>
+ <div id="green" style="background-color: black"></div>
+</div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+ document.getElementById("lime").style.backgroundColor = "lime";
+ document.getElementById("green").style.backgroundColor = "green";
+ document.documentElement.className = "";
+});
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html b/layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html
new file mode 100644
index 0000000000..f01d9eb08a
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html
@@ -0,0 +1,45 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Dynamic repaint with multiple -moz-element background images
+-->
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+
+#box {
+ height: 100px;
+ width: 200px;
+ background: -moz-element(#darkred) top left no-repeat,
+ -moz-element(#black) top right no-repeat red;
+}
+
+div > div {
+ width: 100px;
+ height: 100px;
+}
+
+</style>
+</head>
+<body style="margin:0">
+<div id="box"></div>
+
+<div style="overflow:hidden; height:0">
+ <div id="darkred" style="background-color: darkred"></div>
+ <div id="black" style="background-color: black"></div>
+ <div id="lime" style="background-color: lime"></div>
+ <div id="green" style="background-color: green"></div>
+</div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+ document.getElementById("box").style.backgroundImage = "-moz-element(#lime), -moz-element(#green)";
+ document.documentElement.className = "";
+});
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-native-widget-ref.html b/layout/reftests/image-element/element-paint-native-widget-ref.html
new file mode 100644
index 0000000000..68fc3c3301
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-native-widget-ref.html
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body>
+ <input type="text"/>
+ <div style="width:100px; height:100px; overflow:scroll;">
+ In 1629, Isaac Beeckman proposed an experiment in which a person would
+ observe the flash of a cannon reflecting off a mirror about one mile
+ (1.6 km) away.
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-native-widget.html b/layout/reftests/image-element/element-paint-native-widget.html
new file mode 100644
index 0000000000..bdcadcc2ac
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-native-widget.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test if native widgets are painted correctly.
+-->
+<html>
+<body>
+ <div style="width:100%; height:100%; background:-moz-element(#w) no-repeat;"></div>
+ <div style="overflow:hidden; height:0;">
+ <div id="w">
+ <input type="text"/>
+ <div style="width:100px; height:100px; overflow:scroll;">
+ In 1629, Isaac Beeckman proposed an experiment in which a person would
+ observe the flash of a cannon reflecting off a mirror about one mile
+ (1.6 km) away.
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html b/layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html
new file mode 100644
index 0000000000..8be4f109f2
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ The green square should always be rendered at 100px.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body > div {
+ width: 200px;
+ height: 200px;
+ float: left;
+}
+
+body > div > div {
+ width: 100px;
+ height: 100px;
+ background: lime;
+}
+</style>
+</head>
+<body style="margin:0">
+<div><div></div></div>
+<div><div></div></div>
+<div><div></div></div>
+<div><div></div></div>
+<div><div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-paintserversize-rounding-01.html b/layout/reftests/image-element/element-paint-paintserversize-rounding-01.html
new file mode 100644
index 0000000000..826a49450f
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-paintserversize-rounding-01.html
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ The green square should always be rendered at 100px.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body > div {
+ width: 200px;
+ height: 200px;
+ float: left;
+ background-repeat: no-repeat;
+}
+
+div > div {
+ background: lime;
+}
+
+</style>
+</head>
+<body style="margin:0">
+<div style="background-image: -moz-element(#eInteger)"></div>
+<div style="background-image: -moz-element(#eRoundUp1)"></div>
+<div style="background-image: -moz-element(#eRoundUp2)"></div>
+<div style="background-image: -moz-element(#eRoundDown1)"></div>
+<div style="background-image: -moz-element(#eRoundDown2)"></div>
+
+<div style="overflow:hidden; height:0">
+ <div id="eInteger" style="margin: 0.3px; width: 100px; height: 100px;"></div>
+ <div id="eRoundUp1" style="margin: 0.3px; width: 99.6px; height: 99.6px;"></div>
+ <div id="eRoundUp2" style="margin: 0.6px; width: 99.6px; height: 99.6px;"></div>
+ <div id="eRoundDown1" style="margin: 0.3px; width: 100.3px; height: 100.3px;"></div>
+ <div id="eRoundDown2" style="margin: 0.6px; width: 100.3px; height: 100.3px;"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html b/layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html
new file mode 100644
index 0000000000..398034a0f1
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body > div {
+ width: 200px;
+ height: 200px;
+ background: lime;
+ float: left;
+}
+</style>
+</head>
+<body style="margin:0">
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-paintserversize-rounding-02.html b/layout/reftests/image-element/element-paint-paintserversize-rounding-02.html
new file mode 100644
index 0000000000..439cd72665
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-paintserversize-rounding-02.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body > div {
+ width: 200px;
+ height: 200px;
+ float: left;
+ background-repeat: repeat;
+}
+
+div > div {
+ background: lime;
+}
+
+</style>
+</head>
+<body style="margin:0">
+<div style="background-image: -moz-element(#eInteger)"></div>
+<div style="background-image: -moz-element(#eRoundUp1)"></div>
+<div style="background-image: -moz-element(#eRoundUp2); background-size: 100.3px;"></div>
+<div style="background-image: -moz-element(#eRoundDown1)"></div>
+<div style="background-image: -moz-element(#eRoundDown2); background-size: 99.6px;"></div>
+
+<div style="overflow:hidden; height:0">
+ <div id="eInteger" style="margin: 0.3px; width: 100px; height: 100px;"></div>
+ <div id="eRoundUp1" style="margin: 0.3px; width: 99.6px; height: 99.6px;"></div>
+ <div id="eRoundUp2" style="margin: 0.6px; width: 99.6px; height: 99.6px;"></div>
+ <div id="eRoundDown1" style="margin: 0.3px; width: 100.3px; height: 100.3px;"></div>
+ <div id="eRoundDown2" style="margin: 0.6px; width: 100.3px; height: 100.3px;"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-recursion-ref.html b/layout/reftests/image-element/element-paint-recursion-ref.html
new file mode 100644
index 0000000000..a3c1aa5e96
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-recursion-ref.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body>
+ <p style="width:100px; height:100px; border:10px solid black; border-top:10px solid black; border-left:10px solid black;"></p>
+ <div style="width:100px; height:100px; border:10px solid blue; border-top:10px solid blue; border-left:10px solid blue;"></div>
+ <p style="width:100px; height:100px; border:10px solid green; background:yellow;"></div>
+ <div style="width:100px; height:100px; border:10px solid cyan;">
+ <div style="width:90px; height:90px; border-left:10px solid magenta; border-top:10px solid magenta;">
+ <div style="width:80px; height:80px; border-left:10px solid cyan; border-top:10px solid cyan;"></div>
+ </div>
+ </div>
+ <div style="width:100px; height:100px; border:10px solid magenta;">
+ <div style="width:90px; height:90px; border-left:10px solid cyan; border-top:10px solid cyan;">
+ <div style="width:80px; height:80px; border-left:10px solid magenta; border-top:10px solid magenta;"></div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-recursion.html b/layout/reftests/image-element/element-paint-recursion.html
new file mode 100644
index 0000000000..d52ebbf0a0
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-recursion.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test painting elements recursively using each other as background.
+-->
+<html>
+<body>
+ <p id="d" style="width:100px; height:100px; border:10px solid black;
+ background:-moz-element(#d);"></p>
+ <div id="e">
+ <div style="width:100px; height:100px; border:10px solid blue;
+ background:-moz-element(#e);"></div>
+ </div>
+ <div id="f"></div>
+ <!-- test zero-sized images -->
+ <p style="width:100px; height:100px; border:10px solid green;
+ background:-moz-element(#f) yellow;"></div>
+ <div id="g">
+ <div style="width:100px; height:100px; border:10px solid cyan;
+ background:-moz-element(#h);"></div>
+ </div>
+ <div id="h">
+ <div style="width:100px; height:100px; border:10px solid magenta;
+ background:-moz-element(#g);"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-repeated-ref.html b/layout/reftests/image-element/element-paint-repeated-ref.html
new file mode 100644
index 0000000000..ab56002d47
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-repeated-ref.html
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body>
+ <div style="position:absolute; width:25px; height:25px;
+ background:blue; top:50px; left:50px;"></div>
+ <div style="position:absolute; width:25px; height:25px;
+ background:blue; top:50px; left:100px;"></div>
+ <div style="position:absolute; width:25px; height:25px;
+ background:blue; top:100px; left:50px;"></div>
+ <div style="position:absolute; width:25px; height:25px;
+ background:blue; top:100px; left:100px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-repeated.html b/layout/reftests/image-element/element-paint-repeated.html
new file mode 100644
index 0000000000..618665b46b
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-repeated.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test a repeated background image with -moz-element().
+-->
+<html>
+<body>
+ <div style="width:100px; height:100px; background:-moz-element(#d);
+ background-attachment:fixed; position:absolute; left:25px; top:25px;"></div>
+ <div style="overflow:hidden; height:0;">
+ <div id="d" style="width:50px; height:50px;">
+ <div style="width:25px; height:25px; background:blue;"></div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-sharpness-01a.html b/layout/reftests/image-element/element-paint-sharpness-01a.html
new file mode 100644
index 0000000000..3bf1bdf846
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-sharpness-01a.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that background-size and zooming don't degrade rendering sharpness.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+<div style="width:200px; height:200px; background-image:-moz-element(#e); background-size: cover;"></div>
+<div style="overflow:hidden; height:0">
+ <div id="e" style="width:100px; height:100px;">
+ <div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-sharpness-01b.html b/layout/reftests/image-element/element-paint-sharpness-01b.html
new file mode 100644
index 0000000000..c8ad13a499
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-sharpness-01b.html
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that background-size and zooming don't degrade rendering sharpness.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+<div style="width:200px; height:200px; border-radius:100%; background-color:lime;"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-sharpness-01c.html b/layout/reftests/image-element/element-paint-sharpness-01c.html
new file mode 100644
index 0000000000..e9bfa6f05e
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-sharpness-01c.html
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that background-size and zooming don't degrade rendering sharpness.
+-->
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<body style="margin:0">
+<div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-sharpness-01d.html b/layout/reftests/image-element/element-paint-sharpness-01d.html
new file mode 100644
index 0000000000..d99f467559
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-sharpness-01d.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that background-size and zooming don't degrade rendering sharpness.
+-->
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<body style="margin:0">
+<div style="width:100px; height:100px; background-image:-moz-element(#e);"></div>
+<div style="overflow:hidden; height:0">
+ <div id="e" style="width:100px; height:100px;">
+ <div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-sharpness-02a.html b/layout/reftests/image-element/element-paint-sharpness-02a.html
new file mode 100644
index 0000000000..2833c27553
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-sharpness-02a.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that background-size and zooming don't degrade rendering sharpness even when rendering to a surface.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+<div style="width:400px; height:400px; background-image:-moz-element(#e); background-size: 200px;"></div>
+<div style="overflow:hidden; height:0">
+ <div id="e" style="width:100px; height:100px;">
+ <div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-sharpness-02b.html b/layout/reftests/image-element/element-paint-sharpness-02b.html
new file mode 100644
index 0000000000..fbfe6a1cf3
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-sharpness-02b.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that background-size and zooming don't degrade rendering sharpness even when rendering to a surface.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+<div style="width:400px; height:400px; background-image:-moz-element(#e);"></div>
+<div style="overflow:hidden; height:0">
+ <div id="e" style="width:200px; height:200px;">
+ <div style="width:200px; height:200px; border-radius:100%; background-color:lime;"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-sharpness-02c.html b/layout/reftests/image-element/element-paint-sharpness-02c.html
new file mode 100644
index 0000000000..b8945c3256
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-sharpness-02c.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that background-size and zooming don't degrade rendering sharpness even when rendering to a surface.
+-->
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<body style="margin:0">
+<div style="width:200px; height:200px; background-image:-moz-element(#e);"></div>
+<div style="overflow:hidden; height:0">
+ <div id="e" style="width:100px; height:100px;">
+ <div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-simple-ref.html b/layout/reftests/image-element/element-paint-simple-ref.html
new file mode 100644
index 0000000000..b6ccfc8002
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-simple-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body>
+ <p style="width:60%; border:1px solid black; margin-left:100px;
+ position:relative;">
+ <span style="border:2px solid red; width:50px; height:50px;
+ position:absolute; z-index: -1;">A</span>
+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+ cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+ est laborum."
+ </p>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-simple.html b/layout/reftests/image-element/element-paint-simple.html
new file mode 100644
index 0000000000..339a24a519
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-simple.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test a simple element painting.
+ Note: if background is repeated, a temporary surface will be created to
+ hold the paint server image, which results in a reftest failure:
+ temporary surfaces use the RGBA 32bit format, but the fonts are rendered
+ with a deeper format (more than 32bit), so when rendering a font to a
+ temporary surface, we lose some color information.
+-->
+<html>
+<body>
+ <p style="width:60%; border:1px solid black; margin-left:100px;
+ background:-moz-element(#d); background-repeat:no-repeat;">
+ "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+ cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+ est laborum."
+ </p>
+ <div style="overflow:hidden; height:0;">
+ <div id="d" style="border:2px solid red; width:50px; height:50px;">A</div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-subimage-sampling-restriction.html b/layout/reftests/image-element/element-paint-subimage-sampling-restriction.html
new file mode 100644
index 0000000000..12bdde4704
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-subimage-sampling-restriction.html
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test zooming, image snapping and subimage sampling restriction.
+ This is like 446100-1a.html.
+-->
+<!DOCTYPE HTML>
+<html reftest-zoom="1.2" class="reftest-wait">
+<head>
+<style>
+div { margin:1em; }
+/* A 7x7px image, black with a 5x5 transparent box centered in it */
+div.box { background-image:-moz-element(#e5x5in7x7); }
+/* A 7x5px image, black with a 5x5 transparent box centered in it */
+div.vstrip { background-image:-moz-element(#e5x5in7x5); }
+/* A 5x7px image, black with a 5x5 transparent box centered in it */
+div.hstrip { background-image:-moz-element(#e5x5in5x7); }
+</style>
+</head>
+<body>
+<div class="box" style="background-position:-1px -1px; width:5px; height:5px;"></div>
+<div class="vstrip" style="background-position:-1px 0px; width:5px; height:22px;"></div>
+<div class="hstrip" style="background-position:0px -1px; width:22px; height:5px;"></div>
+<script>
+var waitingForLoad = 0;
+function setURLImage(name, url) {
+ var img = new Image();
+ img.src = url;
+ document.mozSetImageElement(name, img);
+ waitingForLoad++;
+ img.onload = function () { if (--waitingForLoad == 0) document.documentElement.className = ""; };
+}
+setURLImage("e5x5in7x7", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAFklEQVQImWNgYGD4jwdDCCxgQCWxYgBX8hfpeym4dwAAAABJRU5ErkJggg==");
+setURLImage("e5x5in7x5", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFCAYAAACJmvbYAAAAFElEQVQImWNgYGD4z4Ad/GcYAEkAw+kJ94z5rSYAAAAASUVORK5CYII=");
+setURLImage("e5x5in5x7", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAAE0lEQVQImWNgYGD4jwXTD2DYDgDN4Qn3yMcPlwAAAABJRU5ErkJggg==");
+</script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-transform-01-ref.html b/layout/reftests/image-element/element-paint-transform-01-ref.html
new file mode 100644
index 0000000000..1a964d79c7
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-transform-01-ref.html
@@ -0,0 +1,13 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body>
+ <div style="width:100px; height:100px; border: 1px solid black;
+ transform:matrix(2,0,0,2,50,50);">
+ <div style="margin:50px; border:10px solid red; width:20px; height:20px;
+ background:orange"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-transform-01.html b/layout/reftests/image-element/element-paint-transform-01.html
new file mode 100644
index 0000000000..e571c35500
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-transform-01.html
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test with background-position and some transform.
+-->
+<html>
+<body>
+ <div style="width:100px; height:100px; border: 1px solid black;
+ background: 50px 50px -moz-element(#d) no-repeat;
+ transform:matrix(2,0,0,2,50,50);">
+ </div>
+ <div style="overflow:hidden; height:0;">
+ <div id="d" style="border:10px solid red; width:20px; height:20px;
+ background:orange"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-transform-02-ref.html b/layout/reftests/image-element/element-paint-transform-02-ref.html
new file mode 100644
index 0000000000..d33f708952
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-transform-02-ref.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body style="filter:url(#thresholdAt128);">
+ <div style="width:100px; height:100px; border: 1px solid black;
+ transform:matrix(2,1,0,2,50,50);">
+ <div style="margin:50px; border:10px solid red; width:20px; height:20px;
+ background:yellow"></div>
+ </div>
+ <svg>
+ <filter id="thresholdAt128" color-interpolation-filters="sRGB">
+ <feColorMatrix type="matrix"
+ values="255 0 0 0 -128
+ 0 255 0 0 -128
+ 0 0 255 0 -128
+ 0 0 0 255 -128"/>
+
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-transform-02.html b/layout/reftests/image-element/element-paint-transform-02.html
new file mode 100644
index 0000000000..48c0a1dab6
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-transform-02.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test with background-position and some transform.
+-->
+<html>
+<body style="filter:url(#thresholdAt128);">
+ <div style="width:100px; height:100px; border: 1px solid black;
+ background: 50px 50px -moz-element(#d) no-repeat;
+ transform:matrix(2,1,0,2,50,50);">
+ </div>
+ <div style="overflow:hidden; height:0;">
+ <div id="d" style="border:10px solid red; width:20px; height:20px;
+ background:yellow"></div>
+ </div>
+ <svg>
+ <filter id="thresholdAt128" color-interpolation-filters="sRGB">
+ <feColorMatrix type="matrix"
+ values="255 0 0 0 -128
+ 0 255 0 0 -128
+ 0 0 255 0 -128
+ 0 0 0 255 -128"/>
+
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-transform-03-ref.html b/layout/reftests/image-element/element-paint-transform-03-ref.html
new file mode 100644
index 0000000000..04513b5e56
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-transform-03-ref.html
@@ -0,0 +1,49 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0; filter:url(#thresholdAt128);">
+ <div style="width:80px; height:40px; border:1px solid black;">
+ <div style="position:absolute; top:1px; left:1px;
+ border:10px solid blue; width:20px; height:20px; background:lime;"></div>
+ <div style="position:absolute; top:1px; left:41px;
+ border:10px solid blue; width:20px; height:20px; background:lime;"></div>
+ </div>
+ <div style="width:80px; height:40px; border:1px solid black;">
+ <div style="position:absolute; top:43px; left:1px;
+ width:40px; height:40px; overflow:hidden;">
+ <div style="border:10px solid blue; width:20px; height:20px;
+ background:lime; transform:rotate(30deg);"></div>
+ </div>
+ <div style="position:absolute; top:43px; left:41px;
+ width:40px; height:40px; overflow:hidden;">
+ <div style="border:10px solid blue; width:20px; height:20px;
+ background:lime; transform:rotate(30deg);"></div>
+ </div>
+ </div>
+ <div style="width:80px; height:40px; border:1px solid black;">
+ <div style="position:absolute; top:85px; left:1px;
+ width:40px; height:40px; overflow:hidden;">
+ <div style="border:10px solid blue; width:20px; height:20px;
+ background:lime; transform:rotate(30deg);"></div>
+ </div>
+ <div style="position:absolute; top:85px; left:41px;
+ width:40px; height:40px; overflow:hidden;">
+ <div style="border:10px solid blue; width:20px; height:20px;
+ background:lime; transform:rotate(30deg);"></div>
+ </div>
+ </div>
+ <svg>
+ <filter id="thresholdAt128" color-interpolation-filters="sRGB">
+ <feColorMatrix type="matrix"
+ values="255 0 0 0 -128
+ 0 255 0 0 -128
+ 0 0 255 0 -128
+ 0 0 0 255 -128"/>
+
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-transform-03.html b/layout/reftests/image-element/element-paint-transform-03.html
new file mode 100644
index 0000000000..80a8dddd9c
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-transform-03.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test paint servers that are rotated. We have to paint them as rectangles.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0; filter:url(#thresholdAt128);">
+ <div style="width:80px; height:40px; border:1px solid black;
+ background:-moz-element(#d1);"></div>
+ <div style="width:80px; height:40px; border:1px solid black;
+ background:-moz-element(#d2);"></div>
+ <div style="width:80px; height:40px; border:1px solid black;
+ background:-moz-element(#d3);"></div>
+
+ <div style="overflow:hidden; height:0;">
+ <div id="d1" style="width:40px; height:40px; transform:rotate(-30deg);">
+ <div id="d2" style="width:40px; height:40px">
+ <div id="d3" style="border:10px solid blue; width:20px; height:20px;
+ transform:rotate(30deg); background:lime">
+ </div>
+ </div>
+ </div>
+ </div>
+ <svg>
+ <filter id="thresholdAt128" color-interpolation-filters="sRGB">
+ <feColorMatrix type="matrix"
+ values="255 0 0 0 -128
+ 0 255 0 0 -128
+ 0 0 255 0 -128
+ 0 0 0 255 -128"/>
+
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-transform-repeated-ref.html b/layout/reftests/image-element/element-paint-transform-repeated-ref.html
new file mode 100644
index 0000000000..0af27dc794
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-transform-repeated-ref.html
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<body>
+ <div style="width:80px; height:80px; border: 1px solid black; background:white;
+ transform:matrix(2,0,0,2,50,50);">
+ <div style="position:absolute; top:17px; left:17px; width:20px; height:20px;
+ background:black;"></div>
+ <div style="position:absolute; top:57px; left:17px; width:20px; height:20px;
+ background:black;"></div>
+ <div style="position:absolute; top:17px; left:57px; width:20px; height:20px;
+ background:black;"></div>
+ <div style="position:absolute; top:57px; left:57px; width:20px; height:20px;
+ background:black;"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/element-paint-transform-repeated.html b/layout/reftests/image-element/element-paint-transform-repeated.html
new file mode 100644
index 0000000000..f6479cbaf4
--- /dev/null
+++ b/layout/reftests/image-element/element-paint-transform-repeated.html
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test a repeated background with some transform.
+ The transform scales up which causes blurring, so
+ we use an SVG filter to get rid of it.
+-->
+<html>
+<body style="filter:url(#thresholdAt128)">
+ <div style="width:80px; height:80px; border: 1px solid black;
+ background: 7px 7px -moz-element(#d);
+ transform:matrix(2,0,0,2,50,50);">
+ </div>
+ <div style="overflow:hidden; height:0;">
+ <div id="d" style="border:10px solid white; width:20px; height:20px;
+ background:black;"></div>
+ </div>
+
+ <svg>
+ <filter id="thresholdAt128" color-interpolation-filters="sRGB">
+ <feComponentTransfer>
+ <feFuncR type="linear" slope="255" intercept="-128"/>
+ <feFuncG type="linear" slope="255" intercept="-128"/>
+ <feFuncB type="linear" slope="255" intercept="-128"/>
+ </feComponentTransfer>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/empty-src.html b/layout/reftests/image-element/empty-src.html
new file mode 100644
index 0000000000..36091cdc19
--- /dev/null
+++ b/layout/reftests/image-element/empty-src.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ img {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<img src>
diff --git a/layout/reftests/image-element/gradient-html-01-ref.svg b/layout/reftests/image-element/gradient-html-01-ref.svg
new file mode 100644
index 0000000000..cb31abbc3b
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-01-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="url(#g)"/>
+ <linearGradient id="g" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"/>
+ <stop stop-color="lime" stop-opacity="0" offset="1"/>
+ </linearGradient>
+</svg>
diff --git a/layout/reftests/image-element/gradient-html-01.html b/layout/reftests/image-element/gradient-html-01.html
new file mode 100644
index 0000000000..f6991cb683
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-01.html
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:100px; height:100px; background:-moz-element(#g);"></div>
+ <svg>
+ <linearGradient id="g" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="lime" stop-opacity="0" offset="1"></stop>
+ </linearGradient>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-02-ref.svg b/layout/reftests/image-element/gradient-html-02-ref.svg
new file mode 100644
index 0000000000..b7815be11e
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-02-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="url(#g)"/>
+ <rect y="100" width="100" height="100" fill="blue"/>
+ <linearGradient id="g" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"/>
+ <stop stop-color="lime" stop-opacity="0" offset="1"/>
+ </linearGradient>
+</svg>
diff --git a/layout/reftests/image-element/gradient-html-02.html b/layout/reftests/image-element/gradient-html-02.html
new file mode 100644
index 0000000000..6eb1c76a62
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-02.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:100px; height:100px; background:-moz-element(#g);">
+ <div style="height:100px;"></div>
+ <div style="width:100px; height:100px; background:blue;"></div>
+ </div>
+ <svg>
+ <defs>
+ <linearGradient id="g" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="lime" stop-opacity="0" offset="1"></stop>
+ </linearGradient>
+ </defs>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-03-ref.svg b/layout/reftests/image-element/gradient-html-03-ref.svg
new file mode 100644
index 0000000000..b7815be11e
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-03-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="url(#g)"/>
+ <rect y="100" width="100" height="100" fill="blue"/>
+ <linearGradient id="g" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"/>
+ <stop stop-color="lime" stop-opacity="0" offset="1"/>
+ </linearGradient>
+</svg>
diff --git a/layout/reftests/image-element/gradient-html-03.html b/layout/reftests/image-element/gradient-html-03.html
new file mode 100644
index 0000000000..cfb9b7b0d3
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-03.html
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:100px; height:100px; background:-moz-element(#g);">
+ <div style="height:100px;"></div>
+ <div style="width:100px; height:100px; background:blue;"></div>
+ </div>
+ <svg>
+ <linearGradient gradientUnits="userSpaceOnUse" id="g" x2="0" y2="100">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="lime" stop-opacity="0" offset="1"></stop>
+ </linearGradient>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-04-ref.html b/layout/reftests/image-element/gradient-html-04-ref.html
new file mode 100644
index 0000000000..0df5ffe4b4
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-04-ref.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+ <span class="unit"></span><span class="unit"
+ ></span><span style="background:lime"><span class="unit"></span><span class="unit"
+ ></span></span>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-04.html b/layout/reftests/image-element/gradient-html-04.html
new file mode 100644
index 0000000000..bc1deb1c4b
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-04.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+ <span class="unit"></span><span class="unit"
+ ></span><span style="background:-moz-element(#g)"><span class="unit"></span><span class="unit"
+ ></span></span>
+
+ <svg>
+ <linearGradient id="g" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="lime" offset="1"></stop>
+ </linearGradient>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-05-ref.html b/layout/reftests/image-element/gradient-html-05-ref.html
new file mode 100644
index 0000000000..06e9c58aa9
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-05-ref.html
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; background:blue; }
+</style>
+</head>
+<body style="margin:0; width:300px; line-height:100px;">
+ <span class="unit"></span><span class="unit"
+ ></span><span class="unit"></span><span style="background:lime"><span class="unit"
+ ></span></span>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-05.html b/layout/reftests/image-element/gradient-html-05.html
new file mode 100644
index 0000000000..35fe9e9023
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-05.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; background:blue; }
+</style>
+</head>
+<body style="margin:0; width:300px; line-height:100px;">
+ <span class="unit"></span><span class="unit"
+ ></span><span style="background:-moz-element(#g)"><span class="unit"></span><span class="unit"
+ ></span></span>
+
+ <svg>
+ <linearGradient gradientUnits="userSpaceOnUse" id="g" x1="0" y1="0" x2="200" y2="0">
+ <stop stop-color="lime" stop-opacity="0" offset="0"></stop>
+ <stop stop-color="lime" stop-opacity="0" offset="0.5"></stop>
+ <stop stop-color="lime" offset="0.5"></stop>
+ <stop stop-color="lime" offset="1"></stop>
+ </linearGradient>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-06a.html b/layout/reftests/image-element/gradient-html-06a.html
new file mode 100644
index 0000000000..0533cfcfff
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-06a.html
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Test whether SVG gradients as -moz-element render the same as
+ CSS gradients.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:300px; height:300px; background-image:-moz-element(#g)"></div>
+ <svg>
+ <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="black" offset="1"></stop>
+ </linearGradient>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-06b.html b/layout/reftests/image-element/gradient-html-06b.html
new file mode 100644
index 0000000000..725a20c1dc
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-06b.html
@@ -0,0 +1,13 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Test whether SVG gradients as -moz-element render the same as
+ CSS gradients.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:300px; height:300px; background-image:linear-gradient(lime, black)"></div>
+</body>
+</html>
+
diff --git a/layout/reftests/image-element/gradient-html-06c.html b/layout/reftests/image-element/gradient-html-06c.html
new file mode 100644
index 0000000000..23f88a6771
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-06c.html
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Test whether SVG gradients as -moz-element render the same as
+ a SVG rect with an SVG gradient.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <svg width="300" height="300">
+ <rect width="300" height="300" fill="url(#g)"></rect>
+ <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="black" offset="1"></stop>
+ </linearGradient>
+ </svg>
+</body>
+</html>
+
diff --git a/layout/reftests/image-element/gradient-html-06d.html b/layout/reftests/image-element/gradient-html-06d.html
new file mode 100644
index 0000000000..294cbe27cd
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-06d.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Ensure that -moz-element using an SVG gradient is affected by
+ mozSetImageElement.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:300px; height:300px; background-image:-moz-element(#g)"></div>
+ <svg>
+ <linearGradient id="green" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="black" offset="1"></stop>
+ </linearGradient>
+ <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="red" offset="0"></stop>
+ <stop stop-color="black" offset="1"></stop>
+ </linearGradient>
+ </svg>
+ <script>document.mozSetImageElement("g", document.getElementById("green"));</script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-06e.html b/layout/reftests/image-element/gradient-html-06e.html
new file mode 100644
index 0000000000..df3843c23e
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-06e.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Ensure that SVG elements using fill="url(#...)" are *not*
+ affected by mozSetImageElement.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <svg width="300" height="300">
+ <rect width="300" height="300" fill="url(#g)"></rect>
+ <linearGradient id="red" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="red" offset="0"></stop>
+ <stop stop-color="black" offset="1"></stop>
+ </linearGradient>
+ <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="black" offset="1"></stop>
+ </linearGradient>
+ </svg>
+ <script>document.mozSetImageElement("g", document.getElementById("red"));</script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-07a.html b/layout/reftests/image-element/gradient-html-07a.html
new file mode 100644
index 0000000000..a8caf31038
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-07a.html
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Test that diagonal repeating SVG gradients as -moz-element render the same as
+ CSS gradients.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:300px; height:300px; background-image:-moz-element(#g); background-size: 100px 100px;"></div>
+ <svg>
+ <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1" y2="1">
+ <stop stop-color="lime" offset="0"></stop>
+ <stop stop-color="black" offset="1"></stop>
+ </linearGradient>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-07b.html b/layout/reftests/image-element/gradient-html-07b.html
new file mode 100644
index 0000000000..41270af788
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-07b.html
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Test that diagonal repeating SVG gradients as -moz-element render the same as
+ CSS gradients.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:300px; height:300px; background-image:linear-gradient(135deg, lime, black); background-size: 100px 100px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-07c.html b/layout/reftests/image-element/gradient-html-07c.html
new file mode 100644
index 0000000000..3e378436bf
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-07c.html
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Test that diagonal repeating SVG gradients as -moz-element
+ using userSpaceOnUse render the same as using objectBoundingBox
+ with the right conversion.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:200px; height:200px; background-image:-moz-element(#g); background-size: 100px 100px;"></div>
+ <svg>
+ <linearGradient id="g" gradientUnits="userSpaceOnUse" x2="200" y2="200">
+ <stop stop-color="#00ff00" offset="0"></stop>
+ <stop stop-color="black" offset="1"></stop>
+ </linearGradient>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/gradient-html-07d.html b/layout/reftests/image-element/gradient-html-07d.html
new file mode 100644
index 0000000000..e9ff4d13af
--- /dev/null
+++ b/layout/reftests/image-element/gradient-html-07d.html
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ Test that diagonal repeating SVG gradients as -moz-element render the same as
+ CSS gradients.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:200px; height:200px; background-image:linear-gradient(135deg, #00ff00, #008000); background-size: 100px 100px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/image-outside-document-invalidate.html b/layout/reftests/image-element/image-outside-document-invalidate.html
new file mode 100644
index 0000000000..b3ef59d283
--- /dev/null
+++ b/layout/reftests/image-element/image-outside-document-invalidate.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that document.mozSetImageElement() after an image load causes a repaint.
+-->
+<!DOCTYPE html>
+<html class="reftest-wait">
+<body style="background: -moz-element(#e) red">
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+ var img = new Image();
+ img.src = "data:image/gif;base64,R0lGODlhAQABAID/AP///wAAACwAAAAAAQABAAACAkQBADs="; /* 1x1 white gif */
+ document.mozSetImageElement("e", img);
+ img.onload = function () {
+ document.documentElement.className = "";
+ };
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/invalid-src-2.html b/layout/reftests/image-element/invalid-src-2.html
new file mode 100644
index 0000000000..c385acca6d
--- /dev/null
+++ b/layout/reftests/image-element/invalid-src-2.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ img {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<img src="http://yada yada">
diff --git a/layout/reftests/image-element/invalid-src.html b/layout/reftests/image-element/invalid-src.html
new file mode 100644
index 0000000000..26821d39b2
--- /dev/null
+++ b/layout/reftests/image-element/invalid-src.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ img {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<img src="yada yada">
diff --git a/layout/reftests/image-element/invalidate-1-ref.html b/layout/reftests/image-element/invalidate-1-ref.html
new file mode 100644
index 0000000000..833c846170
--- /dev/null
+++ b/layout/reftests/image-element/invalidate-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="background:url(repeatable-diagonal-gradient.png?4567); width:100px; height:100px"></div>
+<div style="background:url(repeatable-diagonal-gradient.png?90); width:100px; height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/invalidate-1.html b/layout/reftests/image-element/invalidate-1.html
new file mode 100644
index 0000000000..5dc3ec7f93
--- /dev/null
+++ b/layout/reftests/image-element/invalidate-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<script>
+ /* this test shouldn't need reftest-wait, but if the reftest snapshot is triggered before we've painted,
+ * then we might not get a chance to invalidate the -moz-element div in time
+ * See Bug 1283302
+ */
+ window.addEventListener("MozReftestInvalidate", endTest);
+
+ function endTest() {
+ document.documentElement.removeAttribute("class");
+ }
+</script>
+<body>
+<div id="A" style="background:url(repeatable-diagonal-gradient.png?1234); width:100px; height:100px"></div>
+<div style="background:-moz-element(#A); width:100px; height:100px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/mask-image-element-ref.html b/layout/reftests/image-element/mask-image-element-ref.html
new file mode 100644
index 0000000000..adb1f6b2b4
--- /dev/null
+++ b/layout/reftests/image-element/mask-image-element-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style type="text/css">
+ div {
+ background-color: white;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.auto {
+ left: 10px;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>');
+ }
+
+ div.alpha {
+ left: 120px;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>');
+ }
+
+ div.luminance1 {
+ left: 230px;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(238,238,255)" fill-opacity="1"/></svg>');
+ }
+
+ div.luminance2 {
+ left: 340px;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(201,201,255)" fill-opacity="1"/></svg>');
+ }
+
+ div.luminance3 {
+ left: 450px;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(73,73,255)" fill-opacity="1"/></svg>');
+ }
+ </style>
+ </head>
+ <body>
+ <div class="auto"></div>
+ <div class="alpha"></div>
+ <div class="luminance1"></div>
+ <div class="luminance2"></div>
+ <div class="luminance3"></div>
+ </body>
+</html>
diff --git a/layout/reftests/image-element/mask-image-element.html b/layout/reftests/image-element/mask-image-element.html
new file mode 100644
index 0000000000..3adf327b04
--- /dev/null
+++ b/layout/reftests/image-element/mask-image-element.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style type="text/css">
+ div {
+ background-color: blue;
+ position: absolute;
+ margin: 0px;
+ padding: 0px;
+ width: 100px;
+ height: 100px;
+ top: 10px;
+ }
+
+ div.auto {
+ left: 10px;
+ mask-mode: match-source;
+ mask-image: -moz-element(#blue-bg);
+ }
+
+ div.alpha {
+ left: 120px;
+ mask-mode: alpha;
+ mask-image: -moz-element(#blue-bg);
+ }
+
+ div.luminance1 {
+ left: 230px;
+ mask-mode: luminance;
+ mask-image: -moz-element(#blue-bg);
+ }
+
+ div.luminance2 {
+ left: 340px;
+ mask-mode: luminance;
+ mask-image: -moz-element(#red-bg);
+ }
+
+ div.luminance3 {
+ left: 450px;
+ mask-mode: luminance;
+ mask-image: -moz-element(#lime-bg);
+ }
+ </style>
+ </head>
+ <body>
+ <div class="auto"></div>
+ <div class="alpha"></div>
+ <div class="luminance1"></div>
+ <div class="luminance2"></div>
+ <div class="luminance3"></div>
+
+ <div style="overflow:hidden; height:0;">
+ <div id="blue-bg" style="width:100px; height:100px; background-color: blue;"> </div>
+ </div>
+ <div style="overflow:hidden; height:0;">
+ <div id="red-bg" style="width:100px; height:100px; background-color: red;"></div>
+ </div>
+ <div style="overflow:hidden; height:0;">
+ <div id="lime-bg" style="width:100px; height:100px; background-color: lime;"></div>
+ </div>
+ </body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/image-element/mozsetimageelement-01-ref.html b/layout/reftests/image-element/mozsetimageelement-01-ref.html
new file mode 100644
index 0000000000..2bba0c7316
--- /dev/null
+++ b/layout/reftests/image-element/mozsetimageelement-01-ref.html
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+ <head>
+ <style>
+ div {
+ width: 10px;
+ height: 10px;
+ }
+ </style>
+ </head>
+<body style="margin:0">
+ <div style="background:black;"></div>
+ <div style="background:red;"></div>
+ <div style="background:black;"></div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/mozsetimageelement-01.html b/layout/reftests/image-element/mozsetimageelement-01.html
new file mode 100644
index 0000000000..f1ac067c0d
--- /dev/null
+++ b/layout/reftests/image-element/mozsetimageelement-01.html
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test document.mozSetImageElement() DOM API and check if ID targets are
+ correctly overridden.
+-->
+<html>
+ <head>
+ <style>
+ div {
+ width: 10px;
+ height: 10px;
+ }
+ </style>
+ </head>
+<body style="margin:0">
+ <div style="background:-moz-element(#d1);"></div>
+ <div style="background:-moz-element(#d2);"></div>
+ <div style="background:-moz-element(#d3);"></div>
+
+ <div style="overflow:hidden; height:0;">
+ <div id="d1" style="background:red;"></div>
+ <div id="d2" style="background:blue;"></div>
+ <!-- two elements with the same ID: the former one will be used -->
+ <div id="d3" style="background:black;"></div>
+ <div id="d3" style="background:yellow;"></div>
+ </div>
+
+ <script>
+ var d1 = document.getElementById("d1");
+ var d2 = document.getElementById("d2");
+ var d3 = document.getElementById("d3");
+ document.mozSetImageElement("d1", d3);
+ document.mozSetImageElement("d2", null);
+ document.mozSetImageElement("d3", d1);
+ document.mozSetImageElement("d3", null);
+ document.mozSetImageElement("d4", d1);
+ document.mozSetImageElement("", d1);
+ d1.id = "d2";
+ d2.id = "d1";
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/mozsetimageelement-02.html b/layout/reftests/image-element/mozsetimageelement-02.html
new file mode 100644
index 0000000000..d8ec098fcb
--- /dev/null
+++ b/layout/reftests/image-element/mozsetimageelement-02.html
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test that document.mozSetImageElement() after a paint causes a repaint.
+-->
+<!DOCTYPE html>
+<html class="reftest-wait">
+<body style="background-image: -moz-element(#e)">
+
+<div style="overflow:hidden; height:0;">
+ <div id="e" style="width: 50px; height: 50px; background: red;"></div>
+ <div id="white" style="width: 50px; height: 50px; background: white;"></div>
+</div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+ document.mozSetImageElement("e", document.getElementById("white"));
+ document.documentElement.className = "";
+});
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/image-element/no-src.html b/layout/reftests/image-element/no-src.html
new file mode 100644
index 0000000000..6cc51078c0
--- /dev/null
+++ b/layout/reftests/image-element/no-src.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ img {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<img>
diff --git a/layout/reftests/image-element/orientation-1-ref.html b/layout/reftests/image-element/orientation-1-ref.html
new file mode 100644
index 0000000000..b162de45c1
--- /dev/null
+++ b/layout/reftests/image-element/orientation-1-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<div style="width: 200px; height: 100px;"><img src="../image/image-exif-90-deg.jpg"></div>
+<img src="../image/image-exif-90-deg.jpg">
diff --git a/layout/reftests/image-element/orientation-1.html b/layout/reftests/image-element/orientation-1.html
new file mode 100644
index 0000000000..cb48c59c29
--- /dev/null
+++ b/layout/reftests/image-element/orientation-1.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<!-- Test that -moz-element() honors a target image's orientation metadata. -->
+<div style="width: 200px; height: 100px; background-image: -moz-element(#e);"></div>
+<img id="e" src="../image/image-exif-90-deg.jpg">
diff --git a/layout/reftests/image-element/pattern-html-01-ref.svg b/layout/reftests/image-element/pattern-html-01-ref.svg
new file mode 100644
index 0000000000..b991d9d17c
--- /dev/null
+++ b/layout/reftests/image-element/pattern-html-01-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="10" y="10" width="10" height="10" fill="lime"/>
+ <rect x="60" y="10" width="10" height="10" fill="lime"/>
+ <rect x="10" y="60" width="10" height="10" fill="lime"/>
+ <rect x="60" y="60" width="10" height="10" fill="lime"/>
+ <rect x="0" y="200" width="10" height="10" fill="lime"/>
+ <rect x="50" y="200" width="10" height="10" fill="lime"/>
+ <rect x="0" y="250" width="10" height="10" fill="lime"/>
+ <rect x="50" y="250" width="10" height="10" fill="lime"/>
+</svg>
diff --git a/layout/reftests/image-element/pattern-html-01.html b/layout/reftests/image-element/pattern-html-01.html
new file mode 100644
index 0000000000..fa91c3748d
--- /dev/null
+++ b/layout/reftests/image-element/pattern-html-01.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test painting simple patterns with offsets.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0">
+ <div style="width:100px; height:100px; background:-moz-element(#p);"></div>
+ <div style="margin-top:100px; width:100px; height:100px;
+ background:-moz-element(#p); background-position:-10px -10px;"></div>
+
+ <svg>
+ <pattern id="p" patternUnits="userSpaceOnUse"
+ x="0" y="0" width="50" height="50">
+ <rect x="10" y="10" width="10" height="10" fill="lime"></rect>
+ </pattern>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/image-element/pattern-html-02-ref.svg b/layout/reftests/image-element/pattern-html-02-ref.svg
new file mode 100644
index 0000000000..3c913649a3
--- /dev/null
+++ b/layout/reftests/image-element/pattern-html-02-ref.svg
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="30" height="30" fill="black"/>
+ <rect x="75" y="15" width="30" height="30" fill="black"/>
+
+ <rect x="5" y="65" width="10" height="10" fill="black"/>
+ <rect x="25" y="65" width="10" height="10" fill="black"/>
+ <rect x="45" y="65" width="10" height="10" fill="black"/>
+ <rect x="65" y="65" width="10" height="10" fill="black"/>
+ <rect x="85" y="65" width="10" height="10" fill="black"/>
+ <rect x="105" y="65" width="10" height="10" fill="black"/>
+ <rect x="5" y="85" width="10" height="10" fill="black"/>
+ <rect x="25" y="85" width="10" height="10" fill="black"/>
+ <rect x="45" y="85" width="10" height="10" fill="black"/>
+ <rect x="65" y="85" width="10" height="10" fill="black"/>
+ <rect x="85" y="85" width="10" height="10" fill="black"/>
+ <rect x="105" y="85" width="10" height="10" fill="black"/>
+ <rect x="5" y="105" width="10" height="10" fill="black"/>
+ <rect x="25" y="105" width="10" height="10" fill="black"/>
+ <rect x="45" y="105" width="10" height="10" fill="black"/>
+ <rect x="65" y="105" width="10" height="10" fill="black"/>
+ <rect x="85" y="105" width="10" height="10" fill="black"/>
+ <rect x="105" y="105" width="10" height="10" fill="black"/>
+</svg>
diff --git a/layout/reftests/image-element/pattern-html-02.html b/layout/reftests/image-element/pattern-html-02.html
new file mode 100644
index 0000000000..9e7783088a
--- /dev/null
+++ b/layout/reftests/image-element/pattern-html-02.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+
+ Test painting patterns with scaling by background-size and transform.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0;">
+ <div style="background: white; overflow: hidden;">
+ <div style="margin:20px 0px 20px 40px; width:40px; height:20px;
+ background:-moz-element(#p);
+ transform:scale(3);"></div>
+ <div style="width:120px; height:60px;
+ background:-moz-element(#p);
+ background-size:300% 300%;"></div>
+
+ <svg>
+ <pattern id="p" patternUnits="userSpaceOnUse"
+ x="0" y="0" width="20" height="20">
+ <rect x="5" y="5" width="10" height="10" fill="black"></rect>
+ </pattern>
+ </svg>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/image-element/reftest.list b/layout/reftests/image-element/reftest.list
new file mode 100644
index 0000000000..2b31398ccf
--- /dev/null
+++ b/layout/reftests/image-element/reftest.list
@@ -0,0 +1,59 @@
+random == bug-364968.html bug-364968-ref.html
+== bug-463204.html bug-463204-ref.html
+== canvas-outside-document.html canvas-inside-document.html
+== mozsetimageelement-01.html mozsetimageelement-01-ref.html
+== mozsetimageelement-02.html about:blank
+== image-outside-document-invalidate.html about:blank
+== canvas-outside-document-invalidate-01.html about:blank
+fails-if(azureSkia&&!winWidget) fails-if(cocoaWidget) fails-if(remoteCanvas&&swgl&&winWidget) == canvas-outside-document-invalidate-02.html about:blank # See bug 666800
+#fails with Skia due to Skia bug http://code.google.com/p/skia/issues/detail?id=568
+fuzzy-if(winWidget,47-129,47-54) == element-paint-simple.html element-paint-simple-ref.html
+== element-paint-repeated.html element-paint-repeated-ref.html
+== element-paint-recursion.html element-paint-recursion-ref.html
+== element-paint-continuation.html element-paint-continuation-ref.html
+== element-paint-transform-01.html element-paint-transform-01-ref.html
+random-if(d2d) fuzzy-if(!useDrawSnapshot,255-255,39-42) == element-paint-transform-02.html element-paint-transform-02-ref.html # bug 587133
+== element-paint-background-size-01.html element-paint-background-size-01-ref.html
+== element-paint-background-size-02.html element-paint-background-size-02-ref.html
+fuzzy(0-255,0-4) == element-paint-transform-repeated.html element-paint-transform-repeated-ref.html # Bug 1475907
+fuzzy-if(d2d,0-255,0-24) fuzzy-if(!useDrawSnapshot,255-255,50-115) == element-paint-transform-03.html element-paint-transform-03-ref.html
+
+# For element() uses fallback / skia in WebRender, which antialiases differently from WR.
+# For Windows: bug 1496542, the scrollframe snaps differently.
+# For the rest: -ref the scrollframe is active and layerized differently with APZ.
+fuzzy(0-24,0-106) fuzzy-if(winWidget&&!layersGPUAccelerated,149-149,1203-1203) fuzzy-if(!useDrawSnapshot,1-48,5-68) fuzzy-if(winWidget,47-222,1197-1588) fuzzy-if(Android,0-40,0-81) == element-paint-native-widget.html element-paint-native-widget-ref.html
+
+# This fails with CreateSamplingRestrictedDrawable removed
+fails-if(!Android&&!useDrawSnapshot) == element-paint-subimage-sampling-restriction.html about:blank
+== element-paint-clippath.html element-paint-clippath-ref.html
+fuzzy-if(!useDrawSnapshot,1-1,128-128) fuzzy-if(d2d,47-47,650-652) fuzzy-if(!useDrawSnapshot,36-39,704-738) == element-paint-sharpness-01a.html element-paint-sharpness-01b.html
+fuzzy(0-1,0-326) fails-if(useDrawSnapshot) == element-paint-sharpness-01b.html element-paint-sharpness-01c.html
+fuzzy-if(!useDrawSnapshot,1-1,128-128) fuzzy-if(d2d,47-47,650-652) fuzzy-if(!useDrawSnapshot,36-39,704-738) == element-paint-sharpness-01c.html element-paint-sharpness-01d.html
+== element-paint-sharpness-02a.html element-paint-sharpness-02b.html
+fails-if(useDrawSnapshot) == element-paint-sharpness-02b.html element-paint-sharpness-02c.html
+== element-paint-paintserversize-rounding-01.html element-paint-paintserversize-rounding-01-ref.html
+fuzzy(0-187,0-1191) == element-paint-paintserversize-rounding-02.html element-paint-paintserversize-rounding-02-ref.html # Linux32 from GCC update
+fuzzy(0-1,0-625) == element-paint-multiple-backgrounds-01a.html element-paint-multiple-backgrounds-01-ref.html
+fuzzy(0-1,0-625) == element-paint-multiple-backgrounds-01b.html element-paint-multiple-backgrounds-01-ref.html
+fuzzy(0-1,0-625) == element-paint-multiple-backgrounds-01c.html element-paint-multiple-backgrounds-01-ref.html
+== gradient-html-01.html gradient-html-01-ref.svg
+== gradient-html-02.html gradient-html-02-ref.svg
+random-if(!cocoaWidget) == gradient-html-03.html gradient-html-03-ref.svg
+== gradient-html-04.html gradient-html-04-ref.html
+== gradient-html-05.html gradient-html-05-ref.html
+fuzzy(0-1,0-9674) random-if(!cocoaWidget) fuzzy-if(cocoaWidget&&!swgl,1-1,21600-444200) == gradient-html-06a.html gradient-html-06b.html
+fuzzy(0-1,0-9674) random-if(!cocoaWidget) fuzzy-if(cocoaWidget&&!swgl,1-1,21600-444200) == gradient-html-06b.html gradient-html-06c.html
+== gradient-html-06c.html gradient-html-06d.html
+== gradient-html-06d.html gradient-html-06e.html
+random-if(!cocoaWidget) fuzzy-if(cocoaWidget,0-2,0-42305) == gradient-html-07a.html gradient-html-07b.html
+fuzzy(0-1,0-16900) == gradient-html-07c.html gradient-html-07d.html
+HTTP == invalidate-1.html invalidate-1-ref.html
+== pattern-html-01.html pattern-html-01-ref.svg
+== pattern-html-02.html pattern-html-02-ref.svg
+!= broken-icon.html no-src.html
+!= broken-icon.html empty-src.html
+== empty-src.html no-src.html
+== broken-icon.html invalid-src.html
+fails == invalid-src.html invalid-src-2.html # bug 1506804
+fuzzy(0-1,0-30000) == mask-image-element.html mask-image-element-ref.html
+== orientation-1.html orientation-1-ref.html
diff --git a/layout/reftests/image-element/repeatable-diagonal-gradient.png b/layout/reftests/image-element/repeatable-diagonal-gradient.png
new file mode 100644
index 0000000000..d114e100d3
--- /dev/null
+++ b/layout/reftests/image-element/repeatable-diagonal-gradient.png
Binary files differ
diff --git a/layout/reftests/image/100.png b/layout/reftests/image/100.png
new file mode 100644
index 0000000000..df421453c2
--- /dev/null
+++ b/layout/reftests/image/100.png
Binary files differ
diff --git a/layout/reftests/image/200.png b/layout/reftests/image/200.png
new file mode 100644
index 0000000000..6f76d44387
--- /dev/null
+++ b/layout/reftests/image/200.png
Binary files differ
diff --git a/layout/reftests/image/300.png b/layout/reftests/image/300.png
new file mode 100644
index 0000000000..c12b7ceea1
--- /dev/null
+++ b/layout/reftests/image/300.png
Binary files differ
diff --git a/layout/reftests/image/400.png b/layout/reftests/image/400.png
new file mode 100644
index 0000000000..8855fc6d46
--- /dev/null
+++ b/layout/reftests/image/400.png
Binary files differ
diff --git a/layout/reftests/image/50.png b/layout/reftests/image/50.png
new file mode 100644
index 0000000000..144a2f0b93
--- /dev/null
+++ b/layout/reftests/image/50.png
Binary files differ
diff --git a/layout/reftests/image/500.svg b/layout/reftests/image/500.svg
new file mode 100644
index 0000000000..35ad0db4f0
--- /dev/null
+++ b/layout/reftests/image/500.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px">
+
+<title>Simple SVG with 500x500 intrinsic size</title>
+ <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/image/background-image-zoom-1-ref.html b/layout/reftests/image/background-image-zoom-1-ref.html
new file mode 100644
index 0000000000..b23048bb61
--- /dev/null
+++ b/layout/reftests/image/background-image-zoom-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" />
+<title>reference background-image-rendering: -moz-crisp-edges</title>
+<style>
+html
+{
+background-image: url('big.png');
+background-attachment:fixed;
+background-position: 20px 20px;
+background-repeat: no-repeat;
+overflow: hidden;
+}
+</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/image/background-image-zoom-1.html b/layout/reftests/image/background-image-zoom-1.html
new file mode 100644
index 0000000000..0572099a37
--- /dev/null
+++ b/layout/reftests/image/background-image-zoom-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ -->
+<html reftest-zoom="5">
+<head>
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" />
+<title>test background-image-rendering: -moz-crisp-edges</title>
+<style>
+html
+{
+background-image: url('small.png');
+image-rendering: -moz-crisp-edges;
+background-attachment:fixed;
+background-position: 4px 4px;
+background-repeat: no-repeat;
+overflow: hidden;
+}
+</style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/image/background-image-zoom-2.html b/layout/reftests/image/background-image-zoom-2.html
new file mode 100644
index 0000000000..18a41ea430
--- /dev/null
+++ b/layout/reftests/image/background-image-zoom-2.html
@@ -0,0 +1,23 @@
+<html reftest-zoom="1.8">
+<style>
+ a{
+ background-repeat: inherit;
+ background-position: inherit;
+ /* this image has a red pixel at the bottom to
+ prevent image lib from optimizing it into a
+ solid color fill */
+ background-image:url("nearly-white.png");
+ line-height: 20px; /* set the line height so that the red pixel is not drawn */
+ }
+</style>
+<div style="background-repeat: no-repeat">
+ <a>&nbsp;</a><a>&nbsp;</a>
+</div>
+<p>
+<div style="background-position: right top">
+ <a>&nbsp;</a><a>&nbsp;</a>
+</div>
+<p>
+<div>
+ <a>&nbsp;</a><a>&nbsp;</a>
+</div>
diff --git a/layout/reftests/image/big.png b/layout/reftests/image/big.png
new file mode 100644
index 0000000000..76a32497c7
--- /dev/null
+++ b/layout/reftests/image/big.png
Binary files differ
diff --git a/layout/reftests/image/blue-100x50.png b/layout/reftests/image/blue-100x50.png
new file mode 100644
index 0000000000..85d980424c
--- /dev/null
+++ b/layout/reftests/image/blue-100x50.png
Binary files differ
diff --git a/layout/reftests/image/blue-16x20.png b/layout/reftests/image/blue-16x20.png
new file mode 100644
index 0000000000..f0f4d319e8
--- /dev/null
+++ b/layout/reftests/image/blue-16x20.png
Binary files differ
diff --git a/layout/reftests/image/blue-32x32.png b/layout/reftests/image/blue-32x32.png
new file mode 100644
index 0000000000..deefd19b2a
--- /dev/null
+++ b/layout/reftests/image/blue-32x32.png
Binary files differ
diff --git a/layout/reftests/image/blue-50x100.png b/layout/reftests/image/blue-50x100.png
new file mode 100644
index 0000000000..d09f03b25f
--- /dev/null
+++ b/layout/reftests/image/blue-50x100.png
Binary files differ
diff --git a/layout/reftests/image/blue-50x50.png b/layout/reftests/image/blue-50x50.png
new file mode 100644
index 0000000000..bdb91e34c8
--- /dev/null
+++ b/layout/reftests/image/blue-50x50.png
Binary files differ
diff --git a/layout/reftests/image/image-exif-0-deg-flip.jpg b/layout/reftests/image/image-exif-0-deg-flip.jpg
new file mode 100644
index 0000000000..727bb34a8c
--- /dev/null
+++ b/layout/reftests/image/image-exif-0-deg-flip.jpg
Binary files differ
diff --git a/layout/reftests/image/image-exif-0-deg.jpg b/layout/reftests/image/image-exif-0-deg.jpg
new file mode 100644
index 0000000000..92eb2605bf
--- /dev/null
+++ b/layout/reftests/image/image-exif-0-deg.jpg
Binary files differ
diff --git a/layout/reftests/image/image-exif-180-deg-flip.jpg b/layout/reftests/image/image-exif-180-deg-flip.jpg
new file mode 100644
index 0000000000..a450d3db4e
--- /dev/null
+++ b/layout/reftests/image/image-exif-180-deg-flip.jpg
Binary files differ
diff --git a/layout/reftests/image/image-exif-180-deg.jpg b/layout/reftests/image/image-exif-180-deg.jpg
new file mode 100644
index 0000000000..cefa5c8b3e
--- /dev/null
+++ b/layout/reftests/image/image-exif-180-deg.jpg
Binary files differ
diff --git a/layout/reftests/image/image-exif-270-deg-flip.jpg b/layout/reftests/image/image-exif-270-deg-flip.jpg
new file mode 100644
index 0000000000..1881be3c3b
--- /dev/null
+++ b/layout/reftests/image/image-exif-270-deg-flip.jpg
Binary files differ
diff --git a/layout/reftests/image/image-exif-270-deg.jpg b/layout/reftests/image/image-exif-270-deg.jpg
new file mode 100644
index 0000000000..eb3f240f4d
--- /dev/null
+++ b/layout/reftests/image/image-exif-270-deg.jpg
Binary files differ
diff --git a/layout/reftests/image/image-exif-90-deg-flip.jpg b/layout/reftests/image/image-exif-90-deg-flip.jpg
new file mode 100644
index 0000000000..60538724fc
--- /dev/null
+++ b/layout/reftests/image/image-exif-90-deg-flip.jpg
Binary files differ
diff --git a/layout/reftests/image/image-exif-90-deg.jpg b/layout/reftests/image/image-exif-90-deg.jpg
new file mode 100644
index 0000000000..249cfeab72
--- /dev/null
+++ b/layout/reftests/image/image-exif-90-deg.jpg
Binary files differ
diff --git a/layout/reftests/image/image-exif-none.jpg b/layout/reftests/image/image-exif-none.jpg
new file mode 100644
index 0000000000..78e3584eef
--- /dev/null
+++ b/layout/reftests/image/image-exif-none.jpg
Binary files differ
diff --git a/layout/reftests/image/image-in-iframe-1-ref.html b/layout/reftests/image/image-in-iframe-1-ref.html
new file mode 100644
index 0000000000..b1e54684cd
--- /dev/null
+++ b/layout/reftests/image/image-in-iframe-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<img src="blue-50x50.png">
diff --git a/layout/reftests/image/image-in-iframe-1.html b/layout/reftests/image/image-in-iframe-1.html
new file mode 100644
index 0000000000..c84789c869
--- /dev/null
+++ b/layout/reftests/image/image-in-iframe-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<style>
+ iframe {
+ border: none;
+ /* This fixed size is just so that we would cause overflow & trigger
+ scrollbars, if we were adding any margin to the internal document.
+ (We're not intending to do so...) */
+ height: 51px;
+ width: 51px;
+ }
+</style>
+<iframe src="blue-50x50.png"></iframe>
diff --git a/layout/reftests/image/image-object-fit-dyn-1-ref.html b/layout/reftests/image/image-object-fit-dyn-1-ref.html
new file mode 100644
index 0000000000..497c70c883
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-dyn-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ embed, img, object, video {
+ object-fit: cover;
+ background: red;
+ width: 50px;
+ height: 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <embed src="500.svg">
+ <img src="500.svg">
+ <object data="500.svg"></object>
+ <video poster="500.svg"></video>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-dyn-1.html b/layout/reftests/image/image-object-fit-dyn-1.html
new file mode 100644
index 0000000000..4d10a285ae
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-dyn-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase ensures that we repaint correctly when "object-fit" is
+ adjusted on a replaced element with SVG content. We start with
+ "object-fit: contain", which lets some of the red background show through
+ as we fit the SVG's square aspect-ratio into the wide rectangular
+ container elements. We then change dynamically to "object-fit: cover",
+ which should scale our SVG content to cover each replaced element's
+ content-box. No red should ultimately be visible in the reftest snapshot.
+-->
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ embed, img, object, video {
+ object-fit: contain;
+ background: red;
+ width: 50px;
+ height: 30px;
+ }
+ </style>
+ <script>
+ function go() {
+ var elemsToTweak = ["embed", "img", "object", "video"];
+ elemsToTweak.forEach(tweakElemObjectFit);
+ document.documentElement.removeAttribute("class");
+ }
+ function tweakElemObjectFit(tagName) {
+ var elem = document.getElementsByTagName(tagName)[0];
+ elem.style.objectFit = "cover";
+ }
+ document.addEventListener("MozReftestInvalidate", go);
+ </script>
+ </head>
+ <body>
+ <embed src="500.svg">
+ <img src="500.svg">
+ <object data="500.svg"></object>
+ <video poster="500.svg"></video>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-with-background-1-ref.html b/layout/reftests/image/image-object-fit-with-background-1-ref.html
new file mode 100644
index 0000000000..dc62869fdf
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-with-background-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ .test {
+ background: salmon;
+ padding: 4px;
+ width: 32px;
+ height: 32px;
+ display: block;
+ margin-bottom: 2px;
+ }
+ </style>
+ </head>
+ <body>
+ <img class="test" src="blue-32x32.png">
+ <embed class="test" src="blue-32x32.png">
+ <object class="test" data="blue-32x32.png"></object>
+ <video class="test" poster="blue-32x32.png"></video>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-with-background-1.html b/layout/reftests/image/image-object-fit-with-background-1.html
new file mode 100644
index 0000000000..e44e22e7bd
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-with-background-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase ensures that we paint the background around an opaque image,
+ when the image is kept from filling the container via 'object-fit'. This
+ is an interesting case because, by default, images fill their container,
+ which means we can often optimize away the background completely. BUT, if
+ "object-fit" prevents the image from filling its container, we can't
+ optimize away the background; it need to be painted in the uncovered area.
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ .test {
+ background: salmon;
+ object-fit: none;
+ width: 40px;
+ height: 40px;
+ display: block;
+ margin-bottom: 2px;
+ }
+ </style>
+ </head>
+ <body>
+ <img class="test" src="blue-32x32.png">
+ <embed class="test" src="blue-32x32.png">
+ <object class="test" data="blue-32x32.png"></object>
+ <video class="test" poster="blue-32x32.png"></video>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-with-background-2-ref.html b/layout/reftests/image/image-object-fit-with-background-2-ref.html
new file mode 100644
index 0000000000..cccdaa3a7b
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-with-background-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ .fakeBackground {
+ background: salmon;
+ height: 3in;
+ width: 32px;
+ }
+
+ img.test {
+ width: 32px;
+ height: 32px;
+ display: block; /* Required for fragmentation */
+ }
+ </style>
+ </head>
+ <body>
+ <div class="fakeBackground"></div>
+ <img class="test" src="blue-32x32.png">
+ <div class="fakeBackground"></div>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-fit-with-background-2.html b/layout/reftests/image/image-object-fit-with-background-2.html
new file mode 100644
index 0000000000..6f0219a289
--- /dev/null
+++ b/layout/reftests/image/image-object-fit-with-background-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase ensures that we paint the background around an opaque image,
+ when the image is kept from filling the container via 'object-fit' (and
+ the img element is fragmented). This is an interesting case because, by
+ default, images fill their container, which means we can often optimize
+ away the background completely. BUT, if "object-fit" prevents the image
+ from filling its container, we can't optimize away the background; it need
+ to be painted in the uncovered area.
+-->
+<html class="reftest-paged">
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ img.test {
+ background: salmon;
+ object-fit: none;
+ width: 32px;
+ /* We make the height 6in larger than the image's intrinsic height,
+ * which gives us the following happy results:
+ * (1) the <img> will split over several 3in tall reftest-paged cards
+ * (so, we get to test fragmentation).
+ * (2) the image pixels end up on the second fragment (not the first),
+ * so we get to test image-data painting on later fragments.
+ * (3) the reference case can easily match us using a simple img
+ * with 3in-tall divs before & after it.
+ */
+ height: calc(32px + 6in);
+ display: block; /* Required for fragmentation */
+ }
+ </style>
+ </head>
+ <body>
+ <img class="test" src="blue-32x32.png">
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-dyn-1-ref.html b/layout/reftests/image/image-object-position-dyn-1-ref.html
new file mode 100644
index 0000000000..81c3fe6376
--- /dev/null
+++ b/layout/reftests/image/image-object-position-dyn-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ embed, img, object, video {
+ object-fit: fill;
+ object-position: 0 0;
+ background: red;
+ width: 50px;
+ height: 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <embed src="500.svg">
+ <img src="500.svg">
+ <object data="500.svg"></object>
+ <video poster="500.svg"></video>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-dyn-1.html b/layout/reftests/image/image-object-position-dyn-1.html
new file mode 100644
index 0000000000..54341e4499
--- /dev/null
+++ b/layout/reftests/image/image-object-position-dyn-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase ensures that we repaint correctly when "object-position" is
+ adjusted on a replaced element with SVG content. We start with
+ "object-position: 10px 15px", which lets a strip of the red background
+ show through on the top and left edges. We then change dynamically to
+ "object-position: 0 0", which (given our "object-fit: fill" value) lets
+ the SVG image fill each replaced element without any uncovered edges.
+-->
+<html class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ embed, img, object, video {
+ object-fit: fill;
+ object-position: 10px 15px;
+ background: red;
+ width: 50px;
+ height: 30px;
+ }
+ </style>
+ <script>
+ function go() {
+ var elemsToTweak = ["embed", "img", "object", "video"];
+ elemsToTweak.forEach(tweakElemObjectFit);
+ document.documentElement.removeAttribute("class");
+ }
+ function tweakElemObjectFit(tagName) {
+ var elem = document.getElementsByTagName(tagName)[0];
+ elem.style.objectPosition = "0 0";
+ }
+ document.addEventListener("MozReftestInvalidate", go);
+ </script>
+ </head>
+ <body>
+ <embed src="500.svg">
+ <img src="500.svg">
+ <object data="500.svg"></object>
+ <video poster="500.svg"></video>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-with-background-1-ref.html b/layout/reftests/image/image-object-position-with-background-1-ref.html
new file mode 100644
index 0000000000..510e494051
--- /dev/null
+++ b/layout/reftests/image/image-object-position-with-background-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ .crop {
+ /* Wrapper-div to simulate the cropping that happens in
+ the testcase. (In the testcase, "object-position" pushes
+ the image's destination rect off towards the bottom-right,
+ and crops it to the content-box.) */
+ height: 32px;
+ width: 32px;
+ overflow: hidden;
+ margin-bottom: 2px;
+ }
+ .test {
+ background: salmon;
+ padding-top: 5px;
+ padding-left: 5px;
+ display: block;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="crop">
+ <img class="test" src="blue-32x32.png">
+ </div>
+ <div class="crop">
+ <embed class="test" src="blue-32x32.png">
+ </div>
+ <div class="crop">
+ <object class="test" data="blue-32x32.png"></object>
+ </div>
+ <div class="crop">
+ <video class="test" poster="blue-32x32.png"></video>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-with-background-1.html b/layout/reftests/image/image-object-position-with-background-1.html
new file mode 100644
index 0000000000..ae7a0a2916
--- /dev/null
+++ b/layout/reftests/image/image-object-position-with-background-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase ensures that we paint the background around an opaque image,
+ when the image is offset from the container via 'object-position'. This is
+ an interesting case because, by default, images fill their container,
+ which means we can often optimize away the background completely. BUT, if
+ "object-position" offsets the image from its container's content-box, we
+ can't optimize away the background; it need to be painted in the uncovered
+ area.
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ .test {
+ background: salmon;
+ object-position: 5px 5px;
+ width: 32px;
+ height: 32px;
+ display: block;
+ margin-bottom: 2px;
+ }
+ </style>
+ </head>
+ <body>
+ <img class="test" src="blue-32x32.png">
+ <embed class="test" src="blue-32x32.png">
+ <object class="test" data="blue-32x32.png"></object>
+ <video class="test" poster="blue-32x32.png"></video>
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-with-background-2-ref.html b/layout/reftests/image/image-object-position-with-background-2-ref.html
new file mode 100644
index 0000000000..5088e21a1b
--- /dev/null
+++ b/layout/reftests/image/image-object-position-with-background-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-paged">
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ img.test {
+ background: salmon;
+ padding-left: 10px;
+ padding-top: 20px;
+ width: 22px;
+ height: calc(5in - 20px);
+ display: block; /* Required for fragmentation */
+ }
+ </style>
+ </head>
+ <body>
+ <img class="test" src="blue-32x32.png">
+ </body>
+</html>
diff --git a/layout/reftests/image/image-object-position-with-background-2.html b/layout/reftests/image/image-object-position-with-background-2.html
new file mode 100644
index 0000000000..72c81076d6
--- /dev/null
+++ b/layout/reftests/image/image-object-position-with-background-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This testcase ensures that we paint the background around an opaque image,
+ when the image is offset from the container via 'object-position' (and
+ the img element is fragmented). This is an interesting case because, by
+ default, images fill their container, which means we can often optimize
+ away the background completely. BUT, if "object-position" offsets the
+ image from its container's content-box, we can't optimize away the
+ background; it need to be painted in the uncovered area.
+-->
+<html class="reftest-paged">
+ <head>
+ <meta charset="utf-8">
+ <style type="text/css">
+ img.test {
+ background: salmon;
+ object-position: 10px 20px;
+ width: 32px;
+ height: 5in;
+ display: block; /* Required for fragmentation */
+ }
+ </style>
+ </head>
+ <body>
+ <img class="test" src="blue-32x32.png">
+ </body>
+</html>
diff --git a/layout/reftests/image/image-orientation-background.html b/layout/reftests/image/image-orientation-background.html
new file mode 100644
index 0000000000..0d1a193358
--- /dev/null
+++ b/layout/reftests/image/image-orientation-background.html
@@ -0,0 +1,43 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ div {
+ width: 100px;
+ height: 200px;
+ border: 50px solid black;
+ margin: 50px;
+ padding: 50px;
+
+ /* This is deliberately an image with a non-neutral inherent orientation to */
+ /* ensure that the inherent orientation is irrelevant. */
+ background-image: url(image-exif-90-deg-flip.jpg);
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+
+ <script>
+ var fromImage = location.search == "from-image";
+
+ // Construct a style.
+ var style;
+ if (fromImage) {
+ style = "div { image-orientation: from-image; }\n";
+ } else {
+ style = "div { image-orientation: none; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
diff --git a/layout/reftests/image/image-orientation-dynamic-ref.html b/layout/reftests/image/image-orientation-dynamic-ref.html
new file mode 100644
index 0000000000..8a2cd4c9bd
--- /dev/null
+++ b/layout/reftests/image/image-orientation-dynamic-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ table {
+ border-spacing: 0px;
+ }
+ div {
+ width: 100px; height: 200px;
+ }
+ td {
+ width: 50px; height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <table>
+ <tr>
+ <td style="background-color: rgb(254, 0, 122);"></td>
+ <td style="background-color: rgb(191, 0, 93);"></td>
+ </tr>
+ <tr>
+ <td style="background-color: rgb(0, 255, 1);"></td>
+ <td style="background-color: rgb(0, 191, 0);"></td>
+ </tr>
+ </table>
+ </div>
+</body>
diff --git a/layout/reftests/image/image-orientation-dynamic.html b/layout/reftests/image/image-orientation-dynamic.html
new file mode 100644
index 0000000000..a636b98f43
--- /dev/null
+++ b/layout/reftests/image/image-orientation-dynamic.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ </style>
+ <img src="image-exif-180-deg.jpg">
+ <script>
+ document.addEventListener("MozReftestInvalidate", function() {
+ document.querySelector("img").style.imageOrientation = "from-image";
+ document.documentElement.className = "";
+ });
+ </script>
+</html>
diff --git a/layout/reftests/image/image-orientation-explicit-none.html b/layout/reftests/image/image-orientation-explicit-none.html
new file mode 100644
index 0000000000..5fad591ca3
--- /dev/null
+++ b/layout/reftests/image/image-orientation-explicit-none.html
@@ -0,0 +1,21 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ img {
+ border: 50px solid black;
+ margin: 50px;
+ padding: 50px;
+ image-orientation: none;
+ }
+ </style>
+</head>
+<body>
+ <!-- This is deliberately an image with a non-neutral inherent orientation to
+ ensure that the inherent orientation is irrelevant. -->
+ <img src="image-exif-90-deg-flip.jpg">
+</body>
diff --git a/layout/reftests/image/image-orientation-from-image.html b/layout/reftests/image/image-orientation-from-image.html
new file mode 100644
index 0000000000..ec46986569
--- /dev/null
+++ b/layout/reftests/image/image-orientation-from-image.html
@@ -0,0 +1,40 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ img {
+ image-orientation: from-image;
+ border: 50px solid black;
+ margin: 50px;
+ padding: 50px;
+ }
+ </style>
+</head>
+<body>
+ <img id="image">
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = orientationInfo[0];
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Determine the final image file. 'none' is special-cased since its
+ // filename doesn't quite follow the same pattern as the others.
+ var imageFile;
+ if (angle == "none") {
+ imageFile = "image-exif-none.jpg";
+ } else {
+ var imageFile = "image-exif-"
+ + angle
+ + "-deg"
+ + (flip ? "-flip" : "")
+ + ".jpg";
+ }
+
+ document.getElementById('image').src = imageFile;
+ </script>
+</body>
diff --git a/layout/reftests/image/image-orientation-generated-content-ref.html b/layout/reftests/image/image-orientation-generated-content-ref.html
new file mode 100644
index 0000000000..4a1969360c
--- /dev/null
+++ b/layout/reftests/image/image-orientation-generated-content-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ table {
+ border-spacing: 0px;
+ }
+ div {
+ width: 200px; height: 100px;
+ }
+ td {
+ width: 100px; height: 50px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <table>
+ <tr>
+ <td style="background-color: rgb(254, 0, 122);"></td>
+ <td style="background-color: rgb(0, 255, 1);"></td>
+ </tr>
+ <tr>
+ <td style="background-color: rgb(191, 0, 93);"></td>
+ <td style="background-color: rgb(0, 191, 0);"></td>
+ </tr>
+ </table>
+ </div>
+</body>
diff --git a/layout/reftests/image/image-orientation-generated-content.html b/layout/reftests/image/image-orientation-generated-content.html
new file mode 100644
index 0000000000..ebf4b09d88
--- /dev/null
+++ b/layout/reftests/image/image-orientation-generated-content.html
@@ -0,0 +1,19 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ p {
+ image-orientation: from-image;
+ }
+ p:before {
+ content: url(image-exif-270-deg-flip.jpg);
+ }
+ </style>
+</head>
+<body>
+ <p></p>
+</body>
diff --git a/layout/reftests/image/image-orientation-ref.html b/layout/reftests/image/image-orientation-ref.html
new file mode 100644
index 0000000000..598f3761b4
--- /dev/null
+++ b/layout/reftests/image/image-orientation-ref.html
@@ -0,0 +1,80 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ div {
+ border: 50px solid black;
+ margin: 50px;
+ padding: 50px;
+ }
+ table {
+ border-spacing: 0px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <table>
+ <tr>
+ <td id="ul"></td>
+ <td id="ur"></td>
+ </tr>
+ <tr>
+ <td id="ll"></td>
+ <td id="lr"></td>
+ </tr>
+ </table>
+ </div>
+
+ <script>
+ var orientationInfo = location.search.substring(1).split("&");
+ var angle = parseInt(orientationInfo[0]);
+ var flip = orientationInfo[1] == "flip" ? true : false;
+
+ // Each id corresponds to a color.
+ var ids = ["ul", "ur", "lr", "ll"];
+ var colors = [
+ "rgb(0, 191, 0)",
+ "rgb(0, 255, 1)",
+ "rgb(254, 0, 122)",
+ "rgb(191, 0, 93)",
+ ];
+
+ // 'Rotate' the colors according to the angle.
+ colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length));
+
+ // 'Flip' the colors if requested.
+ if (flip) {
+ var tmp = colors[0];
+ colors[0] = colors[1];
+ colors[1] = tmp;
+ tmp = colors[2];
+ colors[2] = colors[3];
+ colors[3] = tmp;
+ }
+
+ // Construct a style.
+ var style = "";
+
+ if (angle == 90 || angle == 270) {
+ style += "div { width: 200px; height: 100px; }\n";
+ style += "td { width: 100px; height: 50px; }\n";
+ } else {
+ style += "div { width: 100px; height: 200px; }\n";
+ style += "td { width: 50px; height: 100px; }\n";
+ }
+
+ for (var i = 0 ; i < 4 ; ++i) {
+ style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n";
+ }
+
+ // Apply the style to the document.
+ var sheet = document.createElement('style');
+ sheet.innerHTML = style;
+ document.body.appendChild(sheet);
+ </script>
+</body>
diff --git a/layout/reftests/image/image-resize-percent-height.html b/layout/reftests/image/image-resize-percent-height.html
new file mode 100644
index 0000000000..4365164c52
--- /dev/null
+++ b/layout/reftests/image/image-resize-percent-height.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<script>
+function run() {
+ var img = document.getElementsByTagName("img")[0];
+ img.offsetWidth; // flush layout
+ img.onload = imgload;
+ img.src = "blue-50x50.png";
+}
+function imgload() {
+ document.documentElement.classList.remove("reftest-wait");
+}
+</script>
+<body onload="run()">
+<div><img src="blue-50x100.png" style="width: 50px; height: 100%"></div>
diff --git a/layout/reftests/image/image-resize-percent-width.html b/layout/reftests/image/image-resize-percent-width.html
new file mode 100644
index 0000000000..edbed2623b
--- /dev/null
+++ b/layout/reftests/image/image-resize-percent-width.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<script>
+function run() {
+ var img = document.getElementsByTagName("img")[0];
+ img.offsetWidth; // flush layout
+ img.onload = imgload;
+ img.src = "blue-50x50.png";
+}
+function imgload() {
+ document.documentElement.classList.remove("reftest-wait");
+}
+</script>
+<body onload="run()">
+<div style="width: max-content"><img src="blue-100x50.png" style="width: 100%; height: 50px"></div>
diff --git a/layout/reftests/image/image-resize-ref.html b/layout/reftests/image/image-resize-ref.html
new file mode 100644
index 0000000000..c51f11f91b
--- /dev/null
+++ b/layout/reftests/image/image-resize-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<body>
+<div><img src="blue-50x50.png"></div>
diff --git a/layout/reftests/image/image-seam-1-ref.html b/layout/reftests/image/image-seam-1-ref.html
new file mode 100644
index 0000000000..5253219238
--- /dev/null
+++ b/layout/reftests/image/image-seam-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+ width: 512px;
+ height: 256px;
+ background: white;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/image/image-seam-1a.html b/layout/reftests/image/image-seam-1a.html
new file mode 100644
index 0000000000..511ce5bbdd
--- /dev/null
+++ b/layout/reftests/image/image-seam-1a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of (scaled) single pixel images is snapped -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+P//PwAF/gL+3MxZ5wAAAABJRU5ErkJggg=="
+><img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+P//PwAF/gL+3MxZ5wAAAABJRU5ErkJggg==">
+</div>
diff --git a/layout/reftests/image/image-seam-1b.html b/layout/reftests/image/image-seam-1b.html
new file mode 100644
index 0000000000..8f03ac0e1a
--- /dev/null
+++ b/layout/reftests/image/image-seam-1b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of a 20x20 image with all pixels the same color is snapped -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAG0lEQVQ4jWP4T2XAMGrgqIGjBo4aOGrgSDUQAOdROhuRCSeMAAAAAElFTkSuQmCC"
+><img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAG0lEQVQ4jWP4T2XAMGrgqIGjBo4aOGrgSDUQAOdROhuRCSeMAAAAAElFTkSuQmCC">
+</div>
diff --git a/layout/reftests/image/image-seam-2-ref.html b/layout/reftests/image/image-seam-2-ref.html
new file mode 100644
index 0000000000..d49b9c9cfc
--- /dev/null
+++ b/layout/reftests/image/image-seam-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+}
+</style>
+<div>
+<img style="width:412px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAADklEQVQImWP4jwYY0AEAlpkP8c9bnjkAAAAASUVORK5CYII="
+><img style="width:100px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAADklEQVQImWP4jwYY0AEAlpkP8c9bnjkAAAAASUVORK5CYII="
+>
+</div>
diff --git a/layout/reftests/image/image-seam-2.html b/layout/reftests/image/image-seam-2.html
new file mode 100644
index 0000000000..8a45e0e5d6
--- /dev/null
+++ b/layout/reftests/image/image-seam-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of nonuniform images is snapped -->
+<!-- This is a 2x2 image where the top row is white and the bottom row is transpraent -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="
+><img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+</div>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html
new file mode 100644
index 0000000000..6110dace27
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.1">
+<head>
+
+</head>
+<body>
+ <img src="50.png" width="100">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.1x.html b/layout/reftests/image/image-srcset-basic-selection-0.1x.html
new file mode 100644
index 0000000000..784c142559
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.1" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html
new file mode 100644
index 0000000000..e297d1be21
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.5">
+<head>
+
+</head>
+<body>
+ <img src="50.png" width="100">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.5x.html b/layout/reftests/image/image-srcset-basic-selection-0.5x.html
new file mode 100644
index 0000000000..6268b6783b
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.5x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.5" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html
new file mode 100644
index 0000000000..eaed1e41b9
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.6">
+<head>
+
+</head>
+<body>
+ <img src="100.png" width="100">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.6x.html b/layout/reftests/image/image-srcset-basic-selection-0.6x.html
new file mode 100644
index 0000000000..2bb6105708
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-0.6x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.6" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html
new file mode 100644
index 0000000000..d17550ec3f
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1.5">
+<head>
+
+</head>
+<body>
+ <img src="200.png" width="100">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-1.5x.html b/layout/reftests/image/image-srcset-basic-selection-1.5x.html
new file mode 100644
index 0000000000..8a119d09b8
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-1.5x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1.5" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-1x-ref.html
new file mode 100644
index 0000000000..838c06f743
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+ <img src="100.png" width="100">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-1x.html b/layout/reftests/image/image-srcset-basic-selection-1x.html
new file mode 100644
index 0000000000..7ca617b3af
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-2x-ref.html b/layout/reftests/image/image-srcset-basic-selection-2x-ref.html
new file mode 100644
index 0000000000..aaaac0bde9
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+ <img src="200.png" width="100">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-2x.html b/layout/reftests/image/image-srcset-basic-selection-2x.html
new file mode 100644
index 0000000000..b03ac55969
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+ <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html
new file mode 100644
index 0000000000..05ee254151
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.5">
+<head>
+ <style>img { width: 50px; }</style>
+</head>
+<body>
+ <img src="50.png" width="50">
+ <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html b/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html
new file mode 100644
index 0000000000..fc811c2cfc
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="0.5" class="reftest-wait">
+<head>
+ <style>img { width: 50px; }</style>
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000">
+ <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html
new file mode 100644
index 0000000000..2dcbb8d20f
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="10">
+<head>
+ <style>img { width: 50px; }</style>
+</head>
+<body>
+ <img src="300.png" width="50">
+ <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-10x.html b/layout/reftests/image/image-srcset-basic-selection-width-10x.html
new file mode 100644
index 0000000000..4ec1264a48
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-10x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="10" class="reftest-wait">
+<head>
+ <style>img { width: 50px; }</style>
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000">
+ <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html
new file mode 100644
index 0000000000..b5e1718976
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+ <style>img { width: 50px; }</style>
+</head>
+<body>
+ <img src="100.png" width="50">
+ <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-1x.html b/layout/reftests/image/image-srcset-basic-selection-width-1x.html
new file mode 100644
index 0000000000..e4d45c887b
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+ <style>img { width: 50px; }</style>
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000">
+ <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html
new file mode 100644
index 0000000000..041b493d3e
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+ <style>img { width: 50px; }</style>
+</head>
+<body>
+ <img src="200.png" width="50">
+ <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-basic-selection-width-2x.html b/layout/reftests/image/image-srcset-basic-selection-width-2x.html
new file mode 100644
index 0000000000..c4f86a18a8
--- /dev/null
+++ b/layout/reftests/image/image-srcset-basic-selection-width-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+ <style>img { width: 50px; }</style>
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000">
+ <p>Ensure that width is honored and does not affect selection process</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-1x-ref.html b/layout/reftests/image/image-srcset-default-1x-ref.html
new file mode 100644
index 0000000000..9e077b78af
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+ <img src="100.png" width="100">
+ <p>Test default source in sourceset, src should be ignored</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-1x.html b/layout/reftests/image/image-srcset-default-1x.html
new file mode 100644
index 0000000000..9cb108ccc0
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="200.png 2x, 100.png" src="50.png">
+ <p>Test default source in sourceset, src should be ignored</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-2x-ref.html b/layout/reftests/image/image-srcset-default-2x-ref.html
new file mode 100644
index 0000000000..a6e264563d
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+ <img src="200.png" width="100">
+ <p>Test default source in sourceset, src should be ignored</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-2x.html b/layout/reftests/image/image-srcset-default-2x.html
new file mode 100644
index 0000000000..b53d099cc8
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="200.png 2x, 100.png" src="50.png">
+ <p>Test default source in sourceset, src should be ignored</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-src-1x-ref.html b/layout/reftests/image/image-srcset-default-src-1x-ref.html
new file mode 100644
index 0000000000..e87c72953c
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-src-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+ <img src="50.png" width="50">
+ <p>Test default source provided in src, with no default/1x in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-src-1x.html b/layout/reftests/image/image-srcset-default-src-1x.html
new file mode 100644
index 0000000000..247ce733d0
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-src-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="200.png 2x" src="50.png">
+ <p>Test default source provided in src, with no default/1x in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-src-2x-ref.html b/layout/reftests/image/image-srcset-default-src-2x-ref.html
new file mode 100644
index 0000000000..0128d05dd0
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-src-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+ <img src="200.png" width="100">
+ <p>Test default source provided in src, with no default/1x in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-default-src-2x.html b/layout/reftests/image/image-srcset-default-src-2x.html
new file mode 100644
index 0000000000..ec92de752e
--- /dev/null
+++ b/layout/reftests/image/image-srcset-default-src-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="200.png 2x" src="50.png">
+ <p>Test default source provided in src, with no default/1x in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-isize-ref.html b/layout/reftests/image/image-srcset-isize-ref.html
new file mode 100644
index 0000000000..8dd146f480
--- /dev/null
+++ b/layout/reftests/image/image-srcset-isize-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html reftest-zoom="2">
+<title>CSS Test Reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<style>
+.image-container {
+ display: inline;
+}
+.content-container {
+ display: inline-block;
+}
+.flex-container {
+ align-items: center;
+ display: flex;
+}
+</style>
+<div class="flex-container">
+ <div class="image-container">
+ <img src="200.png" width="100">
+ </div>
+ <div class="content-container">
+ Should see me right by the side of the image.
+ </div>
+</div>
+</html>
diff --git a/layout/reftests/image/image-srcset-isize.html b/layout/reftests/image/image-srcset-isize.html
new file mode 100644
index 0000000000..2189c2bee9
--- /dev/null
+++ b/layout/reftests/image/image-srcset-isize.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html reftest-zoom="2" class="reftest-wait">
+<title>CSS Test: srcset intrinsic size isn't confused</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1149357">
+<style>
+.image-container {
+ display: inline;
+}
+.content-container {
+ display: inline-block;
+}
+.flex-container {
+ align-items: center;
+ display: flex;
+}
+</style>
+<script>
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+</script>
+<div class="flex-container">
+ <div class="image-container">
+ <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png">
+ </div>
+ <div class="content-container">
+ Should see me right by the side of the image.
+ </div>
+</div>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-1x-ref.html b/layout/reftests/image/image-srcset-svg-1x-ref.html
new file mode 100644
index 0000000000..d696bba0a9
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+ <img src="50.png" width="50">
+ <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-1x.html b/layout/reftests/image/image-srcset-svg-1x.html
new file mode 100644
index 0000000000..3e84709267
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png">
+ <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-2x-ref.html b/layout/reftests/image/image-srcset-svg-2x-ref.html
new file mode 100644
index 0000000000..95bd377f5a
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+ <img src="500.svg" width="250">
+ <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-2x.html b/layout/reftests/image/image-srcset-svg-2x.html
new file mode 100644
index 0000000000..1c90fd4a22
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png">
+ <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-3x-ref.html b/layout/reftests/image/image-srcset-svg-3x-ref.html
new file mode 100644
index 0000000000..c0e3487fc6
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-3x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="3">
+<head>
+
+</head>
+<body>
+ <img src="no-intrinsic-size.svg">
+ <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-3x.html b/layout/reftests/image/image-srcset-svg-3x.html
new file mode 100644
index 0000000000..531c17991c
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-3x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="3" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png">
+ <p>Test that svgs work as expected in srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-default-1x-ref.html b/layout/reftests/image/image-srcset-svg-default-1x-ref.html
new file mode 100644
index 0000000000..b4857f6fc1
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-default-1x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1">
+<head>
+
+</head>
+<body>
+ <img src="no-intrinsic-size.svg">
+ <p>Test that svgs work as expected as the fallback from a srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-default-1x.html b/layout/reftests/image/image-srcset-svg-default-1x.html
new file mode 100644
index 0000000000..3b79ce37fa
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-default-1x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="1" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="200.png 2x" src="no-intrinsic-size.svg">
+ <p>Test that svgs work as expected as the fallback from a srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-default-2x-ref.html b/layout/reftests/image/image-srcset-svg-default-2x-ref.html
new file mode 100644
index 0000000000..2ee1007427
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-default-2x-ref.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2">
+<head>
+
+</head>
+<body>
+ <img src="200.png" width="100">
+ <p>Test that svgs work as expected as the fallback from a srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-srcset-svg-default-2x.html b/layout/reftests/image/image-srcset-svg-default-2x.html
new file mode 100644
index 0000000000..ea13f13f8c
--- /dev/null
+++ b/layout/reftests/image/image-srcset-svg-default-2x.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html reftest-zoom="2" class="reftest-wait">
+<head>
+
+ <script type="application/javascript">
+ // reftest-zoom is only applied at onload, so ensure the source-selection
+ // has happened after that
+ function clearWait() {
+ document.documentElement.classList.remove("reftest-wait");
+ }
+ window.addEventListener("load", function() {
+ setTimeout(function() {
+ var img = document.querySelector("img");
+ img.onload = clearWait;
+ img.onerror = clearWait;
+ img.src = img.src;
+ }, 0);
+ });
+ </script>
+</head>
+<body>
+ <img srcset="200.png 2x" src="no-intrinsic-size.svg">
+ <p>Test that svgs work as expected as the fallback from a srcset</p>
+</body>
+</html>
diff --git a/layout/reftests/image/image-zoom-1-ref.html b/layout/reftests/image/image-zoom-1-ref.html
new file mode 100644
index 0000000000..58bd5b8c69
--- /dev/null
+++ b/layout/reftests/image/image-zoom-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ -->
+<html>
+<head>
+<title>reference image-rendering: -moz-crisp-edges</title>
+<style>
+img { position:absolute;left:20px;top:20px; }
+</style>
+</head>
+<body>
+<img width="10" height="10" src="big.png"/>
+</body>
+</html>
diff --git a/layout/reftests/image/image-zoom-1.html b/layout/reftests/image/image-zoom-1.html
new file mode 100644
index 0000000000..fa4a791391
--- /dev/null
+++ b/layout/reftests/image/image-zoom-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ -->
+<html reftest-zoom="5">
+<head>
+<title>test image-rendering: -moz-crisp-edges</title>
+<style>
+img { position:absolute;left:4px;top:4px; }
+</style>
+</head>
+<body>
+<img style="image-rendering: -moz-crisp-edges;" width="10" height="10" src="small.png"/>
+</body>
+</html>
diff --git a/layout/reftests/image/image-zoom-2.html b/layout/reftests/image/image-zoom-2.html
new file mode 100644
index 0000000000..d058dc81f6
--- /dev/null
+++ b/layout/reftests/image/image-zoom-2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ -->
+<html reftest-zoom="5">
+<head>
+<title>test image-rendering: -moz-crisp-edges</title>
+<style>
+img { position:absolute;left:4px;top:4px; opacity:0.9999; }
+</style>
+</head>
+<body>
+<img style="image-rendering: -moz-crisp-edges;" width="10" height="10" src="small.png"/>
+</body>
+</html>
diff --git a/layout/reftests/image/img-invalidation-local-transform-1-ref.html b/layout/reftests/image/img-invalidation-local-transform-1-ref.html
new file mode 100644
index 0000000000..75cb2b6cb8
--- /dev/null
+++ b/layout/reftests/image/img-invalidation-local-transform-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+</style>
+</head>
+<body>
+<div style="width: 450px">
+<img src="img-invalidation-local-transform-1-ref.png">
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/image/img-invalidation-local-transform-1-ref.png b/layout/reftests/image/img-invalidation-local-transform-1-ref.png
new file mode 100644
index 0000000000..1835692bcd
--- /dev/null
+++ b/layout/reftests/image/img-invalidation-local-transform-1-ref.png
Binary files differ
diff --git a/layout/reftests/image/img-invalidation-local-transform-1.html b/layout/reftests/image/img-invalidation-local-transform-1.html
new file mode 100644
index 0000000000..9bc45ad759
--- /dev/null
+++ b/layout/reftests/image/img-invalidation-local-transform-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<!-- test for bug 1469000 https://bugzilla.mozilla.org/show_bug.cgi?id=1469000 -->
+<!-- this based on image/*/delaytest.html tests -->
+<head>
+<style>
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+</style>
+</head>
+<body>
+<div style="width: 450px">
+<img id="image1" src="img-invalidation-local-transform-1.png" srcset="img-invalidation-local-transform-1.png 400w, img-invalidation-local-transform-1.png 217w, img-invalidation-local-transform-1.png 100w">
+</div>
+
+
+<script>
+window.addEventListener("load", forceDecode);
+window.addEventListener("MozReftestInvalidate", reftestInvalidateListener);
+
+let decodeComplete = false;
+let gotReftestInvalidate = false;
+
+function forceDecode() {
+ let img = document.getElementById("image1");
+ img.decode().then(function() {
+ decodeComplete = true;
+ maybeStartTimer();
+ });
+}
+
+function reftestInvalidateListener() {
+ gotReftestInvalidate = true;
+ maybeStartTimer();
+}
+
+function maybeStartTimer() {
+ if (decodeComplete && gotReftestInvalidate) {
+ startTimer();
+ }
+}
+
+function startTimer() {
+ const delay = 2000;
+ setTimeout("document.documentElement.className = '';", delay);
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/image/img-invalidation-local-transform-1.png b/layout/reftests/image/img-invalidation-local-transform-1.png
new file mode 100644
index 0000000000..778613d851
--- /dev/null
+++ b/layout/reftests/image/img-invalidation-local-transform-1.png
Binary files differ
diff --git a/layout/reftests/image/invalid-url-image-1-ref.html b/layout/reftests/image/invalid-url-image-1-ref.html
new file mode 100644
index 0000000000..737210be8e
--- /dev/null
+++ b/layout/reftests/image/invalid-url-image-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <img>
+ <input type="image">
+ </body>
+</html>
diff --git a/layout/reftests/image/invalid-url-image-1.html b/layout/reftests/image/invalid-url-image-1.html
new file mode 100644
index 0000000000..85fad81e4b
--- /dev/null
+++ b/layout/reftests/image/invalid-url-image-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <img src="http://www.foo oo.com" alt="">
+ <input type="image" src="http://www.foo oo.com">
+ </body>
+</html>
diff --git a/layout/reftests/image/moz-broken-matching-1-ref.html b/layout/reftests/image/moz-broken-matching-1-ref.html
new file mode 100644
index 0000000000..94bb5e4962
--- /dev/null
+++ b/layout/reftests/image/moz-broken-matching-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+ img {
+ border: 10px solid green;
+ }
+</style>
+<img src="nosuch:url">
diff --git a/layout/reftests/image/moz-broken-matching-1.html b/layout/reftests/image/moz-broken-matching-1.html
new file mode 100644
index 0000000000..eb63194e14
--- /dev/null
+++ b/layout/reftests/image/moz-broken-matching-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+ :-moz-broken {
+ border: 10px solid green;
+ }
+</style>
+<img src="nosuch:url">
diff --git a/layout/reftests/image/moz-broken-matching-lazy-load.html b/layout/reftests/image/moz-broken-matching-lazy-load.html
new file mode 100644
index 0000000000..696560ac5c
--- /dev/null
+++ b/layout/reftests/image/moz-broken-matching-lazy-load.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+ :-moz-broken {
+ border: 10px solid green;
+ }
+</style>
+<!--
+ We need to wait for an error event since we consider lazy load images are NOT
+ broken initially until loaded.
+-->
+<img loading="lazy" src="nosuch:url" onerror="document.documentElement.className=''">
+</html>
diff --git a/layout/reftests/image/nearly-white.png b/layout/reftests/image/nearly-white.png
new file mode 100644
index 0000000000..128d151100
--- /dev/null
+++ b/layout/reftests/image/nearly-white.png
Binary files differ
diff --git a/layout/reftests/image/no-intrinsic-size.svg b/layout/reftests/image/no-intrinsic-size.svg
new file mode 100644
index 0000000000..7024583524
--- /dev/null
+++ b/layout/reftests/image/no-intrinsic-size.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+<title>Simple SVG with no intrinsic size</title>
+ <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/image/reftest.list b/layout/reftests/image/reftest.list
new file mode 100644
index 0000000000..ad07b512fe
--- /dev/null
+++ b/layout/reftests/image/reftest.list
@@ -0,0 +1,73 @@
+fuzzy-if(Android,0-8,0-30) fails-if(useDrawSnapshot) == background-image-zoom-1.html background-image-zoom-1-ref.html
+fails-if(usesRepeatResampling&&!winWidget) fails-if(useDrawSnapshot) == background-image-zoom-2.html about:blank
+== image-in-iframe-1.html image-in-iframe-1-ref.html
+== image-seam-1a.html image-seam-1-ref.html
+== image-seam-1b.html image-seam-1-ref.html
+fuzzy-if(Android,0-255,0-154) == image-seam-2.html image-seam-2-ref.html # Bug 1128229
+fails-if(useDrawSnapshot) == image-zoom-1.html image-zoom-1-ref.html
+fails-if(useDrawSnapshot) == image-zoom-2.html image-zoom-1-ref.html
+== invalid-url-image-1.html invalid-url-image-1-ref.html
+== sync-image-switch-1a.html sync-image-switch-1-ref.html
+== sync-image-switch-1b.html sync-image-switch-1-ref.html
+== sync-image-switch-1c.html sync-image-switch-1-ref.html
+== sync-image-switch-1d.html sync-image-switch-1-ref.html
+
+# Tests for "object-fit" & "object-position"
+== image-object-fit-dyn-1.html image-object-fit-dyn-1-ref.html
+== image-object-fit-with-background-1.html image-object-fit-with-background-1-ref.html
+fuzzy-if(swgl&&cocoaWidget,0-1,0-2) == image-object-fit-with-background-2.html image-object-fit-with-background-2-ref.html
+== image-object-position-dyn-1.html image-object-position-dyn-1-ref.html
+== image-object-position-with-background-1.html image-object-position-with-background-1-ref.html
+fuzzy-if(winWidget,0-117,0-374) fuzzy-if(cocoaWidget&&swgl,0-1,0-3) == image-object-position-with-background-2.html image-object-position-with-background-2-ref.html # Bug 1128229
+
+# Tests for image-orientation used with 'from-image' (note that all
+# image-orientation tests are fuzzy because the JPEG images do not perfectly
+# reproduce blocks of solid color, even at maximum quality):
+fuzzy(0-2,0-5) == image-orientation-from-image.html?none image-orientation-ref.html?0
+fuzzy(0-1,0-1) == image-orientation-from-image.html?0 image-orientation-ref.html?0
+fuzzy(0-1,0-1) == image-orientation-from-image.html?90 image-orientation-ref.html?90
+fuzzy(0-1,0-1) == image-orientation-from-image.html?180 image-orientation-ref.html?180
+fuzzy(0-1,0-1) == image-orientation-from-image.html?270 image-orientation-ref.html?270
+fuzzy(0-1,0-1) == image-orientation-from-image.html?0&flip image-orientation-ref.html?0&flip
+fuzzy(0-1,0-1) == image-orientation-from-image.html?90&flip image-orientation-ref.html?90&flip
+fuzzy(0-1,0-1) == image-orientation-from-image.html?180&flip image-orientation-ref.html?180&flip
+fuzzy(0-1,0-1) == image-orientation-from-image.html?270&flip image-orientation-ref.html?270&flip
+
+# Tests for image-orientation used with an explicit 'none' orientation:
+fuzzy(0-1,0-1) == image-orientation-explicit-none.html image-orientation-ref.html?0
+
+# Tests for image-orientation:from-image used on generated content:
+fuzzy(0-1,0-1) == image-orientation-generated-content.html image-orientation-generated-content-ref.html
+
+fuzzy(0-1,0-1) == image-orientation-dynamic.html image-orientation-dynamic-ref.html
+
+# <img srcset> tests
+== image-srcset-basic-selection-0.1x.html image-srcset-basic-selection-0.1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-basic-selection-2x.html image-srcset-basic-selection-2x-ref.html
+== image-srcset-basic-selection-0.5x.html image-srcset-basic-selection-0.5x-ref.html
+== image-srcset-basic-selection-0.6x.html image-srcset-basic-selection-0.6x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-basic-selection-1.5x.html image-srcset-basic-selection-1.5x-ref.html
+== image-srcset-basic-selection-1x.html image-srcset-basic-selection-1x-ref.html
+== image-srcset-basic-selection-width-0.5x.html image-srcset-basic-selection-width-0.5x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-basic-selection-width-10x.html image-srcset-basic-selection-width-10x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-basic-selection-width-2x.html image-srcset-basic-selection-width-2x-ref.html
+== image-srcset-basic-selection-width-1x.html image-srcset-basic-selection-width-1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-default-2x.html image-srcset-default-2x-ref.html
+== image-srcset-default-1x.html image-srcset-default-1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-default-src-2x.html image-srcset-default-src-2x-ref.html
+== image-srcset-default-src-1x.html image-srcset-default-src-1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-isize.html image-srcset-isize-ref.html
+fails-if(useDrawSnapshot) == image-srcset-svg-3x.html image-srcset-svg-3x-ref.html
+== image-srcset-svg-2x.html image-srcset-svg-2x-ref.html
+== image-srcset-svg-1x.html image-srcset-svg-1x-ref.html
+fails-if(useDrawSnapshot) == image-srcset-svg-default-2x.html image-srcset-svg-default-2x-ref.html
+== image-srcset-svg-default-1x.html image-srcset-svg-default-1x-ref.html
+
+== image-resize-percent-height.html image-resize-ref.html
+== image-resize-percent-width.html image-resize-ref.html
+
+pref(layout.css.moz-broken.content.enabled,true) == moz-broken-matching-1.html moz-broken-matching-1-ref.html
+pref(layout.css.moz-broken.content.enabled,true) == moz-broken-matching-lazy-load.html moz-broken-matching-1-ref.html
+
+== img-invalidation-local-transform-1.html img-invalidation-local-transform-1-ref.html
+== unknown-protocol.html unknown-protocol-ref.html
diff --git a/layout/reftests/image/small.png b/layout/reftests/image/small.png
new file mode 100644
index 0000000000..9ff11a9932
--- /dev/null
+++ b/layout/reftests/image/small.png
Binary files differ
diff --git a/layout/reftests/image/sync-image-switch-1-ref.html b/layout/reftests/image/sync-image-switch-1-ref.html
new file mode 100644
index 0000000000..654d1a9b70
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+ <img src="blue-32x32.png">
+</html>
diff --git a/layout/reftests/image/sync-image-switch-1a.html b/layout/reftests/image/sync-image-switch-1a.html
new file mode 100644
index 0000000000..f1b7d6316f
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1a.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <img src="blue-16x20.png">
+ <script>
+ var otherImageSrc = "blue-32x32.png"
+ window.onload = function() {
+ var img = document.querySelector("img");
+ img.src = otherImageSrc;
+ img.style.width = img.naturalWidth + "px";
+ img.style.height = img.naturalHeight + "px";
+ document.documentElement.className = "";
+ }
+ var otherImage = new Image;
+ otherImage.src = otherImageSrc;
+ </script>
+</html>
diff --git a/layout/reftests/image/sync-image-switch-1b.html b/layout/reftests/image/sync-image-switch-1b.html
new file mode 100644
index 0000000000..7462ec696d
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1b.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <img src="blue-16x20.png">
+ <script>
+ var otherImageSrc = "blue-32x32.png"
+ window.onload = function() {
+ var img = document.querySelector("img");
+ img.src = otherImageSrc;
+ img.style.width = img.width + "px";
+ img.style.height = img.height + "px";
+ document.documentElement.className = "";
+ }
+ var otherImage = new Image;
+ otherImage.src = otherImageSrc;
+ </script>
+</html>
diff --git a/layout/reftests/image/sync-image-switch-1c.html b/layout/reftests/image/sync-image-switch-1c.html
new file mode 100644
index 0000000000..2182e40db9
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1c.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <input type="image" src="blue-16x20.png">
+ <script>
+ var otherImageSrc = "blue-32x32.png"
+ window.onload = function() {
+ var img = document.querySelector("input");
+ img.src = otherImageSrc;
+ img.style.width = img.naturalWidth + "px";
+ img.style.height = img.naturalHeight + "px";
+ document.documentElement.className = "";
+ }
+ var otherImage = new Image;
+ otherImage.src = otherImageSrc;
+ </script>
+</html>
diff --git a/layout/reftests/image/sync-image-switch-1d.html b/layout/reftests/image/sync-image-switch-1d.html
new file mode 100644
index 0000000000..3001305b0c
--- /dev/null
+++ b/layout/reftests/image/sync-image-switch-1d.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <input type="image" src="blue-16x20.png">
+ <script>
+ var otherImageSrc = "blue-32x32.png"
+ window.onload = function() {
+ var img = document.querySelector("input");
+ img.src = otherImageSrc;
+ img.style.width = img.width + "px";
+ img.style.height = img.height + "px";
+ document.documentElement.className = "";
+ }
+ var otherImage = new Image;
+ otherImage.src = otherImageSrc;
+ </script>
+</html>
diff --git a/layout/reftests/image/unknown-protocol-ref.html b/layout/reftests/image/unknown-protocol-ref.html
new file mode 100644
index 0000000000..b5bb326eef
--- /dev/null
+++ b/layout/reftests/image/unknown-protocol-ref.html
@@ -0,0 +1 @@
+<img src="mailto://foo">
diff --git a/layout/reftests/image/unknown-protocol.html b/layout/reftests/image/unknown-protocol.html
new file mode 100644
index 0000000000..ef06881b7b
--- /dev/null
+++ b/layout/reftests/image/unknown-protocol.html
@@ -0,0 +1 @@
+<img src="foobar://baz">