Bug 548372 - Part3. background-repeat round/space test cases. r=heycam, mstange
authorEthan Lin <ethlin@mozilla.com>
Wed, 18 May 2016 23:16:00 +0200
changeset 337949 1bd8dfedc0f60e3aea61f10691aa0d5f7c434fd7
parent 337948 2a8d924408cc44486c4ce5bf2b2f226914b489e5
child 337950 3b9e115d053a3981d4602adf1dab36b48c787e9d
push id6249
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 13:59:36 +0000
treeherdermozilla-beta@bad9d4f5bf7e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam, mstange
bugs548372
milestone49.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 548372 - Part3. background-repeat round/space test cases. r=heycam, mstange
layout/reftests/w3c-css/submitted/background/aqua-yellow-32x32.png
layout/reftests/w3c-css/submitted/background/aqua-yellow-37x37.png
layout/reftests/w3c-css/submitted/background/background-repeat-round-1-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-1a.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-1b.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-1c.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-1d.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-1e.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-2-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-2.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-3-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-3.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-4-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-round-4.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-1-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-1a.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-1b.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-1c.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-2-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-2.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-3-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-3.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-4-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-4.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-5-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-5.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-6-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-6.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-7-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-7.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-8-ref.html
layout/reftests/w3c-css/submitted/background/background-repeat-space-8.html
layout/reftests/w3c-css/submitted/background/reftest.list
layout/style/test/property_database.js
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..42f8a2100b241aebf5c62e5057a51a933e6ff4d6
GIT binary patch
literal 156
zc%17D@N?(olHy`uVBq!ia0vp^3LwnH3?%tPCZz)@o&cW^*T{eW{{8L&@)Q*nxj)Kn
z2C}?8T^vIs!c9*t6g|MeapZyyCx5tG;>%xMaf|kGe7(+c_;Xn3)h_N?2`BbEYEqNf
jh)mQUWEGDofD?9o(@Z>PzdjKTG?u~B)z4*}Q$iB}(UCOa
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0289b0394131fd1e1ae6fec71a49e42522b9bfcd
GIT binary patch
literal 287
zc%17D@N?(olHy`uVBq!ia0vp^svyk41SGxwY!3laoCO|{#S9GG!XV7ZFl&wkP>{XE
z)7O>#0jn^pg-mGYlNzAVK2I0Nkch)?ub<^)G8ABa(3zpyWE<HWe)>Zex0q@~=Y)!Y
z7@@MwpFhVr6zDO(|75u5@{&J$IC9N)7i%u{T5-ehx!Rq5*Z&p#b?g7#*|PCn^dXHn
z_QTb+Ij{O}Nj|mXW&1ou;@IV6hVw11w%TH!WM<s|oalGHw{j0h+P9_|XS<Wx_?t3q
zMV5VPxUsAKXqb(~wa*ea7P%jKW-Dj*IB?^&<m9R5472wb-Z(DZ*6AT6s8!~@^3$yU
gIRW+c@7?!`pI1*ks?ZYz^eF>_r>mdKI;Vst0DnPpAOHXW
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image repeat</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: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-size: 36px 36px;
+        background-repeat: repeat;
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer"></div>
+    </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1a.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1b.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'repeat round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 36px 36px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1d.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round repeat' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 32px 36px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1e.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'repeat round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 36px 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image repeat</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: 72px;
+      height: 72px;
+      border: 1px solid black;
+      background-image: url(aqua-yellow-32x32.png);
+      background-size: 36px 36px;
+      background-repeat: repeat-x;
+    }
+    </style>
+    </head>
+    <body>
+      <div class="outer"></div>
+    </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round no-repeat</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-2-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round no-repeat' works correctly or not.">
+    <style type="text/css">
+    .outer {
+      width: 72px;
+      height: 72px;
+      border: 1px solid black;
+      background-image: url(aqua-yellow-32x32.png);
+      background-repeat: round no-repeat;
+    }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image repeat</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: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-size: 36px 36px;
+        background-repeat: repeat-y;
+      }
+    </style>
+    </head>
+    <body>
+      <div id="outer"><div id=inner></div></div>
+    </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image no-repeat round</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-3-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'no-repeat round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-size: 36px auto;
+        background-repeat: no-repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image repeat with specified position</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: 72px;
+      height: 72px;
+      border: 1px solid black;
+      background-image: url(aqua-yellow-32x32.png);
+      background-size: 36px 36px;
+      background-repeat: repeat;
+      background-position: 5px 5px;
+    }
+    </style>
+    </head>
+    <body>
+      <div class="outer"></div>
+    </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round with specified position</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-4-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round' works correctly or not.">
+    <style type="text/css">
+      #outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round;
+        background-position: 5px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</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
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 106px;
+        display: flex;
+        justify-content: space-between;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image 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/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space with position</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/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-position: 15px 15px;
+        background-repeat: space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image 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/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</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: 48px;
+        height: 48px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: no-repeat;
+        background-position: 5px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round with specified position</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-4-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 48px;
+        height: 48px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space;
+        background-position: 5px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</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">
+      .outer1
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 106px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .inner1
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        margin-top: 40px;
+      }
+      .outer2
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 106px;
+        display: flex;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner2
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        margin-left: 40px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer1">
+      <div class="inner1"></div>
+      <div class="inner1"></div>
+      <div class="inner1"></div>
+    </div>
+    <div class="outer2">
+      <div class="inner2"></div>
+      <div class="inner2"></div>
+      <div class="inner2"></div>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round with specified position</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/#background-repeat">
+    <link rel="match" href="background-repeat-round-3-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'no-repeat space' and 'space no-repeat' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+      }
+      .inner1 {
+        width: 106px;
+        height: 106px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space no-repeat;
+        background-position: 7px 40px;
+      }
+      .inner2 {
+        width: 106px;
+        height: 106px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: no-repeat space;
+        background-position: 40px 7px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner1"></div>
+    </div>
+    <div class="outer">
+      <div class="inner2"></div>
+    </div>
+</body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</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
+      {
+        border: 1px solid black;
+        width: 96px;
+        height: 106px;
+        display: flex;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image 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/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'repeat space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 96px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: repeat space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</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
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 96px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image 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/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space repeat' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 96px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</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
+      {
+        border: 1px solid black;
+        width: 192px;
+        height: 106px;
+        display: flex;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 64px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: no-repeat;
+        background-size: 64px 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image 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/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 192px;
+        height: 106px;
+        border: 1px solid black;
+        background-size: 60px 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</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
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 192px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 64px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: no-repeat;
+        background-size: 32px 64px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image 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/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 192px;
+        border: 1px solid black;
+        background-size: 32px 60px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</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
+      {
+        border: 20px solid rgba(0, 0, 0, 0.5);
+        width: 106px;
+        height: 106px;
+        background-image: url(aqua-yellow-37x37.png);
+        background-repeat: repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image 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/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 20px solid rgba(0, 0, 0, .5);
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space;
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reftest.list
@@ -0,0 +1,19 @@
+# mask-repeat round/space test cases
+== background-repeat-space-1a.html background-repeat-space-1-ref.html
+== background-repeat-space-1b.html background-repeat-space-1-ref.html
+== background-repeat-space-1c.html background-repeat-space-1-ref.html
+== background-repeat-space-2.html background-repeat-space-2-ref.html
+== background-repeat-space-3.html background-repeat-space-3-ref.html
+== background-repeat-space-4.html background-repeat-space-4-ref.html
+== background-repeat-space-5.html background-repeat-space-5-ref.html
+== background-repeat-space-6.html background-repeat-space-6-ref.html
+== background-repeat-space-7.html background-repeat-space-7-ref.html
+== background-repeat-space-8.html background-repeat-space-8-ref.html
+== background-repeat-round-1a.html background-repeat-round-1-ref.html
+== background-repeat-round-1b.html background-repeat-round-1-ref.html
+== background-repeat-round-1c.html background-repeat-round-1-ref.html
+== background-repeat-round-1d.html background-repeat-round-1-ref.html
+== 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
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -2399,23 +2399,42 @@ var gCSSProperties = {
       "repeat-x, repeat-x",
       "repeat, no-repeat",
       "repeat-y, no-repeat, repeat-y",
       "repeat, repeat, repeat",
       "repeat no-repeat",
       "no-repeat repeat",
       "no-repeat no-repeat",
       "repeat repeat, repeat repeat",
+      "round, repeat",
+      "round repeat, repeat-x",
+      "round no-repeat, repeat-y",
+      "round round",
+      "space, repeat",
+      "space repeat, repeat-x",
+      "space no-repeat, repeat-y",
+      "space space",
+      "space round"
     ],
     invalid_values: [ "repeat repeat repeat",
                       "repeat-x repeat-y",
                       "repeat repeat-x",
                       "repeat repeat-y",
                       "repeat-x repeat",
-                      "repeat-y repeat" ]
+                      "repeat-y repeat",
+                      "round round round",
+                      "repeat-x round",
+                      "round repeat-x",
+                      "repeat-y round",
+                      "round repeat-y",
+                      "space space space",
+                      "repeat-x space",
+                      "space repeat-x",
+                      "repeat-y space",
+                      "space repeat-y" ]
   },
   "background-size": {
     domProp: "backgroundSize",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "auto", "auto auto" ],
     other_values: [ "contain", "cover", "100px auto", "auto 100px", "100% auto", "auto 100%", "25% 50px", "3em 40%",
       "calc(20px)",