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/border-image
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
169 files changed, 6574 insertions, 0 deletions
diff --git a/layout/reftests/border-image/10x5multicolor.png b/layout/reftests/border-image/10x5multicolor.png
new file mode 100644
index 000000000..7940d1abc
--- /dev/null
+++ b/layout/reftests/border-image/10x5multicolor.png
diff --git a/layout/reftests/border-image/3x3green-1DD813.png b/layout/reftests/border-image/3x3green-1DD813.png
new file mode 100644
index 000000000..bb7a3cf21
--- /dev/null
+++ b/layout/reftests/border-image/3x3green-1DD813.png
diff --git a/layout/reftests/border-image/3x3multicolor.png b/layout/reftests/border-image/3x3multicolor.png
new file mode 100644
index 000000000..586102670
--- /dev/null
+++ b/layout/reftests/border-image/3x3multicolor.png
diff --git a/layout/reftests/border-image/3x3transparent.png b/layout/reftests/border-image/3x3transparent.png
new file mode 100644
index 000000000..6528a9f03
--- /dev/null
+++ b/layout/reftests/border-image/3x3transparent.png
diff --git a/layout/reftests/border-image/470250-1-ref.html b/layout/reftests/border-image/470250-1-ref.html
new file mode 100644
index 000000000..bf1cffcb0
--- /dev/null
+++ b/layout/reftests/border-image/470250-1-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<html><head>
+<title>border-image, only middle part, reference</title>
+</head><body>
+<img src="3x3green-1DD813.png" width="48" height="48">
+</body></html>
diff --git a/layout/reftests/border-image/470250-1.html b/layout/reftests/border-image/470250-1.html
new file mode 100644
index 000000000..32c2eb043
--- /dev/null
+++ b/layout/reftests/border-image/470250-1.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html><head>
+<title>border-image, only middle part, testcase</title>
+<style>
+div {
+  width: 48px;
+  height: 48px;
+  border-width: 0;
+  border-style: solid;
+  border-image: url(3x3green-1DD813.png) 0 fill;
+}
+</style>
+</head><body>
+<div></div>
+</body></html>
diff --git a/layout/reftests/border-image/470250-2-ref.html b/layout/reftests/border-image/470250-2-ref.html
new file mode 100644
index 000000000..df01ba336
--- /dev/null
+++ b/layout/reftests/border-image/470250-2-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<html><head>
+<title>border-image, only middle part, table cell, reference</title>
+</head><body>
+<img src="3x3green-1DD813.png" width="48" height="48">
+</body></html>
diff --git a/layout/reftests/border-image/470250-2.html b/layout/reftests/border-image/470250-2.html
new file mode 100644
index 000000000..dd4d56a18
--- /dev/null
+++ b/layout/reftests/border-image/470250-2.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html class="reftest-wait"><head>
+<title>border-image, only middle part, table cell, testcase</title>
+<style>
+table {
+  width: 48px;
+  height: 48px;
+  border-collapse: separate;
+  border-width: 0;
+  border-style: solid;
+  border-image: url(3x3green-1DD813.png) 0 fill;
+}
+</style>
+</head><body>
+<iframe src="3x3green-1DD813.png" width="48" height="48"></iframe>
+<table>
+</table>
+<script>
+  // This is a wallpaper for bug 688897 until bug 697230 is fixed.
+  // MozReftestInvalidate is called after onload of all frames so it
+  // delays the snapshot until the used border image is loaded.
+  window.addEventListener("MozReftestInvalidate",
+    function() {
+      document.getElementsByTagName("iframe")[0].style.display = "none";
+      document.documentElement.className = "";
+    }, false);
+</script>
+</body></html>
diff --git a/layout/reftests/border-image/4x4multicolor.png b/layout/reftests/border-image/4x4multicolor.png
new file mode 100644
index 000000000..4b817a126
--- /dev/null
+++ b/layout/reftests/border-image/4x4multicolor.png
diff --git a/layout/reftests/border-image/border-image-element-ref.html b/layout/reftests/border-image/border-image-element-ref.html
new file mode 100644
index 000000000..865d706d1
--- /dev/null
+++ b/layout/reftests/border-image/border-image-element-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: element</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: url('diamonds.png');
+  width: 180px;
+  height: 180px;
+}
+div.border2 {
+  border: 30px solid black;
+  border-image: url('diamonds.png');
+  border-image-slice: 5;
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div><br>
+<div class="border2"></div><br>
+<img id="src" src="diamonds.png">
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-element.html b/layout/reftests/border-image/border-image-element.html
new file mode 100644
index 000000000..c9c042970
--- /dev/null
+++ b/layout/reftests/border-image/border-image-element.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: element</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: -moz-element(#src);
+  width: 180px;
+  height: 180px;
+}
+div.border2 {
+  border: 30px solid black;
+  border-image: -moz-element(#src);
+  border-image-slice: 5;
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div><br>
+<div class="border2"></div><br>
+<img id="src" src="diamonds.png">
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-outset-ref.html b/layout/reftests/border-image/border-image-linear-gradient-outset-ref.html
new file mode 100644
index 000000000..8156698c1
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-outset-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-outset</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table style="margin-top: 75px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;">
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+  </tr>
+</table>
+<table style="margin-top: 15px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;">
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -30px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px -30px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: 0px -195px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -30px -195px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 225px; background-position: -210px -195px;"></td>
+  </tr>
+</table>
+<table style="margin-top: 15px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;">
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 562.5px; background-position: -90px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 184.70px; background-position: 0px -9.85px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 184.70px; background-position: -210px -9.85px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: 0px -532.5px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 562.5px; background-position: -90px -532.5px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 562.5px; background-position: -90px -532.5px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-outset.html b/layout/reftests/border-image/border-image-linear-gradient-outset.html
new file mode 100644
index 000000000..b21379f4e
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-outset.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-outset</title>
+<style>
+div {
+  border: 30px solid black;
+  width: 90px;
+  height: 90px;
+  margin: 90px;
+}
+div.border {
+  border-image: linear-gradient(to bottom right, red, blue);
+  border-image-outset: 0.5 1 2 60px;
+}
+div.border30 {
+  border-image: linear-gradient(to bottom right, red, blue);
+  border-image-outset: 0.5 1 2 60px;
+  border-image-slice: 30 30;
+}
+div.border1260 {
+  border-image: linear-gradient(to bottom right, red, blue);
+  border-image-outset: 0.5 1 2 60px;
+  border-image-slice: 12 60;
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+<div class="border30"></div>
+<div class="border1260"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-ref.html b/layout/reftests/border-image/border-image-linear-gradient-ref.html
new file mode 100644
index 000000000..cfe4252bd
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1-ref.html
new file mode 100644
index 000000000..905d757e7
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+  </tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 180.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -210.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -570.0px 0px;"></td>
+</tr>
+<tr style="height: 180.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -0.0px -210.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -570.0px -210.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: 0px -570.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -210.0px -570.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600.0px 600.0px; background-position: -570.0px -570.0px;"></td>
+</tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -30px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -210px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1.html
new file mode 100644
index 000000000..339a1fd3b
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.borderrepeat {
+  border-image-repeat: repeat;
+}
+div.border12repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 12;
+}
+div.border30repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 30;
+}
+</style>
+</head>
+<body>
+<div class="borderrepeat"></div>
+<div class="border12repeat"></div>
+<div class="border30repeat"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2-ref.html
new file mode 100644
index 000000000..e9fd18826
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 60.0px;">
+<col style="width: 120.0px;">
+<col style="width: 60.0px;">
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -180.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
+</tr>
+<tr style="height: 120.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -0.0px -180.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -180.0px -180.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px -180.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -180.0px -420.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
+</tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2.html
new file mode 100644
index 000000000..ee5758967
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.border60repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 60;
+}
+div.border60fillrepeat {
+  border-image-repeat: repeat;
+  border-image-slice: 60 fill;
+}
+div.border30fill2repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 30 fill;
+  border-image-width: 2;
+}
+</style>
+</head>
+<body>
+<div class="border60repeat"></div>
+<div class="border60fillrepeat"></div>
+<div class="border30fill2repeat"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3-ref.html
new file mode 100644
index 000000000..8c9b7af81
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3-ref.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 30.0px;">
+<col style="width: 120.0px;">
+<col style="width: 30.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px 0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -0.0px -120.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -120.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -120.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -120.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -120.0px;"></td>
+</tr>
+<tr style="height: 120.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px -150.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -120.0px -150.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -150.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -30.0px -150.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -150.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 40.0px;">
+<col style="width: 100.0px;">
+<col style="width: 40.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px 0px;"></td>
+</tr>
+<tr style="height: 40.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -0.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -90.0px;"></td>
+</tr>
+<tr style="height: 100.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -30.0px;"></td>
+</tr>
+<tr style="height: 40.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px -130.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -90.0px -130.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -130.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -30.0px -130.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -130.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 36.0px;">
+<col style="width: 36.0px;">
+<col style="width: 36.0px;">
+<col style="width: 36.0px;">
+<col style="width: 36.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px 0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -66.0px;"></td>
+</tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3.html
new file mode 100644
index 000000000..d40b74642
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.border40repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 40 fill;
+}
+div.border45repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 45 fill;
+}
+div.border75repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 75 fill;
+}
+</style>
+</head>
+<body>
+<div class="border40repeat"></div>
+<div class="border45repeat"></div>
+<div class="border75repeat"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1-ref.html
new file mode 100644
index 000000000..64075ff2a
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 30px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: 0px -10px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: -570px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -30px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -210px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html
new file mode 100644
index 000000000..a170eae79
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.borderround {
+  border-image-repeat: round;
+}
+div.border12round {
+  border-image-repeat: round;
+  border-image-slice: 12;
+}
+div.border30round {
+  border-image-repeat: round;
+  border-image-slice: 30;
+}
+</style>
+</head>
+<body>
+<div class="borderround"></div>
+<div class="border12round"></div>
+<div class="border30round"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2-ref.html
new file mode 100644
index 000000000..b4eb129e0
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 60.0px;">
+<col style="width: 120.0px;">
+<col style="width: 60.0px;">
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 480.0px; background-position: -20.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
+</tr>
+<tr style="height: 120.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 160.0px; background-position: -0.0px -20.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -20.0px -20.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 160.0px; background-position: -420.0px -20.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 480.0px; background-position: -20.0px -420.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
+</tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2.html
new file mode 100644
index 000000000..562c3db21
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.border60round {
+  border-image-repeat: round;
+  border-image-slice: 60;
+}
+div.border60fillround {
+  border-image-repeat: round;
+  border-image-slice: 60 fill;
+}
+div.border30fill2round {
+  border-image-repeat: round;
+  border-image-slice: 30 fill;
+  border-image-width: 2;
+}
+</style>
+</head>
+<body>
+<div class="border60round"></div>
+<div class="border60fillround"></div>
+<div class="border30fill2round"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html
new file mode 100644
index 000000000..021e31026
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 90.0px;">
+<col style="width: 90.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px 0px;"></td>
+</tr>
+<tr style="height: 90.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -0.0px -22.5px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -150.0px -22.5px;"></td>
+</tr>
+<tr style="height: 90.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -0.0px -22.5px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 135.0px; background-position: -22.5px -22.5px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 135.0px; background-position: -150.0px -22.5px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: 0px -150.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -150.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 135.0px 180.0px; background-position: -22.5px -150.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 180.0px 180.0px; background-position: -150.0px -150.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 90.0px;">
+<col style="width: 90.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px 0px;"></td>
+</tr>
+<tr style="height: 90.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -0.0px -27.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -130.0px -27.0px;"></td>
+</tr>
+<tr style="height: 90.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -0.0px -27.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 144.0px; background-position: -27.0px -27.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 144.0px; background-position: -130.0px -27.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: 0px -130.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -130.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 144.0px 160.0px; background-position: -27.0px -130.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 160.0px 160.0px; background-position: -130.0px -130.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 36.0px;">
+<col style="width: 36.0px;">
+<col style="width: 36.0px;">
+<col style="width: 36.0px;">
+<col style="width: 36.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px 0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 36.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: 0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -30.0px -66.0px;"></td>
+  <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 96.0px 96.0px; background-position: -66.0px -66.0px;"></td>
+</tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3.html b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3.html
new file mode 100644
index 000000000..925b34f09
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-repeat-round-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.border40round {
+  border-image-repeat: round;
+  border-image-slice: 40 fill;
+}
+div.border45round {
+  border-image-repeat: round;
+  border-image-slice: 45 fill;
+}
+div.border75round {
+  border-image-repeat: round;
+  border-image-slice: 75 fill;
+}
+</style>
+</head>
+<body>
+<div class="border40round"></div>
+<div class="border45round"></div>
+<div class="border75round"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-1-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-1-ref.html
new file mode 100644
index 000000000..a87e62a30
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-1-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: 0px -10px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: -570px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -30px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -210px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 120px; background-position: -90px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 360px; background-position: 0px -90px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 360px; background-position: -90px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 120px; background-position: -90px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: -90px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-1.html b/layout/reftests/border-image/border-image-linear-gradient-slice-1.html
new file mode 100644
index 000000000..8940ea057
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12;
+}
+div.border30 {
+  border-image-slice: 30 30;
+}
+div.border60 {
+  border-image-slice: 60 60;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-2-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-2-ref.html
new file mode 100644
index 000000000..de7874d17
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-2-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 600px; background-position: -90px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 200px; background-position: 0px -10px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 200px; background-position: -210px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 600px; background-position: -90px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: -90px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 120px; background-position: -10px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 360px; background-position: 0px -90px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 360px; background-position: -570px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 120px; background-position: -10px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: -570px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-2.html b/layout/reftests/border-image/border-image-linear-gradient-slice-2.html
new file mode 100644
index 000000000..601e0e324
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.border1260 {
+  border-image-slice: 12 60;
+}
+div.border6012 {
+  border-image-slice: 60 12;
+}
+</style>
+</head>
+<body>
+<div class="border1260"></div>
+<div class="border6012"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1-ref.html
new file mode 100644
index 000000000..1ab89e535
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: 0px -10px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 200px; background-position: -10px -10px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 200px; background-position: -570px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 600px; background-position: -10px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 600px; background-position: -570px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -30px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -30px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: 0px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -30px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 240px; background-position: -210px -210px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 120px; background-position: -90px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 360px; background-position: 0px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 360px; background-position: -90px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 360px; background-position: -210px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 120px; background-position: -90px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 120px; background-position: -90px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1.html b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1.html
new file mode 100644
index 000000000..7ace7074c
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12 fill;
+}
+div.border30 {
+  border-image-slice: 30 30 fill;
+}
+div.border60 {
+  border-image-slice: 60 60 fill;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2-ref.html
new file mode 100644
index 000000000..fbbf8d6df
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 600px; background-position: -90px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 200px; background-position: 0px -10px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 200px; background-position: -90px -10px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 200px; background-position: -210px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 600px; background-position: -90px -570px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 600px; background-position: -90px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 120px; background-position: -10px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 360px; background-position: 0px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 360px; background-position: -10px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 360px; background-position: -570px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 200px 120px; background-position: -10px -210px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 120px; background-position: -570px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2.html b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2.html
new file mode 100644
index 000000000..e97e5e146
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-fill-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+div.border1260 {
+  border-image-slice: 12 60 fill;
+}
+div.border6012 {
+  border-image-slice: 60 12 fill;
+}
+</style>
+</head>
+<body>
+<div class="border1260"></div>
+<div class="border6012"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-width-ref.html b/layout/reftests/border-image/border-image-linear-gradient-slice-width-ref.html
new file mode 100644
index 000000000..db4a91385
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-width-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice and border-image-width</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 1800px 300px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 133.33px 300px; background-position: -6.67px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 300px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 1800px 183.33px; background-position: 0px -9.17px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 183.33px; background-position: -570px -9.17px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 1800px 1200px; background-position: 0px -1140px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 133.33px 1200px; background-position: -6.67px -1140px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 600px 1200px; background-position: -570px -1140px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:720px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:160px 120px; background-position: -20px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 120px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:720px 220px; background-position: 0px -27.5px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 220px; background-position: -210px -27.5px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:720px 480px; background-position: 0px -420px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:160px 480px; background-position: -20px -420px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:240px 480px; background-position: -210px -420px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 60px; background-position: 0px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 240px 60px; background-position: -60px 0px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 60px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 330px; background-position: 0px -82.5px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 330px; background-position: -90px -82.5px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 360px 240px; background-position: 0px -180px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 240px 240px; background-position: -60px -180px;"></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size: 120px 240px; background-position: -90px -180px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-slice-width.html b/layout/reftests/border-image/border-image-linear-gradient-slice-width.html
new file mode 100644
index 000000000..266e6a105
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-slice-width.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice and border-image-width</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  border-image-width: 0.5 1 2 3;
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12;
+}
+div.border30 {
+  border-image-slice: 30 30;
+}
+div.border60 {
+  border-image-slice: 60 60;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-width-ref.html b/layout/reftests/border-image/border-image-linear-gradient-width-ref.html
new file mode 100644
index 000000000..dfa38d967
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-width-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-width</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:90px 15px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 15px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:90px 60px;"></td>
+    <td></td>
+    <td style="background-image: linear-gradient(to bottom right, red, blue); background-size:30px 60px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient-width.html b/layout/reftests/border-image/border-image-linear-gradient-width.html
new file mode 100644
index 000000000..8be90efaa
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient-width.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-width</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  border-image-width: 0.5 1 2 3;
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-linear-gradient.html b/layout/reftests/border-image/border-image-linear-gradient.html
new file mode 100644
index 000000000..eb081e186
--- /dev/null
+++ b/layout/reftests/border-image/border-image-linear-gradient.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: linear-gradient(to bottom right, red, blue);
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-nofill-1-ref.html b/layout/reftests/border-image/border-image-nofill-1-ref.html
new file mode 100644
index 000000000..61608e327
--- /dev/null
+++ b/layout/reftests/border-image/border-image-nofill-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-slice without fill reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+
+  </style>
+</head>
+<body>
+<table>
+  <col style="width: 7px">
+  <col style="width: 100px">
+  <col style="width: 7px">
+
+  <tr style="height: 7px">
+    <td style="background: #87f0b4"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #c98bb7"></td>
+  </tr>
+  <tr style="height: 5px">
+    <td style="background: #90a213"></td>
+    <td></td>
+    <td style="background: #90c157"></td>
+  </tr>
+  <tr style="height: 7px">
+    <td style="background: #9d57c1"></td>
+    <td style="background: #3a8e20"></td>
+    <td style="background: #0e6f6c"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-nofill-1.html b/layout/reftests/border-image/border-image-nofill-1.html
new file mode 100644
index 000000000..0184adff0
--- /dev/null
+++ b/layout/reftests/border-image/border-image-nofill-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image-slice without fill</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    border-width: 7px;
+    border-style: solid;
+    border-image: url('3x3multicolor.png') 1 1 1 1;
+  }
+
+  </style>
+</head>
+<body>
+<div style="width: 100px; height: 5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-outset-1-ref.html b/layout/reftests/border-image/border-image-outset-1-ref.html
new file mode 100644
index 000000000..586fe9620
--- /dev/null
+++ b/layout/reftests/border-image/border-image-outset-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-outset: 1em reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+<div style="border: solid #1DD813 1em; margin: 1em;">
+<div style="padding: 1em;">
+border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
+</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-outset-1a.html b/layout/reftests/border-image/border-image-outset-1a.html
new file mode 100644
index 000000000..51e7e7f50
--- /dev/null
+++ b/layout/reftests/border-image/border-image-outset-1a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>-moz-border-outset-width: 1em</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    margin: 2em;
+    border-width: 1em;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1 / / 1em;
+  }
+  </style>
+</head>
+<body>
+<div>
+border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-outset-1b.html b/layout/reftests/border-image/border-image-outset-1b.html
new file mode 100644
index 000000000..9a84c3777
--- /dev/null
+++ b/layout/reftests/border-image/border-image-outset-1b.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>-moz-border-outset-width: 1em</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    margin: 2em;
+    border-width: 1em;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    border-image-outset: 1em;
+  }
+  </style>
+</head>
+<body>
+<div>
+border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-outset-1c.html b/layout/reftests/border-image/border-image-outset-1c.html
new file mode 100644
index 000000000..e431d6eb7
--- /dev/null
+++ b/layout/reftests/border-image/border-image-outset-1c.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>-moz-border-outset-width: 1em</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    margin: 2em;
+    border-width: 1em;
+    border-style: solid;
+    border-image: 1 1 1 1 / / 1em url('3x3green-1DD813.png');
+  }
+  </style>
+</head>
+<body>
+<div>
+border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-outset-move-1-ref.html b/layout/reftests/border-image/border-image-outset-move-1-ref.html
new file mode 100644
index 000000000..7cc063f12
--- /dev/null
+++ b/layout/reftests/border-image/border-image-outset-move-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-outset move reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+<div style="width: 100px; border: solid #1DD813 10px; margin: 10px;">
+<div style="padding: 10px;">
+Hello World!
+</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-outset-move-1.html b/layout/reftests/border-image/border-image-outset-move-1.html
new file mode 100644
index 000000000..0c8ade807
--- /dev/null
+++ b/layout/reftests/border-image/border-image-outset-move-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait" lang="en-US">
+<head>
+  <title>-moz-border-outset move</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    margin: 20px;
+    border-width: 10px;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    border-image-outset: 10px;
+  }
+  </style>
+</head>
+<body>
+<div id="container" style="width: 80px; margin-left: 60px;">
+Hello World!
+</div>
+<script type="text/javascript">
+// The purpose of this test is to move the border and ensure that the
+// overflow area caused by border-image-outset is redrawn.
+setTimeout(function() {
+    document.getElementById("container").style.marginLeft = "20px";
+    document.documentElement.className = "";
+  }, 100);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-outset-resize-1-ref.html b/layout/reftests/border-image/border-image-outset-resize-1-ref.html
new file mode 100644
index 000000000..1c310c023
--- /dev/null
+++ b/layout/reftests/border-image/border-image-outset-resize-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-outset resize reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+<div style="width: 100px; border: solid #1DD813 10px; margin: 10px;">
+<div style="padding: 10px;">
+Hello World!
+</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-outset-resize-1.html b/layout/reftests/border-image/border-image-outset-resize-1.html
new file mode 100644
index 000000000..284b0d01d
--- /dev/null
+++ b/layout/reftests/border-image/border-image-outset-resize-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait" lang="en-US">
+<head>
+  <title>-moz-border-outset resize</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    margin: 20px;
+    border-width: 10px;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    border-image-outset: 10px;
+  }
+  </style>
+</head>
+<body>
+<div id="container" style="width: 180px;">
+Hello World!
+</div>
+<script type="text/javascript">
+// The purpose of this test is to resize the border and ensure that the
+// overflow area caused by border-image-outset is redrawn.
+setTimeout(function() {
+    document.getElementById("container").style.width = "80px";
+    document.documentElement.className = "";
+  }, 100);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-ref.html b/layout/reftests/border-image/border-image-radial-gradient-ref.html
new file mode 100644
index 000000000..b36074fba
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 30px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 30px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-1-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-1-ref.html
new file mode 100644
index 000000000..64029d664
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-1-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 600px; background-position: -10px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 200px; background-position: 0px -10px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 200px; background-position: -570px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 600px; background-position: -10px -570px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: -570px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px -30px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px -210px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px -210px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px -210px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 120px; background-position: -90px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 360px; background-position: 0px -90px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 360px; background-position: -210px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 120px; background-position: -90px -210px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: -90px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-1.html b/layout/reftests/border-image/border-image-radial-gradient-slice-1.html
new file mode 100644
index 000000000..88f60e8d3
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12;
+}
+div.border30 {
+  border-image-slice: 30 30;
+}
+div.border60 {
+  border-image-slice: 60 60;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-2-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-2-ref.html
new file mode 100644
index 000000000..720221b50
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-2-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 600px; background-position: -90px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 200px; background-position: 0px -10px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 200px; background-position: -210px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 600px; background-position: -90px -570px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: -90px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 120px; background-position: -10px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 360px; background-position: 0px -90px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 360px; background-position: -570px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 120px; background-position: -10px -210px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: -570px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-2.html b/layout/reftests/border-image/border-image-radial-gradient-slice-2.html
new file mode 100644
index 000000000..952cd10de
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
+  width: 180px;
+  height: 180px;
+}
+div.border1260 {
+  border-image-slice: 12 60;
+}
+div.border6012 {
+  border-image-slice: 60 12;
+}
+</style>
+</head>
+<body>
+<div class="border1260"></div>
+<div class="border6012"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1-ref.html
new file mode 100644
index 000000000..59068a8cd
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 600px; background-position: -10px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 200px; background-position: 0px -10px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 200px; background-position: -10px -10px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 200px; background-position: -570px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 600px; background-position: -10px -570px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 600px; background-position: -570px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px -30px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px -30px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: 0px -210px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -30px -210px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 240px; background-position: -210px -210px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 120px; background-position: -90px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 360px; background-position: 0px -90px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 360px; background-position: -90px -90px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 360px; background-position: -210px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 120px; background-position: -90px -210px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 120px; background-position: -90px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1.html b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1.html
new file mode 100644
index 000000000..8a0a42c01
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12 fill;
+}
+div.border30 {
+  border-image-slice: 30 30 fill;
+}
+div.border60 {
+  border-image-slice: 60 60 fill;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2-ref.html
new file mode 100644
index 000000000..aaff661e7
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 600px; background-position: -90px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 200px; background-position: 0px -10px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 200px; background-position: -90px -10px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 200px; background-position: -210px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 600px; background-position: -90px -570px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 600px; background-position: -90px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 120px; background-position: -10px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 360px; background-position: 0px -90px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 360px; background-position: -10px -90px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 360px; background-position: -570px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 200px 120px; background-position: -10px -210px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 120px; background-position: -570px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2.html b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2.html
new file mode 100644
index 000000000..65461db8a
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-fill-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
+  width: 180px;
+  height: 180px;
+}
+div.border1260 {
+  border-image-slice: 12 60 fill;
+}
+div.border6012 {
+  border-image-slice: 60 12 fill;
+}
+</style>
+</head>
+<body>
+<div class="border1260"></div>
+<div class="border6012"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-width-ref.html b/layout/reftests/border-image/border-image-radial-gradient-slice-width-ref.html
new file mode 100644
index 000000000..d59e19f42
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-width-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and border-image-width</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 1800px 300px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 133.33px 300px; background-position: -6.67px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 300px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 1800px 183.33px; background-position: 0px -9.17px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 183.33px; background-position: -570px -9.17px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 1800px 1200px; background-position: 0px -1140px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 133.33px 1200px; background-position: -6.67px -1140px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 600px 1200px; background-position: -570px -1140px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:720px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:160px 120px; background-position: -20px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 120px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:720px 220px; background-position: 0px -27.5px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 220px; background-position: -210px -27.5px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:720px 480px; background-position: 0px -420px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:160px 480px; background-position: -20px -420px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:240px 480px; background-position: -210px -420px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 60px; background-position: 0px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 240px 60px; background-position: -60px 0px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 60px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 330px; background-position: 0px -82.5px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 330px; background-position: -90px -82.5px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 360px 240px; background-position: 0px -180px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 240px 240px; background-position: -60px -180px;"></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size: 120px 240px; background-position: -90px -180px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-slice-width.html b/layout/reftests/border-image/border-image-radial-gradient-slice-width.html
new file mode 100644
index 000000000..91803a627
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-slice-width.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and border-image-width</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
+  border-image-width: 0.5 1 2 3;
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12;
+}
+div.border30 {
+  border-image-slice: 30 30;
+}
+div.border60 {
+  border-image-slice: 60 60;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-width-ref.html b/layout/reftests/border-image/border-image-radial-gradient-width-ref.html
new file mode 100644
index 000000000..9c8e6e335
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-width-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-width</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:90px 15px;"></td>
+    <td></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 15px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:90px 60px;"></td>
+    <td></td>
+    <td style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%); background-size:30px 60px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient-width.html b/layout/reftests/border-image/border-image-radial-gradient-width.html
new file mode 100644
index 000000000..298211cb6
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient-width.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-width</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
+  border-image-width: 0.5 1 2 3;
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-radial-gradient.html b/layout/reftests/border-image/border-image-radial-gradient.html
new file mode 100644
index 000000000..8a93acedd
--- /dev/null
+++ b/layout/reftests/border-image/border-image-radial-gradient.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: radial-gradient(ellipse 100% 50% at 50% 50%, blue 0%, red 100%);
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-ref.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-ref.html
new file mode 100644
index 000000000..1edafefe6
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size:30px 30px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2-ref.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2-ref.html
new file mode 100644
index 000000000..48fcf7e10
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 60.0px;">
+<col style="width: 120.0px;">
+<col style="width: 60.0px;">
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 480.0px; background-position: -20.0px -0.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
+</tr>
+<tr style="height: 120.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 160.0px; background-position: -0.0px -20.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 160.0px; background-position: -20.0px -20.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 160.0px; background-position: -420.0px -20.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 160.0px 480.0px; background-position: -20.0px -420.0px;"></td>
+  <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
+</tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2.html
new file mode 100644
index 000000000..dfac15059
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%);
+  width: 180px;
+  height: 180px;
+}
+div.border60round {
+  border-image-repeat: round;
+  border-image-slice: 60;
+}
+div.border60fillround {
+  border-image-repeat: round;
+  border-image-slice: 60 fill;
+}
+div.border30fill2round {
+  border-image-repeat: round;
+  border-image-slice: 30 fill;
+  border-image-width: 2;
+}
+</style>
+</head>
+<body>
+<div class="border60round"></div>
+<div class="border60fillround"></div>
+<div class="border30fill2round"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2-ref.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2-ref.html
new file mode 100644
index 000000000..7735c4411
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 360px 600px; background-position: -90px 0px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 600px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 200px; background-position: 0px -10px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 360px 200px; background-position: -90px -10px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 200px; background-position: -210px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 360px 600px; background-position: -90px -570px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 120px 600px; background-position: -90px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 200px 120px; background-position: -10px 0px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 120px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 360px; background-position: 0px -90px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 200px 360px; background-position: -10px -90px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 360px; background-position: -570px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 200px 120px; background-position: -10px -210px;"></td>
+    <td style="background-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%); background-size: 600px 120px; background-position: -570px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2.html b/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2.html
new file mode 100644
index 000000000..b3d479106
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-slice and fill</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%);
+  width: 180px;
+  height: 180px;
+}
+div.border1260 {
+  border-image-slice: 12 60 fill;
+}
+div.border6012 {
+  border-image-slice: 60 12 fill;
+}
+</style>
+</head>
+<body>
+<div class="border1260"></div>
+<div class="border6012"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-linear-gradient.html b/layout/reftests/border-image/border-image-repeating-linear-gradient.html
new file mode 100644
index 000000000..5c4d073f0
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-linear-gradient.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: repeating-linear-gradient(to bottom right, red, blue 10%, red 20%);
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-ref.html
new file mode 100644
index 000000000..eb4c61480
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td>
+    <td></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 30px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2-ref.html
new file mode 100644
index 000000000..8ddeffa62
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 60.0px;">
+<col style="width: 120.0px;">
+<col style="width: 60.0px;">
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -180.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
+</tr>
+<tr style="height: 120.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -0.0px -180.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -180.0px -180.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px -180.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -180.0px -420.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
+</tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.html
new file mode 100644
index 000000000..249679b22
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  width: 180px;
+  height: 180px;
+}
+div.border60repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 60;
+}
+div.border60fillrepeat {
+  border-image-repeat: repeat;
+  border-image-slice: 60 fill;
+}
+div.border30fill2repeat {
+  border-image-repeat: repeat;
+  border-image-slice: 30 fill;
+  border-image-width: 2;
+}
+</style>
+</head>
+<body>
+<div class="border60repeat"></div>
+<div class="border60fillrepeat"></div>
+<div class="border30fill2repeat"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2-ref.html
new file mode 100644
index 000000000..f66c2b87c
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: white;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 30.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 60.0px;">
+<col style="width: 30.0px;">
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px 0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -0.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -30.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -30.0px;"></td>
+</tr>
+<tr style="height: 30.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: 0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -30.0px -90.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120.0px 120.0px; background-position: -90.0px -90.0px;"></td>
+</tr>
+</table>
+<table>
+<col style="width: 60.0px;">
+<col style="width: 120.0px;">
+<col style="width: 60.0px;">
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: 0px 0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 160.0px 480.0px; background-position: -20.0px -0.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px 0px;"></td>
+</tr>
+<tr style="height: 120.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 160.0px; background-position: -0.0px -20.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 160.0px 160.0px; background-position: -20.0px -20.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 160.0px; background-position: -420.0px -20.0px;"></td>
+</tr>
+<tr style="height: 60.0px;">
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: 0px -420.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 160.0px 480.0px; background-position: -20.0px -420.0px;"></td>
+  <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 480.0px 480.0px; background-position: -420.0px -420.0px;"></td>
+</tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2.html
new file mode 100644
index 000000000..3305416ce
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: linear-gradient with border-image-repeat</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  width: 180px;
+  height: 180px;
+}
+div.border60round {
+  border-image-repeat: round;
+  border-image-slice: 60;
+}
+div.border60fillround {
+  border-image-repeat: round;
+  border-image-slice: 60 fill;
+}
+div.border30fill2round {
+  border-image-repeat: round;
+  border-image-slice: 30 fill;
+  border-image-width: 2;
+}
+</style>
+</head>
+<body>
+<div class="border60round"></div>
+<div class="border60fillround"></div>
+<div class="border30fill2round"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1-ref.html
new file mode 100644
index 000000000..6c64ba43c
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: 0px -10px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: -570px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px -570px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -30px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -210px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px -210px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -210px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: 0px -90px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: -210px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px -210px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1.html
new file mode 100644
index 000000000..e82c3aa6f
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12;
+}
+div.border30 {
+  border-image-slice: 30 30;
+}
+div.border60 {
+  border-image-slice: 60 60;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2-ref.html
new file mode 100644
index 000000000..c38efac8b
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 600px; background-position: -90px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 200px; background-position: 0px -10px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 200px; background-position: -210px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 600px; background-position: -90px -570px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: -90px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 120px; background-position: -10px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 360px; background-position: 0px -90px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 360px; background-position: -570px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 120px; background-position: -10px -210px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: -570px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2.html
new file mode 100644
index 000000000..e4d31c78b
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  width: 180px;
+  height: 180px;
+}
+div.border1260 {
+  border-image-slice: 12 60;
+}
+div.border6012 {
+  border-image-slice: 60 12;
+}
+</style>
+</head>
+<body>
+<div class="border1260"></div>
+<div class="border6012"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1-ref.html
new file mode 100644
index 000000000..6d63b7300
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: 0px -10px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 200px; background-position: -10px -10px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 200px; background-position: -570px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 600px; background-position: -10px -570px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 600px; background-position: -570px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -30px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px -30px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -30px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: 0px -210px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -30px -210px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 240px; background-position: -210px -210px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: 0px -90px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 360px; background-position: -90px -90px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 360px; background-position: -210px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 120px; background-position: -90px -210px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 120px; background-position: -90px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1.html
new file mode 100644
index 000000000..76c396cb0
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12 fill;
+}
+div.border30 {
+  border-image-slice: 30 30 fill;
+}
+div.border60 {
+  border-image-slice: 60 60 fill;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2-ref.html
new file mode 100644
index 000000000..26a4b30f9
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 600px; background-position: -90px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 200px; background-position: 0px -10px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 200px; background-position: -90px -10px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 200px; background-position: -210px -10px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: 0px -570px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 600px; background-position: -90px -570px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 600px; background-position: -90px -570px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 30px">
+  <col style="width: 180px">
+  <col style="width: 30px">
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 120px; background-position: -10px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 180px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 360px; background-position: 0px -90px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 360px; background-position: -10px -90px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 360px; background-position: -570px -90px;"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: 0px -90px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 200px 120px; background-position: -10px -210px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 120px; background-position: -570px -90px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2.html
new file mode 100644
index 000000000..ce707ea93
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and fill</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  width: 180px;
+  height: 180px;
+}
+div.border1260 {
+  border-image-slice: 12 60 fill;
+}
+div.border6012 {
+  border-image-slice: 60 12 fill;
+}
+</style>
+</head>
+<body>
+<div class="border1260"></div>
+<div class="border6012"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width-ref.html
new file mode 100644
index 000000000..308621c69
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and border-image-width</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 1800px 300px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 133.33px 300px; background-position: -6.67px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 300px; background-position: -570px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 1800px 183.33px; background-position: 0px -9.17px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 183.33px; background-position: -570px -9.17px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 1800px 1200px; background-position: 0px -1140px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 133.33px 1200px; background-position: -6.67px -1140px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 600px 1200px; background-position: -570px -1140px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:720px 120px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:160px 120px; background-position: -20px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 120px; background-position: -210px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:720px 220px; background-position: 0px -27.5px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 220px; background-position: -210px -27.5px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:720px 480px; background-position: 0px -420px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:160px 480px; background-position: -20px -420px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:240px 480px; background-position: -210px -420px;"></td>
+  </tr>
+</table>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 60px; background-position: 0px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 240px 60px; background-position: -60px 0px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 60px; background-position: -90px 0px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 330px; background-position: 0px -82.5px;"></td>
+    <td style="background: white"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 330px; background-position: -90px -82.5px;"></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 360px 240px; background-position: 0px -180px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 240px 240px; background-position: -60px -180px;"></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size: 120px 240px; background-position: -90px -180px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width.html
new file mode 100644
index 000000000..508d95e29
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-slice and border-image-width</title>
+<style>
+div {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  border-image-width: 0.5 1 2 3;
+  width: 180px;
+  height: 180px;
+}
+div.border12 {
+  border-image-slice: 12 12;
+}
+div.border30 {
+  border-image-slice: 30 30;
+}
+div.border60 {
+  border-image-slice: 60 60;
+}
+</style>
+</head>
+<body>
+<div class="border12"></div>
+<div class="border30"></div>
+<div class="border60"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-width-ref.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-width-ref.html
new file mode 100644
index 000000000..3b977f454
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-width-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-width</title>
+<style>
+table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+td { padding: 0; }
+</style>
+</head>
+<body>
+<table>
+  <col style="width: 90px">
+  <col style="width: 120px">
+  <col style="width: 30px">
+  <tr style="height: 15px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:90px 15px;"></td>
+    <td></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 15px;"></td>
+  </tr>
+  <tr style="height: 165px">
+    <td></td>
+    <td style="background: white"></td>
+    <td></td>
+  </tr>
+  <tr style="height: 60px">
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:90px 60px;"></td>
+    <td></td>
+    <td style="background-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%); background-size:30px 60px;"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient-width.html b/layout/reftests/border-image/border-image-repeating-radial-gradient-width.html
new file mode 100644
index 000000000..df766ffa5
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient-width.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient with border-image-width</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  border-image-width: 0.5 1 2 3;
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-repeating-radial-gradient.html b/layout/reftests/border-image/border-image-repeating-radial-gradient.html
new file mode 100644
index 000000000..667300028
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeating-radial-gradient.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of border-image-source: radial-gradient</title>
+<style>
+div.border {
+  border: 30px solid black;
+  border-image: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
+  width: 180px;
+  height: 180px;
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-style-none-auto-ref.html b/layout/reftests/border-image/border-image-style-none-auto-ref.html
new file mode 100644
index 000000000..0404acf81
--- /dev/null
+++ b/layout/reftests/border-image/border-image-style-none-auto-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-width: auto with border-bottom: none reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+
+  </style>
+</head>
+<body>
+<table>
+  <col style="width: 1px">
+  <col style="width: 112px"> <!-- 100px + 7px + 7px - 1px - 1px -->
+  <col style="width: 1px">
+
+  <tr style="height: 1px">
+    <td style="background: #87f0b4"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #c98bb7"></td>
+  </tr>
+  <tr style="height: 10px"> <!-- 5px + 7px - 1px - 1px -->
+    <td style="background: #90a213"></td>
+    <td></td>
+    <td style="background: #90c157"></td>
+  </tr>
+  <tr style="height: 1px">
+    <td style="background: #9d57c1"></td>
+    <td style="background: #3a8e20"></td>
+    <td style="background: #0e6f6c"></td>
+  </tr>
+</table>
+</body>
+</html>
+<!DOCTYPE html>
diff --git a/layout/reftests/border-image/border-image-style-none-auto.html b/layout/reftests/border-image/border-image-style-none-auto.html
new file mode 100644
index 000000000..d8e084faf
--- /dev/null
+++ b/layout/reftests/border-image/border-image-style-none-auto.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image-width: auto with border-bottom: none</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    border-width: 7px;
+    border-style: solid;
+    border-bottom: none;
+    border-image: url('3x3multicolor.png') 1 1 1 1 / auto;
+  }
+
+  </style>
+</head>
+<body>
+<div style="width: 100px; height: 5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-style-none-length-ref.html b/layout/reftests/border-image/border-image-style-none-length-ref.html
new file mode 100644
index 000000000..9ba599d32
--- /dev/null
+++ b/layout/reftests/border-image/border-image-style-none-length-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-width: length with border-bottom: none reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+
+  </style>
+</head>
+<body>
+<table>
+  <col style="width: 7px">
+  <col style="width: 92px"> <!-- 100px + 3px + 3px - 7px - 7px -->
+  <col style="width: 7px">
+
+  <tr style="height: 7px">
+    <td style="background: #87f0b4"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #c98bb7"></td>
+  </tr>
+  <tr style="height: 9px"> <!-- 20px + 3px - 7px - 7px -->
+    <td style="background: #90a213"></td>
+    <td></td>
+    <td style="background: #90c157"></td>
+  </tr>
+  <tr style="height: 7px">
+    <td style="background: #9d57c1"></td>
+    <td style="background: #3a8e20"></td>
+    <td style="background: #0e6f6c"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-style-none-length.html b/layout/reftests/border-image/border-image-style-none-length.html
new file mode 100644
index 000000000..04e965953
--- /dev/null
+++ b/layout/reftests/border-image/border-image-style-none-length.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image-width: length with border-bottom: none</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    border-width: 3px;
+    border-style: solid;
+    border-bottom: none;
+    border-image: url('3x3multicolor.png') 1 1 1 1 / 7px;
+  }
+
+  </style>
+</head>
+<body>
+<div style="width: 100px; height: 20px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-style-none-ref.html b/layout/reftests/border-image/border-image-style-none-ref.html
new file mode 100644
index 000000000..de366e3fd
--- /dev/null
+++ b/layout/reftests/border-image/border-image-style-none-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image with border-bottom: none reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+
+  </style>
+</head>
+<body>
+<table>
+  <col style="width: 7px">
+  <col style="width: 100px">
+  <col style="width: 7px">
+
+  <tr style="height: 7px">
+    <td style="background: #87f0b4"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #c98bb7"></td>
+  </tr>
+  <tr style="height: 5px">
+    <td style="background: #90a213"></td>
+    <td></td>
+    <td style="background: #90c157"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-style-none.html b/layout/reftests/border-image/border-image-style-none.html
new file mode 100644
index 000000000..386857930
--- /dev/null
+++ b/layout/reftests/border-image/border-image-style-none.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image with border-bottom: none</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    border-width: 7px;
+    border-style: solid;
+    border-bottom: none;
+    border-image: url('3x3multicolor.png') 1 1 1 1 / 1;
+  }
+
+  </style>
+</head>
+<body>
+<div style="width: 100px; height: 5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-width-1-ref.html b/layout/reftests/border-image/border-image-width-1-ref.html
new file mode 100644
index 000000000..8f0497446
--- /dev/null
+++ b/layout/reftests/border-image/border-image-width-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-width: 1em reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+<div style="border: solid #1DD813 2em">
+<div style="margin: -1em;">
+border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
+</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-width-1a.html b/layout/reftests/border-image/border-image-width-1a.html
new file mode 100644
index 000000000..2c6c443de
--- /dev/null
+++ b/layout/reftests/border-image/border-image-width-1a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-width: 2em</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    border-width: 1em;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1 / 2em;
+  }
+  </style>
+</head>
+<body>
+<div>
+border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-width-1b.html b/layout/reftests/border-image/border-image-width-1b.html
new file mode 100644
index 000000000..d8f643158
--- /dev/null
+++ b/layout/reftests/border-image/border-image-width-1b.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-width: 2</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    border-width: 1em;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1 / 2;
+  }
+  </style>
+</head>
+<body>
+<div>
+border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-width-1c.html b/layout/reftests/border-image/border-image-width-1c.html
new file mode 100644
index 000000000..321a3c6fd
--- /dev/null
+++ b/layout/reftests/border-image/border-image-width-1c.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image-width: 2</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    border-width: 1em;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    border-image-width: 2;
+  }
+  </style>
+</head>
+<body>
+<div>
+border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-width-large-ref.html b/layout/reftests/border-image/border-image-width-large-ref.html
new file mode 100644
index 000000000..b7d8f5822
--- /dev/null
+++ b/layout/reftests/border-image/border-image-width-large-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>border-image with equally large left and right border image width.</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+
+  </style>
+</head>
+<body>
+<table>
+  <col style="width: 57px">
+  <col style="width: 57px">
+  <tr style="height: 24px">
+    <td style="background: #90a213"></td>
+    <td style="background: #90c157"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/border-image-width-large.html b/layout/reftests/border-image/border-image-width-large.html
new file mode 100644
index 000000000..481aa1948
--- /dev/null
+++ b/layout/reftests/border-image/border-image-width-large.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image with equally large left and right border image width.</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    border-width: 7px;
+    border-style: solid;
+    border-image: url('3x3multicolor.png') 1 1 1 1 / 0 2000000000em 0 2000000000em;
+  }
+  </style>
+</head>
+<body>
+<div style="width: 100px; height: 10px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/center-scaling-1-ref.html b/layout/reftests/border-image/center-scaling-1-ref.html
new file mode 100644
index 000000000..c3755d82d
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-1-ref.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-tl.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-tr.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-bl.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-br.png" width="27" height="27"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-1.html b/layout/reftests/border-image/center-scaling-1.html
new file mode 100644
index 000000000..7b1c2297a
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-1.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 27px;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/center-scaling-2-ref.html b/layout/reftests/border-image/center-scaling-2-ref.html
new file mode 100644
index 000000000..3b253fa52
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-2-ref.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-tl.png" width="54" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-tr.png" width="54" height="27"></div
+><div><img src="reticule-le.png" width="54" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ri.png" width="54" height="54"></div
+><div><img src="reticule-le.png" width="54" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ct.png" width="27" height="54"
+     ><img src="reticule-ri.png" width="54" height="54"></div
+><div><img src="reticule-bl.png" width="54" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-br.png" width="54" height="27"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-2.html b/layout/reftests/border-image/center-scaling-2.html
new file mode 100644
index 000000000..d679e17d5
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-2.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 27px 54px;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/center-scaling-3-ref.html b/layout/reftests/border-image/center-scaling-3-ref.html
new file mode 100644
index 000000000..86db1ec45
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-3-ref.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-tl.png" width="27" height="54"
+     ><img src="reticule-to.png" width="54" height="54"
+     ><img src="reticule-to.png" width="54" height="54"
+     ><img src="reticule-to.png" width="54" height="54"
+     ><img src="reticule-to.png" width="54" height="54"
+     ><img src="reticule-tr.png" width="27" height="54"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ct.png" width="54" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-bl.png" width="27" height="54"
+     ><img src="reticule-bo.png" width="54" height="54"
+     ><img src="reticule-bo.png" width="54" height="54"
+     ><img src="reticule-bo.png" width="54" height="54"
+     ><img src="reticule-bo.png" width="54" height="54"
+     ><img src="reticule-br.png" width="27" height="54"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-3.html b/layout/reftests/border-image/center-scaling-3.html
new file mode 100644
index 000000000..6f33bb0fa
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-3.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 54px 27px;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/center-scaling-4b-ref.html b/layout/reftests/border-image/center-scaling-4b-ref.html
new file mode 100644
index 000000000..3b2337640
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4b-ref.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-tl.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-tr.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-4b.html b/layout/reftests/border-image/center-scaling-4b.html
new file mode 100644
index 000000000..c41e43a51
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4b.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 27px 27px 0 27px;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/center-scaling-4l-ref.html b/layout/reftests/border-image/center-scaling-4l-ref.html
new file mode 100644
index 000000000..e3ebeb876
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4l-ref.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-tr.png" width="27" height="27"></div
+><div><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-br.png" width="27" height="27"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-4l.html b/layout/reftests/border-image/center-scaling-4l.html
new file mode 100644
index 000000000..c4a4aec60
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4l.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 27px 27px 27px 0;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/center-scaling-4lr-ref.html b/layout/reftests/border-image/center-scaling-4lr-ref.html
new file mode 100644
index 000000000..58869ac1d
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4lr-ref.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"></div
+><div><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"></div
+><div><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"></div
+><div><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"></div
+><div><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"></div
+><div><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-4lr.html b/layout/reftests/border-image/center-scaling-4lr.html
new file mode 100644
index 000000000..439ee5dce
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4lr.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 27px 0 27px 0;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/center-scaling-4r-ref.html b/layout/reftests/border-image/center-scaling-4r-ref.html
new file mode 100644
index 000000000..5edcd2381
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4r-ref.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-tl.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"
+     ><img src="reticule-to.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"></div
+><div><img src="reticule-bl.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-4r.html b/layout/reftests/border-image/center-scaling-4r.html
new file mode 100644
index 000000000..38874cbbb
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4r.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 27px 0 27px 27px;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/center-scaling-4t-ref.html b/layout/reftests/border-image/center-scaling-4t-ref.html
new file mode 100644
index 000000000..c04f1670c
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4t-ref.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-bl.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-bo.png" width="27" height="27"
+     ><img src="reticule-br.png" width="27" height="27"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-4t.html b/layout/reftests/border-image/center-scaling-4t.html
new file mode 100644
index 000000000..401005a39
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4t.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 0 27px 27px 27px;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/center-scaling-4tb-ref.html b/layout/reftests/border-image/center-scaling-4tb-ref.html
new file mode 100644
index 000000000..08344b38a
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4tb-ref.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<style>div { line-height: 0 }</style>
+<body
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+><div><img src="reticule-le.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ct.png" width="27" height="27"
+     ><img src="reticule-ri.png" width="27" height="27"></div
+></body>
diff --git a/layout/reftests/border-image/center-scaling-4tb.html b/layout/reftests/border-image/center-scaling-4tb.html
new file mode 100644
index 000000000..2d23aa8e4
--- /dev/null
+++ b/layout/reftests/border-image/center-scaling-4tb.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div {
+  border-width: 0 27px 0 27px;
+  border-style: solid;
+  border-image: url("reticule.png") 27 fill round;
+  width: 216px;
+  height: 108px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/border-image/diamonds.png b/layout/reftests/border-image/diamonds.png
new file mode 100644
index 000000000..7fe5da5e6
--- /dev/null
+++ b/layout/reftests/border-image/diamonds.png
diff --git a/layout/reftests/border-image/different-h-v-1.html b/layout/reftests/border-image/different-h-v-1.html
new file mode 100644
index 000000000..908b73272
--- /dev/null
+++ b/layout/reftests/border-image/different-h-v-1.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html><head>
+<style>
+div { 
+  margin: 27px;
+  border-width: 1em;
+  border-style: solid;
+  border-image: url("diamonds.png") 27 stretch round;
+  width: 270px;
+  height: 135px;
+}
+</style>
+<body>
+<div></div>
+</body></html>
diff --git a/layout/reftests/border-image/different-h-v-2.html b/layout/reftests/border-image/different-h-v-2.html
new file mode 100644
index 000000000..6bce841ad
--- /dev/null
+++ b/layout/reftests/border-image/different-h-v-2.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html><head>
+<style>
+div { 
+  margin: 27px;
+  border-width: 1em;
+  border-style: solid;
+  border-image: url("diamonds.png") 27 round stretch;
+  width: 270px;
+  height: 135px;
+}
+</style>
+<body>
+<div></div>
+</body></html>
diff --git a/layout/reftests/border-image/different-h-v-ref.html b/layout/reftests/border-image/different-h-v-ref.html
new file mode 100644
index 000000000..3beef1272
--- /dev/null
+++ b/layout/reftests/border-image/different-h-v-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html><head>
+<style>
+div { 
+  margin: 27px;
+  border-width: 1em;
+  border-image: url("diamonds.png") 27 stretch;
+  width: 270px;
+  height: 135px;
+}
+</style>
+<body>
+<div></div>
+</body></html>
diff --git a/layout/reftests/border-image/gen-refs.py b/layout/reftests/border-image/gen-refs.py
new file mode 100644
index 000000000..44a89353d
--- /dev/null
+++ b/layout/reftests/border-image/gen-refs.py
@@ -0,0 +1,347 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# Generates tables of background images which correspond with border images for
+# creating reftests. Input is the filename containing input defined below (a subset
+# of the allowed CSS border properties). An html representation of a table is
+# output to stdout.
+#
+# Usage: python gen-refs.py input_filename
+#
+# Input must take the form (order is not important, nothing is optional, distance in order top, right, bottom, left):
+# width: p;
+# height: p;
+# border-width: p;
+# border-image-source: ...;
+# border-image-slice: p p p p;
+# note that actually border-image-slice takes numbers without px, which represent pixels anyway (or at least coords)
+# border-image-width: np np np np;
+# border-image-repeat: stretch | repeat | round;
+# border-image-outset: np np np np;
+#
+# where:
+# p ::= n'px'
+# np ::= n | p
+#
+# Assumes there is no intrinsic size for the border-image-source, so uses
+# the size of the border image area.
+
+import sys
+
+class Point:
+  def __init__(self, w=0, h=0):
+    self.x = w
+    self.y = h
+class Size:
+  def __init__(self, w=0, h=0):
+    self.width = w
+    self.height = h
+class Rect:
+  def __init__(self, x=0, y=0, x2=0, y2=0):
+    self.x = x
+    self.y = y
+    self.x2 = x2
+    self.y2 = y2
+  def width(self):
+    return self.x2 - self.x
+  def height(self):
+    return self.y2 - self.y
+
+class Props:
+  def __init__(self):
+    self.size = Size()
+
+class np:
+  def __init__(self, n, p):
+    self.n = n
+    self.p = p
+
+  def get_absolute(self, ref):
+    if not self.p == 0:
+      return self.p
+    return self.n * ref
+
+def parse_p(tok):
+  if tok[-2:] == "px":
+    return float(tok[:-2])
+  print "Whoops, not a pixel value " + tok
+
+def parse_np(tok):
+  if tok[-2:] == "px":
+    return np(0, float(tok[:-2]))
+  return np(float(tok), 0)
+
+def parse(filename):
+  f = open(filename, "r")
+  props = Props()
+  for l in f:
+    l = l.strip()
+    if not l[-1] == ";":
+      continue
+    toks = l[:-1].split()
+    if toks[0] == "border-width:":
+      props.width = parse_p(toks[1])
+    if toks[0] == "height:":
+      props.size.height = parse_p(toks[1])
+    if toks[0] == "width:":
+      props.size.width = parse_p(toks[1])
+    if toks[0] == "border-image-source:":
+      props.source = l[l.find(":")+1:l.rfind(";")].strip()
+    if toks[0] == "border-image-repeat:":
+      props.repeat = toks[1]
+    if toks[0] == "border-image-slice:":
+      props.slice = map(parse_p, toks[1:5])
+    if toks[0] == "border-image-width:":
+      props.image_width = map(parse_np, toks[1:5])
+    if toks[0] == "border-image-outset:":
+      props.outset = map(parse_np, toks[1:5])
+  f.close()
+  return props
+
+# the result of normalisation is that all sizes are in pixels and the size,
+# widths, and outset have been normalised to a size and width - the former is
+# the element's interior, the latter is the width of the drawn border.
+def normalise(props):
+  result = Props()
+  result.source = props.source
+  result.repeat = props.repeat
+  result.width = map(lambda x: x.get_absolute(props.width), props.image_width)
+  outsets = map(lambda x: x.get_absolute(props.width), props.outset)
+  result.size.width = props.size.width + 2*props.width + outsets[1] + outsets[3]
+  result.size.height = props.size.height + 2*props.width + outsets[0] + outsets[2]
+  result.slice = props.slice
+  for i in [0,2]:
+    if result.slice[i] > result.size.height:
+      result.slice[i] = result.size.height
+    if result.slice[i+1] > result.size.width:
+      result.slice[i+1] = result.size.width
+
+  return result
+
+def check_parse(props):
+  if not hasattr(props, 'source'):
+    print "missing border-image-source"
+    return False
+  if not hasattr(props.size, 'width'):
+    print "missing width"
+    return False
+  if not hasattr(props.size, 'height'):
+    print "missing height"
+    return False
+  if not hasattr(props, 'width'):
+    print "missing border-width"
+    return False
+  if not hasattr(props, 'image_width'):
+    print "missing border-image-width"
+    return False
+  if not hasattr(props, 'slice'):
+    print "missing border-image-slice"
+    return False
+  if not hasattr(props, 'repeat') or (props.repeat not in ["stretch", "repeat", "round"]):
+    print "missing or incorrect border-image-repeat '" + props.repeat + "'"
+    return False
+  if not hasattr(props, 'outset'):
+    print "missing border-image-outset"
+    return False
+
+  return True
+
+def check_normalise(props):
+  if not hasattr(props, 'source'):
+    print "missing border-image-source"
+    return False
+  if not hasattr(props.size, 'width'):
+    print "missing width"
+    return False
+  if not hasattr(props.size, 'height'):
+    print "missing height"
+    return False
+  if not hasattr(props, 'slice'):
+    print "missing border-image-slice"
+    return False
+  if not hasattr(props, 'repeat') or (props.repeat not in ["stretch", "repeat", "round"]):
+    print "missing or incorrect border-image-repeat '" + props.repeat + "'"
+    return False
+
+  return True
+
+class Tile:
+  def __init__(self):
+    self.slice = Rect()
+    self.border_width = Rect()
+
+# throughout, we will use arrays for nine-patches, the indices correspond thusly:
+# 0 1 2
+# 3 4 5
+# 6 7 8
+
+# Compute the source tiles' slice and border-width sizes
+def make_src_tiles():
+  tiles = [Tile() for i in range(9)]
+
+  rows = [range(3*i, 3*(i+1)) for i in range(3)]
+  cols = [[i, i+3, i+6] for i in range(3)]
+
+  row_limits_slice = [0, props.slice[3], props.size.width - props.slice[1], props.size.width]
+  row_limits_width = [0, props.width[3], props.size.width - props.width[1], props.size.width]
+  for r in range(3):
+    for t in [tiles[i] for i in cols[r]]:
+      t.slice.x = row_limits_slice[r]
+      t.slice.x2 = row_limits_slice[r+1]
+      t.border_width.x = row_limits_width[r]
+      t.border_width.x2 = row_limits_width[r+1]
+
+  col_limits_slice = [0, props.slice[0], props.size.height - props.slice[2], props.size.height]
+  col_limits_width = [0, props.width[0], props.size.height - props.width[2], props.size.height]
+  for c in range(3):
+    for t in [tiles[i] for i in rows[c]]:
+      t.slice.y = col_limits_slice[c]
+      t.slice.y2 = col_limits_slice[c+1]
+      t.border_width.y = col_limits_width[c]
+      t.border_width.y2 = col_limits_width[c+1]
+
+  return tiles
+
+def compute(props):
+  tiles = make_src_tiles()
+
+  # corners scale easy
+  for t in [tiles[i] for i in [0, 2, 6, 8]]:
+    t.scale = Point(t.border_width.width()/t.slice.width(), t.border_width.height()/t.slice.height())
+  # edges are by their secondary dimension
+  for t in [tiles[i] for i in [1, 7]]:
+    t.scale = Point(t.border_width.height()/t.slice.height(), t.border_width.height()/t.slice.height())
+  for t in [tiles[i] for i in [3, 5]]:
+    t.scale = Point(t.border_width.width()/t.slice.width(), t.border_width.width()/t.slice.width())
+  # the middle is scaled by the factors for the top and left edges
+  tiles[4].scale = Point(tiles[1].scale.x, tiles[3].scale.y)
+
+  # the size of a source tile for the middle section
+  src_tile_size = Size(tiles[4].slice.width()*tiles[4].scale.x, tiles[4].slice.height()*tiles[4].scale.y)
+
+  # the size of a single destination tile in the central part
+  dest_tile_size = Size()
+  if props.repeat == "stretch":
+    dest_tile_size.width = tiles[4].border_width.width()
+    dest_tile_size.height = tiles[4].border_width.height()
+    for t in [tiles[i] for i in [1, 7]]:
+      t.scale.x = t.border_width.width()/t.slice.width()
+    for t in [tiles[i] for i in [3, 5]]:
+      t.scale.y = t.border_width.height()/t.slice.height()
+  elif props.repeat == "repeat":
+    dest_tile_size = src_tile_size
+  elif props.repeat == "round":
+    dest_tile_size.width = tiles[4].border_width.width() / math.ceil(tiles[4].border_width.width() / src_tile_size.width)
+    dest_tile_size.height = tiles[4].border_width.height() / math.ceil(tiles[4].border_width.height() / src_tile_size.height)
+    for t in [tiles[i] for i in [1, 4, 7]]:
+      t.scale.x = dest_tile_size.width/t.slice.width()
+    for t in [tiles[i] for i in [3, 4, 5]]:
+      t.scale.y = dest_tile_size.height/t.slice.height()
+  else:
+    print "Whoops, invalid border-image-repeat value"
+
+  # catch overlapping slices. Its easier to deal with it here than to catch
+  # earlier and have to avoid all the divide by zeroes above
+  for t in tiles:
+    if t.slice.width() < 0:
+      t.scale.x = 0
+    if t.slice.height() < 0:
+      t.scale.y = 0
+
+  tiles_h = int(math.ceil(tiles[4].border_width.width()/dest_tile_size.width)+2)
+  tiles_v = int(math.ceil(tiles[4].border_width.height()/dest_tile_size.height)+2)
+
+  # if border-image-repeat: repeat, then we will later center the tiles, that
+  # means we need an extra tile for the two 'half' tiles at either end
+  if props.repeat == "repeat":
+    if tiles_h % 2 == 0:
+      tiles_h += 1
+    if tiles_v % 2 == 0:
+      tiles_v += 1
+  dest_tiles = [Tile() for i in range(tiles_h * tiles_v)]
+
+  # corners
+  corners = [(0, 0), (tiles_h-1, 2), (tiles_v*(tiles_h-1), 6), (tiles_v*tiles_h-1, 8)]
+  for d,s in corners:
+    dest_tiles[d].size = Size(tiles[s].scale.x*props.size.width, tiles[s].scale.y*props.size.height)
+    dest_tiles[d].dest_size = Size(tiles[s].border_width.width(), tiles[s].border_width.height())
+  dest_tiles[0].offset                   = Point(0, 0)
+  dest_tiles[tiles_h-1].offset           = Point(tiles[2].border_width.width() - dest_tiles[tiles_h-1].size.width, 0)
+  dest_tiles[tiles_v*(tiles_h-1)].offset = Point(0, tiles[6].border_width.height() - dest_tiles[tiles_v*(tiles_h-1)].size.height)
+  dest_tiles[tiles_v*tiles_h-1].offset   = Point(tiles[8].border_width.width() - dest_tiles[tiles_h*tiles_v-1].size.width, tiles[8].border_width.height() - dest_tiles[tiles_h*tiles_v-1].size.height)
+
+  # horizontal edges
+  for i in range(1, tiles_h-1):
+    dest_tiles[i].size                       = Size(tiles[1].scale.x*props.size.width, tiles[1].scale.y*props.size.height)
+    dest_tiles[(tiles_v-1)*tiles_h + i].size = Size(tiles[7].scale.x*props.size.width, tiles[7].scale.y*props.size.height)
+    dest_tiles[i].dest_size                       = Size(dest_tile_size.width, tiles[1].border_width.height())
+    dest_tiles[(tiles_v-1)*tiles_h + i].dest_size = Size(dest_tile_size.width, tiles[7].border_width.height())
+    dest_tiles[i].offset                       = Point(-tiles[1].scale.x*tiles[1].slice.x, -tiles[1].scale.y*tiles[1].slice.y)
+    dest_tiles[(tiles_v-1)*tiles_h + i].offset = Point(-tiles[7].scale.x*tiles[7].slice.x, -tiles[7].scale.y*tiles[7].slice.y)
+
+  # vertical edges
+  for i in range(1, tiles_v-1):
+    dest_tiles[i*tiles_h].size       = Size(tiles[3].scale.x*props.size.width, tiles[3].scale.y*props.size.height)
+    dest_tiles[(i+1)*tiles_h-1].size = Size(tiles[5].scale.x*props.size.width, tiles[5].scale.y*props.size.height)
+    dest_tiles[i*tiles_h].dest_size       = Size(tiles[3].border_width.width(), dest_tile_size.height)
+    dest_tiles[(i+1)*tiles_h-1].dest_size = Size(tiles[5].border_width.width(), dest_tile_size.height)
+    dest_tiles[i*tiles_h].offset       = Point(-tiles[3].scale.x*tiles[3].slice.x, -tiles[3].scale.y*tiles[3].slice.y)
+    dest_tiles[(i+1)*tiles_h-1].offset = Point(-tiles[5].scale.x*tiles[5].slice.x, -tiles[5].scale.y*tiles[5].slice.y)
+
+  # middle
+  for i in range(1, tiles_v-1):
+    for j in range(1, tiles_h-1):
+      dest_tiles[i*tiles_h+j].size = Size(tiles[4].scale.x*props.size.width, tiles[4].scale.y*props.size.height)
+      dest_tiles[i*tiles_h+j].offset = Point(-tiles[4].scale.x*tiles[4].slice.x, -tiles[4].scale.y*tiles[4].slice.y)
+      dest_tiles[i*tiles_h+j].dest_size = dest_tile_size
+
+  # edge and middle tiles are centered with border-image-repeat: repeat
+  # we need to change the offset to take account of this and change the dest_size
+  # of the tiles at the sides of the edges if they are clipped
+  if props.repeat == "repeat":
+    diff_h = ((tiles_h-2)*dest_tile_size.width - tiles[4].border_width.width()) / 2
+    diff_v = ((tiles_v-2)*dest_tile_size.height - tiles[4].border_width.height()) / 2
+    for i in range(0, tiles_h):
+      dest_tiles[tiles_h + i].dest_size.height -= diff_v
+      dest_tiles[tiles_h + i].offset.y -= diff_v #* tiles[4].scale.y
+      dest_tiles[(tiles_v-2)*tiles_h + i].dest_size.height -= diff_v
+    for i in range(0, tiles_v):
+      dest_tiles[i*tiles_h + 1].dest_size.width -= diff_h
+      dest_tiles[i*tiles_h + 1].offset.x -= diff_h #* tiles[4].scale.x
+      dest_tiles[(i+1)*tiles_h-2].dest_size.width -= diff_h
+
+  # output the table to simulate the border
+  print "<table>"
+  for i in range(tiles_h):
+    print "<col style=\"width: " + str(dest_tiles[i].dest_size.width) + "px;\">"
+  for i in range(tiles_v):
+    print "<tr style=\"height: " + str(dest_tiles[i*tiles_h].dest_size.height) + "px;\">"
+    for j in range(tiles_h):
+      width = dest_tiles[i*tiles_h+j].size.width
+      height = dest_tiles[i*tiles_h+j].size.height
+      # catch any tiles with negative widths/heights
+      # this happends when the total of the border-image-slices > borde drawing area
+      if width <= 0 or height <= 0:
+        print "  <td style=\"background: white;\"></td>"
+      else:
+        print "  <td style=\"background-image: " + props.source + "; background-size: " + str(width) + "px " + str(height) + "px; background-position: " + str(dest_tiles[i*tiles_h+j].offset.x) + "px " + str(dest_tiles[i*tiles_h+j].offset.y) + "px;\"></td>"
+    print "</tr>"
+  print "</table>"
+
+
+# start here
+args = sys.argv[1:]
+if len(args) == 0:
+  print "whoops: no source file"
+  exit(1)
+
+
+props = parse(args[0])
+if not check_parse(props):
+  print dir(props)
+  exit(1)
+props = normalise(props)
+if not check_normalise(props):
+  exit(1)
+compute(props)
diff --git a/layout/reftests/border-image/multicolor-image-1-ref.html b/layout/reftests/border-image/multicolor-image-1-ref.html
new file mode 100644
index 000000000..56ba68aa9
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+
+  </style>
+</head>
+<body>
+<table>
+  <col style="width: 7px">
+  <col style="width: 100px">
+  <col style="width: 7px">
+
+  <tr style="height: 7px">
+    <td style="background: #87f0b4"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #c98bb7"></td>
+  </tr>
+  <tr style="height: 5px">
+    <td style="background: #90a213"></td>
+    <td style="background: #c9aa7d"></td>
+    <td style="background: #90c157"></td>
+  </tr>
+  <tr style="height: 7px">
+    <td style="background: #9d57c1"></td>
+    <td style="background: #3a8e20"></td>
+    <td style="background: #0e6f6c"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-1.html b/layout/reftests/border-image/multicolor-image-1.html
new file mode 100644
index 000000000..de76bd27b
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    border-width: 7px;
+    border-style: solid;
+    background: red; /* fail if this shows through */
+    background-image: url('3x3multicolor.png'); /* fail if this shows through */
+    border-image: url('3x3multicolor.png') 1 1 1 1 fill;
+    -khtml-border-image: url('3x3multicolor.png') 1 1 1 1 fill;
+    border-image: url('3x3multicolor.png') 1 1 1 1 fill;
+  }
+
+  </style>
+</head>
+<body>
+<div style="width: 100px; height: 5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-2-ref.html b/layout/reftests/border-image/multicolor-image-2-ref.html
new file mode 100644
index 000000000..2adb8d636
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-2-ref.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+  table { margin-bottom: 2px; }
+
+  </style>
+</head>
+<body>
+
+<table>
+  <col style="width: 11px">
+  <col style="width: 9px">
+  <col style="width: 6px">
+  <tr style="height: 4px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 1px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 8px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 4px">
+  <col style="width: 2px">
+  <col style="width: 1px">
+  <tr style="height: 3px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 17px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 3px">
+  <col style="width: 17px">
+  <col style="width: 2px">
+  <tr style="height: 10px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 8px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 5px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 0px">
+  <col style="width: 8px">
+  <col style="width: 7px">
+  <tr style="height: 5px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 5px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 1px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 2px">
+  <col style="width: 0px">
+  <col style="width: 8px">
+  <tr style="height: 4px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 8px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 10px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 2px">
+  <col style="width: 17px">
+  <col style="width: 0px">
+  <tr style="height: 4px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 10px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 0px">
+  <col style="width: 17px">
+  <col style="width: 3px">
+  <tr style="height: 1px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-2.html b/layout/reftests/border-image/multicolor-image-2.html
new file mode 100644
index 000000000..a35d041b3
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-2.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    background: red; /* fail if this shows through */
+    background-image: url('3x3multicolor.png'); /* fail if this shows through */
+    margin-bottom: 2px;
+  }
+
+  div.one {
+    border-image: url(10x5multicolor.png) 2 2 1 3 fill;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill;
+    border-image: url(10x5multicolor.png) 2 2 1 3 fill;
+    border-width: 4px 6px 8px 11px;
+    border-style: solid;
+    width: 9px;
+    height: 1px;
+  }
+
+  div.two {
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
+    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
+    border-width: 3px 1px 0px 4px;
+    border-style: solid;
+    width: 2px;
+    height: 17px;
+  }
+
+  div.three {
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    border-width: 10px 2px 5px 3px;
+    border-style: solid;
+    width: 17px;
+    height: 8px;
+  }
+
+  div.four {
+    border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
+    border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
+    border-width: 5px 7px 1px 0;
+    border-style: solid;
+    width: 8px;
+    height: 5px;
+  }
+
+  div.five {
+    border-width: 4px 8px 10px 2px;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    border-style: solid;
+    width: 0;
+    height: 8px;
+  }
+
+  div.six {
+    border-width: 4px 0 10px 2px;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    border-style: solid;
+    width: 17px;
+    height: 0;
+  }
+
+  div.seven {
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
+    border-width: 1px 3px 0 0;
+    border-style: solid;
+    width: 17px;
+    height: 0;
+  }
+
+  </style>
+</head>
+<body>
+<div class="one"></div>
+<div class="two"></div>
+<div class="three"></div>
+<div class="four"></div>
+<div class="five"></div>
+<div class="six"></div>
+<div class="seven"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-3-ref.html b/layout/reftests/border-image/multicolor-image-3-ref.html
new file mode 100644
index 000000000..ed74e4d7b
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-3-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image: number repetition</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    background: red; /* fail if this shows through */
+    background-image: url('3x3multicolor.png'); /* fail if this shows through */
+    margin-bottom: 2px;
+  }
+
+  div.one {
+    border-width: 4px 6px 8px 6px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 2 2 2 2;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 2 2;
+    border-image: url(10x5multicolor.png) 2 2 2 2;
+    width: 5px;
+    height: 2px;
+  }
+
+  div.two {
+    border-width: 4px 4px 4px 4px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 2 1 2 1;
+    -khtml-border-image: url(10x5multicolor.png) 2 1 2 1;
+    border-image: url(10x5multicolor.png) 2 1 2 1;
+    width: 5px;
+    height: 2px;
+  }
+
+  div.three {
+    border-width: 4px 2px 4px 2px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 2 3 1 3;
+    -khtml-border-image: url(10x5multicolor.png) 2 3 1 3;
+    border-image: url(10x5multicolor.png) 2 3 1 3;
+    width: 5px;
+    height: 2px;
+  }
+
+  div.four {
+    border-width: 4px 3px 4px 3px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 2 3 1 1;
+    -khtml-border-image: url(10x5multicolor.png) 2 3 1 1;
+    border-image: url(10x5multicolor.png) 2 3 1 1;
+    width: 5px;
+    height: 2px;
+  }
+
+  </style>
+</head>
+<body>
+<div class="one"></div>
+<div class="two"></div>
+<div class="three"></div>
+<div class="four"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-3.html b/layout/reftests/border-image/multicolor-image-3.html
new file mode 100644
index 000000000..7727bb083
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-3.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image: number repetition</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    background: red; /* fail if this shows through */
+    background-image: url('3x3multicolor.png'); /* fail if this shows through */
+    margin-bottom: 2px;
+  }
+
+  div.one {
+    border-width: 4px 6px 8px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 2;
+    -khtml-border-image: url(10x5multicolor.png) 2;
+    border-image: url(10x5multicolor.png) 2;
+    width: 5px;
+    height: 2px;
+  }
+
+  div.two {
+    border-width: 4px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 2 1;
+    -khtml-border-image: url(10x5multicolor.png) 2 1;
+    border-image: url(10x5multicolor.png) 2 1;
+    width: 5px;
+    height: 2px;
+  }
+
+  div.three {
+    border-image: url(10x5multicolor.png) 2 3 1;
+    -khtml-border-image: url(10x5multicolor.png) 2 3 1;
+    border-image: url(10x5multicolor.png) 2 3 1;
+    border-width: 4px 2px;
+    border-style: solid;
+    width: 5px;
+    height: 2px;
+  }
+
+  div.four {
+    border-width: 4px 3px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 2 3 1 1;
+    -khtml-border-image: url(10x5multicolor.png) 2 3 1 1;
+    border-image: url(10x5multicolor.png) 2 3 1 1;
+    width: 5px;
+    height: 2px;
+  }
+
+  </style>
+</head>
+<body>
+<div class="one"></div>
+<div class="two"></div>
+<div class="three"></div>
+<div class="four"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-4-ref.html b/layout/reftests/border-image/multicolor-image-4-ref.html
new file mode 100644
index 000000000..55e14cb08
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-4-ref.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+  table { margin-bottom: 6px; }
+
+  </style>
+</head>
+<body>
+
+<div style="padding-top: 100px; padding-left: 100px">
+<table>
+  <col style="width: 22px">
+  <col style="width: 18px">
+  <col style="width: 12px">
+  <tr style="height: 12px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 3px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 24px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 8px">
+  <col style="width: 4px">
+  <col style="width: 2px">
+  <tr style="height: 9px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 51px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 6px">
+  <col style="width: 34px">
+  <col style="width: 4px">
+  <tr style="height: 30px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 24px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 15px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 0px">
+  <col style="width: 16px">
+  <col style="width: 14px">
+  <tr style="height: 15px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 15px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 3px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 4px">
+  <col style="width: 0px">
+  <col style="width: 16px">
+  <tr style="height: 12px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 24px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 4px">
+  <col style="width: 34px">
+  <col style="width: 0px">
+  <tr style="height: 12px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 30px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 0px">
+  <col style="width: 34px">
+  <col style="width: 6px">
+  <tr style="height: 3px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-4.html b/layout/reftests/border-image/multicolor-image-4.html
new file mode 100644
index 000000000..a62562bd7
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-4.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  /**
+   * This is a copy of multicolor-image-2.html with a few changes:
+   *   (1) the whole thing is inside a -moz-transform
+   *   (2) different border-images have different values for
+   *       repeat/stretch/round
+   */
+
+  body {
+    width: 100px;
+    -moz-transform: translate(100px, 100px) scale(2,3);
+    -moz-transform-origin: 0 0;
+    -khtml-transform: translate(100px, 100px) scale(2,3);
+    -khtml-transform-origin: 0 0;
+    transform: translate(100px, 100px) scale(2,3);
+    transform-origin: 0 0;
+  }
+
+  div {
+    background: red; /* fail if this shows through */
+    background-image: url('3x3multicolor.png'); /* fail if this shows through */
+    margin-bottom: 2px;
+  }
+
+  div.one {
+    border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
+    border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
+    border-width: 4px 6px 8px 11px;
+    border-style: solid;
+    width: 9px;
+    height: 1px;
+  }
+
+  div.two {
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
+    border-width: 3px 1px 0px 4px;
+    border-style: solid;
+    width: 2px;
+    height: 17px;
+  }
+
+  div.three {
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
+    border-width: 10px 2px 5px 3px;
+    border-style: solid;
+    width: 17px;
+    height: 8px;
+  }
+
+  div.four {
+    border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
+    border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
+    border-width: 5px 7px 1px 0;
+    border-style: solid;
+    width: 8px;
+    height: 5px;
+  }
+
+  div.five {
+    border-width: 4px 8px 10px 2px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
+    width: 0;
+    height: 8px;
+  }
+
+  div.six {
+    border-width: 4px 0 10px 2px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round repeat;
+    width: 17px;
+    height: 0;
+  }
+
+  div.seven {
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill stretch repeat;
+    border-width: 1px 3px 0 0;
+    border-style: solid;
+    width: 17px;
+    height: 0;
+  }
+
+  </style>
+</head>
+<body>
+<div class="one"></div>
+<div class="two"></div>
+<div class="three"></div>
+<div class="four"></div>
+<div class="five"></div>
+<div class="six"></div>
+<div class="seven"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-5-ref.html b/layout/reftests/border-image/multicolor-image-5-ref.html
new file mode 100644
index 000000000..f4e6ab1e1
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-5-ref.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+  table { margin-bottom: 2px; }
+
+  </style>
+</head>
+<body>
+
+<div style="padding-top: 100px; padding-left: 100px">
+<table>
+  <col style="width: 11px">
+  <col style="width: 9px">
+  <col style="width: 6px">
+  <tr style="height: 4px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 1px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 8px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 4px">
+  <col style="width: 2px">
+  <col style="width: 1px">
+  <tr style="height: 3px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 17px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 3px">
+  <col style="width: 17px">
+  <col style="width: 2px">
+  <tr style="height: 10px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 8px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 5px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 0px">
+  <col style="width: 8px">
+  <col style="width: 7px">
+  <tr style="height: 5px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 5px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 1px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 2px">
+  <col style="width: 0px">
+  <col style="width: 8px">
+  <tr style="height: 4px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 8px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 10px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 2px">
+  <col style="width: 17px">
+  <col style="width: 0px">
+  <tr style="height: 4px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 10px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+
+<table>
+  <col style="width: 0px">
+  <col style="width: 17px">
+  <col style="width: 3px">
+  <tr style="height: 1px">
+    <td style="background: #93bd5d"></td>
+    <td style="background: #b55dbd"></td>
+    <td style="background: #8d4921"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #21a02c"></td>
+    <td style="background: #4a298e"></td>
+    <td style="background: #ef9b23"></td>
+  </tr>
+  <tr style="height: 0px">
+    <td style="background: #9b733a"></td>
+    <td style="background: #f155ad"></td>
+    <td style="background: #adf3eb"></td>
+  </tr>
+</table>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/border-image/multicolor-image-5.html b/layout/reftests/border-image/multicolor-image-5.html
new file mode 100644
index 000000000..95763c6d9
--- /dev/null
+++ b/layout/reftests/border-image/multicolor-image-5.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  /**
+   * This is a copy of multicolor-image-2.html with a few changes:
+   *   (1) the whole thing is inside a -moz-transform
+   *   (2) different border-images have different values for
+   *       repeat/stretch/round
+   */
+
+  body {
+    width: 100px;
+    /* This transform has no scale, and thus tests pixel-snapping codepaths! */
+    -moz-transform: translate(100px, 100px);
+    -moz-transform-origin: 0 0;
+    -khtml-transform: translate(100px, 100px);
+    -khtml-transform-origin: 0 0;
+    transform: translate(100px, 100px);
+    transform-origin: 0 0;
+  }
+
+  div {
+    background: red; /* fail if this shows through */
+    background-image: url('3x3multicolor.png'); /* fail if this shows through */
+    margin-bottom: 2px;
+  }
+
+  div.one {
+    border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
+    border-image: url(10x5multicolor.png) 2 2 1 3 fill stretch;
+    border-width: 4px 6px 8px 11px;
+    border-style: solid;
+    width: 9px;
+    height: 1px;
+  }
+
+  div.two {
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
+    border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill repeat;
+    border-width: 3px 1px 0px 4px;
+    border-style: solid;
+    width: 2px;
+    height: 17px;
+  }
+
+  div.three {
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill round;
+    border-width: 10px 2px 5px 3px;
+    border-style: solid;
+    width: 17px;
+    height: 8px;
+  }
+
+  div.four {
+    border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
+    -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
+    border-image: url(10x5multicolor.png) 2 2 20% 30% fill stretch round;
+    border-width: 5px 7px 1px 0;
+    border-style: solid;
+    width: 8px;
+    height: 5px;
+  }
+
+  div.five {
+    border-width: 4px 8px 10px 2px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% fill repeat stretch;
+    width: 0;
+    height: 8px;
+  }
+
+  div.six {
+    border-width: 4px 0 10px 2px;
+    border-style: solid;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% round repeat;
+    width: 17px;
+    height: 0;
+  }
+
+  div.seven {
+    border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
+    -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
+    border-image: url(10x5multicolor.png) 40% 2 1 30% stretch repeat;
+    border-width: 1px 3px 0 0;
+    border-style: solid;
+    width: 17px;
+    height: 0;
+  }
+
+  </style>
+</head>
+<body>
+<div class="one"></div>
+<div class="two"></div>
+<div class="three"></div>
+<div class="four"></div>
+<div class="five"></div>
+<div class="six"></div>
+<div class="seven"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/reftest-stylo.list b/layout/reftests/border-image/reftest-stylo.list
new file mode 100644
index 000000000..0af21ac44
--- /dev/null
+++ b/layout/reftests/border-image/reftest-stylo.list
@@ -0,0 +1,95 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== solid-image-1.html solid-image-1.html
+== solid-image-1a.html solid-image-1a.html
+== solid-image-2.html solid-image-2.html
+== solid-image-2a.html solid-image-2a.html
+== multicolor-image-1.html multicolor-image-1.html
+# This is fuzzy temporarily until bug 1044702 makes it possible to use source
+# clipping on Windows. (Any other fix would have a significant perf cost.)
+fuzzy-if(winWidget,1,1) == multicolor-image-2.html multicolor-image-2.html
+== multicolor-image-3.html multicolor-image-3.html
+== multicolor-image-4.html multicolor-image-4.html
+== multicolor-image-5.html multicolor-image-5.html
+== transparent-image-1.html transparent-image-1.html
+== repeat-image-1.html repeat-image-1.html
+== 470250-1.html 470250-1.html
+random == 470250-2.html 470250-2.html
+== different-h-v-1.html different-h-v-1.html
+== different-h-v-2.html different-h-v-2.html
+== different-h-v-1.html different-h-v-1.html
+== center-scaling-1.html center-scaling-1.html
+fails-if(Android||B2G) fails-if(usesRepeatResampling) == center-scaling-2.html center-scaling-2.html
+# Android/B2G: very different scaling (blurriness) on some sides
+fails-if(Android||B2G) fails-if(usesRepeatResampling) == center-scaling-3.html center-scaling-3.html
+# Android/B2G: very different scaling (blurriness) on some sides
+== center-scaling-4t.html center-scaling-4t.html
+== center-scaling-4r.html center-scaling-4r.html
+== center-scaling-4b.html center-scaling-4b.html
+== center-scaling-4l.html center-scaling-4l.html
+== center-scaling-4tb.html center-scaling-4tb.html
+== center-scaling-4lr.html center-scaling-4lr.html
+== side-scaling-1h.html side-scaling-1h.html
+== side-scaling-1v.html side-scaling-1v.html
+== border-image-width-1a.html border-image-width-1a.html
+== border-image-width-1b.html border-image-width-1b.html
+== border-image-width-1c.html border-image-width-1c.html
+== border-image-width-large.html border-image-width-large.html
+== border-image-outset-1a.html border-image-outset-1a.html
+== border-image-outset-1b.html border-image-outset-1b.html
+== border-image-outset-1c.html border-image-outset-1c.html
+skip == border-image-nofill-1.html border-image-nofill-1.html
+== border-image-outset-resize-1.html border-image-outset-resize-1.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,121,447) == border-image-outset-move-1.html border-image-outset-move-1.html
+== border-image-style-none.html border-image-style-none.html
+== border-image-style-none-length.html border-image-style-none-length.html
+== border-image-style-none-auto.html border-image-style-none-auto.html
+
+# border images with gradients
+== border-image-linear-gradient.html border-image-linear-gradient.html
+skip fuzzy-if(skiaContent,1,350) == border-image-linear-gradient-slice-1.html border-image-linear-gradient-slice-1.html
+fuzzy-if(OSX,1,10595) == border-image-linear-gradient-slice-2.html border-image-linear-gradient-slice-2.html
+fuzzy-if(skiaContent,1,2500) == border-image-linear-gradient-slice-fill-1.html border-image-linear-gradient-slice-fill-1.html
+skip fuzzy-if(OSX,1,25771) fuzzy-if(skiaContent,1,300) == border-image-linear-gradient-slice-fill-2.html border-image-linear-gradient-slice-fill-2.html
+fuzzy-if(OSX,5,1676) == border-image-linear-gradient-width.html border-image-linear-gradient-width.html
+fuzzy-if(OSX,1,15000) == border-image-linear-gradient-slice-width.html border-image-linear-gradient-slice-width.html
+fuzzy-if(OSX,1,6000) == border-image-linear-gradient-outset.html border-image-linear-gradient-outset.html
+fuzzy-if(skiaContent,1,400) == border-image-linear-gradient-repeat-repeat-1.html border-image-linear-gradient-repeat-repeat-1.html
+fuzzy-if(skiaContent,1,300) == border-image-linear-gradient-repeat-round-1.html border-image-linear-gradient-repeat-round-1.html
+== border-image-linear-gradient-repeat-repeat-2.html border-image-linear-gradient-repeat-repeat-2.html
+fuzzy-if(skiaContent,1,2000) == border-image-linear-gradient-repeat-round-2.html border-image-linear-gradient-repeat-round-2.html
+== border-image-linear-gradient-repeat-repeat-3.html border-image-linear-gradient-repeat-repeat-3.html
+== border-image-linear-gradient-repeat-round-3.html border-image-linear-gradient-repeat-round-3.html
+
+== border-image-radial-gradient.html border-image-radial-gradient.html
+fuzzy-if(skiaContent,2,20) == border-image-radial-gradient-slice-1.html border-image-radial-gradient-slice-1.html
+fuzzy-if(OSX,2,4472) == border-image-radial-gradient-slice-2.html border-image-radial-gradient-slice-2.html
+== border-image-radial-gradient-slice-fill-1.html border-image-radial-gradient-slice-fill-1.html
+skip fuzzy-if(OSX,2,4478) fuzzy-if(skiaContent,2,120) == border-image-radial-gradient-slice-fill-2.html border-image-radial-gradient-slice-fill-2.html
+fails fuzzy-if(skiaContent,1,2) == border-image-radial-gradient-width.html border-image-radial-gradient-width.html
+== border-image-radial-gradient-slice-width.html border-image-radial-gradient-slice-width.html
+
+# OS X failures tracked in bug 957025
+== border-image-repeating-linear-gradient.html border-image-repeating-linear-gradient.html
+fails-if(OSX) fuzzy-if(skiaContent,3,3157) == border-image-repeating-linear-gradient-slice-fill-2.html border-image-repeating-linear-gradient-slice-fill-2.html
+fails-if(OSX) fuzzy-if(skiaContent,3,20000) == border-image-repeating-linear-gradient-repeat-round-2.html border-image-repeating-linear-gradient-repeat-round-2.html
+
+== border-image-repeating-radial-gradient.html border-image-repeating-radial-gradient.html
+fuzzy-if(skiaContent,3,362) == border-image-repeating-radial-gradient-slice-1.html border-image-repeating-radial-gradient-slice-1.html
+fuzzy-if(skiaContent,3,437) == border-image-repeating-radial-gradient-slice-2.html border-image-repeating-radial-gradient-slice-2.html
+fuzzy-if(skiaContent,3,964) == border-image-repeating-radial-gradient-slice-fill-1.html border-image-repeating-radial-gradient-slice-fill-1.html
+fails-if(OSX) fuzzy-if(skiaContent,3,887) == border-image-repeating-radial-gradient-slice-fill-2.html border-image-repeating-radial-gradient-slice-fill-2.html
+skip == border-image-repeating-radial-gradient-width.html border-image-repeating-radial-gradient-width.html
+fails fails-if(OSX) fuzzy-if(skiaContent,4,16462) == border-image-repeating-radial-gradient-slice-width.html border-image-repeating-radial-gradient-slice-width.html
+== border-image-repeating-radial-gradient-repeat-repeat-2.html border-image-repeating-radial-gradient-repeat-repeat-2.html
+fails-if(OSX) fuzzy-if(skiaContent,2,952) == border-image-repeating-radial-gradient-repeat-round-2.html border-image-repeating-radial-gradient-repeat-round-2.html
+
+# border-image-source (-moz-)element
+fuzzy-if(B2G,151,5809) == border-image-element.html border-image-element.html
+
+# svg-as-border-image
+== svg-as-border-image-1a.html svg-as-border-image-1a.html
+== svg-as-border-image-1b.html svg-as-border-image-1b.html
+== svg-as-border-image-1c.html svg-as-border-image-1c.html
+== svg-as-border-image-2.html svg-as-border-image-2.html
+== svg-as-border-image-3.html svg-as-border-image-3.html
+== svg-as-border-image-4.html svg-as-border-image-4.html
diff --git a/layout/reftests/border-image/reftest.list b/layout/reftests/border-image/reftest.list
new file mode 100644
index 000000000..b6204be15
--- /dev/null
+++ b/layout/reftests/border-image/reftest.list
@@ -0,0 +1,92 @@
+== solid-image-1.html solid-image-1-ref.html
+== solid-image-1a.html solid-image-1-ref.html
+== solid-image-2.html solid-image-2-ref.html
+== solid-image-2a.html solid-image-2-ref.html
+== multicolor-image-1.html multicolor-image-1-ref.html
+# This is fuzzy temporarily until bug 1044702 makes it possible to use source
+# clipping on Windows. (Any other fix would have a significant perf cost.)
+fuzzy-if(winWidget,1,1) == multicolor-image-2.html multicolor-image-2-ref.html
+== multicolor-image-3.html multicolor-image-3-ref.html
+== multicolor-image-4.html multicolor-image-4-ref.html
+== multicolor-image-5.html multicolor-image-5-ref.html
+== transparent-image-1.html transparent-image-1-ref.html
+!= repeat-image-1.html repeat-image-1-ref.html
+== 470250-1.html 470250-1-ref.html
+== 470250-2.html 470250-2-ref.html
+!= different-h-v-1.html different-h-v-ref.html
+!= different-h-v-2.html different-h-v-ref.html
+!= different-h-v-1.html different-h-v-2.html
+== center-scaling-1.html center-scaling-1-ref.html
+fails-if(Android) fails-if(usesRepeatResampling) == center-scaling-2.html center-scaling-2-ref.html # Android: very different scaling (blurriness) on some sides
+fails-if(Android) fails-if(usesRepeatResampling) == center-scaling-3.html center-scaling-3-ref.html # Android: very different scaling (blurriness) on some sides
+== center-scaling-4t.html center-scaling-4t-ref.html
+== center-scaling-4r.html center-scaling-4r-ref.html
+== center-scaling-4b.html center-scaling-4b-ref.html
+== center-scaling-4l.html center-scaling-4l-ref.html
+== center-scaling-4tb.html center-scaling-4tb-ref.html
+== center-scaling-4lr.html center-scaling-4lr-ref.html
+== side-scaling-1h.html side-scaling-1h-ref.html
+== side-scaling-1v.html side-scaling-1v-ref.html
+== border-image-width-1a.html border-image-width-1-ref.html
+== border-image-width-1b.html border-image-width-1-ref.html
+== border-image-width-1c.html border-image-width-1-ref.html
+== border-image-width-large.html border-image-width-large-ref.html
+== border-image-outset-1a.html border-image-outset-1-ref.html
+== border-image-outset-1b.html border-image-outset-1-ref.html
+== border-image-outset-1c.html border-image-outset-1-ref.html
+== border-image-nofill-1.html border-image-nofill-1-ref.html
+== border-image-outset-resize-1.html border-image-outset-resize-1-ref.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,140,514) == border-image-outset-move-1.html border-image-outset-move-1-ref.html
+== border-image-style-none.html border-image-style-none-ref.html
+== border-image-style-none-length.html border-image-style-none-length-ref.html
+== border-image-style-none-auto.html border-image-style-none-auto-ref.html
+
+# border images with gradients
+== border-image-linear-gradient.html border-image-linear-gradient-ref.html
+fuzzy(1,98) fuzzy-if(skiaContent,1,350) == border-image-linear-gradient-slice-1.html border-image-linear-gradient-slice-1-ref.html
+fuzzy(1,149) fuzzy-if(OSX,1,10595) == border-image-linear-gradient-slice-2.html border-image-linear-gradient-slice-2-ref.html
+fuzzy(1,433) fuzzy-if(skiaContent,1,2500) == border-image-linear-gradient-slice-fill-1.html border-image-linear-gradient-slice-fill-1-ref.html
+fuzzy(1,177) fuzzy-if(OSX,1,25771) fuzzy-if(skiaContent,1,400) == border-image-linear-gradient-slice-fill-2.html border-image-linear-gradient-slice-fill-2-ref.html
+fuzzy(1,48)  fuzzy-if(OSX,5,1676) == border-image-linear-gradient-width.html border-image-linear-gradient-width-ref.html
+fuzzy(1,5000) fuzzy-if(OSX,1,15000) == border-image-linear-gradient-slice-width.html border-image-linear-gradient-slice-width-ref.html
+fuzzy(1,3000) fuzzy-if(OSX,1,6000) == border-image-linear-gradient-outset.html border-image-linear-gradient-outset-ref.html
+fuzzy(1,12) fuzzy-if(skiaContent,1,400) == border-image-linear-gradient-repeat-repeat-1.html border-image-linear-gradient-repeat-repeat-1-ref.html
+fuzzy(1,13) fuzzy-if(skiaContent,1,300) == border-image-linear-gradient-repeat-round-1.html border-image-linear-gradient-repeat-round-1-ref.html
+== border-image-linear-gradient-repeat-repeat-2.html border-image-linear-gradient-repeat-repeat-2-ref.html
+fuzzy(1,576) fuzzy-if(skiaContent,1,2000) == border-image-linear-gradient-repeat-round-2.html border-image-linear-gradient-repeat-round-2-ref.html
+fuzzy(1,8533) == border-image-linear-gradient-repeat-repeat-3.html border-image-linear-gradient-repeat-repeat-3-ref.html
+fuzzy(1,7161) == border-image-linear-gradient-repeat-round-3.html border-image-linear-gradient-repeat-round-3-ref.html
+
+== border-image-radial-gradient.html border-image-radial-gradient-ref.html
+fuzzy(1,42) fuzzy-if(skiaContent,2,20) == border-image-radial-gradient-slice-1.html border-image-radial-gradient-slice-1-ref.html
+fuzzy(1,46) fuzzy-if(OSX,2,4472) == border-image-radial-gradient-slice-2.html border-image-radial-gradient-slice-2-ref.html
+fuzzy(1,105) == border-image-radial-gradient-slice-fill-1.html border-image-radial-gradient-slice-fill-1-ref.html
+fuzzy(1,139) fuzzy-if(OSX,2,4478) fuzzy-if(skiaContent,2,120) == border-image-radial-gradient-slice-fill-2.html border-image-radial-gradient-slice-fill-2-ref.html
+fuzzy-if(skiaContent,1,2) == border-image-radial-gradient-width.html border-image-radial-gradient-width-ref.html
+fuzzy(1,9000) == border-image-radial-gradient-slice-width.html border-image-radial-gradient-slice-width-ref.html
+
+# OS X failures tracked in bug 957025
+== border-image-repeating-linear-gradient.html border-image-repeating-linear-gradient-ref.html
+fuzzy(1,5608) fails-if(OSX) fuzzy-if(skiaContent,3,3157) == border-image-repeating-linear-gradient-slice-fill-2.html border-image-repeating-linear-gradient-slice-fill-2-ref.html
+fuzzy(1,19200) fails-if(OSX) fuzzy-if(skiaContent,3,20000) == border-image-repeating-linear-gradient-repeat-round-2.html border-image-repeating-linear-gradient-repeat-round-2-ref.html
+
+fuzzy(1,657) == border-image-repeating-radial-gradient.html border-image-repeating-radial-gradient-ref.html
+fuzzy(1,510) fuzzy-if(skiaContent,3,362) == border-image-repeating-radial-gradient-slice-1.html border-image-repeating-radial-gradient-slice-1-ref.html
+fuzzy(1,438) fuzzy-if(skiaContent,3,437) == border-image-repeating-radial-gradient-slice-2.html border-image-repeating-radial-gradient-slice-2-ref.html
+fuzzy(1,1357) fuzzy-if(skiaContent,3,964) == border-image-repeating-radial-gradient-slice-fill-1.html border-image-repeating-radial-gradient-slice-fill-1-ref.html
+fuzzy(1,1058) fails-if(OSX) fuzzy-if(skiaContent,3,887) == border-image-repeating-radial-gradient-slice-fill-2.html border-image-repeating-radial-gradient-slice-fill-2-ref.html
+fuzzy(1,602) == border-image-repeating-radial-gradient-width.html border-image-repeating-radial-gradient-width-ref.html
+fuzzy(3,18000) fails-if(OSX) fuzzy-if(skiaContent,4,16462) == border-image-repeating-radial-gradient-slice-width.html border-image-repeating-radial-gradient-slice-width-ref.html
+== border-image-repeating-radial-gradient-repeat-repeat-2.html border-image-repeating-radial-gradient-repeat-repeat-2-ref.html
+fuzzy(1,1054) fails-if(OSX) fuzzy-if(skiaContent,2,952) == border-image-repeating-radial-gradient-repeat-round-2.html border-image-repeating-radial-gradient-repeat-round-2-ref.html
+
+# border-image-source (-moz-)element
+fuzzy(125,5808) == border-image-element.html border-image-element-ref.html
+
+# svg-as-border-image
+== svg-as-border-image-1a.html svg-as-border-image-1-ref.html
+== svg-as-border-image-1b.html svg-as-border-image-1-ref.html
+== svg-as-border-image-1c.html svg-as-border-image-1-ref.html
+== svg-as-border-image-2.html svg-as-border-image-2-ref.html
+== svg-as-border-image-3.html svg-as-border-image-3-ref.html
+== svg-as-border-image-4.html svg-as-border-image-4-ref.html
diff --git a/layout/reftests/border-image/repeat-image-1-ref.html b/layout/reftests/border-image/repeat-image-1-ref.html
new file mode 100644
index 000000000..73620462c
--- /dev/null
+++ b/layout/reftests/border-image/repeat-image-1-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  table { margin: 0; padding: 0; border-spacing: 0; empty-cells: show; }
+  td { padding: 0; }
+
+  </style>
+</head>
+<body>
+<table>
+  <col style="width: 3px">
+  <col style="width: 1px">
+  <col style="width: 1px">
+  <col style="width: 1px">
+  <col style="width: 1px">
+  <col style="width: 3px">
+
+  <tr style="height: 1px">
+    <td style="background: #ff0000"></td>
+    <td style="background: #00ff00"></td>
+    <td style="background: #0000ff"></td>
+    <td style="background: #00ff00"></td>
+    <td style="background: #0000ff"></td>
+    <td style="background: #ff0000"></td>
+  </tr>
+  <tr style="height: 1px">
+    <td style="background: #00ff00"></td>
+    <td style="background: #ff0000"></td>
+    <td style="background: #ff0000"></td>
+    <td style="background: #ff0000"></td>
+    <td style="background: #ff0000"></td>
+    <td style="background: #0000ff"></td>
+  </tr>
+  <tr style="height: 1px">
+    <td style="background: #0000ff"></td>
+    <td style="background: #ff0000"></td>
+    <td style="background: #ff0000"></td>
+    <td style="background: #ff0000"></td>
+    <td style="background: #ff0000"></td>
+    <td style="background: #00ff00"></td>
+  </tr>
+  <tr style="height: 1px">
+    <td style="background: #ff0000"></td>
+    <td style="background: #00ff00"></td>
+    <td style="background: #0000ff"></td>
+    <td style="background: #00ff00"></td>
+    <td style="background: #0000ff"></td>
+    <td style="background: #ff0000"></td>
+  </tr>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/border-image/repeat-image-1.html b/layout/reftests/border-image/repeat-image-1.html
new file mode 100644
index 000000000..87705a0b7
--- /dev/null
+++ b/layout/reftests/border-image/repeat-image-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div.p1 {
+    background: red; /* fail if this shows through */
+    background-image: url('3x3multicolor.png'); /* fail if this shows through */
+    border-width: 1px 3px;
+    border-style: solid;
+    border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
+    -khtml-border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
+    border-image: url('4x4multicolor.png') 1 1 1 1 repeat;
+  }
+
+  div.p2 {
+    background: red; /* fail if this shows through */
+    background-image: url('3x3multicolor.png'); /* fail if this shows through */
+    border-width: 1px 3px;
+    border-style: solid;
+    border-image: url('4x4multicolor.png') 1 1 1 1;
+    -khtml-border-image: url('4x4multicolor.png') 1 1 1 1;
+    border-image: url('4x4multicolor.png') 1 1 1 1;
+  }
+
+  </style>
+</head>
+<body>
+<div class="p1" style="width: 4px; height: 2px"></div>
+<!--<div class="p2" style="width: 4px; height: 2px"></div> -->
+</body>
+</html>
diff --git a/layout/reftests/border-image/reticule-bl.png b/layout/reftests/border-image/reticule-bl.png
new file mode 100644
index 000000000..6abbaf319
--- /dev/null
+++ b/layout/reftests/border-image/reticule-bl.png
diff --git a/layout/reftests/border-image/reticule-bo.png b/layout/reftests/border-image/reticule-bo.png
new file mode 100644
index 000000000..f72a67381
--- /dev/null
+++ b/layout/reftests/border-image/reticule-bo.png
diff --git a/layout/reftests/border-image/reticule-br.png b/layout/reftests/border-image/reticule-br.png
new file mode 100644
index 000000000..84e22afe2
--- /dev/null
+++ b/layout/reftests/border-image/reticule-br.png
diff --git a/layout/reftests/border-image/reticule-ct.png b/layout/reftests/border-image/reticule-ct.png
new file mode 100644
index 000000000..71ac10f61
--- /dev/null
+++ b/layout/reftests/border-image/reticule-ct.png
diff --git a/layout/reftests/border-image/reticule-le.png b/layout/reftests/border-image/reticule-le.png
new file mode 100644
index 000000000..abe56ffad
--- /dev/null
+++ b/layout/reftests/border-image/reticule-le.png
diff --git a/layout/reftests/border-image/reticule-ri.png b/layout/reftests/border-image/reticule-ri.png
new file mode 100644
index 000000000..95d7db842
--- /dev/null
+++ b/layout/reftests/border-image/reticule-ri.png
diff --git a/layout/reftests/border-image/reticule-tl.png b/layout/reftests/border-image/reticule-tl.png
new file mode 100644
index 000000000..8a3516998
--- /dev/null
+++ b/layout/reftests/border-image/reticule-tl.png
diff --git a/layout/reftests/border-image/reticule-to.png b/layout/reftests/border-image/reticule-to.png
new file mode 100644
index 000000000..d1b082c9b
--- /dev/null
+++ b/layout/reftests/border-image/reticule-to.png
diff --git a/layout/reftests/border-image/reticule-tr.png b/layout/reftests/border-image/reticule-tr.png
new file mode 100644
index 000000000..cd9bb5a5a
--- /dev/null
+++ b/layout/reftests/border-image/reticule-tr.png
diff --git a/layout/reftests/border-image/reticule.png b/layout/reftests/border-image/reticule.png
new file mode 100644
index 000000000..02c7d10e7
--- /dev/null
+++ b/layout/reftests/border-image/reticule.png
diff --git a/layout/reftests/border-image/roundrectbutton.png b/layout/reftests/border-image/roundrectbutton.png
new file mode 100644
index 000000000..c194fdc5f
--- /dev/null
+++ b/layout/reftests/border-image/roundrectbutton.png
diff --git a/layout/reftests/border-image/side-scaling-1h-ref.html b/layout/reftests/border-image/side-scaling-1h-ref.html
new file mode 100644
index 000000000..2b306c385
--- /dev/null
+++ b/layout/reftests/border-image/side-scaling-1h-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html><head>
+<title>border-image: repeat with zero-height top and bottom</title>
+<style>
+span {
+  display: inline-block;
+  margin: 10px;
+  box-sizing: border-box;
+  height: 24px;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 0 6px;
+  border-image: url("roundrectbutton.png") 0 6 repeat stretch;
+}
+</style>
+</head><body>
+<p>
+<span style="width:12px"></span>
+<span style="width:13px"></span>
+<span style="width:14px"></span>
+<span style="width:16px"></span>
+<span style="width:18px"></span>
+<span style="width:20px"></span>
+<span style="width:25px"></span>
+<span style="width:30px"></span>
+<span style="width:40px"></span>
+</p>
+</body></html>
diff --git a/layout/reftests/border-image/side-scaling-1h.html b/layout/reftests/border-image/side-scaling-1h.html
new file mode 100644
index 000000000..6ad0369af
--- /dev/null
+++ b/layout/reftests/border-image/side-scaling-1h.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html><head>
+<title>border-image: repeat with zero-height top and bottom</title>
+<style>
+span {
+  display: inline-block;
+  margin: 10px;
+  box-sizing: border-box;
+  height: 24px;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 0 6px;
+  border-image: url("roundrectbutton.png") 0 6 repeat;
+}
+</style>
+</head><body>
+<p>
+<span style="width:12px"></span>
+<span style="width:13px"></span>
+<span style="width:14px"></span>
+<span style="width:16px"></span>
+<span style="width:18px"></span>
+<span style="width:20px"></span>
+<span style="width:25px"></span>
+<span style="width:30px"></span>
+<span style="width:40px"></span>
+</p>
+</body></html>
diff --git a/layout/reftests/border-image/side-scaling-1v-ref.html b/layout/reftests/border-image/side-scaling-1v-ref.html
new file mode 100644
index 000000000..735ecf3cf
--- /dev/null
+++ b/layout/reftests/border-image/side-scaling-1v-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html><head>
+<title>border-image: repeat with zero-width left and right</title>
+<style>
+span {
+  display: inline-block;
+  margin: 5px;
+  box-sizing: border-box;
+  width: 13px;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 10px 0;
+  border-image: url("roundrectbutton.png") 10 0 stretch repeat;
+}
+</style>
+</head><body>
+<p>
+<span style="height:24px"></span>
+<span style="height:25px"></span>
+<span style="height:26px"></span>
+<span style="height:27px"></span>
+<span style="height:28px"></span>
+<span style="height:30px"></span>
+<span style="height:35px"></span>
+<span style="height:40px"></span>
+<span style="height:50px"></span>
+</p>
+</body></html>
diff --git a/layout/reftests/border-image/side-scaling-1v.html b/layout/reftests/border-image/side-scaling-1v.html
new file mode 100644
index 000000000..b3c99f6a2
--- /dev/null
+++ b/layout/reftests/border-image/side-scaling-1v.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html><head>
+<title>border-image: repeat with zero-width left and right</title>
+<style>
+span {
+  display: inline-block;
+  margin: 5px;
+  box-sizing: border-box;
+  width: 13px;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 10px 0;
+  border-image: url("roundrectbutton.png") 10 0 repeat;
+}
+</style>
+</head><body>
+<p>
+<span style="height:24px"></span>
+<span style="height:25px"></span>
+<span style="height:26px"></span>
+<span style="height:27px"></span>
+<span style="height:28px"></span>
+<span style="height:30px"></span>
+<span style="height:35px"></span>
+<span style="height:40px"></span>
+<span style="height:50px"></span>
+</p>
+</body></html>
diff --git a/layout/reftests/border-image/solid-image-1-ref.html b/layout/reftests/border-image/solid-image-1-ref.html
new file mode 100644
index 000000000..511dc115b
--- /dev/null
+++ b/layout/reftests/border-image/solid-image-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+<div style="border: solid #1DD813 1em;">border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/solid-image-1.html b/layout/reftests/border-image/solid-image-1.html
new file mode 100644
index 000000000..ef28ba114
--- /dev/null
+++ b/layout/reftests/border-image/solid-image-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    border-width: 1em;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+  }
+  </style>
+</head>
+<body>
+<div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/solid-image-1a.html b/layout/reftests/border-image/solid-image-1a.html
new file mode 100644
index 000000000..af60a75e3
--- /dev/null
+++ b/layout/reftests/border-image/solid-image-1a.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    border-width: 1em;
+    border-style: solid;
+    border-image-source: url('3x3green-1DD813.png');
+    border-image-slice: 1 1 1 1;
+  }
+  </style>
+</head>
+<body>
+<div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/solid-image-2-ref.html b/layout/reftests/border-image/solid-image-2-ref.html
new file mode 100644
index 000000000..640791fea
--- /dev/null
+++ b/layout/reftests/border-image/solid-image-2-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    border: 10px solid #1DD813;
+    margin: 1px;
+  }
+
+  </style>
+</head>
+<body>
+<div style="width: 50px; height: 5px"></div>
+<div style="width: 51px; height: 5px"></div>
+<div style="width: 52px; height: 5px"></div>
+<div style="width: 53px; height: 5px"></div>
+<div style="width: 54px; height: 5px"></div>
+<div style="width: 55px; height: 5px"></div>
+<div style="width: 56px; height: 5px"></div>
+<div style="width: 57px; height: 5px"></div>
+<div style="width: 58px; height: 5px"></div>
+<div style="width: 59px; height: 5px"></div>
+<div style="width: 550px; height: 5px"></div>
+<div style="width: 551px; height: 5px"></div>
+<div style="width: 552px; height: 5px"></div>
+<div style="width: 553px; height: 5px"></div>
+<div style="width: 554px; height: 5px"></div>
+<div style="width: 555px; height: 5px"></div>
+<div style="width: 556px; height: 5px"></div>
+<div style="width: 557px; height: 5px"></div>
+<div style="width: 558px; height: 5px"></div>
+<div style="width: 559px; height: 5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/solid-image-2.html b/layout/reftests/border-image/solid-image-2.html
new file mode 100644
index 000000000..fe1837f51
--- /dev/null
+++ b/layout/reftests/border-image/solid-image-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    border-width: 10px;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1;
+    margin: 1px;
+  }
+
+  </style>
+</head>
+<body>
+<div style="width: 50px; height: 5px"></div>
+<div style="width: 51px; height: 5px"></div>
+<div style="width: 52px; height: 5px"></div>
+<div style="width: 53px; height: 5px"></div>
+<div style="width: 54px; height: 5px"></div>
+<div style="width: 55px; height: 5px"></div>
+<div style="width: 56px; height: 5px"></div>
+<div style="width: 57px; height: 5px"></div>
+<div style="width: 58px; height: 5px"></div>
+<div style="width: 59px; height: 5px"></div>
+<div style="width: 550px; height: 5px"></div>
+<div style="width: 551px; height: 5px"></div>
+<div style="width: 552px; height: 5px"></div>
+<div style="width: 553px; height: 5px"></div>
+<div style="width: 554px; height: 5px"></div>
+<div style="width: 555px; height: 5px"></div>
+<div style="width: 556px; height: 5px"></div>
+<div style="width: 557px; height: 5px"></div>
+<div style="width: 558px; height: 5px"></div>
+<div style="width: 559px; height: 5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/solid-image-2a.html b/layout/reftests/border-image/solid-image-2a.html
new file mode 100644
index 000000000..3e2f48f60
--- /dev/null
+++ b/layout/reftests/border-image/solid-image-2a.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+
+  div {
+    border-width: 10px;
+    border-style: solid;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
+    -khtml-border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
+    border-image: url('3x3green-1DD813.png') 1 1 1 1 repeat;
+    margin: 1px;
+  }
+
+  </style>
+</head>
+<body>
+<div style="width: 50px; height: 5px"></div>
+<div style="width: 51px; height: 5px"></div>
+<div style="width: 52px; height: 5px"></div>
+<div style="width: 53px; height: 5px"></div>
+<div style="width: 54px; height: 5px"></div>
+<div style="width: 55px; height: 5px"></div>
+<div style="width: 56px; height: 5px"></div>
+<div style="width: 57px; height: 5px"></div>
+<div style="width: 58px; height: 5px"></div>
+<div style="width: 59px; height: 5px"></div>
+<div style="width: 550px; height: 5px"></div>
+<div style="width: 551px; height: 5px"></div>
+<div style="width: 552px; height: 5px"></div>
+<div style="width: 553px; height: 5px"></div>
+<div style="width: 554px; height: 5px"></div>
+<div style="width: 555px; height: 5px"></div>
+<div style="width: 556px; height: 5px"></div>
+<div style="width: 557px; height: 5px"></div>
+<div style="width: 558px; height: 5px"></div>
+<div style="width: 559px; height: 5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-1-ref.html b/layout/reftests/border-image/svg-as-border-image-1-ref.html
new file mode 100644
index 000000000..ea2a51381
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>reference of svg-as-border-image</title>
+<style>
+div.border {
+  width: 40px;
+  height: 40px;
+  background-color: blue;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="0" y="0" width="15" height="15" fill="pink"/><rect x="25" y="25" width="15" height="15" fill="green"/></svg>');
+}
+
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-1a.html b/layout/reftests/border-image/svg-as-border-image-1a.html
new file mode 100644
index 000000000..6b5eaf405
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-1a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of svg-as-border-image</title>
+<style>
+div.border {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border: 15px solid;
+  border-image: 25% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" ><rect x="0" y="0" width="10" height="10" fill="pink"/><rect x="30" y="30" width="10" height="10" fill="green"/></svg>');
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-1b.html b/layout/reftests/border-image/svg-as-border-image-1b.html
new file mode 100644
index 000000000..2c3e5d92b
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of svg-as-border-image</title>
+<style>
+div.border {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border: 15px solid;
+  border-image: 25% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="25%" height="25%" fill="pink"/><rect x="75%" y="75%" width="25%" height="25%" fill="green"/></svg>');
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-1c.html b/layout/reftests/border-image/svg-as-border-image-1c.html
new file mode 100644
index 000000000..2ab2642e6
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-1c.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of svg-as-border-image</title>
+<style>
+div.border {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border: 15px solid;
+  border-image: 25% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20" preserveAspectRatio="xMaxYMid slice"><rect x="0" y="0" width="10" height="5" fill="pink"/><rect x="30" y="15" width="10" height="5" fill="green"/></svg>');
+}
+</style>
+</head>
+<body>
+<div class="border"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-2-ref.html b/layout/reftests/border-image/svg-as-border-image-2-ref.html
new file mode 100644
index 000000000..72cd23b15
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>reference for svg-as-border-image</title>
+<style>
+div.border {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border: 10px solid;
+  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="240px" height="240px" viewBox="0 0 240 240"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
+}
+</style>
+</head>
+<body>
+<div class="border" style="width:100px;height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-2.html b/layout/reftests/border-image/svg-as-border-image-2.html
new file mode 100644
index 000000000..56d9e3b81
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of svg-as-border-image</title>
+<style>
+div.border {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border: 10px solid;
+  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
+}
+</style>
+</head>
+<body>
+<div class="border" style="width:100px;height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-3-ref.html b/layout/reftests/border-image/svg-as-border-image-3-ref.html
new file mode 100644
index 000000000..42c176b86
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-3-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>reference for svg-as-border-image</title>
+<style>
+div.border {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border: 10px solid;
+  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
+}
+</style>
+</head>
+<body>
+<div class="border" style="width:200px;height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-3.html b/layout/reftests/border-image/svg-as-border-image-3.html
new file mode 100644
index 000000000..44403c15c
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-3.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<title>test of svg-as-border-image</title>
+<style>
+div.border {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border: 10px solid;
+  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
+}
+</style>
+</head>
+<body>
+<div class="border" style="width:200px;height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-4-ref.html b/layout/reftests/border-image/svg-as-border-image-4-ref.html
new file mode 100644
index 000000000..41833c316
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-4-ref.html
@@ -0,0 +1,18 @@
+<html>
+<head>
+<title>reference of svg-as-border-image</title>
+<style type="text/css">
+div {
+  width: 100px;
+  height: 100px;
+  margin: 30px;
+  border-width: 30px;
+  border-style: solid;
+  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-4.html b/layout/reftests/border-image/svg-as-border-image-4.html
new file mode 100644
index 000000000..81574ba63
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-4.html
@@ -0,0 +1,26 @@
+<html class="reftest-wait">
+<head>
+<title>test of svg-as-border-image</title>
+<style type="text/css">
+div {
+  width: 400px;
+  height: 100px;
+  margin: 30px;
+  border-width: 30px;
+  border-style: solid;
+  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="red"/></svg>') 5% stretch;
+}
+</style>
+<script>
+function resizeDiv() {
+  document.getElementById('borderdiv').style.width = '100px';
+  document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener('MozReftestInvalidate', resizeDiv, false);
+</script>
+</head>
+<body>
+<div id="borderdiv"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/transparent-image-1-ref.html b/layout/reftests/border-image/transparent-image-1-ref.html
new file mode 100644
index 000000000..cf1b72dfc
--- /dev/null
+++ b/layout/reftests/border-image/transparent-image-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+<div style="padding: 1em;">border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/transparent-image-1.html b/layout/reftests/border-image/transparent-image-1.html
new file mode 100644
index 000000000..397d470a4
--- /dev/null
+++ b/layout/reftests/border-image/transparent-image-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of border-image</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+  <style type="text/css">
+  div {
+    border: double orange 1em;
+    border-image: url('3x3transparent.png') 1 1 1 1;
+    -khtml-border-image: url('3x3transparent.png') 1 1 1 1;
+    border-image: url('3x3transparent.png') 1 1 1 1;
+  }
+  </style>
+</head>
+<body>
+<div>border.png<br />second longer longer longer longer longer longer line<br />third longer longer longer longer longer longer line</div>
+</body>
+</html>
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/border-image
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip