Bug 700926. Tests for border-image-source gradient. r=roc
authorNicholas Cameron <ncameron@mozilla.com>
Fri, 31 Jan 2014 16:36:42 +1300
changeset 182178 5afef9152eba6193eefaf4d814e2c70eb1cb78bf
parent 182177 cd45d0bc480ee61a99284a3b4a684fb34ce59b58
child 182179 fe6340c672a97dbd77b0824f475057dda863b165
push id3343
push userffxbld
push dateMon, 17 Mar 2014 21:55:32 +0000
treeherdermozilla-beta@2f7d3415f79f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc
bugs700926
milestone29.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 700926. Tests for border-image-source gradient. r=roc
layout/inspector/tests/test_bug877690.html
layout/reftests/border-image/border-image-linear-gradient-outset-ref.html
layout/reftests/border-image/border-image-linear-gradient-outset.html
layout/reftests/border-image/border-image-linear-gradient-ref.html
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1-ref.html
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-1.html
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2-ref.html
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-2.html
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3-ref.html
layout/reftests/border-image/border-image-linear-gradient-repeat-repeat-3.html
layout/reftests/border-image/border-image-linear-gradient-repeat-round-1-ref.html
layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html
layout/reftests/border-image/border-image-linear-gradient-repeat-round-2-ref.html
layout/reftests/border-image/border-image-linear-gradient-repeat-round-2.html
layout/reftests/border-image/border-image-linear-gradient-repeat-round-3-ref.html
layout/reftests/border-image/border-image-linear-gradient-repeat-round-3.html
layout/reftests/border-image/border-image-linear-gradient-slice-1-ref.html
layout/reftests/border-image/border-image-linear-gradient-slice-1.html
layout/reftests/border-image/border-image-linear-gradient-slice-2-ref.html
layout/reftests/border-image/border-image-linear-gradient-slice-2.html
layout/reftests/border-image/border-image-linear-gradient-slice-fill-1-ref.html
layout/reftests/border-image/border-image-linear-gradient-slice-fill-1.html
layout/reftests/border-image/border-image-linear-gradient-slice-fill-2-ref.html
layout/reftests/border-image/border-image-linear-gradient-slice-fill-2.html
layout/reftests/border-image/border-image-linear-gradient-slice-width-ref.html
layout/reftests/border-image/border-image-linear-gradient-slice-width.html
layout/reftests/border-image/border-image-linear-gradient-width-ref.html
layout/reftests/border-image/border-image-linear-gradient-width.html
layout/reftests/border-image/border-image-linear-gradient.html
layout/reftests/border-image/border-image-radial-gradient-ref.html
layout/reftests/border-image/border-image-radial-gradient-slice-1-ref.html
layout/reftests/border-image/border-image-radial-gradient-slice-1.html
layout/reftests/border-image/border-image-radial-gradient-slice-2-ref.html
layout/reftests/border-image/border-image-radial-gradient-slice-2.html
layout/reftests/border-image/border-image-radial-gradient-slice-fill-1-ref.html
layout/reftests/border-image/border-image-radial-gradient-slice-fill-1.html
layout/reftests/border-image/border-image-radial-gradient-slice-fill-2-ref.html
layout/reftests/border-image/border-image-radial-gradient-slice-fill-2.html
layout/reftests/border-image/border-image-radial-gradient-slice-width-ref.html
layout/reftests/border-image/border-image-radial-gradient-slice-width.html
layout/reftests/border-image/border-image-radial-gradient-width-ref.html
layout/reftests/border-image/border-image-radial-gradient-width.html
layout/reftests/border-image/border-image-radial-gradient.html
layout/reftests/border-image/border-image-repeating-linear-gradient-ref.html
layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2-ref.html
layout/reftests/border-image/border-image-repeating-linear-gradient-repeat-round-2.html
layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2-ref.html
layout/reftests/border-image/border-image-repeating-linear-gradient-slice-fill-2.html
layout/reftests/border-image/border-image-repeating-linear-gradient.html
layout/reftests/border-image/border-image-repeating-radial-gradient-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.html
layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-round-2.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-1.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-2.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-1.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-fill-2.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-slice-width.html
layout/reftests/border-image/border-image-repeating-radial-gradient-width-ref.html
layout/reftests/border-image/border-image-repeating-radial-gradient-width.html
layout/reftests/border-image/border-image-repeating-radial-gradient.html
layout/reftests/border-image/reftest.list
--- a/layout/inspector/tests/test_bug877690.html
+++ b/layout/inspector/tests/test_bug877690.html
@@ -111,17 +111,18 @@ function do_test() {
       "linen", "logical", "magenta", "maroon", "medium", "mediumaquamarine", "mediumblue", "mediumorchid",
       "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
       "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "none",
       "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "outset", "palegoldenrod", "palegreen",
       "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "physical", "pink", "plum", "powderblue",
       "purple", "red", "repeat", "rgb", "rgba", "ridge", "rosybrown", "round", "royalblue", "saddlebrown", "salmon",
       "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey",
       "snow", "solid", "springgreen", "steelblue", "stretch", "tan", "teal", "thick", "thin", "thistle", "tomato",
-      "transparent", "turquoise", "url", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen" ]
+      "transparent", "turquoise", "-moz-element", "-moz-image-rect", "url", "violet", "wheat", "white", "whitesmoke",
+      "yellow", "yellowgreen" ]
   ok(testValues(values, expected), "Shorthand property values.");
 
   // test keywords only
   var prop = "border-top";
   var values = utils.getCSSValuesForProperty(prop);
   var expected = [ "initial", "inherit", "unset", "thin", "medium", "thick", "none", "hidden", "dotted",
       "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "-moz-use-text-color",
       "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black",
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
--- a/layout/reftests/border-image/reftest.list
+++ b/layout/reftests/border-image/reftest.list
@@ -33,8 +33,47 @@
 == 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
 == border-image-outset-move-1.html border-image-outset-move-1-ref.html
 == border-image-style-none.html border-image-style-none-ref.html
 == border-image-style-none-length.html border-image-style-none-length-ref.html
 == border-image-style-none-auto.html border-image-style-none-auto-ref.html
+
+# border images with gradients
+== border-image-linear-gradient.html border-image-linear-gradient-ref.html
+fuzzy(1,98) == border-image-linear-gradient-slice-1.html border-image-linear-gradient-slice-1-ref.html
+fuzzy(1,149) fuzzy-if(OSX,1,10595) == border-image-linear-gradient-slice-2.html border-image-linear-gradient-slice-2-ref.html
+fuzzy(1,433) == border-image-linear-gradient-slice-fill-1.html border-image-linear-gradient-slice-fill-1-ref.html
+fuzzy(1,177) fuzzy-if(OSX,1,25771) == border-image-linear-gradient-slice-fill-2.html border-image-linear-gradient-slice-fill-2-ref.html
+fuzzy(1,48)  fuzzy-if(OSX,5,1676) == border-image-linear-gradient-width.html border-image-linear-gradient-width-ref.html
+fuzzy(1,5000) fuzzy-if(OSX,1,15000) == border-image-linear-gradient-slice-width.html border-image-linear-gradient-slice-width-ref.html
+fuzzy(1,3000) fuzzy-if(OSX,1,6000) == border-image-linear-gradient-outset.html border-image-linear-gradient-outset-ref.html
+fuzzy(1,12) == border-image-linear-gradient-repeat-repeat-1.html border-image-linear-gradient-repeat-repeat-1-ref.html
+fuzzy(1,13) == border-image-linear-gradient-repeat-round-1.html border-image-linear-gradient-repeat-round-1-ref.html
+== border-image-linear-gradient-repeat-repeat-2.html border-image-linear-gradient-repeat-repeat-2-ref.html
+fuzzy(1,576) == border-image-linear-gradient-repeat-round-2.html border-image-linear-gradient-repeat-round-2-ref.html
+fuzzy(1,6440) == border-image-linear-gradient-repeat-repeat-3.html border-image-linear-gradient-repeat-repeat-3-ref.html
+fuzzy(1,7161) == border-image-linear-gradient-repeat-round-3.html border-image-linear-gradient-repeat-round-3-ref.html
+
+== border-image-radial-gradient.html border-image-radial-gradient-ref.html
+fuzzy(1,42) == border-image-radial-gradient-slice-1.html border-image-radial-gradient-slice-1-ref.html
+fuzzy(1,46) fuzzy-if(OSX,2,4472) == border-image-radial-gradient-slice-2.html border-image-radial-gradient-slice-2-ref.html
+fuzzy(1,105) == border-image-radial-gradient-slice-fill-1.html border-image-radial-gradient-slice-fill-1-ref.html
+fuzzy(1,139) fuzzy-if(OSX,2,4478) == border-image-radial-gradient-slice-fill-2.html border-image-radial-gradient-slice-fill-2-ref.html
+== border-image-radial-gradient-width.html border-image-radial-gradient-width-ref.html
+fuzzy(1,9000) == border-image-radial-gradient-slice-width.html border-image-radial-gradient-slice-width-ref.html
+
+# OS X failures tracked in bug 957025
+fails-if(OSX) == border-image-repeating-linear-gradient.html border-image-repeating-linear-gradient-ref.html
+fuzzy(1,5608) fails-if(OSX) == border-image-repeating-linear-gradient-slice-fill-2.html border-image-repeating-linear-gradient-slice-fill-2-ref.html
+fuzzy(1,19200) fails-if(OSX) == border-image-repeating-linear-gradient-repeat-round-2.html border-image-repeating-linear-gradient-repeat-round-2-ref.html
+
+fuzzy(1,657) == border-image-repeating-radial-gradient.html border-image-repeating-radial-gradient-ref.html
+fuzzy(1,510) fails-if(OSX) == border-image-repeating-radial-gradient-slice-1.html border-image-repeating-radial-gradient-slice-1-ref.html
+fuzzy(1,437) fails-if(OSX) == border-image-repeating-radial-gradient-slice-2.html border-image-repeating-radial-gradient-slice-2-ref.html
+fuzzy(1,1357) fails-if(OSX) == border-image-repeating-radial-gradient-slice-fill-1.html border-image-repeating-radial-gradient-slice-fill-1-ref.html
+fuzzy(1,1058) fails-if(OSX) == border-image-repeating-radial-gradient-slice-fill-2.html border-image-repeating-radial-gradient-slice-fill-2-ref.html
+fuzzy(1,602) fails-if(OSX) == border-image-repeating-radial-gradient-width.html border-image-repeating-radial-gradient-width-ref.html
+fuzzy(3,18000) fails-if(OSX) == border-image-repeating-radial-gradient-slice-width.html border-image-repeating-radial-gradient-slice-width-ref.html
+fails-if(OSX) == border-image-repeating-radial-gradient-repeat-repeat-2.html border-image-repeating-radial-gradient-repeat-repeat-2-ref.html
+fuzzy(1,1054) fails-if(OSX) == border-image-repeating-radial-gradient-repeat-round-2.html border-image-repeating-radial-gradient-repeat-round-2-ref.html