Bug 506826 - Tests.
authorMarkus Stange <mstange@themasta.com>
Fri, 13 Aug 2010 15:36:19 +0200
changeset 50431 9fd11a17eb1a4edd4e783595e62bc676e541e2d0
parent 50430 4a50f3c34d5ae09c27bdad9aeeebe29e4d61c043
child 50434 f6d6ec43490fd22e1f531b694d93704a07dc484c
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs506826
milestone2.0b4pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 506826 - Tests.
layout/reftests/image-element/bug-364968-ref.html
layout/reftests/image-element/bug-364968.html
layout/reftests/image-element/bug-463204-ref.html
layout/reftests/image-element/bug-463204.html
layout/reftests/image-element/canvas-drawing.js
layout/reftests/image-element/canvas-inside-document.html
layout/reftests/image-element/canvas-outside-document-invalidate-01.html
layout/reftests/image-element/canvas-outside-document-invalidate-02.html
layout/reftests/image-element/canvas-outside-document.html
layout/reftests/image-element/element-paint-background-size-01-ref.html
layout/reftests/image-element/element-paint-background-size-01.html
layout/reftests/image-element/element-paint-background-size-02-ref.html
layout/reftests/image-element/element-paint-background-size-02.html
layout/reftests/image-element/element-paint-clippath-ref.html
layout/reftests/image-element/element-paint-clippath.html
layout/reftests/image-element/element-paint-continuation-ref.html
layout/reftests/image-element/element-paint-continuation.html
layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html
layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html
layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html
layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html
layout/reftests/image-element/element-paint-native-widget-ref.html
layout/reftests/image-element/element-paint-native-widget.html
layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html
layout/reftests/image-element/element-paint-paintserversize-rounding-01.html
layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html
layout/reftests/image-element/element-paint-paintserversize-rounding-02.html
layout/reftests/image-element/element-paint-recursion-ref.html
layout/reftests/image-element/element-paint-recursion.html
layout/reftests/image-element/element-paint-repeated-ref.html
layout/reftests/image-element/element-paint-repeated.html
layout/reftests/image-element/element-paint-sharpness-01a.html
layout/reftests/image-element/element-paint-sharpness-01b.html
layout/reftests/image-element/element-paint-sharpness-01c.html
layout/reftests/image-element/element-paint-sharpness-01d.html
layout/reftests/image-element/element-paint-sharpness-02a.html
layout/reftests/image-element/element-paint-sharpness-02b.html
layout/reftests/image-element/element-paint-sharpness-02c.html
layout/reftests/image-element/element-paint-simple-ref.html
layout/reftests/image-element/element-paint-simple.html
layout/reftests/image-element/element-paint-subimage-sampling-restriction.html
layout/reftests/image-element/element-paint-transform-01-ref.html
layout/reftests/image-element/element-paint-transform-01.html
layout/reftests/image-element/element-paint-transform-02-ref.html
layout/reftests/image-element/element-paint-transform-02.html
layout/reftests/image-element/element-paint-transform-03-ref.html
layout/reftests/image-element/element-paint-transform-03.html
layout/reftests/image-element/element-paint-transform-repeated-ref.html
layout/reftests/image-element/element-paint-transform-repeated.html
layout/reftests/image-element/gradient-html-01-ref.svg
layout/reftests/image-element/gradient-html-01.html
layout/reftests/image-element/gradient-html-02-ref.svg
layout/reftests/image-element/gradient-html-02.html
layout/reftests/image-element/gradient-html-03-ref.svg
layout/reftests/image-element/gradient-html-03.html
layout/reftests/image-element/gradient-html-04-ref.html
layout/reftests/image-element/gradient-html-04.html
layout/reftests/image-element/gradient-html-05-ref.html
layout/reftests/image-element/gradient-html-05.html
layout/reftests/image-element/gradient-html-06a.html
layout/reftests/image-element/gradient-html-06b.html
layout/reftests/image-element/gradient-html-06c.html
layout/reftests/image-element/gradient-html-06d.html
layout/reftests/image-element/gradient-html-06e.html
layout/reftests/image-element/gradient-html-07a.html
layout/reftests/image-element/gradient-html-07b.html
layout/reftests/image-element/gradient-html-07c.html
layout/reftests/image-element/image-outside-document-invalidate.html
layout/reftests/image-element/mozsetimageelement-01-ref.html
layout/reftests/image-element/mozsetimageelement-01.html
layout/reftests/image-element/mozsetimageelement-02.html
layout/reftests/image-element/pattern-html-01-ref.svg
layout/reftests/image-element/pattern-html-01.html
layout/reftests/image-element/pattern-html-02-ref.svg
layout/reftests/image-element/pattern-html-02.html
layout/reftests/image-element/reftest.list
layout/reftests/reftest.list
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
+
new file mode 100644
--- /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>
new file mode 100644
--- /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;
+}
new file mode 100644
--- /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>
new file mode 100644
--- /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);
+}, false);
+
+document.mozSetImageElement("e", canvas);
+
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/image-element/canvas-outside-document-invalidate-02.html
@@ -0,0 +1,32 @@
+<!--
+     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.fillStyle = "white";
+  ctx.mozTextStyle = "50px bold Arial";
+  ctx.translate(-8, 18);
+  ctx.mozDrawText("•");
+  document.documentElement.className = "";
+}, false);
+
+document.mozSetImageElement("e", canvas);
+
+</script>
+</body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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:-moz-linear-gradient(right, yellow, yellow);"
+        ><span style="display:inline-block; width:25px; height:1px;"></span>
+      AA</span>
+    </div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /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: -moz-linear-gradient(lime,lime) top left no-repeat,
+              -moz-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>
new file mode 100644
--- /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>
new file mode 100644
--- /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 = "";
+}, false);
+
+</script>
+
+</body>
+</html>
new file mode 100644
--- /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 = "";
+}, false);
+
+</script>
+
+</body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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:90px; height:90px; border:10px solid black; border-top:20px solid black; border-left:20px solid black;"></p>
+  <div style="width:90px; height:90px; border:10px solid blue; border-top:20px solid blue; border-left:20px 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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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; -moz-border-radius:100%; background-color:lime;"></div>
+  </div>
+</div>
+</body>
+</html>
new file mode 100644
--- /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; -moz-border-radius:100%; background-color:lime;"></div>
+</body>
+</html>
new file mode 100644
--- /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; -moz-border-radius:100%; background-color:lime;"></div>
+</body>
+</html>
new file mode 100644
--- /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; -moz-border-radius:100%; background-color:lime;"></div>
+  </div>
+</div>
+</body>
+</html>
new file mode 100644
--- /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; -moz-border-radius:100%; background-color:lime;"></div>
+  </div>
+</div>
+</body>
+</html>
new file mode 100644
--- /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; -moz-border-radius:100%; background-color:lime;"></div>
+  </div>
+</div>
+</body>
+</html>
new file mode 100644
--- /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; -moz-border-radius:100%; background-color:lime;"></div>
+  </div>
+</div>
+</body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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:-moz-linear-gradient(lime, black)"></div>
+</body>
+</html>
+
new file mode 100644
--- /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>
+
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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;"></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>
new file mode 100644
--- /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:-moz-linear-gradient(-45deg, lime, black); background-size: 100px;"></div>
+</body>
+</html>
new file mode 100644
--- /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:300px; height:300px; background-image:-moz-element(#g); background-size: 100px;"></div>
+  <svg>
+    <linearGradient id="g" gradientUnits="userSpaceOnUse" x2="300" y2="300">
+      <stop stop-color="lime" offset="0"></stop>
+      <stop stop-color="black" offset="1"></stop>
+    </linearGradient>
+  </svg>
+</body>
+</html>
new file mode 100644
--- /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 = "";
+  };
+}, false);
+
+</script>
+</body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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 = "";
+}, false);
+
+</script>
+</body>
+</html>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/image-element/pattern-html-02-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 x="15" y="15" width="30" height="30" fill="black"/>
+  <rect x="75" y="15" width="30" height="30" fill="black"/>
+  <rect x="15" y="75" width="30" height="30" fill="black"/>
+  <rect x="75" y="75" width="30" height="30" fill="black"/>
+
+</svg>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/image-element/pattern-html-02.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+
+     Test painting patterns with scaling by background-size and
+     -moz-transform. background-repeat requires the construction
+     of a surface with the pattern contents, which will then be
+     scaled up by the transform / background-size. That's why we
+     need a threshold filter again.
+-->
+<!DOCTYPE html>
+<html>
+<body style="margin:0; filter:url(#thresholdAt150);">
+  <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%;"></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>
+  
+    <svg>
+      <filter id="thresholdAt150" color-interpolation-filters="sRGB">
+        <feComponentTransfer>
+          <feFuncR type="linear" slope="255" intercept="-150"/>
+          <feFuncG type="linear" slope="255" intercept="-150"/>
+          <feFuncB type="linear" slope="255" intercept="-150"/>
+        </feComponentTransfer>
+      </filter>
+    </svg>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/image-element/reftest.list
@@ -0,0 +1,44 @@
+== 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
+== canvas-outside-document-invalidate-02.html about:blank
+== 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
+HTTP(..) == element-paint-continuation.html element-paint-continuation-ref.html
+== element-paint-transform-01.html element-paint-transform-01-ref.html
+== element-paint-transform-02.html element-paint-transform-02-ref.html
+== 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
+== element-paint-transform-repeated.html element-paint-transform-repeated-ref.html
+== element-paint-transform-03.html element-paint-transform-03-ref.html
+== element-paint-native-widget.html element-paint-native-widget-ref.html
+== element-paint-subimage-sampling-restriction.html about:blank
+== element-paint-clippath.html element-paint-clippath-ref.html
+== element-paint-sharpness-01a.html element-paint-sharpness-01b.html
+== element-paint-sharpness-01b.html element-paint-sharpness-01c.html
+== 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
+== element-paint-paintserversize-rounding-02.html element-paint-paintserversize-rounding-02-ref.html
+== element-paint-multiple-backgrounds-01a.html element-paint-multiple-backgrounds-01-ref.html
+== element-paint-multiple-backgrounds-01b.html element-paint-multiple-backgrounds-01-ref.html
+== 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
+random-if(!cocoaWidget) == gradient-html-06a.html gradient-html-06b.html
+random-if(!cocoaWidget) == 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) == gradient-html-07a.html gradient-html-07b.html
+== gradient-html-07b.html gradient-html-07c.html
+== pattern-html-01.html pattern-html-01-ref.svg
+== pattern-html-02.html pattern-html-02-ref.svg
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -115,16 +115,19 @@ include font-matching/reftest.list
 include forms/reftest.list
 
 # block-inside-inline splits
 include ib-split/reftest.list
 
 # image/
 include image/reftest.list
 
+# image-element/
+include image-element/reftest.list
+
 # image-rect/
 include image-rect/reftest.list
 
 # image-region/
 include image-region/reftest.list
 
 # inline borders and padding
 include inline-borderpadding/reftest.list