Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/css-gradients
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
206 files changed, 2129 insertions, 0 deletions
diff --git a/layout/reftests/css-gradients/1224761-1-ref.html b/layout/reftests/css-gradients/1224761-1-ref.html
new file mode 100644
index 000000000..7b243c9a4
--- /dev/null
+++ b/layout/reftests/css-gradients/1224761-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    border: 1px solid black;
+    width: 30px;
+    height: 30px;
+    margin: 1px;
+}
+.grad-5 {
+    background: yellow;
+}
+.grad0 {
+    background: yellow;
+}
+.grad30 {
+    /* not much of a test, but this isn't where the bug was anyway! */
+    background: linear-gradient(to right, blue 30%, yellow 30%);
+}
+.grad100 {
+    background: blue;
+}
+.grad150 {
+    background: blue;
+}
+</style>
+</head>
+<body>
+  You shouldn't see a gradual gradient in any of the divs below.
+  <div class="grad-5"></div>
+  <div class="grad0"></div>
+  <div class="grad30"></div>
+  <div class="grad100"></div>
+  <div class="grad150"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/1224761-1.html b/layout/reftests/css-gradients/1224761-1.html
new file mode 100644
index 000000000..97e00f7dd
--- /dev/null
+++ b/layout/reftests/css-gradients/1224761-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    border: 1px solid black;
+    width: 30px;
+    height: 30px;
+    margin: 1px;
+}
+.grad-5 {
+    background: linear-gradient(to right, blue -5%, yellow -5%);
+}
+.grad0 {
+    background: linear-gradient(to right, blue 0%, yellow 0%);
+}
+.grad30 {
+    background: linear-gradient(to right, blue 30%, yellow 30%);
+}
+.grad100 {
+    background: linear-gradient(to right, blue 100%, yellow 100%);
+}
+.grad150 {
+    background: linear-gradient(to right, blue 150%, yellow 150%);
+}
+</style>
+</head>
+<body>
+  You shouldn't see a gradual gradient in any of the divs below.
+  <div class="grad-5"></div>
+  <div class="grad0"></div>
+  <div class="grad30"></div>
+  <div class="grad100"></div>
+  <div class="grad150"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-1-ref.html b/layout/reftests/css-gradients/aja-linear-1-ref.html
new file mode 100644
index 000000000..c96ed5e38
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(0,0,0,200);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(1, 'blue');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-1a.html b/layout/reftests/css-gradients/aja-linear-1a.html
new file mode 100644
index 000000000..e9d639699
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(top, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1b.html b/layout/reftests/css-gradients/aja-linear-1b.html
new file mode 100644
index 000000000..44f469050
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1b.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(bottom, blue, yellow);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1c.html b/layout/reftests/css-gradients/aja-linear-1c.html
new file mode 100644
index 000000000..cb5977f8f
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1c.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(180deg, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1d.html b/layout/reftests/css-gradients/aja-linear-1d.html
new file mode 100644
index 000000000..bfc70bce9
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1d.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(-180deg, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1e.html b/layout/reftests/css-gradients/aja-linear-1e.html
new file mode 100644
index 000000000..0fa177f8e
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1e.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(top, yellow 0%, blue 100%);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1f.html b/layout/reftests/css-gradients/aja-linear-1f.html
new file mode 100644
index 000000000..dd8b4f55e
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1f.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(center top, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1g.html b/layout/reftests/css-gradients/aja-linear-1g.html
new file mode 100644
index 000000000..3de0665cb
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1g.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-2-ref.html b/layout/reftests/css-gradients/aja-linear-2-ref.html
new file mode 100644
index 000000000..5ca117466
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-2-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(0,0,100,200);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(1, 'blue');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-2a.html b/layout/reftests/css-gradients/aja-linear-2a.html
new file mode 100644
index 000000000..5b85bf971
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-2a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(top left, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-2b.html b/layout/reftests/css-gradients/aja-linear-2b.html
new file mode 100644
index 000000000..388ade074
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-2b.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(0 0, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-2c.html b/layout/reftests/css-gradients/aja-linear-2c.html
new file mode 100644
index 000000000..27b364d71
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-2c.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(top 0px left 0px, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-2d.html b/layout/reftests/css-gradients/aja-linear-2d.html
new file mode 100644
index 000000000..f8fa55973
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-2d.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(bottom right, blue, yellow);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-3-ref.html b/layout/reftests/css-gradients/aja-linear-3-ref.html
new file mode 100644
index 000000000..75086eefc
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-3-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  /* this gradient goes at an angle of -45deg through the center of
+     the box */
+  var grad = ctx.createLinearGradient(-25,25,125,175);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(1, 'blue');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-3a.html b/layout/reftests/css-gradients/aja-linear-3a.html
new file mode 100644
index 000000000..e59acd965
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-3a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(135deg, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-3b.html b/layout/reftests/css-gradients/aja-linear-3b.html
new file mode 100644
index 000000000..3ad588f22
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-3b.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(-225deg, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-4-ref.html b/layout/reftests/css-gradients/aja-linear-4-ref.html
new file mode 100644
index 000000000..c26d0204f
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-4-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(50, 0, 50, 200);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(0.5, 'blue');
+  grad.addColorStop(1, '#0f0');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-4a.html b/layout/reftests/css-gradients/aja-linear-4a.html
new file mode 100644
index 000000000..5acf602ee
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-4a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(top, yellow, blue, #0f0);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-4b.html b/layout/reftests/css-gradients/aja-linear-4b.html
new file mode 100644
index 000000000..c83175162
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-4b.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(top, yellow, blue 50%, #0f0);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-5-ref.html b/layout/reftests/css-gradients/aja-linear-5-ref.html
new file mode 100644
index 000000000..1a26fd96a
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-5-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(50, 0, 50, 200);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(0.2, 'blue');
+  grad.addColorStop(1, '#0f0');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-5a.html b/layout/reftests/css-gradients/aja-linear-5a.html
new file mode 100644
index 000000000..9358acb55
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-5a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(top, yellow, blue 20%, #0f0);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-6-ref.html b/layout/reftests/css-gradients/aja-linear-6-ref.html
new file mode 100644
index 000000000..b23496fa7
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-6-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(20, 30, 80, 170);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(1, 'blue');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-6a.html b/layout/reftests/css-gradients/aja-linear-6a.html
new file mode 100644
index 000000000..ef4a6e526
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-6a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(20px 30px, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-6b.html b/layout/reftests/css-gradients/aja-linear-6b.html
new file mode 100644
index 000000000..0e05a0e00
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-6b.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: -moz-linear-gradient(left 20px top 30px, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html b/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html
new file mode 100644
index 000000000..c4c0a8b9c
--- /dev/null
+++ b/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Grid</title>
+  <style>
+      body {
+        background: #fff;
+    }
+    .r {background: red; width: 300px; height: 50px}
+    .g {background: green; width: 300px; height: 50px}
+  </style>
+</head>
+
+<body>
+        <div class=r></div>
+        <div class=g></div>
+        <div class=r></div>
+        <div class=g></div>
+        <div class=r></div>
+        <div class=g></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html b/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html
new file mode 100644
index 000000000..995c9e041
--- /dev/null
+++ b/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Grid</title>
+  <style>
+      body {
+        background: #fff;
+      }
+      div {
+        width: 300px;
+        height: 300px;
+        background-color: #269;
+        background-size: 100px 100px;
+        background-image:
+          linear-gradient( red 50px, green 50px);
+  }
+  </style>
+</head>
+
+<body>
+  <div ></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-1-ref.html b/layout/reftests/css-gradients/height-dependence-1-ref.html
new file mode 100644
index 000000000..b6f5a9846
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-1-ref.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html><head>
+<style>
+html {
+  background-image: -moz-linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 14em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-1.html b/layout/reftests/css-gradients/height-dependence-1.html
new file mode 100644
index 000000000..0190d794c
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-1.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html class="reftest-wait"><head>
+<style>
+html {
+  background-image: -moz-linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 28em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+<script>
+window.addEventListener("MozReftestInvalidate", function() {
+  document.body.style.width = "14em";
+  document.documentElement.removeAttribute("class");
+}, false);
+</script>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-2-ref.html b/layout/reftests/css-gradients/height-dependence-2-ref.html
new file mode 100644
index 000000000..b370614e8
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-2-ref.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html><head>
+<style>
+html {
+  background-image: -moz-linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+  background-size: 1px 400px;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 14em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-2.html b/layout/reftests/css-gradients/height-dependence-2.html
new file mode 100644
index 000000000..c258f70eb
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-2.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html class="reftest-wait"><head>
+<style>
+html {
+  background-image: -moz-linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+  background-size: 1px 400px;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 28em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+<script>
+window.addEventListener("MozReftestInvalidate", function() {
+  document.body.style.width = "14em";
+  document.documentElement.removeAttribute("class");
+}, false);
+</script>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-3-ref.html b/layout/reftests/css-gradients/height-dependence-3-ref.html
new file mode 100644
index 000000000..802eef4c3
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-3-ref.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html><head>
+<style>
+html {
+  background-image: -moz-linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+  background-size: 1px 80%;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 14em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-3.html b/layout/reftests/css-gradients/height-dependence-3.html
new file mode 100644
index 000000000..49ac4d4a3
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-3.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html class="reftest-wait"><head>
+<style>
+html {
+  background-image: -moz-linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+  background-size: 1px 80%;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 28em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+<script>
+window.addEventListener("MozReftestInvalidate", function() {
+  document.body.style.width = "14em";
+  document.documentElement.removeAttribute("class");
+}, false);
+</script>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/large-gradient-1-ref.html b/layout/reftests/css-gradients/large-gradient-1-ref.html
new file mode 100644
index 000000000..ddd7651e6
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-1-ref.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 1000px;
+  background-image: linear-gradient(rgb(210,210,210) 0px, rgb(215,215,215) 1000px);
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/large-gradient-1.html b/layout/reftests/css-gradients/large-gradient-1.html
new file mode 100644
index 000000000..bcba165a2
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-1.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 51000px; /* = 255 * 200 */
+  background-image: linear-gradient(rgb(0,0,0) 0px, rgb(255,255,255) 51000px);
+}
+
+div {
+  height: 1000px;
+  background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+  document.documentElement.scrollTop = 210 * 200; // 42000 > 32768
+  document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/css-gradients/large-gradient-2-ref.html b/layout/reftests/css-gradients/large-gradient-2-ref.html
new file mode 100644
index 000000000..ee33eedf1
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-2-ref.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+  background: lime;
+  overflow: hidden;
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/large-gradient-2.html b/layout/reftests/css-gradients/large-gradient-2.html
new file mode 100644
index 000000000..17074badd
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-2.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 51000px;
+  background-image: linear-gradient(black 0px, lime 2000px);
+}
+
+div {
+  height: 1000px;
+  background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+  document.documentElement.scrollTop = 42000; // > 32768
+  document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/css-gradients/large-gradient-3-ref.html b/layout/reftests/css-gradients/large-gradient-3-ref.html
new file mode 100644
index 000000000..e13864ee6
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-3-ref.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 1000px;
+  background-image: linear-gradient(rgb(210,210,210) 0px, rgb(215,215,215) 4000px);
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/large-gradient-3.html b/layout/reftests/css-gradients/large-gradient-3.html
new file mode 100644
index 000000000..0c859a89b
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-3.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 204000px; /* = 255 * 800 */
+  background-image: linear-gradient(rgb(0,0,0) 0px, rgb(255,255,255) 204000px);
+}
+
+div {
+  height: 1000px;
+  background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+  document.documentElement.scrollTop = 210 * 800; // 168000 > 131072 == 2^17
+  document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/css-gradients/large-gradient-4-ref.html b/layout/reftests/css-gradients/large-gradient-4-ref.html
new file mode 100644
index 000000000..ee33eedf1
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-4-ref.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+  background: lime;
+  overflow: hidden;
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/large-gradient-4.html b/layout/reftests/css-gradients/large-gradient-4.html
new file mode 100644
index 000000000..dc8f15102
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-4.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 204000px; /* = 255 * 800 */;
+  background-image: linear-gradient(black 0px, lime 2000px);
+}
+
+div {
+  height: 1000px;
+  background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+  document.documentElement.scrollTop = 210 * 800; // 168000 > 131072 == 2^17
+  document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/css-gradients/large-gradient-5-ref.html b/layout/reftests/css-gradients/large-gradient-5-ref.html
new file mode 100644
index 000000000..a0e923756
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-5-ref.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Reference for: Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1271112 -->
+
+<style>
+
+html {
+  background-color: lime;
+}
+
+</style>
+
+<body>
diff --git a/layout/reftests/css-gradients/large-gradient-5.html b/layout/reftests/css-gradients/large-gradient-5.html
new file mode 100644
index 000000000..d254d461e
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-5.html
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1271112 -->
+
+<style>
+
+html, body {
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 100000px;
+  /* a green gradient that is not opaque on top of a red background color */
+  background: repeating-linear-gradient(45deg, rgba(0, 255, 0, 1.0) 0%, rgba(0, 255, 0, 0.99) 10%, rgba(0, 255, 0, 1.0) 20%) red;
+}
+
+</style>
+
+<body>
+
+<script>
+document.documentElement.scrollTop = 35000;
+</script>
diff --git a/layout/reftests/css-gradients/linear-1-ref.html b/layout/reftests/css-gradients/linear-1-ref.html
new file mode 100644
index 000000000..f4d209a3d
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-1-ref.html
@@ -0,0 +1,24 @@
+<html xmlns="http://www.w3.org/1999/xhtml" 
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(0,150,300,150);
+  grad.addColorStop(0, 'red');
+  grad.addColorStop(1, 'rgb(100, 200, 0)');
+  grad.addColorStop(0.5, '#7777FF');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
+
diff --git a/layout/reftests/css-gradients/linear-1a.html b/layout/reftests/css-gradients/linear-1a.html
new file mode 100644
index 000000000..e4a50d779
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-1a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(to right, red 0%, #7777FF 50%, rgb(100, 200, 0) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-1b.html b/layout/reftests/css-gradients/linear-1b.html
new file mode 100644
index 000000000..111fb0501
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-1b.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(left, red 0%, #7777FF 50%, rgb(100, 200, 0) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-1-ref.html b/layout/reftests/css-gradients/linear-diagonal-1-ref.html
new file mode 100644
index 000000000..4aa7d3649
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-1-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom right, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-1a.html b/layout/reftests/css-gradients/linear-diagonal-1a.html
new file mode 100644
index 000000000..d59591791
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-1a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(top left -45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-1b.html b/layout/reftests/css-gradients/linear-diagonal-1b.html
new file mode 100644
index 000000000..382816918
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-1b.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-1c.html b/layout/reftests/css-gradients/linear-diagonal-1c.html
new file mode 100644
index 000000000..ca4177f1b
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-1c.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(top left, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-2-ref.html b/layout/reftests/css-gradients/linear-diagonal-2-ref.html
new file mode 100644
index 000000000..22cc0ab1e
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-2-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom left, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-2a.html b/layout/reftests/css-gradients/linear-diagonal-2a.html
new file mode 100644
index 000000000..71c6df077
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-2a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(top right -135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-2b.html b/layout/reftests/css-gradients/linear-diagonal-2b.html
new file mode 100644
index 000000000..ed8281cde
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-2b.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(-135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-2c.html b/layout/reftests/css-gradients/linear-diagonal-2c.html
new file mode 100644
index 000000000..6fcab518c
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-2c.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(top right, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-3-ref.html b/layout/reftests/css-gradients/linear-diagonal-3-ref.html
new file mode 100644
index 000000000..6a06898de
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-3-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to top left, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-3a.html b/layout/reftests/css-gradients/linear-diagonal-3a.html
new file mode 100644
index 000000000..d0d2b690e
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-3a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(bottom right 135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-3b.html b/layout/reftests/css-gradients/linear-diagonal-3b.html
new file mode 100644
index 000000000..dd61b284b
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-3b.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(-45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-3c.html b/layout/reftests/css-gradients/linear-diagonal-3c.html
new file mode 100644
index 000000000..d509bfa04
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-3c.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(bottom right, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-4-ref.html b/layout/reftests/css-gradients/linear-diagonal-4-ref.html
new file mode 100644
index 000000000..0ff8802b0
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-4-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to top right, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-4a.html b/layout/reftests/css-gradients/linear-diagonal-4a.html
new file mode 100644
index 000000000..a4e8fb7fd
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-4a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(bottom left 45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-4b.html b/layout/reftests/css-gradients/linear-diagonal-4b.html
new file mode 100644
index 000000000..05a0c31f4
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-4b.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-4c.html b/layout/reftests/css-gradients/linear-diagonal-4c.html
new file mode 100644
index 000000000..9c5e47b52
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-4c.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(bottom left, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-5-ref.html b/layout/reftests/css-gradients/linear-diagonal-5-ref.html
new file mode 100644
index 000000000..6e658f97d
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-5-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to top left, white 75%, black); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-5a.html b/layout/reftests/css-gradients/linear-diagonal-5a.html
new file mode 100644
index 000000000..bd7b9e6be
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-5a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(100px 100px 135deg, white, black); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-6-ref.html b/layout/reftests/css-gradients/linear-diagonal-6-ref.html
new file mode 100644
index 000000000..88580850a
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-6-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to top right, white 75%, black); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-6a.html b/layout/reftests/css-gradients/linear-diagonal-6a.html
new file mode 100644
index 000000000..079fd37e0
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-6a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(300px 100px 45deg, white, black); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-7-ref.html b/layout/reftests/css-gradients/linear-diagonal-7-ref.html
new file mode 100644
index 000000000..aa584b982
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-7-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom right, white 75%, black); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-7a.html b/layout/reftests/css-gradients/linear-diagonal-7a.html
new file mode 100644
index 000000000..c4f44fa70
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-7a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(300px 300px -45deg, white, black); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-8-ref.html b/layout/reftests/css-gradients/linear-diagonal-8-ref.html
new file mode 100644
index 000000000..0f914ebd7
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-8-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom left, white 75%, black); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-8a.html b/layout/reftests/css-gradients/linear-diagonal-8a.html
new file mode 100644
index 000000000..96ca8b60a
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-8a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(100px 300px -135deg, white, black); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-9-ref.html b/layout/reftests/css-gradients/linear-diagonal-9-ref.html
new file mode 100644
index 000000000..f271b0453
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-9-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+.x { width: 200px; height: 100px; display: inline-block; }
+.a { background: -moz-linear-gradient(top -90deg, blue, white, red); }
+.e { background: -moz-linear-gradient(top right -2.03444394rad, blue, white, red); }
+.g { background: -moz-linear-gradient(right 180deg, blue, white, red); }
+.i { background: -moz-linear-gradient(bottom right 2.03444394rad, blue, white, red); }
+.k { background: -moz-linear-gradient(bottom 90deg, blue, white, red); }
+.m { background: -moz-linear-gradient(bottom left 1.10714872rad, blue, white, red); }
+.o { background: -moz-linear-gradient(left 0deg, blue, white, red); }
+.q { background: -moz-linear-gradient(top left -1.10714872rad, blue, white, red); }
+</style>
+<div class="x a"></div>
+<div class="x e"></div>
+<div class="x g"></div>
+<div class="x i"></div>
+<div class="x k"></div>
+<div class="x m"></div>
+<div class="x o"></div>
+<div class="x q"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-9a.html b/layout/reftests/css-gradients/linear-diagonal-9a.html
new file mode 100644
index 000000000..33f0cece9
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-9a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+.x { width: 200px; height: 100px; display: inline-block; }
+.a { background: linear-gradient(to bottom, blue, white, red); }
+.e { background: linear-gradient(to bottom left, blue, white, red); }
+.g { background: linear-gradient(to left, blue, white, red); }
+.i { background: linear-gradient(to top left, blue, white, red); }
+.k { background: linear-gradient(to top, blue, white, red); }
+.m { background: linear-gradient(to top right, blue, white, red); }
+.o { background: linear-gradient(to right, blue, white, red); }
+.q { background: linear-gradient(to bottom right, blue, white, red); }
+</style>
+<div class="x a"></div>
+<div class="x e"></div>
+<div class="x g"></div>
+<div class="x i"></div>
+<div class="x k"></div>
+<div class="x m"></div>
+<div class="x o"></div>
+<div class="x q"></div>
diff --git a/layout/reftests/css-gradients/linear-flipped-1-ref.html b/layout/reftests/css-gradients/linear-flipped-1-ref.html
new file mode 100644
index 000000000..2817ff53a
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-flipped-1-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="height:100px; background:-moz-linear-gradient(bottom, black, white);"></div>
diff --git a/layout/reftests/css-gradients/linear-flipped-1.html b/layout/reftests/css-gradients/linear-flipped-1.html
new file mode 100644
index 000000000..260831086
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-flipped-1.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="height:100px; background:-moz-linear-gradient(top, black, white); transform:scale(1,-1);"></div>
diff --git a/layout/reftests/css-gradients/linear-keywords-1-ref.html b/layout/reftests/css-gradients/linear-keywords-1-ref.html
new file mode 100644
index 000000000..d311b3df1
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-keywords-1-ref.html
@@ -0,0 +1,23 @@
+<html xmlns="http://www.w3.org/1999/xhtml" 
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(0,0,300,300);
+  grad.addColorStop(0, '#0000ff');
+  grad.addColorStop(1, '#000000');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
+
diff --git a/layout/reftests/css-gradients/linear-keywords-1a.html b/layout/reftests/css-gradients/linear-keywords-1a.html
new file mode 100644
index 000000000..48cf46606
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-keywords-1a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right bottom, #0000ff, #000000) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-keywords-1b.html b/layout/reftests/css-gradients/linear-keywords-1b.html
new file mode 100644
index 000000000..b4d61b351
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-keywords-1b.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(left top, #0000ff, #000000) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-mix-ref.html b/layout/reftests/css-gradients/linear-mix-ref.html
new file mode 100644
index 000000000..0d37fe0c1
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-mix-ref.html
@@ -0,0 +1,34 @@
+<html xmlns="http://www.w3.org/1999/xhtml" 
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(120,20,300,20);
+  grad.addColorStop(0, '#0000ff');
+  grad.addColorStop(1, '#000000');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,300,300);
+
+  ctx = document.getElementById('canvas2').getContext('2d');
+
+  grad = ctx.createLinearGradient(30,300,30,0);
+  grad.addColorStop(0, '#00ff00');
+  grad.addColorStop(1, '#000000');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300" style="position: absolute; top: 30px; left: 30px;"></canvas>
+<br/><br/>
+<canvas id="canvas2" width="300" height="300" style="position: absolute; top: 360px; left: 30px;"></canvas>
+</body>
+</html>
+
diff --git a/layout/reftests/css-gradients/linear-mix.html b/layout/reftests/css-gradients/linear-mix.html
new file mode 100644
index 000000000..c4d5dbbc4
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-mix.html
@@ -0,0 +1,3 @@
+<div style="background: -moz-linear-gradient(40% 20px 0deg, #0000ff, #000000) no-repeat; width: 300px; height: 300px; position: absolute; top: 30px; left: 30px;"><br></div>
+
+<div style="background: -moz-linear-gradient(10% bottom 90deg, #00ff00, #000000) no-repeat; width: 300px; height: 300px; position: absolute; top: 360px; left: 30px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-onestopposition-1-ref.html b/layout/reftests/css-gradients/linear-onestopposition-1-ref.html
new file mode 100644
index 000000000..c9fdca6b4
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-onestopposition-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for linear-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: linear-gradient(to right, blue 0%, blue 25%, orange 25%, orange 100%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html b/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html
new file mode 100644
index 000000000..51f70bcd4
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>Test for linear-gradient() with all stops at the same position</title>
+<style>
+
+#div1 {
+  float: left;
+  width: 50px;
+  height: 200px;
+  background: blue;
+}
+
+#div2 {
+  float: left;
+  width: 150px;
+  height: 200px;
+  background: orange;
+}
+
+</style>
+<div id="div1"></div>
+<div id="div2"></div>
diff --git a/layout/reftests/css-gradients/linear-onestopposition-1.html b/layout/reftests/css-gradients/linear-onestopposition-1.html
new file mode 100644
index 000000000..9a549d4a5
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-onestopposition-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for linear-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: -moz-linear-gradient(left, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/linear-percent-ref.html b/layout/reftests/css-gradients/linear-percent-ref.html
new file mode 100644
index 000000000..e8d5d2153
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-percent-ref.html
@@ -0,0 +1,23 @@
+<html xmlns="http://www.w3.org/1999/xhtml" 
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(30,60,300,60);
+  grad.addColorStop(0, '#0000ff');
+  grad.addColorStop(1, '#000000');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
+
diff --git a/layout/reftests/css-gradients/linear-percent.html b/layout/reftests/css-gradients/linear-percent.html
new file mode 100644
index 000000000..7a8b7e8dd
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-percent.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(10% 20% 0deg, #0000ff, #000000) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-position-1-ref.html b/layout/reftests/css-gradients/linear-position-1-ref.html
new file mode 100644
index 000000000..cd66e6681
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-position-1-ref.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: linear-gradient(to right, white, black) no-repeat; position:relative; left:-200px; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-position-1a.html b/layout/reftests/css-gradients/linear-position-1a.html
new file mode 100644
index 000000000..5ad549c2a
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-position-1a.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: -moz-linear-gradient(left, white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-premul-ref.html b/layout/reftests/css-gradients/linear-premul-ref.html
new file mode 100644
index 000000000..bf0b12c33
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-premul-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right, rgba(255, 0, 0, .9) 0% , rgba(255, 0, 0, 0) 50%, rgba(0, 0, 255, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-premul.html b/layout/reftests/css-gradients/linear-premul.html
new file mode 100644
index 000000000..20c7c276a
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-premul.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right, rgba(255, 0, 0, .9) 0% , rgba(0, 255, 0, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1-ref.html b/layout/reftests/css-gradients/linear-repeat-1-ref.html
new file mode 100644
index 000000000..f9f42811f
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1-ref.html
@@ -0,0 +1,6 @@
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1a.html b/layout/reftests/css-gradients/linear-repeat-1a.html
new file mode 100644
index 000000000..e21be5c50
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1a.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-linear-gradient(black, black 50%, white 50%, white);
+            background-size: 100px 100px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1b.html b/layout/reftests/css-gradients/linear-repeat-1b.html
new file mode 100644
index 000000000..1a8f06982
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1b.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px);
+            background-size: 100px 200px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1c.html b/layout/reftests/css-gradients/linear-repeat-1c.html
new file mode 100644
index 000000000..f3c2b841b
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1c.html
@@ -0,0 +1,4 @@
+<div style="background: -moz-linear-gradient(white, white 50%, black 50%, black);
+            background-size: 100px 100px;
+            background-position: 0 -50px;
+            width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1d.html b/layout/reftests/css-gradients/linear-repeat-1d.html
new file mode 100644
index 000000000..5a609f1b0
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1d.html
@@ -0,0 +1,3 @@
+<div style="background: -moz-linear-gradient(white, white 50px, black 50px, black 100px, white 100px, white 150px, black 150px, black 200px);
+            background-size: 100px 200px; background-position: 0 -50px;
+            width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1e.html b/layout/reftests/css-gradients/linear-repeat-1e.html
new file mode 100644
index 000000000..4f7011427
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1e.html
@@ -0,0 +1,3 @@
+<div style="background: -moz-linear-gradient(black, black 50%, white 50%, white);
+            background-size: 300px 100px; background-repeat: repeat-y;
+            width: 500px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1f.html b/layout/reftests/css-gradients/linear-repeat-1f.html
new file mode 100644
index 000000000..253170e34
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1f.html
@@ -0,0 +1,10 @@
+<div style="background: -moz-linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px);
+            background-size: 100px 200px; background-repeat: repeat-x;
+            width: 300px; height: 800px;
+            margin-bottom: -600px;"></div>
+<!-- making the gradient actually be 300px high isn't reliable since
+     the stop positions cannot be exactly represented and rounding errors
+     creep in. So just let the gradient be 200px high and pad out to match
+     the reference. -->
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1g.html b/layout/reftests/css-gradients/linear-repeat-1g.html
new file mode 100644
index 000000000..1a09af726
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1g.html
@@ -0,0 +1,12 @@
+<body style="overflow:hidden">
+<div style="background: -moz-linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px);
+            background-size: 300px 200px; background-repeat: no-repeat;
+            width: 800px; height: 800px;
+            margin-bottom: -600px;"></div>
+<!-- making the gradient actually be 300px high isn't reliable since
+     the stop positions cannot be exactly represented and rounding errors
+     creep in. So just let the gradient be 200px high and pad out to match
+     the reference. -->
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
+</body>
diff --git a/layout/reftests/css-gradients/linear-rotated-1-ref.html b/layout/reftests/css-gradients/linear-rotated-1-ref.html
new file mode 100644
index 000000000..d22ca1bb7
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-rotated-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:100px; height:100px; background:linear-gradient(to left, red, green);"></div>
+<div style="width:100px; height:100px; background:linear-gradient(to right, red, green);"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-rotated-1.html b/layout/reftests/css-gradients/linear-rotated-1.html
new file mode 100644
index 000000000..b927d1db2
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-rotated-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:100px; height:100px; transform:rotate(90deg); background:linear-gradient(red, green);"></div>
+<div style="width:100px; height:100px; transform:rotate(270deg); background:linear-gradient(red, green);"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-size-1-ref.html b/layout/reftests/css-gradients/linear-size-1-ref.html
new file mode 100644
index 000000000..32bfbde31
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-size-1-ref.html
@@ -0,0 +1,3 @@
+<div style="background: -moz-linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
+<div style="background: -moz-linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
+<div style="background: -moz-linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
diff --git a/layout/reftests/css-gradients/linear-size-1a.html b/layout/reftests/css-gradients/linear-size-1a.html
new file mode 100644
index 000000000..b087b6a5a
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-size-1a.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-linear-gradient(white, black);
+            background-size: 300px 100px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1-ref.html b/layout/reftests/css-gradients/linear-stops-1-ref.html
new file mode 100644
index 000000000..0582630f2
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1-ref.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white 0%, red 20%, green 40%, blue 60%, yellow 80%, black 100%) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1a.html b/layout/reftests/css-gradients/linear-stops-1a.html
new file mode 100644
index 000000000..21f1f3d9c
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white, red, green, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1b.html b/layout/reftests/css-gradients/linear-stops-1b.html
new file mode 100644
index 000000000..30c703f70
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1b.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white 0, red 60px, green 120px, blue 180px, yellow 240px, black 300px) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1c.html b/layout/reftests/css-gradients/linear-stops-1c.html
new file mode 100644
index 000000000..4a753ee39
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1c.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white, red 20%, green, blue 60%, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1d.html b/layout/reftests/css-gradients/linear-stops-1d.html
new file mode 100644
index 000000000..1b79fc523
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1d.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white, red, green 40%, red 40%, green 40%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1e.html b/layout/reftests/css-gradients/linear-stops-1e.html
new file mode 100644
index 000000000..7215994e6
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1e.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white, red, green 40%, red 20%, green 40%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1f.html b/layout/reftests/css-gradients/linear-stops-1f.html
new file mode 100644
index 000000000..bd715527e
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1f.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white, red, green 40%, red 40%, green 20%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1-ref.html b/layout/reftests/css-gradients/linear-vertical-1-ref.html
new file mode 100644
index 000000000..4de794ac6
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<canvas id="canvas" width="300" height="300"/>
+<script>
+var ctx = document.getElementById('canvas').getContext('2d');
+
+var grad = ctx.createLinearGradient(150,0,150,300);
+grad.addColorStop(0, 'white');
+grad.addColorStop(1, 'black');
+
+ctx.fillStyle = grad;
+ctx.fillRect(0,0,300,300);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-vertical-1a.html b/layout/reftests/css-gradients/linear-vertical-1a.html
new file mode 100644
index 000000000..79444130e
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1b.html b/layout/reftests/css-gradients/linear-vertical-1b.html
new file mode 100644
index 000000000..aaca30135
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1b.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(top left -90deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1c.html b/layout/reftests/css-gradients/linear-vertical-1c.html
new file mode 100644
index 000000000..6ce627079
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1c.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white 0%, white 0%, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1d.html b/layout/reftests/css-gradients/linear-vertical-1d.html
new file mode 100644
index 000000000..0e8342357
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1d.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(white 0%, white -20%, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1e.html b/layout/reftests/css-gradients/linear-vertical-1e.html
new file mode 100644
index 000000000..4b9ffc505
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1e.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html b/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html
new file mode 100644
index 000000000..6d6c3517f
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+  margin-top: 21px;
+  height: 30px;
+  background-image: -moz-linear-gradient(center top, black, white);
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-vertical-subpixel-1.html b/layout/reftests/css-gradients/linear-vertical-subpixel-1.html
new file mode 100644
index 000000000..4c3e8f479
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-subpixel-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+  margin-top: 20.7px;
+  height: 30px;
+  background-image: -moz-linear-gradient(center top, black, white);
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-viewport-ref.html b/layout/reftests/css-gradients/linear-viewport-ref.html
new file mode 100644
index 000000000..dc0259ce0
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-viewport-ref.html
@@ -0,0 +1 @@
+<body style="border: 0; margin: 0; padding: 0;"><div style="background: -moz-linear-gradient(blue, aqua) no-repeat; width: 100%; height: 100%;">&nbsp;</div></body>
diff --git a/layout/reftests/css-gradients/linear-viewport.html b/layout/reftests/css-gradients/linear-viewport.html
new file mode 100644
index 000000000..8925e781b
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-viewport.html
@@ -0,0 +1,2 @@
+<!-- bug 509681 -->
+<body style="background: -moz-linear-gradient(blue, aqua) fixed no-repeat;">
diff --git a/layout/reftests/css-gradients/linear-zero-length-1-ref.html b/layout/reftests/css-gradients/linear-zero-length-1-ref.html
new file mode 100644
index 000000000..0379d1924
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-zero-length-1-ref.html
@@ -0,0 +1,2 @@
+<div style="background: black; width: 300px; height: 300px;"></div>
+<div style="background: black; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-zero-length-1a.html b/layout/reftests/css-gradients/linear-zero-length-1a.html
new file mode 100644
index 000000000..2b8341915
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-zero-length-1a.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-linear-gradient(150px 150px, white, black); width: 300px; height: 300px;"></div>
+<div style="background: -moz-repeating-linear-gradient(150px 150px, white, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-zero-length-1b.html b/layout/reftests/css-gradients/linear-zero-length-1b.html
new file mode 100644
index 000000000..1869e5cf8
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-zero-length-1b.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-linear-gradient(150px 150px, white, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: -moz-repeating-linear-gradient(150px 150px, white, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-zero-length-1c.html b/layout/reftests/css-gradients/linear-zero-length-1c.html
new file mode 100644
index 000000000..67298ce38
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-zero-length-1c.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-linear-gradient(center, white, black 50%); width: 300px; height: 300px;"></div>
+<div style="background: -moz-repeating-linear-gradient(center, white, black 50%); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/nostops.html b/layout/reftests/css-gradients/nostops.html
new file mode 100644
index 000000000..9c4035365
--- /dev/null
+++ b/layout/reftests/css-gradients/nostops.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right bottom) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/onestop.html b/layout/reftests/css-gradients/onestop.html
new file mode 100644
index 000000000..afa1ad6fb
--- /dev/null
+++ b/layout/reftests/css-gradients/onestop.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right bottom, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/orange-square.html b/layout/reftests/css-gradients/orange-square.html
new file mode 100644
index 000000000..aa70b29fa
--- /dev/null
+++ b/layout/reftests/css-gradients/orange-square.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>orange square</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background: orange;
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-1-ref.html b/layout/reftests/css-gradients/radial-1-ref.html
new file mode 100644
index 000000000..b836c6c06
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-1-ref.html
@@ -0,0 +1,22 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var radgrad = ctx.createRadialGradient(100,100,25,100,100,50);
+  radgrad.addColorStop(0, '#FF0000');
+  radgrad.addColorStop(1, '#0000FF');
+
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/radial-1a.html b/layout/reftests/css-gradients/radial-1a.html
new file mode 100644
index 000000000..e42e1d1ca
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-1a.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(100px 100px at 100px 100px, #ff0000 25px, #0000ff 50px) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-1b.html b/layout/reftests/css-gradients/radial-1b.html
new file mode 100644
index 000000000..450dbc959
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-1b.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(closest-side at 100px 100px, #ff0000 25px, #0000ff 50px) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-1c.html b/layout/reftests/css-gradients/radial-1c.html
new file mode 100644
index 000000000..55dd5ffc5
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-1c.html
@@ -0,0 +1 @@
+<div style="background: -moz-radial-gradient(100px 100px, closest-side, #ff0000 25px, #0000ff 50px) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2-ref.html b/layout/reftests/css-gradients/radial-2-ref.html
new file mode 100644
index 000000000..71ccb53ee
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2-ref.html
@@ -0,0 +1,22 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var radgrad = ctx.createRadialGradient(100,100,0,100,100,50);
+  radgrad.addColorStop(0, '#FF0000');
+  radgrad.addColorStop(1, '#0000FF');
+
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/radial-2a.html b/layout/reftests/css-gradients/radial-2a.html
new file mode 100644
index 000000000..b316e1c50
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2a.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(closest-side at 100px 100px, yellow -10px, #ff0000 0, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2b.html b/layout/reftests/css-gradients/radial-2b.html
new file mode 100644
index 000000000..675cb6ecd
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2b.html
@@ -0,0 +1,3 @@
+<!-- This test checks that adjustment of stop positions to be non-negative
+     happens after the calculation of implied stop positions -->
+<div style="background: radial-gradient(closest-side at 100px 100px, #ff0000 -50px, #ff0000, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2c.html b/layout/reftests/css-gradients/radial-2c.html
new file mode 100644
index 000000000..38bdcfd85
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2c.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(100px 100px at 100px 100px, yellow -10px, #ff0000 0, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2d.html b/layout/reftests/css-gradients/radial-2d.html
new file mode 100644
index 000000000..152ee771b
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2d.html
@@ -0,0 +1,3 @@
+<!-- This test checks that adjustment of stop positions to be non-negative
+     happens after the calculation of implied stop positions -->
+<div style="background: radial-gradient(100px 100px at 100px 100px, #ff0000 -50px, #ff0000, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2e.html b/layout/reftests/css-gradients/radial-2e.html
new file mode 100644
index 000000000..ee4052aa0
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2e.html
@@ -0,0 +1 @@
+<div style="background: -moz-radial-gradient(100px 100px, closest-side, yellow -10px, #ff0000 0, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2f.html b/layout/reftests/css-gradients/radial-2f.html
new file mode 100644
index 000000000..e1b08b408
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2f.html
@@ -0,0 +1,3 @@
+<!-- This test checks that adjustment of stop positions to be non-negative
+     happens after the calculation of implied stop positions -->
+<div style="background: -moz-radial-gradient(100px 100px, closest-side, #ff0000 -50px, #ff0000, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-onestopposition-1-ref.html b/layout/reftests/css-gradients/radial-onestopposition-1-ref.html
new file mode 100644
index 000000000..439e50cbd
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-onestopposition-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: radial-gradient(closest-side, blue 0%, blue 25%, orange 25%, orange 100%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-onestopposition-1a.html b/layout/reftests/css-gradients/radial-onestopposition-1a.html
new file mode 100644
index 000000000..60ad3e6a3
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-onestopposition-1a.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: radial-gradient(closest-side, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-onestopposition-1b.html b/layout/reftests/css-gradients/radial-onestopposition-1b.html
new file mode 100644
index 000000000..22a00ff89
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-onestopposition-1b.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: radial-gradient(100px 100px at 100px, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-onestopposition-1c.html b/layout/reftests/css-gradients/radial-onestopposition-1c.html
new file mode 100644
index 000000000..4a83ec8a0
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-onestopposition-1c.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: -moz-radial-gradient(contain, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-position-1-ref.html b/layout/reftests/css-gradients/radial-position-1-ref.html
new file mode 100644
index 000000000..c94455ebe
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-position-1-ref.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: radial-gradient(white, black) no-repeat; position:relative; left:-200px; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-position-1a.html b/layout/reftests/css-gradients/radial-position-1a.html
new file mode 100644
index 000000000..ecd4b369f
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-position-1a.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: radial-gradient(white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-position-1b.html b/layout/reftests/css-gradients/radial-position-1b.html
new file mode 100644
index 000000000..02d3ed071
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-position-1b.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: radial-gradient(212.132034px 212.132034px at center, white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-premul-ref.html b/layout/reftests/css-gradients/radial-premul-ref.html
new file mode 100644
index 000000000..1424f4373
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-premul-ref.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(rgba(255, 0, 0, .9) 0% , rgba(255, 0, 0, 0) 50%, rgba(0, 0, 255, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-premul.html b/layout/reftests/css-gradients/radial-premul.html
new file mode 100644
index 000000000..33b89c72b
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-premul.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(rgba(255, 0, 0, .9) 0% , rgba(0, 255, 0, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html
new file mode 100644
index 000000000..a872319b3
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(closest-side circle at 60px 80px, white, black 100px); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side circle at 140px 80px, white, black 100px); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(closest-side circle at 80px 60px, white, black 100px); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side circle at 80px 140px, white, black 100px); top:220px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(60px 80px 90deg, closest-corner, white, black 80px); top:430px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(140px 80px 90deg, closest-corner, white, black 80px); top:430px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 60px 90deg, ellipse closest-corner, white, black 60px); top:640px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 140px 90deg, ellipse closest-corner, white, black 60px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html
new file mode 100644
index 000000000..508b00267
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle closest-corner at 60px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner circle at 140px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle closest-corner at 80px 60px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner circle at 80px 140px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse closest-corner at 60px 80px, white, black 60px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner ellipse at 140px 80px, white, black 60px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(closest-corner at 80px 60px, white, black 80px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner at 80px 140px, white, black 80px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html
new file mode 100644
index 000000000..e5d3dc5ee
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(100px 100px at 60px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(100px at 140px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(100px 100px at 80px 60px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(100px at 80px 140px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(84.8528137px 113.137084px at 60px 80px, white, black 60px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(84.8528137px 113.137084px at 140px 80px, white, black 60px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(113.137084px 84.8528137px at 80px 60px, white, black 80px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(113.137084px 84.8528137px at 80px 140px, white, black 80px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1c.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1c.html
new file mode 100644
index 000000000..2adde5746
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1c.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: -moz-radial-gradient(60px 80px, circle closest-corner, white, black); top:10px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(140px 80px, circle closest-corner, white, black); top:10px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 60px, circle closest-corner, white, black); top:220px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 140px, circle closest-corner, white, black); top:220px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(60px 80px, ellipse closest-corner, white, black 60px); top:430px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(140px 80px, ellipse closest-corner, white, black 60px); top:430px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 60px, closest-corner, white, black 80px); top:640px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 140px, closest-corner, white, black 80px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html b/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html
new file mode 100644
index 000000000..9ef6f9d32
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: -moz-radial-gradient(50px 80px, circle closest-side, white, black 50px); top:10px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(150px 80px, circle closest-side, white, black 50px); top:10px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 50px, circle closest-side, white, black 50px); top:220px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 150px, circle closest-side, white, black 50px); top:220px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(20px 20px, circle closest-side, white, black 20px); height:100px; -moz-transform-origin:0 0; -moz-transform:scale(1.0, 2.0); top:430px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(180px 20px, circle closest-side, white, black 20px); height:100px; -moz-transform-origin:0 0; -moz-transform:scale(1.0, 2.0); top:430px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(20px 20px, circle closest-side, white, black 20px); width:100px; -moz-transform-origin:0 0; -moz-transform:scale(2.0, 1.0); top:640px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(20px 180px, circle closest-side, white, black 20px); width:100px; -moz-transform-origin:0 0; -moz-transform:scale(2.0, 1.0); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1a.html b/layout/reftests/css-gradients/radial-shape-closest-side-1a.html
new file mode 100644
index 000000000..a689ab036
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-side-1a.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle closest-side at 50px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side circle at 150px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle closest-side at 80px 50px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side circle at 80px 150px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse closest-side at 20px 40px, white, black); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side ellipse at 180px 40px, white, black); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(closest-side at 40px 20px, white, black); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side at 40px 180px, white, black); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1b.html b/layout/reftests/css-gradients/radial-shape-closest-side-1b.html
new file mode 100644
index 000000000..8290b6ad1
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-side-1b.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(50px 50px at 50px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(50px at 150px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(50px 50px at 80px 50px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(50px at 80px 150px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(20px 40px at 20px 40px, white, black); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(20px 40px at 180px 40px, white, black); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(40px 20px at 40px 20px, white, black); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(40px 20px at 40px 180px, white, black); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1c.html b/layout/reftests/css-gradients/radial-shape-closest-side-1c.html
new file mode 100644
index 000000000..3c12ccf75
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-side-1c.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: -moz-radial-gradient(50px 80px, circle closest-side, white, black); top:10px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(150px 80px, circle closest-side, white, black); top:10px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 50px, circle closest-side, white, black); top:220px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 150px, circle closest-side, white, black); top:220px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(20px 40px, ellipse closest-side, white, black); top:430px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(180px 40px, ellipse closest-side, white, black); top:430px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(40px 20px, closest-side, white, black); top:640px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(40px 180px, closest-side, white, black); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html
new file mode 100644
index 000000000..2d2b4c925
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle farthest-side at 40px 80px, white, black 200px); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 160px 80px, white, black 200px); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 40px, white, black 200px); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 80px 160px, white, black 200px); top:220px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(60px 80px 90deg, farthest-corner, white, black 120px); top:430px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(140px 80px 90deg, farthest-corner, white, black 120px); top:430px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 60px 90deg, ellipse farthest-corner, white, black 140px); top:640px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 140px 90deg, ellipse farthest-corner, white, black 140px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html
new file mode 100644
index 000000000..6ee7b27c8
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle farthest-corner at 40px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner circle at 160px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-corner at 80px 40px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner circle at 80px 160px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse farthest-corner at 60px 80px, white, black 140px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner ellipse at 140px 80px, white, black 140px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(farthest-corner at 80px 60px, white, black 120px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner at 80px 140px, white, black 120px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html
new file mode 100644
index 000000000..b095575f0
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(200px 200px at 40px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(200px at 160px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(200px 200px at 80px 40px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(200px at 80px 160px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(197.989898px 169.705627px at 60px 80px, white, black 140px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(197.989898px 169.705627px at 140px 80px, white, black 140px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(169.705627px 197.989898px at 80px 60px, white, black 120px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(169.705627px 197.989898px at 80px 140px, white, black 120px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1c.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1c.html
new file mode 100644
index 000000000..594cbbed3
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1c.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: -moz-radial-gradient(40px 80px, circle farthest-corner, white, black); top:10px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(160px 80px, circle farthest-corner, white, black); top:10px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 40px, circle farthest-corner, white, black); top:220px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 160px, circle farthest-corner, white, black); top:220px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(60px 80px, ellipse farthest-corner, white, black 140px); top:430px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(140px 80px, ellipse farthest-corner, white, black 140px); top:430px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 60px, farthest-corner, white, black 120px); top:640px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 140px, farthest-corner, white, black 120px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html
new file mode 100644
index 000000000..12801a737
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle farthest-side at 50px 80px, white, black 150px); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 150px 80px, white, black 150px); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 50px, white, black 150px); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 80px 150px, white, black 150px); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 80px, white, black 120px); -moz-transform-origin:0 0; -moz-transform:scale(1.0, 0.5); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 120px 120px, white, black 120px); -moz-transform-origin:0 0; -moz-transform:scale(1.0, 0.5); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 80px, white, black 120px); -moz-transform-origin:0 0; -moz-transform:scale(0.5, 1.0); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 120px 120px, white, black 120px); -moz-transform-origin:0 0; -moz-transform:scale(0.5, 1.0); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html
new file mode 100644
index 000000000..802280dd6
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle farthest-side at 50px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 150px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 50px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 80px 150px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(farthest-side at 80px 40px, white, black); height:100px; top:430px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side at 120px 60px, white, black); height:100px; top:430px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse farthest-side at 40px 80px, white, black); width:100px; top:640px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side ellipse at 60px 120px, white, black); width:100px; top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html
new file mode 100644
index 000000000..4ff797476
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(150px 150px at 50px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(150px at 150px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(150px 150px at 80px 50px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(150px at 80px 150px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(120px 60px at 80px 40px, white, black); height:100px; top:430px; left:10px;"></div>
+<div style="background: radial-gradient(120px 60px at 120px 60px, white, black); height:100px; top:430px; left:220px;"></div>
+<div style="background: radial-gradient(60px 120px at 40px 80px, white, black); width:100px; top:640px; left:10px;"></div>
+<div style="background: radial-gradient(60px 120px at 60px 120px, white, black); width:100px; top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1c.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1c.html
new file mode 100644
index 000000000..5c291c7d5
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1c.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: -moz-radial-gradient(50px 80px, circle farthest-side, white, black); top:10px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(150px 80px, circle farthest-side, white, black); top:10px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 50px, circle farthest-side, white, black); top:220px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(80px 150px, circle farthest-side, white, black); top:220px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(80px 40px, farthest-side, white, black); height:100px; top:430px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(120px 60px, farthest-side, white, black); height:100px; top:430px; left:220px;"></div>
+<div style="background: -moz-radial-gradient(40px 80px, ellipse farthest-side, white, black); width:100px; top:640px; left:10px;"></div>
+<div style="background: -moz-radial-gradient(60px 120px, ellipse farthest-side, white, black); width:100px; top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-size-1-ref.html b/layout/reftests/css-gradients/radial-size-1-ref.html
new file mode 100644
index 000000000..bb0cc963f
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-size-1-ref.html
@@ -0,0 +1,3 @@
+<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
+<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
+<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
diff --git a/layout/reftests/css-gradients/radial-size-1a.html b/layout/reftests/css-gradients/radial-size-1a.html
new file mode 100644
index 000000000..ab5597205
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-size-1a.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-radial-gradient(white, black);
+            background-size: 300px 100px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-size-1b.html b/layout/reftests/css-gradients/radial-size-1b.html
new file mode 100644
index 000000000..6095144d3
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-size-1b.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(70.7106781% 70.7106781% at center, white, black);
+            background-size: 300px 100px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1-ref.html b/layout/reftests/css-gradients/radial-zero-length-1-ref.html
new file mode 100644
index 000000000..0379d1924
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1-ref.html
@@ -0,0 +1,2 @@
+<div style="background: black; width: 300px; height: 300px;"></div>
+<div style="background: black; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1a.html b/layout/reftests/css-gradients/radial-zero-length-1a.html
new file mode 100644
index 000000000..e1a2faee2
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1a.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(circle closest-side at left, white, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(closest-side circle at left, white, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1b.html b/layout/reftests/css-gradients/radial-zero-length-1b.html
new file mode 100644
index 000000000..85aa9b473
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1b.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(circle closest-side at left, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(closest-side circle at left, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1c.html b/layout/reftests/css-gradients/radial-zero-length-1c.html
new file mode 100644
index 000000000..2113caae1
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1c.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(0 0 at left, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(0 0 at left, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1d.html b/layout/reftests/css-gradients/radial-zero-length-1d.html
new file mode 100644
index 000000000..fc078321d
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1d.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(ellipse closest-side at left, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(closest-side ellipse at left, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1e.html b/layout/reftests/css-gradients/radial-zero-length-1e.html
new file mode 100644
index 000000000..52341674a
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1e.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(0 150px at left, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(0 150px at left, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1f.html b/layout/reftests/css-gradients/radial-zero-length-1f.html
new file mode 100644
index 000000000..64d0fafd7
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1f.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(ellipse closest-side at top, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(closest-side ellipse at top, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1g.html b/layout/reftests/css-gradients/radial-zero-length-1g.html
new file mode 100644
index 000000000..aae2da90b
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1g.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-radial-gradient(left, circle closest-side, white, black); width: 300px; height: 300px;"></div>
+<div style="background: -moz-repeating-radial-gradient(left, circle closest-side, white, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1h.html b/layout/reftests/css-gradients/radial-zero-length-1h.html
new file mode 100644
index 000000000..bb4d3e38b
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1h.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-radial-gradient(left, circle closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: -moz-repeating-radial-gradient(left, circle closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1i.html b/layout/reftests/css-gradients/radial-zero-length-1i.html
new file mode 100644
index 000000000..95b0ce243
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1i.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-radial-gradient(left, ellipse closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: -moz-repeating-radial-gradient(left, ellipse closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1j.html b/layout/reftests/css-gradients/radial-zero-length-1j.html
new file mode 100644
index 000000000..1ec61162a
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1j.html
@@ -0,0 +1,2 @@
+<div style="background: -moz-radial-gradient(top, ellipse closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: -moz-repeating-radial-gradient(top, ellipse closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/reftest-stylo.list b/layout/reftests/css-gradients/reftest-stylo.list
new file mode 100644
index 000000000..2adcd4cdc
--- /dev/null
+++ b/layout/reftests/css-gradients/reftest-stylo.list
@@ -0,0 +1,169 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,4,88500) fuzzy-if(azureSkiaGL||skiaContent,4,89700) fuzzy-if(azureQuartz,1,34792) == linear-1a.html linear-1a.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,4,88500) fuzzy-if(azureSkiaGL||skiaContent,4,89700) fuzzy-if(azureQuartz,1,34792) == linear-1b.html linear-1b.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,2,88500) fuzzy-if(azureSkiaGL,2,89997) fuzzy-if(azureQuartz,1,11469) fuzzy-if(skiaContent,1,16000) == linear-keywords-1a.html linear-keywords-1a.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,2,88500) fuzzy-if(azureSkiaGL,2,89997) fuzzy-if(azureQuartz,1,11985) fuzzy-if(skiaContent,1,16000) == linear-keywords-1b.html linear-keywords-1b.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,88500) fuzzy-if(azureQuartz,1,10230) fuzzy-if(skiaContent,1,18000) == linear-percent.html linear-percent.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,4,92400) fuzzy-if(azureSkiaGL||skiaContent,3,143400) fuzzy-if(azureQuartz,1,27827) fuzzy-if(Android,4,93000) == linear-mix.html linear-mix.html
+== linear-diagonal-1a.html linear-diagonal-1a.html
+== linear-diagonal-1b.html linear-diagonal-1b.html
+== linear-diagonal-1c.html linear-diagonal-1c.html
+== linear-diagonal-2a.html linear-diagonal-2a.html
+== linear-diagonal-2b.html linear-diagonal-2b.html
+== linear-diagonal-2c.html linear-diagonal-2c.html
+== linear-diagonal-3a.html linear-diagonal-3a.html
+== linear-diagonal-3b.html linear-diagonal-3b.html
+== linear-diagonal-3c.html linear-diagonal-3c.html
+== linear-diagonal-4a.html linear-diagonal-4a.html
+== linear-diagonal-4b.html linear-diagonal-4b.html
+== linear-diagonal-4c.html linear-diagonal-4c.html
+== linear-premul.html linear-premul.html
+
+# these tests uses a similar gradient over different bounds. It's perfectly
+# reasonable to expect implementations to give slightly different results
+# if the gradients are not being normalized. Skia uses a lookup table for
+# gradients so it will have less precision when drawing a larger gradient
+fails fuzzy-if(skiaContent,4,16000) == linear-diagonal-5a.html linear-diagonal-5a.html
+fails fuzzy-if(azureQuartz&&OSX==1006,2,11657) fuzzy-if(skiaContent,8,20000) == linear-diagonal-6a.html linear-diagonal-6a.html
+fails fuzzy-if(skiaContent,8,20000) == linear-diagonal-7a.html linear-diagonal-7a.html
+fails fuzzy-if(azureQuartz&&OSX==1006,2,11443) fuzzy-if(skiaContent,4,16000) == linear-diagonal-8a.html linear-diagonal-8a.html
+
+fails fuzzy-if(cocoaWidget,4,29437) fuzzy-if(skiaContent,2,1700) == linear-diagonal-9a.html linear-diagonal-9a.html
+== linear-flipped-1.html linear-flipped-1.html
+== linear-position-1a.html linear-position-1a.html
+== linear-repeat-1a.html linear-repeat-1a.html
+fails-if(d2d) == linear-repeat-1b.html linear-repeat-1b.html
+# bug 582236
+== linear-repeat-1c.html linear-repeat-1c.html
+fails-if(d2d) == linear-repeat-1d.html linear-repeat-1d.html
+# bug 582236
+== linear-repeat-1e.html linear-repeat-1e.html
+fails-if(d2d) == linear-repeat-1f.html linear-repeat-1f.html
+# bug 582236
+fails-if(d2d) == linear-repeat-1g.html linear-repeat-1g.html
+# bug 582236
+fuzzy-if(skiaContent,1,500) == linear-rotated-1.html linear-rotated-1.html
+fuzzy-if(OSX,1,45000) fuzzy-if(winWidget,1,36000) == linear-size-1a.html linear-size-1a.html
+== linear-stops-1a.html linear-stops-1a.html
+== linear-stops-1b.html linear-stops-1b.html
+== linear-stops-1c.html linear-stops-1c.html
+== linear-stops-1d.html linear-stops-1d.html
+== linear-stops-1e.html linear-stops-1e.html
+== linear-stops-1f.html linear-stops-1f.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,1,22367) == linear-vertical-1a.html linear-vertical-1a.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,1,22367) == linear-vertical-1b.html linear-vertical-1b.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,2,26777) == linear-vertical-1c.html linear-vertical-1c.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,2,26777) == linear-vertical-1d.html linear-vertical-1d.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,1,22367) == linear-vertical-1e.html linear-vertical-1e.html
+== linear-vertical-subpixel-1.html linear-vertical-subpixel-1.html
+== linear-viewport.html linear-viewport.html
+skip fails-if(OSX==1010&&!skiaContent) fuzzy-if(Android,4,248) == linear-zero-length-1a.html linear-zero-length-1a.html
+fails-if(OSX==1010&&!skiaContent) fuzzy-if(Android,4,248) == linear-zero-length-1b.html linear-zero-length-1b.html
+fails-if(OSX==1010&&!skiaContent) fuzzy-if(Android,4,248) == linear-zero-length-1c.html linear-zero-length-1c.html
+== nostops.html nostops.html
+== onestop.html onestop.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,1,5884) fuzzy-if(cocoaWidget,9,87824) fuzzy-if(azureSkiaGL,6,88024) random-if(d2d) fuzzy-if(skiaContent,4,6000) == radial-1a.html radial-1a.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,1,5884) fuzzy-if(cocoaWidget,9,87824) fuzzy-if(azureSkiaGL,6,88024) random-if(d2d) fuzzy-if(skiaContent,4,6000) == radial-1b.html radial-1b.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,1,5884) fuzzy-if(cocoaWidget,9,87824) fuzzy-if(azureSkiaGL,6,88024) random-if(d2d) fuzzy-if(skiaContent,4,6000) == radial-1c.html radial-1c.html
+fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2a.html radial-2a.html
+fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2b.html radial-2b.html
+fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2c.html radial-2c.html
+fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2d.html radial-2d.html
+fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2e.html radial-2e.html
+fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2f.html radial-2f.html
+== radial-position-1a.html radial-position-1a.html
+fails fuzzy-if(cocoaWidget,1,28) fuzzy-if(winWidget,1,18) fuzzy-if(skiaContent,1,50) == radial-position-1b.html radial-position-1b.html
+fuzzy-if(cocoaWidget,4,22317) fuzzy-if(Android,8,771) == radial-shape-closest-corner-1a.html radial-shape-closest-corner-1a.html
+fails fuzzy-if(cocoaWidget,4,22608) fuzzy-if((/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\./.test(http.oscpu))&&d2d,1,336) fuzzy-if(Android,8,787) fuzzy-if(B2G,1,242) fuzzy-if(skiaContent,2,300) == radial-shape-closest-corner-1b.html radial-shape-closest-corner-1b.html
+fuzzy-if(azureQuartz,2,41171) fuzzy-if(Android,8,771) == radial-shape-closest-corner-1c.html radial-shape-closest-corner-1c.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(Android,17,3880) == radial-shape-closest-side-1a.html radial-shape-closest-side-1a.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(Android,17,3880) == radial-shape-closest-side-1b.html radial-shape-closest-side-1b.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(Android,17,3880) == radial-shape-closest-side-1c.html radial-shape-closest-side-1c.html
+fuzzy-if(Android,8,771) == radial-shape-farthest-corner-1a.html radial-shape-farthest-corner-1a.html
+fails-if(gtkWidget&&/x86_64-/.test(xulRuntime.XPCOMABI)) fuzzy(1,1569) fuzzy-if(cocoaWidget,2,41281) fuzzy-if(Android,8,1091) fuzzy-if(skiaContent,2,500) == radial-shape-farthest-corner-1b.html radial-shape-farthest-corner-1b.html
+fuzzy-if(Android,8,771) == radial-shape-farthest-corner-1c.html radial-shape-farthest-corner-1c.html
+fuzzy-if(Android,17,13320) == radial-shape-farthest-side-1a.html radial-shape-farthest-side-1a.html
+fuzzy-if(Android,17,13320) == radial-shape-farthest-side-1b.html radial-shape-farthest-side-1b.html
+fuzzy-if(Android,17,13320) == radial-shape-farthest-side-1c.html radial-shape-farthest-side-1c.html
+== radial-size-1a.html radial-size-1a.html
+== radial-size-1b.html radial-size-1b.html
+fuzzy-if(Android,4,248) == radial-zero-length-1a.html radial-zero-length-1a.html
+fuzzy-if(Android,4,248) == radial-zero-length-1b.html radial-zero-length-1b.html
+fuzzy-if(Android,4,248) == radial-zero-length-1c.html radial-zero-length-1c.html
+fuzzy-if(Android,4,248) == radial-zero-length-1d.html radial-zero-length-1d.html
+fuzzy-if(Android,4,248) == radial-zero-length-1e.html radial-zero-length-1e.html
+fuzzy-if(Android,4,248) == radial-zero-length-1f.html radial-zero-length-1f.html
+fuzzy-if(Android,4,248) == radial-zero-length-1g.html radial-zero-length-1g.html
+fuzzy-if(Android,4,248) == radial-zero-length-1h.html radial-zero-length-1h.html
+fuzzy-if(Android,4,248) == radial-zero-length-1i.html radial-zero-length-1i.html
+fuzzy-if(Android,4,248) == radial-zero-length-1j.html radial-zero-length-1j.html
+== radial-premul.html radial-premul.html
+== repeated-final-stop-1.html repeated-final-stop-1.html
+== repeating-linear-1a.html repeating-linear-1a.html
+== repeating-linear-1b.html repeating-linear-1b.html
+== repeating-linear-2a.html repeating-linear-2a.html
+fuzzy-if(d2d,127,2612) == repeating-radial-1a.html repeating-radial-1a.html
+== repeating-radial-1b.html repeating-radial-1b.html
+fuzzy-if(d2d,127,2612) == repeating-radial-1c.html repeating-radial-1c.html
+== repeating-radial-1d.html repeating-radial-1d.html
+fuzzy-if(d2d,127,2612) == repeating-radial-1e.html repeating-radial-1e.html
+== repeating-radial-1f.html repeating-radial-1f.html
+== repeating-radial-2a.html repeating-radial-2a.html
+== repeating-radial-2b.html repeating-radial-2b.html
+fails fuzzy-if(skiaContent,18,600) == twostops-1a.html twostops-1a.html
+fails fuzzy-if(skiaContent,18,600) == twostops-1b.html twostops-1b.html
+fails fuzzy-if(skiaContent,226,600) == twostops-1c.html twostops-1c.html
+fails fuzzy-if(skiaContent,141,300) == twostops-1d.html twostops-1d.html
+fails fuzzy-if(skiaContent,73,900) == twostops-1e.html twostops-1e.html
+fails fuzzy-if(skiaContent,18,600) == twostops-1f.html twostops-1f.html
+fails fuzzy-if(skiaContent,18,600) == twostops-1g.html twostops-1g.html
+
+# from http://www.xanthir.com/:4bhipd by way of http://a-ja.net/newgrad.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent&&layersGPUAccelerated,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1a.html aja-linear-1a.html
+== aja-linear-1b.html aja-linear-1b.html
+# bug 526694
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1c.html aja-linear-1c.html
+skip fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1d.html aja-linear-1d.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1e.html aja-linear-1e.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1f.html aja-linear-1f.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1g.html aja-linear-1g.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,2,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4667) == aja-linear-2a.html aja-linear-2a.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,20000) fuzzy-if(azureSkiaGL,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4667) == aja-linear-2b.html aja-linear-2b.html
+== aja-linear-2c.html aja-linear-2c.html
+# bug 522607
+fails-if(!d2d&&!(skiaContent&&winWidget)) fuzzy-if(skiaContent&&!winWidget,1,200) == aja-linear-2d.html aja-linear-2d.html
+# bug 526694
+skip fuzzy-if(!contentSameGfxBackendAsCanvas,2,19999) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz,1,10553) == aja-linear-3a.html aja-linear-3a.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,19999) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz,1,10553) == aja-linear-3b.html aja-linear-3b.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,4,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,8655) == aja-linear-4a.html aja-linear-4a.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,4,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,8655) == aja-linear-4b.html aja-linear-4b.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,4,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,2,7878) == aja-linear-5a.html aja-linear-5a.html
+fails fuzzy-if(!contentSameGfxBackendAsCanvas,2,16500) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz,2,10163) == aja-linear-6a.html aja-linear-6a.html
+# bug 526708 
+== aja-linear-6b.html aja-linear-6b.html
+# bug 522607
+skip-if(B2G||Mulet) fuzzy-if(Android,6,10576) == height-dependence-1.html height-dependence-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) fuzzy-if(cocoaWidget,1,40000) fuzzy-if(Android,6,10576) == height-dependence-2.html height-dependence-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) fuzzy-if(Android,6,10576) == height-dependence-3.html height-dependence-3.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+== linear-onestopposition-1.html linear-onestopposition-1.html
+fuzzy-if(d2d,47,400) == linear-onestopposition-1.html linear-onestopposition-1.html
+# d2d interpolates the hard stop
+== radial-onestopposition-1a.html radial-onestopposition-1a.html
+== radial-onestopposition-1b.html radial-onestopposition-1b.html
+== radial-onestopposition-1c.html radial-onestopposition-1c.html
+== repeating-linear-onestopposition-1.html repeating-linear-onestopposition-1.html
+== repeating-radial-onestopposition-1a.html repeating-radial-onestopposition-1a.html
+== repeating-radial-onestopposition-1b.html repeating-radial-onestopposition-1b.html
+== repeating-radial-onestopposition-1c.html repeating-radial-onestopposition-1c.html
+== bug-916535-background-repeat-linear.html bug-916535-background-repeat-linear.html
+== large-gradient-1.html large-gradient-1.html
+fuzzy-if(Android,4,1) == large-gradient-2.html large-gradient-2.html
+# Bug 1182082
+== large-gradient-3.html large-gradient-3.html
+== large-gradient-4.html large-gradient-4.html
+== large-gradient-5.html large-gradient-5.html
+== 1224761-1.html 1224761-1.html
diff --git a/layout/reftests/css-gradients/reftest.list b/layout/reftests/css-gradients/reftest.list
new file mode 100644
index 000000000..a93070752
--- /dev/null
+++ b/layout/reftests/css-gradients/reftest.list
@@ -0,0 +1,154 @@
+fuzzy-if(!contentSameGfxBackendAsCanvas,4,88500) fuzzy-if(azureSkiaGL||skiaContent,4,89700) fuzzy-if(azureQuartz,1,34792) == linear-1a.html linear-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,4,88500) fuzzy-if(azureSkiaGL||skiaContent,4,89700) fuzzy-if(azureQuartz,1,34792) == linear-1b.html linear-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,88500) fuzzy-if(azureSkiaGL,2,89997) fuzzy-if(azureQuartz,1,11469) fuzzy-if(skiaContent,1,16000) == linear-keywords-1a.html linear-keywords-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,88500) fuzzy-if(azureSkiaGL,2,89997) fuzzy-if(azureQuartz,1,11985) fuzzy-if(skiaContent,1,16000) == linear-keywords-1b.html linear-keywords-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,88500) fuzzy-if(azureQuartz,1,10230) fuzzy-if(skiaContent,1,18000) == linear-percent.html linear-percent-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,4,92400) fuzzy-if(azureSkiaGL||skiaContent,3,143400) fuzzy-if(azureQuartz,1,27827) fuzzy-if(Android,4,93000) == linear-mix.html linear-mix-ref.html
+== linear-diagonal-1a.html linear-diagonal-1-ref.html
+== linear-diagonal-1b.html linear-diagonal-1-ref.html
+== linear-diagonal-1c.html linear-diagonal-1-ref.html
+== linear-diagonal-2a.html linear-diagonal-2-ref.html
+== linear-diagonal-2b.html linear-diagonal-2-ref.html
+== linear-diagonal-2c.html linear-diagonal-2-ref.html
+== linear-diagonal-3a.html linear-diagonal-3-ref.html
+== linear-diagonal-3b.html linear-diagonal-3-ref.html
+== linear-diagonal-3c.html linear-diagonal-3-ref.html
+== linear-diagonal-4a.html linear-diagonal-4-ref.html
+== linear-diagonal-4b.html linear-diagonal-4-ref.html
+== linear-diagonal-4c.html linear-diagonal-4-ref.html
+== linear-premul.html linear-premul-ref.html
+
+# these tests uses a similar gradient over different bounds. It's perfectly
+# reasonable to expect implementations to give slightly different results
+# if the gradients are not being normalized. Skia uses a lookup table for
+# gradients so it will have less precision when drawing a larger gradient
+fuzzy(2,11410) fuzzy-if(skiaContent,4,16000) == linear-diagonal-5a.html linear-diagonal-5-ref.html
+fuzzy(2,11568) fuzzy-if(azureQuartz&&OSX==1006,2,11657) fuzzy-if(skiaContent,8,20000) == linear-diagonal-6a.html linear-diagonal-6-ref.html
+fuzzy(2,11605) fuzzy-if(skiaContent,8,20000) == linear-diagonal-7a.html linear-diagonal-7-ref.html
+fuzzy(2,11407) fuzzy-if(azureQuartz&&OSX==1006,2,11443) fuzzy-if(skiaContent,4,16000) == linear-diagonal-8a.html linear-diagonal-8-ref.html
+
+fuzzy-if(cocoaWidget,4,29437) fuzzy-if(skiaContent,2,1700) == linear-diagonal-9a.html linear-diagonal-9-ref.html
+fuzzy(1,800000) == linear-flipped-1.html linear-flipped-1-ref.html
+== linear-position-1a.html linear-position-1-ref.html
+== linear-repeat-1a.html linear-repeat-1-ref.html
+fails-if(d2d) == linear-repeat-1b.html linear-repeat-1-ref.html # bug 582236
+== linear-repeat-1c.html linear-repeat-1-ref.html
+fails-if(d2d) == linear-repeat-1d.html linear-repeat-1-ref.html # bug 582236
+== linear-repeat-1e.html linear-repeat-1-ref.html
+fails-if(d2d) == linear-repeat-1f.html linear-repeat-1-ref.html # bug 582236
+fails-if(d2d) == linear-repeat-1g.html linear-repeat-1-ref.html # bug 582236
+fuzzy-if(skiaContent,1,500) == linear-rotated-1.html linear-rotated-1-ref.html
+fuzzy-if(winWidget,1,36000) fuzzy-if(skiaContent,1,45000) == linear-size-1a.html linear-size-1-ref.html
+== linear-stops-1a.html linear-stops-1-ref.html
+== linear-stops-1b.html linear-stops-1-ref.html
+== linear-stops-1c.html linear-stops-1-ref.html
+== linear-stops-1d.html linear-stops-1-ref.html
+== linear-stops-1e.html linear-stops-1-ref.html
+== linear-stops-1f.html linear-stops-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,1,22367) == linear-vertical-1a.html linear-vertical-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,1,22367) == linear-vertical-1b.html linear-vertical-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,2,26777) == linear-vertical-1c.html linear-vertical-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,2,26777) == linear-vertical-1d.html linear-vertical-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,88500) fuzzy-if(azureSkiaGL||skiaContent,3,89700) fuzzy-if(azureQuartz,1,22367) == linear-vertical-1e.html linear-vertical-1-ref.html
+== linear-vertical-subpixel-1.html linear-vertical-subpixel-1-ref.html
+== linear-viewport.html linear-viewport-ref.html
+fails-if(OSX==1010&&!skiaContent) fuzzy-if(Android,4,248) == linear-zero-length-1a.html linear-zero-length-1-ref.html
+fails-if(OSX==1010&&!skiaContent) fuzzy-if(Android,4,248) == linear-zero-length-1b.html linear-zero-length-1-ref.html
+fails-if(OSX==1010&&!skiaContent) fuzzy-if(Android,4,248) == linear-zero-length-1c.html linear-zero-length-1-ref.html
+== nostops.html about:blank
+== onestop.html about:blank
+fuzzy-if(!contentSameGfxBackendAsCanvas,1,5884) fuzzy-if(cocoaWidget,9,87824) fuzzy-if(azureSkiaGL,6,88024) random-if(d2d) fuzzy-if(skiaContent,4,6000) == radial-1a.html radial-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,1,5884) fuzzy-if(cocoaWidget,9,87824) fuzzy-if(azureSkiaGL,6,88024) random-if(d2d) fuzzy-if(skiaContent,4,6000) == radial-1b.html radial-1-ref.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,1,5884) fuzzy-if(cocoaWidget,9,87824) fuzzy-if(azureSkiaGL,6,88024) random-if(d2d) fuzzy-if(skiaContent,4,6000) == radial-1c.html radial-1-ref.html
+fuzzy(3,7860) fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2a.html radial-2-ref.html
+fuzzy(3,7860) fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2b.html radial-2-ref.html
+fuzzy(3,7860) fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2c.html radial-2-ref.html
+fuzzy(3,7860) fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2d.html radial-2-ref.html
+fuzzy(3,7860) fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2e.html radial-2-ref.html
+fuzzy(3,7860) fuzzy-if(cocoaWidget,5,89041) fuzzy-if(azureSkiaGL,4,90000) == radial-2f.html radial-2-ref.html
+== radial-position-1a.html radial-position-1-ref.html
+fuzzy-if(cocoaWidget,1,28) fuzzy-if(winWidget,1,18) fuzzy-if(skiaContent,1,50) == radial-position-1b.html radial-position-1-ref.html
+fuzzy-if(cocoaWidget,4,22317) fuzzy-if(Android,8,771) == radial-shape-closest-corner-1a.html radial-shape-closest-corner-1-ref.html
+fuzzy(1,238) fuzzy-if(cocoaWidget,4,22608) fuzzy-if((/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\./.test(http.oscpu))&&d2d,1,336) fuzzy-if(Android,8,787) fuzzy-if(skiaContent,2,300) == radial-shape-closest-corner-1b.html radial-shape-closest-corner-1-ref.html
+fuzzy-if(azureQuartz,2,41171) fuzzy-if(Android,8,771) == radial-shape-closest-corner-1c.html radial-shape-closest-corner-1-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(Android,17,3880) == radial-shape-closest-side-1a.html radial-shape-closest-side-1-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(Android,17,3880) == radial-shape-closest-side-1b.html radial-shape-closest-side-1-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),1,5) fuzzy-if(Android,17,3880) == radial-shape-closest-side-1c.html radial-shape-closest-side-1-ref.html
+fuzzy-if(Android,8,771) == radial-shape-farthest-corner-1a.html radial-shape-farthest-corner-1-ref.html
+fails-if(gtkWidget&&/x86_64-/.test(xulRuntime.XPCOMABI)) fuzzy(1,1569) fuzzy-if(cocoaWidget,2,41281) fuzzy-if(Android,8,1091) fuzzy-if(skiaContent,2,500) == radial-shape-farthest-corner-1b.html radial-shape-farthest-corner-1-ref.html
+fuzzy-if(Android,8,771) == radial-shape-farthest-corner-1c.html radial-shape-farthest-corner-1-ref.html
+fuzzy-if(Android,17,13320) == radial-shape-farthest-side-1a.html radial-shape-farthest-side-1-ref.html
+fuzzy-if(Android,17,13320) == radial-shape-farthest-side-1b.html radial-shape-farthest-side-1-ref.html
+fuzzy-if(Android,17,13320) == radial-shape-farthest-side-1c.html radial-shape-farthest-side-1-ref.html
+== radial-size-1a.html radial-size-1-ref.html
+== radial-size-1b.html radial-size-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1a.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1b.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1c.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1d.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1e.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1f.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1g.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1h.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1i.html radial-zero-length-1-ref.html
+fuzzy-if(Android,4,248) == radial-zero-length-1j.html radial-zero-length-1-ref.html
+== radial-premul.html radial-premul-ref.html
+== repeated-final-stop-1.html repeated-final-stop-1-ref.html
+== repeating-linear-1a.html repeating-linear-1-ref.html
+== repeating-linear-1b.html repeating-linear-1-ref.html
+== repeating-linear-2a.html repeating-linear-2-ref.html
+fuzzy-if(d2d,127,2612) == repeating-radial-1a.html repeating-radial-1-ref.html
+== repeating-radial-1b.html repeating-radial-1-ref.html
+fuzzy-if(d2d,127,2612) == repeating-radial-1c.html repeating-radial-1-ref.html
+== repeating-radial-1d.html repeating-radial-1-ref.html
+fuzzy-if(d2d,127,2612) == repeating-radial-1e.html repeating-radial-1-ref.html
+== repeating-radial-1f.html repeating-radial-1-ref.html
+== repeating-radial-2a.html repeating-radial-2-ref.html
+== repeating-radial-2b.html repeating-radial-2-ref.html
+fuzzy-if(skiaContent,18,600) == twostops-1a.html twostops-1-ref.html
+fuzzy-if(skiaContent,18,600) == twostops-1b.html twostops-1-ref.html
+fuzzy-if(skiaContent,226,600) == twostops-1c.html twostops-1-ref.html
+fuzzy-if(skiaContent,141,300) == twostops-1d.html twostops-1-ref.html
+fuzzy-if(skiaContent,73,900) == twostops-1e.html twostops-1-ref.html
+fuzzy-if(skiaContent,18,600) == twostops-1f.html twostops-1-ref.html
+fuzzy-if(skiaContent,18,600) == twostops-1g.html twostops-1-ref.html
+
+# from http://www.xanthir.com/:4bhipd by way of http://a-ja.net/newgrad.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent&&layersGPUAccelerated,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1a.html aja-linear-1-ref.html
+fails-if(!d2d&&!skiaContent) == aja-linear-1b.html aja-linear-1-ref.html # bug 526694
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1c.html aja-linear-1-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1d.html aja-linear-1-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1e.html aja-linear-1-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1f.html aja-linear-1-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,3,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4646) == aja-linear-1g.html aja-linear-1-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4667) == aja-linear-2a.html aja-linear-2-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,4667) == aja-linear-2b.html aja-linear-2-ref.html 
+fails == aja-linear-2c.html aja-linear-2-ref.html # bug 522607
+fails-if(!d2d&&!(skiaContent&&winWidget)) fuzzy-if(skiaContent&&!winWidget,1,200) == aja-linear-2d.html aja-linear-2-ref.html # bug 526694
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,19999) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz,1,10553) == aja-linear-3a.html aja-linear-3-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,19999) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz,1,10553) == aja-linear-3b.html aja-linear-3-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,4,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,8655) == aja-linear-4a.html aja-linear-4-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,4,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,1,8655) == aja-linear-4b.html aja-linear-4-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,4,20000) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz&&OSX==1006,2,7878) == aja-linear-5a.html aja-linear-5-ref.html 
+fuzzy-if(!contentSameGfxBackendAsCanvas,2,16500) fuzzy-if(azureSkiaGL||skiaContent,8,20000) fuzzy-if(azureQuartz,2,10163) == aja-linear-6a.html aja-linear-6-ref.html # bug 526708 
+fails == aja-linear-6b.html aja-linear-6-ref.html # bug 522607
+fuzzy-if(Android,6,10576) == height-dependence-1.html height-dependence-1-ref.html
+fuzzy-if(cocoaWidget,1,40000) fuzzy-if(Android,6,10576) == height-dependence-2.html height-dependence-2-ref.html
+fuzzy-if(Android,6,10576) == height-dependence-3.html height-dependence-3-ref.html
+
+== linear-onestopposition-1.html linear-onestopposition-1-ref.html
+fuzzy-if(d2d,47,400) == linear-onestopposition-1.html linear-onestopposition-1-ref2.html # d2d interpolates the hard stop
+== radial-onestopposition-1a.html radial-onestopposition-1-ref.html
+== radial-onestopposition-1b.html radial-onestopposition-1-ref.html
+== radial-onestopposition-1c.html radial-onestopposition-1-ref.html
+== repeating-linear-onestopposition-1.html orange-square.html
+== repeating-radial-onestopposition-1a.html orange-square.html
+== repeating-radial-onestopposition-1b.html orange-square.html
+== repeating-radial-onestopposition-1c.html orange-square.html
+== bug-916535-background-repeat-linear.html bug-916535-background-repeat-linear-ref.html
+fuzzy(1,800000) == large-gradient-1.html large-gradient-1-ref.html
+fuzzy-if(Android,4,1) == large-gradient-2.html large-gradient-2-ref.html # Bug 1182082
+fuzzy(1,800000) == large-gradient-3.html large-gradient-3-ref.html
+== large-gradient-4.html large-gradient-4-ref.html
+fuzzy(2,800000) == large-gradient-5.html large-gradient-5-ref.html
+== 1224761-1.html 1224761-1-ref.html
diff --git a/layout/reftests/css-gradients/repeated-final-stop-1-ref.html b/layout/reftests/css-gradients/repeated-final-stop-1-ref.html
new file mode 100644
index 000000000..be4f97dd7
--- /dev/null
+++ b/layout/reftests/css-gradients/repeated-final-stop-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+html {
+  background: white;
+}
+div {
+  background: -moz-linear-gradient(left, 0 white, 100% orange);
+  background: linear-gradient(left, 0 white, 100% orange);
+  height: 100px;
+  width: 50%;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/repeated-final-stop-1.html b/layout/reftests/css-gradients/repeated-final-stop-1.html
new file mode 100644
index 000000000..35cc594b6
--- /dev/null
+++ b/layout/reftests/css-gradients/repeated-final-stop-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+html {
+  background: white;
+}
+div {
+  background: -moz-linear-gradient(left, 0 white, 50% orange, 50% white);
+  background: linear-gradient(left, 0 white, 50% orange, 50% white);
+  height: 100px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/repeating-linear-1-ref.html b/layout/reftests/css-gradients/repeating-linear-1-ref.html
new file mode 100644
index 000000000..74f2dcebd
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-1-ref.html
@@ -0,0 +1,8 @@
+<div style="background: black; width: 400px; height: 50px;"></div>
+<div style="background: white; width: 400px; height: 50px;"></div>
+<div style="background: black; width: 400px; height: 50px;"></div>
+<div style="background: white; width: 400px; height: 50px;"></div>
+<div style="background: black; width: 400px; height: 50px;"></div>
+<div style="background: white; width: 400px; height: 50px;"></div>
+<div style="background: black; width: 400px; height: 50px;"></div>
+<div style="background: white; width: 400px; height: 50px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-linear-1a.html b/layout/reftests/css-gradients/repeating-linear-1a.html
new file mode 100644
index 000000000..463554754
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-1a.html
@@ -0,0 +1 @@
+<div style="background: -moz-repeating-linear-gradient(black 0, black 50px, white 50px, white 100px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-linear-1b.html b/layout/reftests/css-gradients/repeating-linear-1b.html
new file mode 100644
index 000000000..1c3488743
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-1b.html
@@ -0,0 +1 @@
+<div style="background: -moz-repeating-linear-gradient(black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-linear-2-ref.html b/layout/reftests/css-gradients/repeating-linear-2-ref.html
new file mode 100644
index 000000000..50dd2d8c2
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-2-ref.html
@@ -0,0 +1 @@
+<div style="width:300px; height:300px; background:blue;"></div>
+\ No newline at end of file
diff --git a/layout/reftests/css-gradients/repeating-linear-2a.html b/layout/reftests/css-gradients/repeating-linear-2a.html
new file mode 100644
index 000000000..130649c9e
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-2a.html
@@ -0,0 +1 @@
+<div style="background: -moz-repeating-linear-gradient(red 20px, blue 20px); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html b/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html
new file mode 100644
index 000000000..47963778f
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for repeating-linear-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: repeating-linear-gradient(to right, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1-ref.html b/layout/reftests/css-gradients/repeating-radial-1-ref.html
new file mode 100644
index 000000000..6064a9eda
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1-ref.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(closest-side, black 0, black 50px, white 50px, white 100px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1a.html b/layout/reftests/css-gradients/repeating-radial-1a.html
new file mode 100644
index 000000000..423789134
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1a.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(closest-side, black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1b.html b/layout/reftests/css-gradients/repeating-radial-1b.html
new file mode 100644
index 000000000..b12365161
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1b.html
@@ -0,0 +1,4 @@
+<!-- Test adjustment of negative stop positions in a repeating radial gradient.
+     We should still get a repeating pattern, i.e., the stops cannot
+     naively be mapped to 0. -->
+<div style="background: repeating-radial-gradient(closest-side, black -100px, black -50px, white -50px, white 0); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1c.html b/layout/reftests/css-gradients/repeating-radial-1c.html
new file mode 100644
index 000000000..c78a4d678
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1c.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(200px 200px at center, black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1d.html b/layout/reftests/css-gradients/repeating-radial-1d.html
new file mode 100644
index 000000000..b91ac6bb3
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1d.html
@@ -0,0 +1,4 @@
+<!-- Test adjustment of negative stop positions in a repeating radial gradient.
+     We should still get a repeating pattern, i.e., the stops cannot
+     naively be mapped to 0. -->
+<div style="background: repeating-radial-gradient(200px 200px at center, black -100px, black -50px, white -50px, white 0); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1e.html b/layout/reftests/css-gradients/repeating-radial-1e.html
new file mode 100644
index 000000000..85546da7c
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1e.html
@@ -0,0 +1 @@
+<div style="background: -moz-repeating-radial-gradient(closest-side, black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1f.html b/layout/reftests/css-gradients/repeating-radial-1f.html
new file mode 100644
index 000000000..30f2d2672
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1f.html
@@ -0,0 +1,4 @@
+<!-- Test adjustment of negative stop positions in a repeating radial gradient.
+     We should still get a repeating pattern, i.e., the stops cannot
+     naively be mapped to 0. -->
+<div style="background: -moz-repeating-radial-gradient(closest-side, black -100px, black -50px, white -50px, white 0); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-2-ref.html b/layout/reftests/css-gradients/repeating-radial-2-ref.html
new file mode 100644
index 000000000..9620cead2
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-2-ref.html
@@ -0,0 +1 @@
+<div style="width:300px; height:300px; background:blue;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-2a.html b/layout/reftests/css-gradients/repeating-radial-2a.html
new file mode 100644
index 000000000..a29371a2b
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-2a.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(red 20px, blue 20px); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-2b.html b/layout/reftests/css-gradients/repeating-radial-2b.html
new file mode 100644
index 000000000..560132bdf
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-2b.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(212.1320343px 212.1320343px at center, red 20px, blue 20px); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html b/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html
new file mode 100644
index 000000000..dcf080a94
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for -moz-repeating-radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: repeating-radial-gradient(closest-side, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html b/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html
new file mode 100644
index 000000000..f301f8688
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for -moz-repeating-radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: repeating-radial-gradient(50% 50% at 50% 50%, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-onestopposition-1c.html b/layout/reftests/css-gradients/repeating-radial-onestopposition-1c.html
new file mode 100644
index 000000000..a9cfb2aaa
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-onestopposition-1c.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for -moz-repeating-radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: -moz-repeating-radial-gradient(contain, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/twostops-1-ref.html b/layout/reftests/css-gradients/twostops-1-ref.html
new file mode 100644
index 000000000..26ab00cf2
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="background:#0000ff; width:300px; height:150px;"></div>
+<div style="background:#ff0000; width:300px; height:150px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/twostops-1a.html b/layout/reftests/css-gradients/twostops-1a.html
new file mode 100644
index 000000000..0ebe8a470
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1a.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(top, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1b.html b/layout/reftests/css-gradients/twostops-1b.html
new file mode 100644
index 000000000..f60ec838f
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1b.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(bottom, #ff0000 50%, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1c.html b/layout/reftests/css-gradients/twostops-1c.html
new file mode 100644
index 000000000..4a02e3d47
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1c.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(yellow -50%, #0000ff 0, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1d.html b/layout/reftests/css-gradients/twostops-1d.html
new file mode 100644
index 000000000..28943a0aa
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1d.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(#0000ff 50%, #ff0000 50%, #ff0000 100%, yellow 150%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1e.html b/layout/reftests/css-gradients/twostops-1e.html
new file mode 100644
index 000000000..dc584500f
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1e.html
@@ -0,0 +1 @@
+<div style="background: -moz-linear-gradient(yellow -50%, #0000ff 0, #0000ff 50%, #ff0000 50%, #ff0000 100%, yellow 150%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1f.html b/layout/reftests/css-gradients/twostops-1f.html
new file mode 100644
index 000000000..8965d6363
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1f.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1g.html b/layout/reftests/css-gradients/twostops-1g.html
new file mode 100644
index 000000000..f6102065b
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1g.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to top, #ff0000 50%, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/css-gradients
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip