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 00000000000..c96ed5e3855
--- /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 00000000000..e9d639699ef
--- /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 00000000000..44f46905059
--- /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 00000000000..bb85c17dd97
--- /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: -moz-linear-gradient(-90deg, 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 00000000000..10a293214c2
--- /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: -moz-linear-gradient(270deg, 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 00000000000..0fa177f8e76
--- /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 00000000000..dd8b4f55ed8
--- /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 00000000000..3de0665cb8f
--- /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 00000000000..5ca11746632
--- /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 00000000000..5b85bf9710b
--- /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 00000000000..388ade074bf
--- /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 00000000000..27b364d716d
--- /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 00000000000..f8fa559736a
--- /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 00000000000..75086eefcc7
--- /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 00000000000..f70bad4bcb2
--- /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: -moz-linear-gradient(-45deg, 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 00000000000..1f33feb5b97
--- /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: -moz-linear-gradient(315deg, 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 00000000000..c26d0204fd7
--- /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 00000000000..5acf602ee83
--- /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 00000000000..c83175162fc
--- /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 00000000000..1a26fd96a17
--- /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 00000000000..9358acb551b
--- /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 00000000000..b23496fa7f4
--- /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 00000000000..ef4a6e52679
--- /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 00000000000..0e05a0e00d8
--- /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/reftest.list b/layout/reftests/css-gradients/reftest.list
index 3a367a7147f..a2dd1ded2ce 100644
--- a/layout/reftests/css-gradients/reftest.list
+++ b/layout/reftests/css-gradients/reftest.list
@@ -65,3 +65,24 @@
 fails == twostops-1c.html twostops-1-ref.html # bug 524173
 == twostops-1d.html twostops-1-ref.html
 fails-if(MOZ_WIDGET_TOOLKIT!="cocoa") == twostops-1e.html twostops-1-ref.html # bug 524173
+
+# from http://www.xanthir.com/:4bhipd by way of http://a-ja.net/newgrad.html
+== aja-linear-1a.html aja-linear-1-ref.html
+fails == aja-linear-1b.html aja-linear-1-ref.html # reversed gradient not pixel perfect (visually OK)
+== aja-linear-1c.html aja-linear-1-ref.html
+== aja-linear-1d.html aja-linear-1-ref.html
+== aja-linear-1e.html aja-linear-1-ref.html
+== aja-linear-1f.html aja-linear-1-ref.html
+== aja-linear-1g.html aja-linear-1-ref.html
+== aja-linear-2a.html aja-linear-2-ref.html
+== aja-linear-2b.html aja-linear-2-ref.html
+fails == aja-linear-2c.html aja-linear-2-ref.html # bug 522607
+fails == aja-linear-2d.html aja-linear-2-ref.html # reversed gradient not pixel perfect (visually OK)
+== aja-linear-3a.html aja-linear-3-ref.html
+== aja-linear-3b.html aja-linear-3-ref.html
+== aja-linear-4a.html aja-linear-4-ref.html
+== aja-linear-4b.html aja-linear-4-ref.html
+== aja-linear-5a.html aja-linear-5-ref.html
+== aja-linear-6a.html aja-linear-6-ref.html
+fails == aja-linear-6b.html aja-linear-6-ref.html # bug 522607
+
