Bug 522607 - Tests for new css3-background background-position syntax. r=dbaron
authorWilliam Chen <wchen@mozilla.com>
Mon, 20 Feb 2012 12:16:11 +1300
changeset 87255 1e6b5a9bbdccddd000666c7f5724d1aacd74455f
parent 87254 f25d65f080f81dd7256ae593677a858dd628dcda
child 87256 dec32ab636c6bf0d9afaaa89ee3581d8b7044181
push id22103
push userbmo@edmorley.co.uk
push dateTue, 21 Feb 2012 12:01:45 +0000
treeherdermozilla-central@4038ffaa5d82 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs522607
milestone13.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 522607 - Tests for new css3-background background-position syntax. r=dbaron
layout/reftests/backgrounds/background-position-1-ref.html
layout/reftests/backgrounds/background-position-1a.html
layout/reftests/backgrounds/background-position-1b.html
layout/reftests/backgrounds/background-position-1c.html
layout/reftests/backgrounds/background-position-2-ref.html
layout/reftests/backgrounds/background-position-2a.html
layout/reftests/backgrounds/background-position-2b.html
layout/reftests/backgrounds/background-position-3-ref.html
layout/reftests/backgrounds/background-position-3a.html
layout/reftests/backgrounds/background-position-3b.html
layout/reftests/backgrounds/background-position-4-ref.html
layout/reftests/backgrounds/background-position-4a.html
layout/reftests/backgrounds/background-position-4b.html
layout/reftests/backgrounds/background-position-4c.html
layout/reftests/backgrounds/background-position-5-ref.html
layout/reftests/backgrounds/background-position-5.html
layout/reftests/backgrounds/background-position-6-ref.html
layout/reftests/backgrounds/background-position-6.html
layout/reftests/backgrounds/background-position-7-ref.html
layout/reftests/backgrounds/background-position-7.html
layout/reftests/backgrounds/background-position-8-ref.html
layout/reftests/backgrounds/background-position-8.html
layout/reftests/backgrounds/reftest.list
layout/style/test/property_database.js
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: right 25% bottom 75% reference</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  margin-left: 72px; /** 128px - 128px * 0.25 - 32px * 0.75 **/
+  margin-top: 24px; /** 128px - 128px * 0.75 - 32px * 0.25 **/
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1a.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: right 25% bottom 75%</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: right 25% bottom 75%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner2
+{
+  width: 128px;
+  height: 128px;
+  background-position: bottom 75% right 25%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner3
+{
+  width: 128px;
+  height: 128px;
+  background-position: right 24px bottom 72px;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner4
+{
+  width: 128px;
+  height: 128px;
+  background-position: bottom 72px right 24px;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1b.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left 75% top 25%</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: left 75% top 25%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner2
+{
+  width: 128px;
+  height: 128px;
+  background-position: top 25% left 75%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner3
+{
+  width: 128px;
+  height: 128px;
+  background-position: left 72px top 24px;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner4
+{
+  width: 128px;
+  height: 128px;
+  background-position: top 24px left 72px;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-1c.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left 75% bottom 75%</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: left 75% bottom 75%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner2
+{
+  width: 128px;
+  height: 128px;
+  background-position: right 25% top 25%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner3
+{
+  width: 128px;
+  height: 128px;
+  background-position: bottom 75% left 75%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner4
+{
+  width: 128px;
+  height: 128px;
+  background-position: right 25% top 25%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+<div id="outer"><div id="inner2"></div></div>
+<div id="outer"><div id="inner3"></div></div>
+<div id="outer"><div id="inner4"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left 25% bottom 75% reference</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  margin-left: 24px; /** 128px * 0.25 - 32 * 0.25 **/
+  margin-top: 24px; /** 128px - 128px * 0.75 + 32px * 0.75 - 32px **/
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-2a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: center bottom 75%</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: left 25% bottom 75%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-2b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: 25% 25%</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: 25% 25%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: center bottom 75% reference</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  margin-left: 48px; /** 128px - 128px * 0.50 - 32px * 0.50 **/
+  margin-top: 24px; /** 128px - 128px * 0.75 + 32px * 0.75 - 32px **/
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-3a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: center bottom 75%</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: center bottom 75%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-3b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: center 25%</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: center 25%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left center reference</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  margin-left: 0px;
+  margin-top: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left center</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: left center;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: left;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-4c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left bottom 50%</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: left bottom 50%;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-5-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background: url(aqua-32x32.png) left no-repeat reference</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  margin-left: 0px;
+  margin-top: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-5.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background: url(aqua-32x32.png) left no-repeat reference</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background: url(aqua-32x32.png) left no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-6-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: top, bottom reference</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  margin-left: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
+  margin-top: 0px;
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+#inner2
+{
+  margin-left: 48px; /** 128px - 32px - 32px **/
+  margin-top: 64px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div><div id="inner2"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-6.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: top, bottom</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+#inner1
+{
+  width: 128px;
+  height: 128px;
+  background-position: top, bottom;
+  background-image: url(aqua-32x32.png), url(aqua-32x32.png);
+  background-repeat: no-repeat, no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-7-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left 25% bottom reference</title>
+  <style type="text/css">
+.outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+.inner1
+{
+  margin-left: 24px;
+  margin-top: 96px;
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+  </style>
+</head>
+<body>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-7.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left 25% bottom</title>
+  <style type="text/css">
+.outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+.outer > div
+{
+  width: 128px;
+  height: 128px;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner1
+{
+  background-position: left 24px bottom;
+}
+#inner2
+{
+  background-position: left 25% bottom;
+}
+#inner3
+{
+  background-position: right 75% bottom;
+}
+#inner4
+{
+  background-position: right 72px bottom;
+}
+  </style>
+</head>
+<body>
+<div class="outer"><div id="inner1"></div></div>
+<div class="outer"><div id="inner2"></div></div>
+<div class="outer"><div id="inner3"></div></div>
+<div class="outer"><div id="inner4"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-8-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left 25% bottom reference</title>
+  <style type="text/css">
+.outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+.inner1
+{
+  margin-left: 96px;
+  margin-top: 24px;
+  width: 32px;
+  height: 32px;
+  background-image: url(aqua-32x32.png);
+}
+  </style>
+</head>
+<body>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+<div class="outer"><div class="inner1"></div></div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/background-position-8.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>background-position: left 25% bottom</title>
+  <style type="text/css">
+.outer
+{
+  border: 1px solid black;
+  width: 128px;
+  height: 128px;
+}
+.outer > div
+{
+  width: 128px;
+  height: 128px;
+  background-image: url(aqua-32x32.png);
+  background-repeat: no-repeat;
+}
+#inner1
+{
+  background-position: right top 25%;
+}
+#inner2
+{
+  background-position: right top 24px;
+}
+#inner3
+{
+  background-position: right bottom 75%;
+}
+#inner4
+{
+  background-position: right bottom 72px;
+}
+  </style>
+</head>
+<body>
+<div class="outer"><div id="inner1"></div></div>
+<div class="outer"><div id="inner2"></div></div>
+<div class="outer"><div id="inner3"></div></div>
+<div class="outer"><div id="inner4"></div></div>
+</body>
+</html>
--- a/layout/reftests/backgrounds/reftest.list
+++ b/layout/reftests/backgrounds/reftest.list
@@ -27,16 +27,31 @@ fails-if(Android) == viewport-translucen
 == continuous-inline-4b.html continuous-inline-4-ref.html
 == continuous-inline-5a.html continuous-inline-5-ref.html
 == continuous-inline-5b.html continuous-inline-5-ref.html
 == background-redraw-237766.html background-redraw-237766-ref.html
 
 == background-clip-1.html background-clip-1-ref.html
 == background-clip-2.html background-clip-2-ref.html
 
+== background-position-1a.html background-position-1-ref.html
+== background-position-1b.html background-position-1-ref.html
+== background-position-1c.html background-position-1-ref.html
+== background-position-2a.html background-position-2-ref.html
+== background-position-2b.html background-position-2-ref.html
+== background-position-3a.html background-position-3-ref.html
+== background-position-3b.html background-position-3-ref.html
+== background-position-4a.html background-position-4-ref.html
+== background-position-4b.html background-position-4-ref.html
+== background-position-4c.html background-position-4-ref.html
+== background-position-5.html background-position-5-ref.html
+== background-position-6.html background-position-6-ref.html
+== background-position-7.html background-position-7-ref.html
+== background-position-8.html background-position-8-ref.html
+
 == background-size-auto-auto.html background-size-auto-ref.html
 == background-size-auto.html background-size-auto-ref.html
 == background-size-contain.html background-size-contain-ref.html
 == background-size-cover.html background-size-cover-ref.html
 == background-size-auto-length.html background-size-auto-length-ref.html
 == background-size-length-auto.html background-size-auto-length-ref.html
 == background-size-length.html background-size-auto-length-ref.html
 == background-size-auto-percent.html background-size-auto-length-ref.html
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -1560,31 +1560,52 @@ var gCSSProperties = {
 		initial_values: [ "padding-box" ],
 		other_values: [ "border-box", "content-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ],
 		invalid_values: [ "margin-box", "padding-box padding-box" ]
 	},
 	"background-position": {
 		domProp: "backgroundPosition",
 		inherited: false,
 		type: CSS_TYPE_LONGHAND,
-		initial_values: [ "top left", "left top", "0% 0%", "0% top", "left 0%" ],
+		initial_values: [ "top 0% left 0%", "top 0% left", "top left", "left top", "0% 0%", "0% top", "left 0%" ],
 		other_values: [ "top", "left", "right", "bottom", "center", "center bottom", "bottom center", "center right", "right center", "center top", "top center", "center left", "left center", "right bottom", "bottom right", "50%", "top left, top left", "top left, top right", "top right, top left", "left top, 0% 0%", "10% 20%, 30%, 40%", "top left, bottom right", "right bottom, left top", "0%", "0px", "30px", "0%, 10%, 20%, 30%", "top, top, top, top, top",
 			"-moz-calc(20px)",
 			"-moz-calc(20px) 10px",
 			"10px -moz-calc(20px)",
 			"-moz-calc(20px) 25%",
 			"25% -moz-calc(20px)",
 			"-moz-calc(20px) -moz-calc(20px)",
 			"-moz-calc(20px + 1em) -moz-calc(20px / 2)",
 			"-moz-calc(20px + 50%) -moz-calc(50% - 10px)",
 			"-moz-calc(-20px) -moz-calc(-50%)",
 			"-moz-calc(-20%) -moz-calc(-50%)",
-			"0px 0px"
+			"0px 0px",
+			"right 20px top 60px",
+			"right 20px bottom 60px",
+			"left 20px top 60px",
+			"left 20px bottom 60px",
+			"right -50px top -50px",
+			"left -50px bottom -50px",
+			"right 20px top -50px",
+			"right -20px top 50px",
+			"right 3em bottom 10px",
+			"bottom 3em right 10px",
+			"top 3em right 10px",
+			"left 15px",
+			"10px top",
+			"left top 15px",
+			"left 10px top",
+			"left 20%",
+			"right 20%"
 		],
-		invalid_values: [ "50% left", "top 50%" ]
+		invalid_values: [ "center 10px center 4px", "center 10px center", 
+		                  "top 20%", "bottom 20%", "50% left", "top 50%", 
+		                  "50% bottom 10%", "right 10% 50%", "left right", 
+		                  "top bottom", "left 10% right", 
+		                  "top 20px bottom 20px", "left left" ]
 	},
 	"background-repeat": {
 		domProp: "backgroundRepeat",
 		inherited: false,
 		type: CSS_TYPE_LONGHAND,
 		initial_values: [ "repeat" ],
 		other_values: [ "repeat-x", "repeat-y", "no-repeat",
 			"repeat-x, repeat-x",