From 2aa4a82499d4becd2284cdb482213d541b8804dd Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 28 Apr 2024 16:29:10 +0200
Subject: Adding upstream version 86.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/image-element/broken-icon.html     |   9 +++
 layout/reftests/image-element/bug-364968-ref.html  |  24 ++++++++
 layout/reftests/image-element/bug-364968.html      |  19 +++++++
 layout/reftests/image-element/bug-463204-ref.html  |  35 ++++++++++++
 layout/reftests/image-element/bug-463204.html      |  36 ++++++++++++
 layout/reftests/image-element/canvas-drawing.js    |  11 ++++
 .../image-element/canvas-inside-document.html      |  12 ++++
 .../canvas-outside-document-invalidate-01.html     |  30 ++++++++++
 .../canvas-outside-document-invalidate-02.html     |  33 +++++++++++
 .../image-element/canvas-outside-document.html     |  18 ++++++
 .../element-paint-background-size-01-ref.html      |  12 ++++
 .../element-paint-background-size-01.html          |  17 ++++++
 .../element-paint-background-size-02-ref.html      |  22 +++++++
 .../element-paint-background-size-02.html          |  27 +++++++++
 .../image-element/element-paint-clippath-ref.html  |   9 +++
 .../image-element/element-paint-clippath.html      |  23 ++++++++
 .../element-paint-continuation-ref.html            |  25 ++++++++
 .../image-element/element-paint-continuation.html  |  26 +++++++++
 .../element-paint-multiple-backgrounds-01-ref.html |  30 ++++++++++
 .../element-paint-multiple-backgrounds-01a.html    |  33 +++++++++++
 .../element-paint-multiple-backgrounds-01b.html    |  44 ++++++++++++++
 .../element-paint-multiple-backgrounds-01c.html    |  45 +++++++++++++++
 .../element-paint-native-widget-ref.html           |  14 +++++
 .../image-element/element-paint-native-widget.html |  21 +++++++
 ...ment-paint-paintserversize-rounding-01-ref.html |  31 ++++++++++
 .../element-paint-paintserversize-rounding-01.html |  39 +++++++++++++
 ...ment-paint-paintserversize-rounding-02-ref.html |  24 ++++++++
 .../element-paint-paintserversize-rounding-02.html |  37 ++++++++++++
 .../image-element/element-paint-recursion-ref.html |  21 +++++++
 .../image-element/element-paint-recursion.html     |  28 +++++++++
 .../image-element/element-paint-repeated-ref.html  |  16 ++++++
 .../image-element/element-paint-repeated.html      |  17 ++++++
 .../image-element/element-paint-sharpness-01a.html |  17 ++++++
 .../image-element/element-paint-sharpness-01b.html |  12 ++++
 .../image-element/element-paint-sharpness-01c.html |  12 ++++
 .../image-element/element-paint-sharpness-01d.html |  17 ++++++
 .../image-element/element-paint-sharpness-02a.html |  17 ++++++
 .../image-element/element-paint-sharpness-02b.html |  17 ++++++
 .../image-element/element-paint-sharpness-02c.html |  17 ++++++
 .../image-element/element-paint-simple-ref.html    |  20 +++++++
 .../image-element/element-paint-simple.html        |  28 +++++++++
 ...lement-paint-subimage-sampling-restriction.html |  39 +++++++++++++
 .../element-paint-transform-01-ref.html            |  13 +++++
 .../image-element/element-paint-transform-01.html  |  18 ++++++
 .../element-paint-transform-02-ref.html            |  23 ++++++++
 .../image-element/element-paint-transform-02.html  |  28 +++++++++
 .../element-paint-transform-03-ref.html            |  49 ++++++++++++++++
 .../image-element/element-paint-transform-03.html  |  37 ++++++++++++
 .../element-paint-transform-repeated-ref.html      |  19 +++++++
 .../element-paint-transform-repeated.html          |  30 ++++++++++
 layout/reftests/image-element/empty-src.html       |   9 +++
 .../image-element/gradient-html-01-ref.svg         |  11 ++++
 .../reftests/image-element/gradient-html-01.html   |  16 ++++++
 .../image-element/gradient-html-02-ref.svg         |  12 ++++
 .../reftests/image-element/gradient-html-02.html   |  21 +++++++
 .../image-element/gradient-html-03-ref.svg         |  12 ++++
 .../reftests/image-element/gradient-html-03.html   |  19 +++++++
 .../image-element/gradient-html-04-ref.html        |  17 ++++++
 .../reftests/image-element/gradient-html-04.html   |  24 ++++++++
 .../image-element/gradient-html-05-ref.html        |  17 ++++++
 .../reftests/image-element/gradient-html-05.html   |  26 +++++++++
 .../reftests/image-element/gradient-html-06a.html  |  18 ++++++
 .../reftests/image-element/gradient-html-06b.html  |  13 +++++
 .../reftests/image-element/gradient-html-06c.html  |  19 +++++++
 .../reftests/image-element/gradient-html-06d.html  |  23 ++++++++
 .../reftests/image-element/gradient-html-06e.html  |  23 ++++++++
 .../reftests/image-element/gradient-html-07a.html  |  18 ++++++
 .../reftests/image-element/gradient-html-07b.html  |  12 ++++
 .../reftests/image-element/gradient-html-07c.html  |  19 +++++++
 .../reftests/image-element/gradient-html-07d.html  |  12 ++++
 .../image-outside-document-invalidate.html         |  24 ++++++++
 layout/reftests/image-element/invalid-src-2.html   |   9 +++
 layout/reftests/image-element/invalid-src.html     |   9 +++
 .../reftests/image-element/invalidate-1-ref.html   |   7 +++
 layout/reftests/image-element/invalidate-1.html    |  18 ++++++
 .../image-element/mask-image-element-ref.html      |  48 ++++++++++++++++
 .../reftests/image-element/mask-image-element.html |  63 +++++++++++++++++++++
 .../image-element/mozsetimageelement-01-ref.html   |  19 +++++++
 .../image-element/mozsetimageelement-01.html       |  44 ++++++++++++++
 .../image-element/mozsetimageelement-02.html       |  25 ++++++++
 layout/reftests/image-element/no-src.html          |   9 +++
 .../reftests/image-element/orientation-1-ref.html  |   3 +
 layout/reftests/image-element/orientation-1.html   |   4 ++
 .../reftests/image-element/pattern-html-01-ref.svg |  14 +++++
 layout/reftests/image-element/pattern-html-01.html |  21 +++++++
 .../reftests/image-element/pattern-html-02-ref.svg |  27 +++++++++
 layout/reftests/image-element/pattern-html-02.html |  27 +++++++++
 layout/reftests/image-element/reftest.list         |  53 +++++++++++++++++
 .../image-element/repeatable-diagonal-gradient.png | Bin 0 -> 14520 bytes
 89 files changed, 1966 insertions(+)
 create mode 100644 layout/reftests/image-element/broken-icon.html
 create mode 100644 layout/reftests/image-element/bug-364968-ref.html
 create mode 100644 layout/reftests/image-element/bug-364968.html
 create mode 100644 layout/reftests/image-element/bug-463204-ref.html
 create mode 100644 layout/reftests/image-element/bug-463204.html
 create mode 100644 layout/reftests/image-element/canvas-drawing.js
 create mode 100644 layout/reftests/image-element/canvas-inside-document.html
 create mode 100644 layout/reftests/image-element/canvas-outside-document-invalidate-01.html
 create mode 100644 layout/reftests/image-element/canvas-outside-document-invalidate-02.html
 create mode 100644 layout/reftests/image-element/canvas-outside-document.html
 create mode 100644 layout/reftests/image-element/element-paint-background-size-01-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-background-size-01.html
 create mode 100644 layout/reftests/image-element/element-paint-background-size-02-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-background-size-02.html
 create mode 100644 layout/reftests/image-element/element-paint-clippath-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-clippath.html
 create mode 100644 layout/reftests/image-element/element-paint-continuation-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-continuation.html
 create mode 100644 layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html
 create mode 100644 layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html
 create mode 100644 layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html
 create mode 100644 layout/reftests/image-element/element-paint-native-widget-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-native-widget.html
 create mode 100644 layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-paintserversize-rounding-01.html
 create mode 100644 layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-paintserversize-rounding-02.html
 create mode 100644 layout/reftests/image-element/element-paint-recursion-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-recursion.html
 create mode 100644 layout/reftests/image-element/element-paint-repeated-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-repeated.html
 create mode 100644 layout/reftests/image-element/element-paint-sharpness-01a.html
 create mode 100644 layout/reftests/image-element/element-paint-sharpness-01b.html
 create mode 100644 layout/reftests/image-element/element-paint-sharpness-01c.html
 create mode 100644 layout/reftests/image-element/element-paint-sharpness-01d.html
 create mode 100644 layout/reftests/image-element/element-paint-sharpness-02a.html
 create mode 100644 layout/reftests/image-element/element-paint-sharpness-02b.html
 create mode 100644 layout/reftests/image-element/element-paint-sharpness-02c.html
 create mode 100644 layout/reftests/image-element/element-paint-simple-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-simple.html
 create mode 100644 layout/reftests/image-element/element-paint-subimage-sampling-restriction.html
 create mode 100644 layout/reftests/image-element/element-paint-transform-01-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-transform-01.html
 create mode 100644 layout/reftests/image-element/element-paint-transform-02-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-transform-02.html
 create mode 100644 layout/reftests/image-element/element-paint-transform-03-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-transform-03.html
 create mode 100644 layout/reftests/image-element/element-paint-transform-repeated-ref.html
 create mode 100644 layout/reftests/image-element/element-paint-transform-repeated.html
 create mode 100644 layout/reftests/image-element/empty-src.html
 create mode 100644 layout/reftests/image-element/gradient-html-01-ref.svg
 create mode 100644 layout/reftests/image-element/gradient-html-01.html
 create mode 100644 layout/reftests/image-element/gradient-html-02-ref.svg
 create mode 100644 layout/reftests/image-element/gradient-html-02.html
 create mode 100644 layout/reftests/image-element/gradient-html-03-ref.svg
 create mode 100644 layout/reftests/image-element/gradient-html-03.html
 create mode 100644 layout/reftests/image-element/gradient-html-04-ref.html
 create mode 100644 layout/reftests/image-element/gradient-html-04.html
 create mode 100644 layout/reftests/image-element/gradient-html-05-ref.html
 create mode 100644 layout/reftests/image-element/gradient-html-05.html
 create mode 100644 layout/reftests/image-element/gradient-html-06a.html
 create mode 100644 layout/reftests/image-element/gradient-html-06b.html
 create mode 100644 layout/reftests/image-element/gradient-html-06c.html
 create mode 100644 layout/reftests/image-element/gradient-html-06d.html
 create mode 100644 layout/reftests/image-element/gradient-html-06e.html
 create mode 100644 layout/reftests/image-element/gradient-html-07a.html
 create mode 100644 layout/reftests/image-element/gradient-html-07b.html
 create mode 100644 layout/reftests/image-element/gradient-html-07c.html
 create mode 100644 layout/reftests/image-element/gradient-html-07d.html
 create mode 100644 layout/reftests/image-element/image-outside-document-invalidate.html
 create mode 100644 layout/reftests/image-element/invalid-src-2.html
 create mode 100644 layout/reftests/image-element/invalid-src.html
 create mode 100644 layout/reftests/image-element/invalidate-1-ref.html
 create mode 100644 layout/reftests/image-element/invalidate-1.html
 create mode 100644 layout/reftests/image-element/mask-image-element-ref.html
 create mode 100644 layout/reftests/image-element/mask-image-element.html
 create mode 100644 layout/reftests/image-element/mozsetimageelement-01-ref.html
 create mode 100644 layout/reftests/image-element/mozsetimageelement-01.html
 create mode 100644 layout/reftests/image-element/mozsetimageelement-02.html
 create mode 100644 layout/reftests/image-element/no-src.html
 create mode 100644 layout/reftests/image-element/orientation-1-ref.html
 create mode 100644 layout/reftests/image-element/orientation-1.html
 create mode 100644 layout/reftests/image-element/pattern-html-01-ref.svg
 create mode 100644 layout/reftests/image-element/pattern-html-01.html
 create mode 100644 layout/reftests/image-element/pattern-html-02-ref.svg
 create mode 100644 layout/reftests/image-element/pattern-html-02.html
 create mode 100644 layout/reftests/image-element/reftest.list
 create mode 100644 layout/reftests/image-element/repeatable-diagonal-gradient.png

