Adding upstream version 115.7.0esr.upstream/115.7.0esr upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
commit: 36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree: 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/border-image
parent: Initial commit. (diff)
download: firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
172 files changed, 6697 insertions, 0 deletions
diff --git a/layout/reftests/border-image/10x5multicolor.png b/layout/reftests/border-image/10x5multicolor.png
new file mode 100644
index 0000000000..7940d1abc7
--- /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 0000000000..bb7a3cf21f
--- /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 0000000000..586102670a
--- /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 0000000000..6528a9f036
--- /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 0000000000..bf1cffcb0d
--- /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 0000000000..32c2eb0431
--- /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 0000000000..df01ba3366
--- /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 0000000000..962caff73f
--- /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 = "";
+    });
+</script>
+</body></html>
diff --git a/layout/reftests/border-image/4x4multicolor.png b/layout/reftests/border-image/4x4multicolor.png
new file mode 100644
index 0000000000..4b817a1264
--- /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 0000000000..865d706d1e
--- /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 0000000000..c9c0429700
--- /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 0000000000..8156698c1c
--- /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 0000000000..b21379f4e6
--- /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 0000000000..cfe4252bd4
--- /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 0000000000..905d757e73
--- /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 0000000000..339a1fd3bf
--- /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 0000000000..e9fd188268
--- /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 0000000000..ee57589671
--- /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 0000000000..8c9b7af812
--- /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 0000000000..d40b746420
--- /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 0000000000..64075ff2a7
--- /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 0000000000..a170eae792
--- /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 0000000000..b4eb129e0a
--- /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 0000000000..562c3db211
--- /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 0000000000..021e31026c
--- /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 0000000000..925b34f095
--- /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 0000000000..a87e62a30d
--- /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 0000000000..8940ea057e
--- /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 0000000000..de7874d17f
--- /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 0000000000..601e0e3247
--- /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 0000000000..1ab89e535d
--- /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 0000000000..7ace7074c3
--- /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 0000000000..fbbf8d6df6
--- /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 0000000000..e97e5e1461
--- /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 0000000000..db4a91385f
--- /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 0000000000..266e6a1050
--- /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 0000000000..dfa38d967b
--- /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 0000000000..8be90efaae
--- /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 0000000000..eb081e1864
--- /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 0000000000..61608e3276
--- /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 0000000000..0184adff03
--- /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 0000000000..586fe96209
--- /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 0000000000..51e7e7f50b
--- /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 0000000000..9a84c37771
--- /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 0000000000..e431d6eb74
--- /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 0000000000..7cc063f122
--- /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 0000000000..0c8ade8075
--- /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 0000000000..1c310c023d
--- /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 0000000000..284b0d01d1
--- /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 0000000000..b36074fba4
--- /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 0000000000..64029d6647
--- /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 0000000000..88f60e8d32
--- /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 0000000000..720221b502
--- /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 0000000000..952cd10de0
--- /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 0000000000..59068a8cd1
--- /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 0000000000..8a0a42c016
--- /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 0000000000..aaff661e73
--- /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 0000000000..65461db8a9
--- /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 0000000000..d59e19f42c
--- /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 0000000000..91803a6271
--- /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 0000000000..9c8e6e3352
--- /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 0000000000..298211cb69
--- /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 0000000000..8a93acedd0
--- /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-repeat-space-8z-ref.html b/layout/reftests/border-image/border-image-repeat-space-8z-ref.html
new file mode 100644
index 0000000000..9eacbb0527
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeat-space-8z-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html reftest-zoom="0.6">
+<title>Reference: border-image-repeat:space with non-initial border-image-width</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+
+<style>
+  div {
+    border: 27px solid transparent;
+    border-image: url("border.png") 27 space;
+    border-image-width: 1;
+  }
+</style>
+
+<div style="width: 505px; height: 50px"></div>
+<div style="width: 475px; height: 0px"></div>
+<div style="width: 475px; height: 1px"></div>
+<div style="width: 26px; height: 26px"></div>
+<div style="width: 53px; height: 53px"></div>
+<div style="width: 55px; height: 55px"></div>
+<div style="width: 505px; height: 50px; writing-mode: vertical-rl"></div>
+
+</html>
diff --git a/layout/reftests/border-image/border-image-repeat-space-8z.html b/layout/reftests/border-image/border-image-repeat-space-8z.html
new file mode 100644
index 0000000000..82dbb30235
--- /dev/null
+++ b/layout/reftests/border-image/border-image-repeat-space-8z.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html reftest-zoom="0.6">
+<title>CSS Border Image: border-image-repeat:space with non-initial border-image-width</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+<link rel="match" href="border-image-repeat-space-8z-ref.html">
+<meta name="assert" content="An explicit 'border-image-width' which is exactly the same size as 'border-width' should render the same as 'border-image-width:1' (the initial value).">
+
+<!-- NOTE: this is a copy of /css/css-backgrounds/border-image-repeat-space-8.html with an added "reftest-zoom" -->
+
+<style>
+  div {
+    border: 27px solid;
+    border-image: url("border.png") 27 space;
+    border-image-width: 27px;
+  }
+</style>
+
+<div style="width: 505px; height: 50px"></div>
+<div style="width: 475px; height: 0px"></div>
+<div style="width: 475px; height: 1px"></div>
+<div style="width: 26px; height: 26px"></div>
+<div style="width: 53px; height: 53px"></div>
+<div style="width: 55px; height: 55px"></div>
+<div style="width: 505px; height: 50px; writing-mode: vertical-rl"></div>
+
+</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 0000000000..1edafefe6d
--- /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 0000000000..48fcf7e10a
--- /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 0000000000..dfac15059e
--- /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 0000000000..7735c44115
--- /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 0000000000..b3d4791064
--- /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 0000000000..5c4d073f02
--- /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 0000000000..eb4c61480b
--- /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 0000000000..8ddeffa628
--- /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 0000000000..249679b220
--- /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 0000000000..f66c2b87c1
--- /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 0000000000..3305416cee
--- /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 0000000000..6c64ba43ce
--- /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 0000000000..e82c3aa6f4
--- /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 0000000000..c38efac8b9
--- /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 0000000000..e4d31c78b8
--- /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 0000000000..6d63b73000
--- /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 0000000000..76c396cb0d
--- /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 0000000000..26a4b30f93
--- /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 0000000000..ce707ea939
--- /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 0000000000..308621c697
--- /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 0000000000..508d95e298
--- /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 0000000000..3b977f4541
--- /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 0000000000..df766ffa5e
--- /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 0000000000..6673000288
--- /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 0000000000..0404acf81c
--- /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 0000000000..d8e084faf7
--- /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 0000000000..9ba599d324
--- /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 0000000000..04e9659533
--- /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 0000000000..de366e3fd7
--- /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 0000000000..3868579303
--- /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 0000000000..8f0497446b
--- /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 0000000000..2c6c443de3
--- /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 0000000000..d8f6431581
--- /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 0000000000..321a3c6fdc
--- /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 0000000000..b7d8f5822d
--- /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 0000000000..481aa19486
--- /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/border.png b/layout/reftests/border-image/border.png
new file mode 100644
index 0000000000..7a657391d6
--- /dev/null
+++ b/layout/reftests/border-image/border.png
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 0000000000..c3755d82db
--- /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 0000000000..7b1c2297a4
--- /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 0000000000..3b253fa529
--- /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 0000000000..d679e17d53
--- /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 0000000000..86db1ec450
--- /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 0000000000..6f33bb0fa1
--- /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 0000000000..3b23376407
--- /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 0000000000..c41e43a511
--- /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 0000000000..e3ebeb8763
--- /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 0000000000..c4a4aec60a
--- /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 0000000000..58869ac1d2
--- /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 0000000000..439ee5dce8
--- /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 0000000000..5edcd2381d
--- /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 0000000000..38874cbbbb
--- /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 0000000000..c04f1670cf
--- /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 0000000000..401005a39f
--- /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 0000000000..08344b38a0
--- /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 0000000000..2d23aa8e41
--- /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 0000000000..7fe5da5e60
--- /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 0000000000..908b732720
--- /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 0000000000..6bce841adf
--- /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 0000000000..3beef12726
--- /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 0000000000..029d46f2a8
--- /dev/null
+++ b/layout/reftests/border-image/gen-refs.py
@@ -0,0 +1,473 @@
+# 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 0000000000..56ba68aa98
--- /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 0000000000..de76bd27be
--- /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 0000000000..2adb8d636e
--- /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 0000000000..a35d041b38
--- /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 0000000000..ed74e4d7b8
--- /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 0000000000..7727bb083d
--- /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 0000000000..55e14cb084
--- /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 0000000000..a62562bd70
--- /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 0000000000..f4e6ab1e18
--- /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 0000000000..95763c6d95
--- /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.list b/layout/reftests/border-image/reftest.list
new file mode 100644
index 0000000000..677d7c65ec
--- /dev/null
+++ b/layout/reftests/border-image/reftest.list
@@ -0,0 +1,97 @@
+== 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,0-1,0-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
+fuzzy-if(useDrawSnapshot,35-35,4050-4050) == center-scaling-2.html center-scaling-2-ref.html # Android: very different scaling (blurriness) on some sides
+fuzzy-if(useDrawSnapshot,35-35,5220-5220) == 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,0-140,0-514) fuzzy-if(winWidget,0-144,0-448) == 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
+
+# The fuzziness here is due to subtle rounding behavior differences
+# between different code paths that aren't necessarily a bug:
+fuzzy(1-150,1-2650) fails-if(useDrawSnapshot) == border-image-repeat-space-8z.html border-image-repeat-space-8z-ref.html
+
+# border images with gradients
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-3,300-1804) == border-image-linear-gradient.html border-image-linear-gradient-ref.html
+fuzzy(0-1,0-350) fuzzy-if(!geckoview,1-3,179-37537) == border-image-linear-gradient-slice-1.html border-image-linear-gradient-slice-1-ref.html
+fuzzy(0-1,0-515) fuzzy-if(OSX,0-1,0-10595) fuzzy-if(!geckoview,1-3,272-25136) == border-image-linear-gradient-slice-2.html border-image-linear-gradient-slice-2-ref.html
+fuzzy(0-1,0-2500) fuzzy-if(!geckoview,1-3,200-86037) == border-image-linear-gradient-slice-fill-1.html border-image-linear-gradient-slice-fill-1-ref.html
+fuzzy(0-1,0-649) fuzzy-if(OSX,0-1,0-25771) fuzzy-if(!Android,0-1,0-546) fuzzy-if(Android,0-1,0-6093) fuzzy-if(!geckoview,1-3,477-57480) == border-image-linear-gradient-slice-fill-2.html border-image-linear-gradient-slice-fill-2-ref.html
+fuzzy(0-1,0-134) fuzzy-if(OSX,0-5,0-1676) fuzzy-if(!geckoview,1-1,0-4537) == border-image-linear-gradient-width.html border-image-linear-gradient-width-ref.html
+fuzzy(0-2,0-60590) fuzzy-if(Android,0-4,0-18022) fuzzy-if(OSX,0-1,0-15000) fuzzy-if(!useDrawSnapshot&&!geckoview,1-2,3900-60581) == border-image-linear-gradient-slice-width.html border-image-linear-gradient-slice-width-ref.html
+fuzzy(0-2,0-26758) fuzzy-if(OSX,0-1,0-6000) fuzzy-if(!geckoview,1-3,2400-26758) == border-image-linear-gradient-outset.html border-image-linear-gradient-outset-ref.html
+fuzzy(0-1,0-400) fuzzy-if(!geckoview,1-3,200-26872) == border-image-linear-gradient-repeat-repeat-1.html border-image-linear-gradient-repeat-repeat-1-ref.html
+fuzzy(0-1,0-300) fuzzy-if(!geckoview,1-3,200-27131) == border-image-linear-gradient-repeat-round-1.html border-image-linear-gradient-repeat-round-1-ref.html
+fuzzy-if(Android,0-1,0-1894) fuzzy-if(!useDrawSnapshot&&!geckoview,1-2,2400-67805) == border-image-linear-gradient-repeat-repeat-2.html border-image-linear-gradient-repeat-repeat-2-ref.html
+fuzzy(0-1,0-2000) fuzzy-if(!geckoview,1-2,288-9500) == border-image-linear-gradient-repeat-round-2.html border-image-linear-gradient-repeat-round-2-ref.html
+fuzzy(0-1,0-8533) fuzzy-if(!geckoview&&!swgl,1-3,972-9500) == border-image-linear-gradient-repeat-repeat-3.html border-image-linear-gradient-repeat-repeat-3-ref.html
+fuzzy(0-3,0-107563) fuzzy-if(!geckoview&&!swgl,1-3,1000-107563) == border-image-linear-gradient-repeat-round-3.html border-image-linear-gradient-repeat-round-3-ref.html
+
+fuzzy(0-1,0-2096) == border-image-radial-gradient.html border-image-radial-gradient-ref.html
+fuzzy(0-1,0-37818) == border-image-radial-gradient-slice-1.html border-image-radial-gradient-slice-1-ref.html
+fuzzy(0-1,0-26363) == border-image-radial-gradient-slice-2.html border-image-radial-gradient-slice-2-ref.html
+fuzzy(0-1,0-90873) == border-image-radial-gradient-slice-fill-1.html border-image-radial-gradient-slice-fill-1-ref.html
+fuzzy(0-1,0-61729) == border-image-radial-gradient-slice-fill-2.html border-image-radial-gradient-slice-fill-2-ref.html
+fuzzy(0-2,0-4894) == border-image-radial-gradient-width.html border-image-radial-gradient-width-ref.html
+fuzzy(0-3,0-66698) == border-image-radial-gradient-slice-width.html border-image-radial-gradient-slice-width-ref.html
+
+# OS X failures tracked in bug 957025
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-4,455-2000) == border-image-repeating-linear-gradient.html border-image-repeating-linear-gradient-ref.html
+fails-if(OSX) fuzzy(0-3,0-95449) == border-image-repeating-linear-gradient-slice-fill-2.html border-image-repeating-linear-gradient-slice-fill-2-ref.html
+fails-if(OSX) fuzzy(0-3,0-20000) fuzzy-if(!geckoview,1-4,800-14000) == border-image-repeating-linear-gradient-repeat-round-2.html border-image-repeating-linear-gradient-repeat-round-2-ref.html
+
+fuzzy(0-3,0-3008) == border-image-repeating-radial-gradient.html border-image-repeating-radial-gradient-ref.html
+fuzzy(0-3,0-62078) == border-image-repeating-radial-gradient-slice-1.html border-image-repeating-radial-gradient-slice-1-ref.html
+fuzzy(0-3,0-40536) == border-image-repeating-radial-gradient-slice-2.html border-image-repeating-radial-gradient-slice-2-ref.html
+fuzzy(0-3,0-1794) fuzzy-if(!geckoview,1-3,30-12194) == border-image-repeating-radial-gradient-slice-fill-1.html border-image-repeating-radial-gradient-slice-fill-1-ref.html
+fails-if(OSX) fuzzy(0-3,0-1435) fuzzy-if(!geckoview,1-2,20-8000) == border-image-repeating-radial-gradient-slice-fill-2.html border-image-repeating-radial-gradient-slice-fill-2-ref.html
+fuzzy(0-3,0-7441) == border-image-repeating-radial-gradient-width.html border-image-repeating-radial-gradient-width-ref.html
+fails-if(OSX) fuzzy(0-8,0-99728) == border-image-repeating-radial-gradient-slice-width.html border-image-repeating-radial-gradient-slice-width-ref.html
+fuzzy(0-3,0-117768) == border-image-repeating-radial-gradient-repeat-repeat-2.html border-image-repeating-radial-gradient-repeat-repeat-2-ref.html
+fails-if(OSX) fuzzy(0-3,0-116185) == 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(0-125,0-5903) == 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-4a.html svg-as-border-image-4-ref.html
+== svg-as-border-image-4b.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 0000000000..73620462c5
--- /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 0000000000..87705a0b7c
--- /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 0000000000..6abbaf319f
--- /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 0000000000..f72a67381c
--- /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 0000000000..84e22afe2a
--- /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 0000000000..71ac10f611
--- /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 0000000000..abe56ffad6
--- /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 0000000000..95d7db8423
--- /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 0000000000..8a3516998a
--- /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 0000000000..d1b082c9ba
--- /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 0000000000..cd9bb5a5a4
--- /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 0000000000..02c7d10e76
--- /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 0000000000..c194fdc5fb
--- /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 0000000000..2b306c385a
--- /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 0000000000..6ad0369af9
--- /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 0000000000..735ecf3cfa
--- /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 0000000000..b3c99f6a28
--- /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 0000000000..511dc115b7
--- /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 0000000000..ef28ba1141
--- /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 0000000000..af60a75e36
--- /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 0000000000..640791fea7
--- /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 0000000000..fe1837f511
--- /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 0000000000..3e2f48f60d
--- /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 0000000000..ea2a51381b
--- /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 0000000000..6b5eaf405d
--- /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 0000000000..2c3e5d92bc
--- /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 0000000000..2ab2642e6b
--- /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 0000000000..72cd23b153
--- /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 0000000000..56d9e3b81c
--- /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 0000000000..42c176b866
--- /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 0000000000..44403c15c1
--- /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 0000000000..1fcff1f834
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-4-ref.html
@@ -0,0 +1,24 @@
+<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;
+}
+#border5p {
+  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;
+}
+#border25p {
+  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>') 25% stretch;
+}
+</style>
+</head>
+<body>
+<div id="border5p"></div>
+<div id="border25p"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-4a.html b/layout/reftests/border-image/svg-as-border-image-4a.html
new file mode 100644
index 0000000000..ec4f54e61a
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-4a.html
@@ -0,0 +1,33 @@
+<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;
+}
+#border5p {
+  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;
+}
+#border25p {
+  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>') 25% stretch;
+}
+</style>
+<script>
+function resizeDiv() {
+  document.getElementById('border5p').style.width = '100px';
+  document.getElementById('border25p').style.width = '100px';
+  document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener('MozReftestInvalidate', resizeDiv);
+</script>
+</head>
+<body>
+<div id="border5p"></div>
+<div id="border25p"></div>
+</body>
+</html>
diff --git a/layout/reftests/border-image/svg-as-border-image-4b.html b/layout/reftests/border-image/svg-as-border-image-4b.html
new file mode 100644
index 0000000000..80600ebe90
--- /dev/null
+++ b/layout/reftests/border-image/svg-as-border-image-4b.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+<title>test of svg-as-border-image</title>
+<style type="text/css">
+div {
+  width: 100px;
+  height: 100px;
+  margin: 30px;
+  border-width: 30px;
+  border-style: solid;
+  transform: translate(100px, 200px);
+}
+#border5p {
+  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;
+}
+#border25p {
+  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>') 25% stretch;
+}
+</style>
+</head>
+<body style="transform: translate(-100px, -200px);">
+<div id="border5p"></div>
+<div id="border25p"></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 0000000000..cf1b72dfc7
--- /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 0000000000..397d470a45
--- /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	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
commit	36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree	105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/border-image
parent	Initial commit. (diff)
download	firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip