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 346707 45b4eb6943c86dfe30e84a31f595523c54196dea
parent 346706 d2b5441aa9fe80d6e74d8f64d87960073c3a0adc
child 346708 2036366e1ee11d6606a489cef88362b2c59cf1db
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs720531
milestone50.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 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