(limited to 'layout/reftests/image-element')

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..8084aabc55
--- /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;
+              -moz-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..1ea1932599
--- /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;
+              -moz-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..232bea4241
--- /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;
+              -moz-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..93d94e15eb
--- /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;
+              -moz-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..be8ce326d2
--- /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; -moz-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; -moz-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; -moz-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; -moz-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..13824b181b
--- /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; -moz-transform:rotate(-30deg);">
+      <div id="d2" style="width:40px; height:40px">
+        <div id="d3" style="border:10px solid blue; width:20px; height:20px;
+                            -moz-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..341b0ecf29
--- /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;
+              -moz-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..b2d00c9c42
--- /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);
+              -moz-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..043b32ec5e
--- /dev/null
+++ b/layout/reftests/image-element/pattern-html-02.html
@@ -0,0 +1,27 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+
+     Test painting patterns with scaling by background-size and
+     -moz-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);
+                -moz-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..a9c006b1d1
--- /dev/null
+++ b/layout/reftests/image-element/reftest.list
@@ -0,0 +1,53 @@
+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&&!(webrender&&winWidget)) fails-if(cocoaWidget) == 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(webrender&&winWidget,117-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(webrender,255-255,39-42) == element-paint-transform-02.html element-paint-transform-02-ref.html # bug 587133
+fuzzy-if(d2d&&/^Windows\x20NT\x206\.1/.test(http.oscpu),0-16,0-90) == 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-if(skiaContent,0-255,0-4) random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == element-paint-transform-repeated.html element-paint-transform-repeated-ref.html # Bug 1475907
+fuzzy-if(d2d,0-255,0-24) fuzzy-if(webrender,255-255,56-56) == element-paint-transform-03.html element-paint-transform-03-ref.html
+fuzzy-if(asyncPan,0-2,0-140) fuzzy-if(skiaContent,0-3,0-106) fuzzy-if(webrender&&winWidget,134-222,1197-1588) fuzzy-if(geckoview&&webrender,0-7,0-1321) == element-paint-native-widget.html element-paint-native-widget-ref.html   # in -ref the scrollframe is active and layerized differently with APZ
+fails-if(usesRepeatResampling&&!(webrender&&winWidget)) == element-paint-subimage-sampling-restriction.html about:blank
+== element-paint-clippath.html element-paint-clippath-ref.html
+fuzzy-if(webrender,36-36,712-738) == element-paint-sharpness-01a.html element-paint-sharpness-01b.html
+fuzzy-if(skiaContent,0-1,0-326) == element-paint-sharpness-01b.html element-paint-sharpness-01c.html
+fuzzy-if(webrender,36-36,712-738) == element-paint-sharpness-01c.html element-paint-sharpness-01d.html
+== element-paint-sharpness-02a.html element-paint-sharpness-02b.html
+== element-paint-sharpness-02b.html element-paint-sharpness-02c.html
+== element-paint-paintserversize-rounding-01.html element-paint-paintserversize-rounding-01-ref.html
+fuzzy-if(skiaContent,0-187,0-1191) == element-paint-paintserversize-rounding-02.html element-paint-paintserversize-rounding-02-ref.html # Linux32 from GCC update
+fuzzy-if(webrender,0-1,0-625) == element-paint-multiple-backgrounds-01a.html element-paint-multiple-backgrounds-01-ref.html
+fuzzy-if(webrender,0-1,0-625) == element-paint-multiple-backgrounds-01b.html element-paint-multiple-backgrounds-01-ref.html
+fuzzy-if(webrender,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(webrender&&cocoaWidget,1-1,44200-444200) == gradient-html-06a.html gradient-html-06b.html
+fuzzy(0-1,0-9674) random-if(!cocoaWidget) fuzzy-if(webrender&&cocoaWidget,1-1,44200-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-if(skiaContent,0-1,0-30000) == mask-image-element.html mask-image-element-ref.html
+pref(image.honor-orientation-metadata,true) pref(layout.css.image-orientation.initial-from-image,true) == 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
Binary files /dev/null and b/layout/reftests/image-element/repeatable-diagonal-gradient.png differ
-- 
cgit v1.2.3