Bug 720531 - Part 3. Add reftests for border-image-repeat: space. r=dbaron
authorEthan Lin <ethlin@mozilla.com>
Fri, 15 Jul 2016 03:38:00 +0200
changeset 331741 45b4eb6943c86dfe30e84a31f595523c54196dea
parent 331740 d2b5441aa9fe80d6e74d8f64d87960073c3a0adc
child 331742 2036366e1ee11d6606a489cef88362b2c59cf1db
push id9858
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 14:37:10 +0000
treeherdermozilla-aurora@203106ef6cb6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs720531
milestone50.0a1
Bug 720531 - Part 3. Add reftests for border-image-repeat: space. r=dbaron
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1-ref.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2-ref.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3-ref.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-1.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-2.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-1.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-2.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6-ref.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7-ref.html
layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7.html
layout/reftests/w3c-css/submitted/background/reftest.list
layout/reftests/w3c-css/submitted/background/reticule-bl.png
layout/reftests/w3c-css/submitted/background/reticule-bo.png
layout/reftests/w3c-css/submitted/background/reticule-br.png
layout/reftests/w3c-css/submitted/background/reticule-ct.png
layout/reftests/w3c-css/submitted/background/reticule-le.png
layout/reftests/w3c-css/submitted/background/reticule-ri.png
layout/reftests/w3c-css/submitted/background/reticule-tl.png
layout/reftests/w3c-css/submitted/background/reticule-to.png
layout/reftests/w3c-css/submitted/background/reticule-tr.png
layout/reftests/w3c-css/submitted/background/reticule.png
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 81px;
+        height: 81px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 31px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 62px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 31px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner5 {
+        position: absolute;
+        top: 31px;
+        left: 62px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 62px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 62px;
+        left: 31px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 62px;
+        left: 62px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+        <div class="inner5"></div>
+        <div class="inner6"></div>
+        <div class="inner7"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-1-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 35px;
+        height: 35px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 67px;
+        height: 67px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 40px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner3 {
+        position: absolute;
+        top: 40px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 40px;
+        left: 40px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+      </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-2-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when no images fit.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 13px;
+        height: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3-ref.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 114px;
+        height: 114px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2_1 {
+        position: absolute;
+        top: 0px;
+        left: 29px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner2_2 {
+        position: absolute;
+        top: 0px;
+        left: 58px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 87px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4_1 {
+        position: absolute;
+        top: 29px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner4_2 {
+        position: absolute;
+        top: 58px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner5_1 {
+        position: absolute;
+        top: 29px;
+        left: 87px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner5_2 {
+        position: absolute;
+        top: 58px;
+        left: 87px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 87px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7_1 {
+        position: absolute;
+        top: 87px;
+        left: 29px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner7_2 {
+        position: absolute;
+        top: 87px;
+        left: 58px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 87px;
+        left: 87px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2_1"></div>
+        <div class="inner2_2"></div>
+        <div class="inner3"></div>
+        <div class="inner4_1"></div>
+        <div class="inner4_2"></div>
+        <div class="inner5_1"></div>
+        <div class="inner5_2"></div>
+        <div class="inner6"></div>
+        <div class="inner7_1"></div>
+        <div class="inner7_2"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-3-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 60px;
+        height: 60px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-1.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="match" href="border-image-repeat-space-4-ref-2.html">
+    <style type="text/css">
+      .outer {
+        width: 81px;
+        height: 81px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 27px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner5 {
+        position: absolute;
+        top: 27px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 54px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 54px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 54px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+        <div class="inner5"></div>
+        <div class="inner6"></div>
+        <div class="inner7"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: stretch stretch;
+        width: 27px;
+        height: 27px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-4-ref-1.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits exactly.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 27px;
+        height: 27px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-1.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="match" href="border-image-repeat-space-5-ref-2.html">
+    <style type="text/css">
+      .outer {
+        width: 135px;
+        height: 135px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2_1 {
+        position: absolute;
+        top: 0px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner2_2 {
+        position: absolute;
+        top: 0px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner2_3 {
+        position: absolute;
+        top: 0px;
+        left: 81px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4_1 {
+        position: absolute;
+        top: 27px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner4_2 {
+        position: absolute;
+        top: 54px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner4_3 {
+        position: absolute;
+        top: 81px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner5_1 {
+        position: absolute;
+        top: 27px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner5_2 {
+        position: absolute;
+        top: 54px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner5_3 {
+        position: absolute;
+        top: 81px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 108px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7_1 {
+        position: absolute;
+        top: 108px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner7_2 {
+        position: absolute;
+        top: 108px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner7_3 {
+        position: absolute;
+        top: 108px;
+        left: 81px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 108px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2_1"></div>
+        <div class="inner2_2"></div>
+        <div class="inner2_3"></div>
+        <div class="inner3"></div>
+        <div class="inner4_1"></div>
+        <div class="inner4_2"></div>
+        <div class="inner4_3"></div>
+        <div class="inner5_1"></div>
+        <div class="inner5_2"></div>
+        <div class="inner5_3"></div>
+        <div class="inner6"></div>
+        <div class="inner7_1"></div>
+        <div class="inner7_2"></div>
+        <div class="inner7_3"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: repeat repeat;
+        width: 81px;
+        height: 81px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-5-ref-1.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit exactly.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 81px;
+        height: 81px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 81px;
+        height: 81px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-tl.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-to.png");
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-tr.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 27px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-le.png");
+      }
+      .inner5 {
+        position: absolute;
+        top: 27px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner6 {
+        position: absolute;
+        top: 27px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ri.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 54px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bl.png");
+      }
+      .inner8 {
+        position: absolute;
+        top: 54px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bo.png");
+      }
+      .inner9 {
+        position: absolute;
+        top: 54px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-br.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+        <div class="inner5"></div>
+        <div class="inner6"></div>
+        <div class="inner7"></div>
+        <div class="inner8"></div>
+        <div class="inner9"></div>
+      </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-6-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when a single image fits exactly.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border-width: 27px;
+        border-style: solid;
+        border-image: url("reticule.png") 27 fill space;
+        width: 27px;
+        height: 27px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7-ref.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 132px;
+        height: 132px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-tl.png");
+      }
+      .inner2_1 {
+        position: absolute;
+        top: 0px;
+        left: 35px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-to.png");
+      }
+      .inner2_2 {
+        position: absolute;
+        top: 0px;
+        left: 70px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-to.png");
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 105px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-tr.png");
+      }
+      .inner4_1 {
+        position: absolute;
+        top: 35px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-le.png");
+      }
+      .inner4_2 {
+        position: absolute;
+        top: 70px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-le.png");
+      }
+      .inner5_1 {
+        position: absolute;
+        top: 35px;
+        left: 35px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner5_2 {
+        position: absolute;
+        top: 35px;
+        left: 70px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner5_3 {
+        position: absolute;
+        top: 70px;
+        left: 35px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner5_4 {
+        position: absolute;
+        top: 70px;
+        left: 70px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner6_1 {
+        position: absolute;
+        top: 35px;
+        left: 105px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ri.png");
+      }
+      .inner6_2 {
+        position: absolute;
+        top: 70px;
+        left: 105px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ri.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 105px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bl.png");
+      }
+      .inner8_1 {
+        position: absolute;
+        top: 105px;
+        left: 35px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bo.png");
+      }
+      .inner8_2 {
+        position: absolute;
+        top: 105px;
+        left: 70px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bo.png");
+      }
+      .inner9 {
+        position: absolute;
+        top: 105px;
+        left: 105px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-br.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2_1"></div>
+        <div class="inner2_2"></div>
+        <div class="inner3"></div>
+        <div class="inner4_1"></div>
+        <div class="inner4_2"></div>
+        <div class="inner5_1"></div>
+        <div class="inner5_2"></div>
+        <div class="inner5_3"></div>
+        <div class="inner5_4"></div>
+        <div class="inner6_1"></div>
+        <div class="inner6_2"></div>
+        <div class="inner7"></div>
+        <div class="inner8_1"></div>
+        <div class="inner8_2"></div>
+        <div class="inner9"></div>
+      </div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-7-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when multiple image fit.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border-width: 27px;
+        border-style: solid;
+        border-image: url("reticule.png") 27 fill space;
+        width: 78px;
+        height: 78px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/background/reftest.list
+++ b/layout/reftests/w3c-css/submitted/background/reftest.list
@@ -18,8 +18,17 @@
 == background-repeat-round-1e.html background-repeat-round-1-ref.html
 == background-repeat-round-2.html background-repeat-round-2-ref.html
 == background-repeat-round-3.html background-repeat-round-3-ref.html
 == background-repeat-round-4.html background-repeat-round-4-ref.html
 
 #border-image test cases
 == border-image-repeat-round-1.html border-image-repeat-round-1-ref.html
 == border-image-repeat-round-2.html border-image-repeat-round-2-ref.html
+== border-image-repeat-space-1.html border-image-repeat-space-1-ref.html
+== border-image-repeat-space-2.html border-image-repeat-space-2-ref.html
+== border-image-repeat-space-3.html border-image-repeat-space-3-ref.html
+== border-image-repeat-space-4.html border-image-repeat-space-4-ref-1.html
+== border-image-repeat-space-4.html border-image-repeat-space-4-ref-2.html
+== border-image-repeat-space-5.html border-image-repeat-space-5-ref-1.html
+== border-image-repeat-space-5.html border-image-repeat-space-5-ref-2.html
+== border-image-repeat-space-6.html border-image-repeat-space-6-ref.html
+== border-image-repeat-space-7.html border-image-repeat-space-7-ref.html
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..6abbaf319f3ac53f02e3381b884e9da468dc3058
GIT binary patch
literal 123
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|Og&v3Lp+Wr
zCn)g!S>7h4#%9$Nc-l=@+Gg6ufSY^%Hy@jDk;N$MCdbyEiSvHui1aiC8k}KZxMadA
Uo67i65oiE|r>mdKI;Vst0Q5vAFaQ7m
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f72a67381c6e9188f74f930413f2ff0dea48a51c
GIT binary patch
literal 134
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|96VhdLp+Wr
zCnzvTNlE=P7GUfMJbuK%-68yR2jl;hOY?rPJ^rw@XJQMB!7M3vUFoekCc*t_uL4iE
f6*Z@e2(U18v+>IQJ-_%U&@2W|S3j3^P6<r_ipeTH
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..84e22afe2a14cee15adc7f7d1463e30038e59200
GIT binary patch
literal 121
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|j6Gc(Lp+Wr
zCn)gz3-;t?7G{<`xFU7&G+w#W5glihn>l;ZUIm_Z)0Iw}StZib6lmbVz+kqKRe>w-
R{#T%O22WQ%mvv4FO#m6)B3S?c
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..71ac10f6110fbc344f325d51a61838071899416f
GIT binary patch
literal 127
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|EInNuLp+YZ
zy|R&)!GMF=aq`K%mXeC=6pq&SmQ0-}cQcPwwcNeAvGH$n=&r>RB}^qG<XiZe*tT`V
YI$su1-yQCB7-$HCr>mdKI;Vst0BJBLhX4Qo
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..abe56ffad64db19c4ae1611aad88d5eb0e1e8764
GIT binary patch
literal 128
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|tUO&DLp+Wr
zCn)g!S>7h4#%9$Nc-l=@+Gd*Jq>1xAn0R@4RbES;y|Q>(Z<JY7Q_nO7FiT(>BZEE{
Ww>t0i3o1ZU7(8A5T-G@yGywn}t0Xc2
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..95d7db84234fefad42a837221191b950cac7c552
GIT binary patch
literal 130
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|Y&=~YLp+YZ
zy<*A7puoW7_~q&E;<q`yo#7j=s02G2`QN_cdG=^W=ig@0gd7%&q%~7yx6YWs|ERg6
cbMGN5XK6mo?(5c~Kyw&8UHx3vIVCg!0F~n_k^lez
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8a3516998ab920aa2038743fee9f6713a11488d2
GIT binary patch
literal 125
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|%spKkLp+Wr
zCrGd^P7vYIKH#xr*Z(giBB46Ti<Wo0>q>9U`4Dl;>HMA(PN~O@`_v``o_5nc%)qd`
Wl3B$gk2M!)1cRrmpUXO@geCw&1}3%u
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..d1b082c9ba22e903dd5eaa2c7bc49f818e32f574
GIT binary patch
literal 128
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|tUO&DLp+Wr
zCrGfCF#TV-w6AmCI=QVmFCve5IAuxu{#rb(H_B|*N_XS0D^jm)S+j6qqegQ_pm|NR
aAj3{EZbkpv{G&iq7(8A5T-G@yGywoE>nd#k
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..cd9bb5a5a40baea3d82e2e70de34fce8fb67435b
GIT binary patch
literal 126
zc%17D@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ojKx9jP7LeL$-D$|EIeHtLp+Wr
zCrGd^P7vYIK5*i|fe-V$(k`+JJWWumVtc$Ib@4P_xziCHXOx?@4)>+K3OwzmdzhEO
YyOmY`K<3BQKr<LTUHx3vIVCg!0F#6$(EtDd
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..02c7d10e76b372e6ff8f4f8ecc58d2756c803a2c
GIT binary patch
literal 202
zc%17D@N?(olHy`uVBq!ia0vp^fgsGp3?#2VT(lHOv7|ftIx;Y9?C1WI$O_~$76-XI
zF|0c$^AgD64DbnY{r~?zklE1C;2FPi8%RY-kY6x^!?PP{Ku(aSi(`nz>Ewh3QVA&u
z0umO17Xv~V1VtS}Ph0$OjTDUIaO~KmaAng4_bHu?j)^H9MorAsq9Q)5g-mXL&1_s>
rPH*4v{PDt2sYLx?cIQlgMFs}F9Q`dXz4|8rO=s|Q^>bP0l+XkKO{+eq