summaryrefslogtreecommitdiffstats
path: root/layout/reftests/pixel-rounding
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/pixel-rounding')
-rw-r--r--layout/reftests/pixel-rounding/background-color-base.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-height-10.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-height-4.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-height-5.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-height-6.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-height-top-4.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-height-top-5.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-height-top-6.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-left-10.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-left-4.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-left-5.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-left-6.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-left-width-4.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-left-width-5.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-left-width-6.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-top-10.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-top-4.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-top-5.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-top-6.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-top-height-4.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-top-height-5.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-top-height-6.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-width-10.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-width-4.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-width-5.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-width-6.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-width-left-4.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-width-left-5.html17
-rw-r--r--layout/reftests/pixel-rounding/background-color-width-left-6.html17
-rw-r--r--layout/reftests/pixel-rounding/background-image-base.html72
-rw-r--r--layout/reftests/pixel-rounding/background-image-height-10-ref.html72
-rw-r--r--layout/reftests/pixel-rounding/background-image-height-4.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-height-5.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-height-6.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-height-top-4.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-height-top-5.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-height-top-6.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-left-10-ref.html72
-rw-r--r--layout/reftests/pixel-rounding/background-image-left-4.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-left-5.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-left-6.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-left-width-4.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-left-width-5.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-left-width-6.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-tiling-ref.html298
-rw-r--r--layout/reftests/pixel-rounding/background-image-tiling.html291
-rw-r--r--layout/reftests/pixel-rounding/background-image-top-10-ref.html72
-rw-r--r--layout/reftests/pixel-rounding/background-image-top-4.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-top-5.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-top-6.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-top-height-4.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-top-height-5.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-top-height-6.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-width-10-ref.html72
-rw-r--r--layout/reftests/pixel-rounding/background-image-width-4.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-width-5.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-width-6.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-width-left-4.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-width-left-5.html70
-rw-r--r--layout/reftests/pixel-rounding/background-image-width-left-6.html70
-rw-r--r--layout/reftests/pixel-rounding/blue-1x1.pngbin0 -> 69 bytes
-rw-r--r--layout/reftests/pixel-rounding/blue-25x25.pngbin0 -> 92 bytes
-rw-r--r--layout/reftests/pixel-rounding/blue-3x3.pngbin0 -> 80 bytes
-rw-r--r--layout/reftests/pixel-rounding/blue-5x5.pngbin0 -> 77 bytes
-rw-r--r--layout/reftests/pixel-rounding/border-base-ref.html41
-rw-r--r--layout/reftests/pixel-rounding/border-height-10-ref.html41
-rw-r--r--layout/reftests/pixel-rounding/border-height-4.html47
-rw-r--r--layout/reftests/pixel-rounding/border-height-5.html47
-rw-r--r--layout/reftests/pixel-rounding/border-height-6.html47
-rw-r--r--layout/reftests/pixel-rounding/border-image-width-0.html39
-rw-r--r--layout/reftests/pixel-rounding/border-image-width-10.html39
-rw-r--r--layout/reftests/pixel-rounding/border-image-width-4.html39
-rw-r--r--layout/reftests/pixel-rounding/border-image-width-9.html39
-rw-r--r--layout/reftests/pixel-rounding/border-left-10-ref.html41
-rw-r--r--layout/reftests/pixel-rounding/border-left-4.html47
-rw-r--r--layout/reftests/pixel-rounding/border-left-5.html47
-rw-r--r--layout/reftests/pixel-rounding/border-left-6.html47
-rw-r--r--layout/reftests/pixel-rounding/border-top-10-ref.html41
-rw-r--r--layout/reftests/pixel-rounding/border-top-4.html47
-rw-r--r--layout/reftests/pixel-rounding/border-top-5.html47
-rw-r--r--layout/reftests/pixel-rounding/border-top-6.html47
-rw-r--r--layout/reftests/pixel-rounding/border-width-10-ref.html41
-rw-r--r--layout/reftests/pixel-rounding/border-width-4.html47
-rw-r--r--layout/reftests/pixel-rounding/border-width-5.html47
-rw-r--r--layout/reftests/pixel-rounding/border-width-6.html47
-rw-r--r--layout/reftests/pixel-rounding/check-image-blue-ref.html18
-rw-r--r--layout/reftests/pixel-rounding/check-image-blue.html18
-rw-r--r--layout/reftests/pixel-rounding/check-image-ref.html18
-rw-r--r--layout/reftests/pixel-rounding/check-image.html18
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-height-4.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-height-5.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-height-6.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-left-4.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-left-5.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-left-6.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-top-4.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-top-5.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-top-6.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-width-4.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-width-5.html47
-rw-r--r--layout/reftests/pixel-rounding/collapsed-border-width-6.html47
-rw-r--r--layout/reftests/pixel-rounding/corner-bl.pngbin0 -> 98 bytes
-rw-r--r--layout/reftests/pixel-rounding/corner-br.pngbin0 -> 117 bytes
-rw-r--r--layout/reftests/pixel-rounding/corner-tl.pngbin0 -> 115 bytes
-rw-r--r--layout/reftests/pixel-rounding/corner-tr.pngbin0 -> 99 bytes
-rw-r--r--layout/reftests/pixel-rounding/green-1x1.pngbin0 -> 69 bytes
-rw-r--r--layout/reftests/pixel-rounding/green-25x25.pngbin0 -> 91 bytes
-rw-r--r--layout/reftests/pixel-rounding/green-3x3.pngbin0 -> 75 bytes
-rw-r--r--layout/reftests/pixel-rounding/green-5x5.pngbin0 -> 75 bytes
-rw-r--r--layout/reftests/pixel-rounding/green-circle-with-blue-border.pngbin0 -> 12279 bytes
-rw-r--r--layout/reftests/pixel-rounding/iframe-1-ref.html6
-rw-r--r--layout/reftests/pixel-rounding/iframe-1.html6
-rw-r--r--layout/reftests/pixel-rounding/image-base-ref.html45
-rw-r--r--layout/reftests/pixel-rounding/image-height-10-ref.html45
-rw-r--r--layout/reftests/pixel-rounding/image-height-4.html45
-rw-r--r--layout/reftests/pixel-rounding/image-height-5.html45
-rw-r--r--layout/reftests/pixel-rounding/image-height-6.html45
-rw-r--r--layout/reftests/pixel-rounding/image-height-top-4.html45
-rw-r--r--layout/reftests/pixel-rounding/image-height-top-5.html45
-rw-r--r--layout/reftests/pixel-rounding/image-height-top-6.html45
-rw-r--r--layout/reftests/pixel-rounding/image-high-quality-scaling-1-ref.html22
-rw-r--r--layout/reftests/pixel-rounding/image-high-quality-scaling-1.html22
-rw-r--r--layout/reftests/pixel-rounding/image-left-10-ref.html45
-rw-r--r--layout/reftests/pixel-rounding/image-left-4.html45
-rw-r--r--layout/reftests/pixel-rounding/image-left-5.html45
-rw-r--r--layout/reftests/pixel-rounding/image-left-6.html45
-rw-r--r--layout/reftests/pixel-rounding/image-left-width-4.html45
-rw-r--r--layout/reftests/pixel-rounding/image-left-width-5.html45
-rw-r--r--layout/reftests/pixel-rounding/image-left-width-6.html45
-rw-r--r--layout/reftests/pixel-rounding/image-top-10-ref.html45
-rw-r--r--layout/reftests/pixel-rounding/image-top-4.html45
-rw-r--r--layout/reftests/pixel-rounding/image-top-5.html45
-rw-r--r--layout/reftests/pixel-rounding/image-top-6.html45
-rw-r--r--layout/reftests/pixel-rounding/image-top-height-4.html45
-rw-r--r--layout/reftests/pixel-rounding/image-top-height-5.html45
-rw-r--r--layout/reftests/pixel-rounding/image-top-height-6.html45
-rw-r--r--layout/reftests/pixel-rounding/image-width-10-ref.html45
-rw-r--r--layout/reftests/pixel-rounding/image-width-4.html45
-rw-r--r--layout/reftests/pixel-rounding/image-width-5.html45
-rw-r--r--layout/reftests/pixel-rounding/image-width-6.html45
-rw-r--r--layout/reftests/pixel-rounding/image-width-left-4.html45
-rw-r--r--layout/reftests/pixel-rounding/image-width-left-5.html45
-rw-r--r--layout/reftests/pixel-rounding/image-width-left-6.html45
-rw-r--r--layout/reftests/pixel-rounding/lime-25x25.pngbin0 -> 203 bytes
-rw-r--r--layout/reftests/pixel-rounding/offscreen-0-ref.html18
-rw-r--r--layout/reftests/pixel-rounding/offscreen-10-ref.html18
-rw-r--r--layout/reftests/pixel-rounding/offscreen-background-color-pos-4.html18
-rw-r--r--layout/reftests/pixel-rounding/offscreen-background-color-pos-5.html18
-rw-r--r--layout/reftests/pixel-rounding/offscreen-background-color-pos-6.html18
-rw-r--r--layout/reftests/pixel-rounding/offscreen-background-color-size-4.html18
-rw-r--r--layout/reftests/pixel-rounding/offscreen-background-color-size-5.html18
-rw-r--r--layout/reftests/pixel-rounding/offscreen-background-color-size-6.html18
-rw-r--r--layout/reftests/pixel-rounding/offscreen-image-pos-4.html17
-rw-r--r--layout/reftests/pixel-rounding/offscreen-image-pos-5.html17
-rw-r--r--layout/reftests/pixel-rounding/offscreen-image-pos-6.html17
-rw-r--r--layout/reftests/pixel-rounding/offscreen-image-size-4.html17
-rw-r--r--layout/reftests/pixel-rounding/offscreen-image-size-5.html17
-rw-r--r--layout/reftests/pixel-rounding/offscreen-image-size-6.html17
-rw-r--r--layout/reftests/pixel-rounding/random-10x10.pngbin0 -> 378 bytes
-rw-r--r--layout/reftests/pixel-rounding/reftest.list183
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-base-ref.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-height-10-ref.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-height-4.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-height-5.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-height-6.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-height-top-4.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-height-top-5.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-height-top-6.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-left-10-ref.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-left-4.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-left-5.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-left-6.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-left-width-4.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-left-width-5.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-left-width-6.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-top-10-ref.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-top-4.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-top-5.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-top-6.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-top-height-4.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-top-height-5.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-top-height-6.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-width-10-ref.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-width-4.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-width-5.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-width-6.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-width-left-4.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-width-left-5.html74
-rw-r--r--layout/reftests/pixel-rounding/rounded-background-color-width-left-6.html74
-rw-r--r--layout/reftests/pixel-rounding/viewport-units-rounding-1-frame.html51
-rw-r--r--layout/reftests/pixel-rounding/viewport-units-rounding-1-ref.html123
-rw-r--r--layout/reftests/pixel-rounding/viewport-units-rounding-1.html12
-rw-r--r--layout/reftests/pixel-rounding/viewport-units-rounding-2.html43
193 files changed, 8848 insertions, 0 deletions
diff --git a/layout/reftests/pixel-rounding/background-color-base.html b/layout/reftests/pixel-rounding/background-color-base.html
new file mode 100644
index 0000000000..812ef64f3a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-base.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-height-10.html b/layout/reftests/pixel-rounding/background-color-height-10.html
new file mode 100644
index 0000000000..cc82977e3e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-height-10.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="height:11px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-height-4.html b/layout/reftests/pixel-rounding/background-color-height-4.html
new file mode 100644
index 0000000000..cdf0bc9bee
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-height-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="height:10.4px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-height-5.html b/layout/reftests/pixel-rounding/background-color-height-5.html
new file mode 100644
index 0000000000..2a571ff511
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-height-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="height:10.5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-height-6.html b/layout/reftests/pixel-rounding/background-color-height-6.html
new file mode 100644
index 0000000000..2dfece438b
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-height-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="height:10.6px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-height-top-4.html b/layout/reftests/pixel-rounding/background-color-height-top-4.html
new file mode 100644
index 0000000000..c2da4ba41d
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-height-top-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10.5px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="top:9.9px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-height-top-5.html b/layout/reftests/pixel-rounding/background-color-height-top-5.html
new file mode 100644
index 0000000000..a66274ea8c
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-height-top-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10.5px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="top:10px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-height-top-6.html b/layout/reftests/pixel-rounding/background-color-height-top-6.html
new file mode 100644
index 0000000000..be28044f52
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-height-top-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10.5px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="top:10.1px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-left-10.html b/layout/reftests/pixel-rounding/background-color-left-10.html
new file mode 100644
index 0000000000..4778b47013
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-left-10.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="left:11px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-left-4.html b/layout/reftests/pixel-rounding/background-color-left-4.html
new file mode 100644
index 0000000000..9fe115f549
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-left-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="left:10.4px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-left-5.html b/layout/reftests/pixel-rounding/background-color-left-5.html
new file mode 100644
index 0000000000..56b8a876d9
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-left-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="left:10.5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-left-6.html b/layout/reftests/pixel-rounding/background-color-left-6.html
new file mode 100644
index 0000000000..4acbb2803e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-left-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="left:10.6px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-left-width-4.html b/layout/reftests/pixel-rounding/background-color-left-width-4.html
new file mode 100644
index 0000000000..05d6e43889
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-left-width-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 9.5px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="width:10.9px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-left-width-5.html b/layout/reftests/pixel-rounding/background-color-left-width-5.html
new file mode 100644
index 0000000000..b9eced013b
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-left-width-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 9.5px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="width:11px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-left-width-6.html b/layout/reftests/pixel-rounding/background-color-left-width-6.html
new file mode 100644
index 0000000000..27c8162ccc
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-left-width-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 9.5px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="width:11.1px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-top-10.html b/layout/reftests/pixel-rounding/background-color-top-10.html
new file mode 100644
index 0000000000..0e3f9abdce
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-top-10.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="top:11px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-top-4.html b/layout/reftests/pixel-rounding/background-color-top-4.html
new file mode 100644
index 0000000000..a7fd3e484d
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-top-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="top:10.4px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-top-5.html b/layout/reftests/pixel-rounding/background-color-top-5.html
new file mode 100644
index 0000000000..86397f0497
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-top-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="top:10.5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-top-6.html b/layout/reftests/pixel-rounding/background-color-top-6.html
new file mode 100644
index 0000000000..66f7215605
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-top-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="top:10.6px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-top-height-4.html b/layout/reftests/pixel-rounding/background-color-top-height-4.html
new file mode 100644
index 0000000000..021475fd33
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-top-height-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 9.5px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="height:10.9px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-top-height-5.html b/layout/reftests/pixel-rounding/background-color-top-height-5.html
new file mode 100644
index 0000000000..a36c833c63
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-top-height-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 9.5px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="height:11px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-top-height-6.html b/layout/reftests/pixel-rounding/background-color-top-height-6.html
new file mode 100644
index 0000000000..5d0d11671c
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-top-height-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 9.5px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="height:11.1px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-width-10.html b/layout/reftests/pixel-rounding/background-color-width-10.html
new file mode 100644
index 0000000000..1e5aeedf94
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-width-10.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="width:11px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-width-4.html b/layout/reftests/pixel-rounding/background-color-width-4.html
new file mode 100644
index 0000000000..9e9a64d13f
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-width-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="width:10.4px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-width-5.html b/layout/reftests/pixel-rounding/background-color-width-5.html
new file mode 100644
index 0000000000..0557ca1036
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-width-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="width:10.5px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-width-6.html b/layout/reftests/pixel-rounding/background-color-width-6.html
new file mode 100644
index 0000000000..947aac8b3a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-width-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="width:10.6px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-width-left-4.html b/layout/reftests/pixel-rounding/background-color-width-left-4.html
new file mode 100644
index 0000000000..d68dc270fa
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-width-left-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10.5px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="left:9.9px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-width-left-5.html b/layout/reftests/pixel-rounding/background-color-width-left-5.html
new file mode 100644
index 0000000000..1a1e75e717
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-width-left-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10.5px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="left:10px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-color-width-left-6.html b/layout/reftests/pixel-rounding/background-color-width-left-6.html
new file mode 100644
index 0000000000..efaf82e033
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-color-width-left-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; left: 10px; height: 10px; width: 10.5px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+<div style="left:10.1px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-base.html b/layout/reftests/pixel-rounding/background-image-base.html
new file mode 100644
index 0000000000..7233e2717d
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-base.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div { background: blue; } /* for reference only */
+
+div.i1 { top: 10px; }
+div.i3 { top: 30px; }
+div.i5 { top: 50px; }
+div.i25 { top: 70px; }
+
+div.p1 { left: 10px; }
+div.p2 { left: 30px; }
+div.p3 { left: 50px; }
+div.p4 { left: 70px; }
+div.p5 { left: 90px; }
+div.p6 { left: 110px; }
+div.p7 { left: 130px; }
+div.p8 { left: 150px; }
+div.p9 { left: 170px; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-height-10-ref.html b/layout/reftests/pixel-rounding/background-image-height-10-ref.html
new file mode 100644
index 0000000000..41cd583d24
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-height-10-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 11px; width: 10px; }
+
+div { background: blue; } /* for reference only */
+
+div.i1 { top: 10px; }
+div.i3 { top: 30px; }
+div.i5 { top: 50px; }
+div.i25 { top: 70px; }
+
+div.p1 { left: 10px; }
+div.p2 { left: 30px; }
+div.p3 { left: 50px; }
+div.p4 { left: 70px; }
+div.p5 { left: 90px; }
+div.p6 { left: 110px; }
+div.p7 { left: 130px; }
+div.p8 { left: 150px; }
+div.p9 { left: 170px; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-height-4.html b/layout/reftests/pixel-rounding/background-image-height-4.html
new file mode 100644
index 0000000000..763e710f0a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-height-4.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10.4px; width: 10px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-height-5.html b/layout/reftests/pixel-rounding/background-image-height-5.html
new file mode 100644
index 0000000000..0c4b3298a3
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-height-5.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10.5px; width: 10px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-height-6.html b/layout/reftests/pixel-rounding/background-image-height-6.html
new file mode 100644
index 0000000000..6571ecd477
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-height-6.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10.6px; width: 10px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-height-top-4.html b/layout/reftests/pixel-rounding/background-image-height-top-4.html
new file mode 100644
index 0000000000..beff787fba
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-height-top-4.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10.5px; width: 10px; }
+
+div.i1 { top: 9.9px; background-image: url(blue-1x1.png); }
+div.i3 { top: 29.9px; background-image: url(blue-3x3.png); }
+div.i5 { top: 49.9px; background-image: url(blue-5x5.png); }
+div.i25 { top: 69.9px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-height-top-5.html b/layout/reftests/pixel-rounding/background-image-height-top-5.html
new file mode 100644
index 0000000000..0c4b3298a3
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-height-top-5.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10.5px; width: 10px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-height-top-6.html b/layout/reftests/pixel-rounding/background-image-height-top-6.html
new file mode 100644
index 0000000000..13907dd00f
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-height-top-6.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10.5px; width: 10px; }
+
+div.i1 { top: 10.1px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30.1px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50.1px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70.1px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-left-10-ref.html b/layout/reftests/pixel-rounding/background-image-left-10-ref.html
new file mode 100644
index 0000000000..e661856798
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-left-10-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div { background: blue; } /* for reference only */
+
+div.i1 { top: 10px; }
+div.i3 { top: 30px; }
+div.i5 { top: 50px; }
+div.i25 { top: 70px; }
+
+div.p1 { left: 11px; }
+div.p2 { left: 31px; }
+div.p3 { left: 51px; }
+div.p4 { left: 71px; }
+div.p5 { left: 91px; }
+div.p6 { left: 111px; }
+div.p7 { left: 131px; }
+div.p8 { left: 151px; }
+div.p9 { left: 171px; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-left-4.html b/layout/reftests/pixel-rounding/background-image-left-4.html
new file mode 100644
index 0000000000..74e09f81ac
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-left-4.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10.4px; background-position: top left; }
+div.p2 { left: 30.4px; background-position: top; }
+div.p3 { left: 50.4px; background-position: top right; }
+div.p4 { left: 70.4px; background-position: left; }
+div.p5 { left: 90.4px; background-position: center; }
+div.p6 { left: 110.4px; background-position: right; }
+div.p7 { left: 130.4px; background-position: bottom left; }
+div.p8 { left: 150.4px; background-position: bottom; }
+div.p9 { left: 170.4px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-left-5.html b/layout/reftests/pixel-rounding/background-image-left-5.html
new file mode 100644
index 0000000000..7c38213436
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-left-5.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10.5px; background-position: top left; }
+div.p2 { left: 30.5px; background-position: top; }
+div.p3 { left: 50.5px; background-position: top right; }
+div.p4 { left: 70.5px; background-position: left; }
+div.p5 { left: 90.5px; background-position: center; }
+div.p6 { left: 110.5px; background-position: right; }
+div.p7 { left: 130.5px; background-position: bottom left; }
+div.p8 { left: 150.5px; background-position: bottom; }
+div.p9 { left: 170.5px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-left-6.html b/layout/reftests/pixel-rounding/background-image-left-6.html
new file mode 100644
index 0000000000..d7c2bd6ed9
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-left-6.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10.6px; background-position: top left; }
+div.p2 { left: 30.6px; background-position: top; }
+div.p3 { left: 50.6px; background-position: top right; }
+div.p4 { left: 70.6px; background-position: left; }
+div.p5 { left: 90.6px; background-position: center; }
+div.p6 { left: 110.6px; background-position: right; }
+div.p7 { left: 130.6px; background-position: bottom left; }
+div.p8 { left: 150.6px; background-position: bottom; }
+div.p9 { left: 170.6px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-left-width-4.html b/layout/reftests/pixel-rounding/background-image-left-width-4.html
new file mode 100644
index 0000000000..f4a86ff754
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-left-width-4.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10.9px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 9.5px; background-position: top left; }
+div.p2 { left: 29.5px; background-position: top; }
+div.p3 { left: 49.5px; background-position: top right; }
+div.p4 { left: 69.5px; background-position: left; }
+div.p5 { left: 89.5px; background-position: center; }
+div.p6 { left: 109.5px; background-position: right; }
+div.p7 { left: 129.5px; background-position: bottom left; }
+div.p8 { left: 149.5px; background-position: bottom; }
+div.p9 { left: 169.5px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-left-width-5.html b/layout/reftests/pixel-rounding/background-image-left-width-5.html
new file mode 100644
index 0000000000..54b39f3909
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-left-width-5.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 11px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 9.5px; background-position: top left; }
+div.p2 { left: 29.5px; background-position: top; }
+div.p3 { left: 49.5px; background-position: top right; }
+div.p4 { left: 69.5px; background-position: left; }
+div.p5 { left: 89.5px; background-position: center; }
+div.p6 { left: 109.5px; background-position: right; }
+div.p7 { left: 129.5px; background-position: bottom left; }
+div.p8 { left: 149.5px; background-position: bottom; }
+div.p9 { left: 169.5px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-left-width-6.html b/layout/reftests/pixel-rounding/background-image-left-width-6.html
new file mode 100644
index 0000000000..3514e28c05
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-left-width-6.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 11.1px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 9.5px; background-position: top left; }
+div.p2 { left: 29.5px; background-position: top; }
+div.p3 { left: 49.5px; background-position: top right; }
+div.p4 { left: 69.5px; background-position: left; }
+div.p5 { left: 89.5px; background-position: center; }
+div.p6 { left: 109.5px; background-position: right; }
+div.p7 { left: 129.5px; background-position: bottom left; }
+div.p8 { left: 149.5px; background-position: bottom; }
+div.p9 { left: 169.5px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-tiling-ref.html b/layout/reftests/pixel-rounding/background-image-tiling-ref.html
new file mode 100644
index 0000000000..5f4d6f7b5e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-tiling-ref.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title>Pixel rounding of background image tiling</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta http-equiv="Content-Style-Type" content="text/css">
+ <style type="text/css">
+
+ body { background: black; }
+
+ .set {
+ height: 60px;
+ position: relative;
+ }
+
+ .item {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background: aqua;
+ overflow: hidden;
+ }
+ .item > div {
+ position: absolute;
+ width: 15px;
+ height: 15px;
+ border: 1px solid yellow;
+ }
+
+ .item1 { left: 0px; }
+ .item2 { left: 15px; }
+ .item3 { left: 30px; }
+ .item4 { left: 45px; }
+ .item5 { left: 60px; }
+
+ .tl { top: 0px; }
+ .tl > div { top: 0; left: 0; }
+
+ .tr { top: 15px; }
+ .tr > div { top: 0; right: 0; }
+
+ .bl { top: 30px; }
+ .bl > div { bottom: 0; left: 0; }
+
+ .br { top: 45px; }
+ .br > div { bottom: 0; right: 0; }
+
+ .varydim .item1 { height: 10px; width: 11px; }
+ .varydim .item2 { height: 10px; width: 11px; }
+ .varydim .item3 { height: 11px; width: 11px; }
+ .varydim .item4 { height: 11px; width: 10px; }
+ .varydim .item5 { height: 11px; width: 10px; }
+
+ .varydim.athalf .item2 { width: 10px; }
+ .varydim.athalf .item3 { height: 10px; width: 10px; }
+ .varydim.athalf .item4 { height: 10px; }
+
+ .varypos .item1 { margin-top: 0px; margin-left: 1px; }
+ .varypos .item2 { margin-top: 0px; margin-left: 1px; }
+ .varypos .item3 { margin-top: 1px; margin-left: 1px; }
+ .varypos .item4 { margin-top: 1px; margin-left: 0px; }
+ .varypos .item5 { margin-top: 1px; margin-left: 0px; }
+
+ .varydim.athalf .item {
+ margin-top: 1px; margin-left: 1px;
+ }
+
+ .varypos.athalf .item1 { width: 11px; height: 11px; }
+ .varypos.athalf .item2 { height: 11px; }
+ .varypos.athalf .item4 { width: 11px; }
+ .varypos.athalf .item5 { width: 11px; height: 11px; }
+
+ /* remember that abs pos children are relative to the padding box */
+ .border .item { padding: 1px; }
+
+ /*
+ * For the tiled images, use two divs as the children, and offset
+ * one so that it does only the vertical line, and the other so it
+ * does only the horizontal line.
+ */
+ .border .item div:first-child { margin: 1px -1px; }
+ .border .item div:first-child + div { margin: -1px 1px; }
+
+ </style>
+</head>
+<body>
+
+<div class="set varydim">
+ <div class="tl item item1"><div></div></div>
+ <div class="tl item item2"><div></div></div>
+ <div class="tl item item3"><div></div></div>
+ <div class="tl item item4"><div></div></div>
+ <div class="tl item item5"><div></div></div>
+
+ <div class="tr item item1"><div></div></div>
+ <div class="tr item item2"><div></div></div>
+ <div class="tr item item3"><div></div></div>
+ <div class="tr item item4"><div></div></div>
+ <div class="tr item item5"><div></div></div>
+
+ <div class="bl item item1"><div></div></div>
+ <div class="bl item item2"><div></div></div>
+ <div class="bl item item3"><div></div></div>
+ <div class="bl item item4"><div></div></div>
+ <div class="bl item item5"><div></div></div>
+
+ <div class="br item item1"><div></div></div>
+ <div class="br item item2"><div></div></div>
+ <div class="br item item3"><div></div></div>
+ <div class="br item item4"><div></div></div>
+ <div class="br item item5"><div></div></div>
+</div>
+
+<div class="set varypos">
+ <div class="tl item item1"><div></div></div>
+ <div class="tl item item2"><div></div></div>
+ <div class="tl item item3"><div></div></div>
+ <div class="tl item item4"><div></div></div>
+ <div class="tl item item5"><div></div></div>
+
+ <div class="tr item item1"><div></div></div>
+ <div class="tr item item2"><div></div></div>
+ <div class="tr item item3"><div></div></div>
+ <div class="tr item item4"><div></div></div>
+ <div class="tr item item5"><div></div></div>
+
+ <div class="bl item item1"><div></div></div>
+ <div class="bl item item2"><div></div></div>
+ <div class="bl item item3"><div></div></div>
+ <div class="bl item item4"><div></div></div>
+ <div class="bl item item5"><div></div></div>
+
+ <div class="br item item1"><div></div></div>
+ <div class="br item item2"><div></div></div>
+ <div class="br item item3"><div></div></div>
+ <div class="br item item4"><div></div></div>
+ <div class="br item item5"><div></div></div>
+</div>
+
+<div class="set varydim athalf">
+ <div class="tl item item1"><div></div></div>
+ <div class="tl item item2"><div></div></div>
+ <div class="tl item item3"><div></div></div>
+ <div class="tl item item4"><div></div></div>
+ <div class="tl item item5"><div></div></div>
+
+ <div class="tr item item1"><div></div></div>
+ <div class="tr item item2"><div></div></div>
+ <div class="tr item item3"><div></div></div>
+ <div class="tr item item4"><div></div></div>
+ <div class="tr item item5"><div></div></div>
+
+ <div class="bl item item1"><div></div></div>
+ <div class="bl item item2"><div></div></div>
+ <div class="bl item item3"><div></div></div>
+ <div class="bl item item4"><div></div></div>
+ <div class="bl item item5"><div></div></div>
+
+ <div class="br item item1"><div></div></div>
+ <div class="br item item2"><div></div></div>
+ <div class="br item item3"><div></div></div>
+ <div class="br item item4"><div></div></div>
+ <div class="br item item5"><div></div></div>
+</div>
+
+<div class="set varypos athalf">
+ <div class="tl item item1"><div></div></div>
+ <div class="tl item item2"><div></div></div>
+ <div class="tl item item3"><div></div></div>
+ <div class="tl item item4"><div></div></div>
+ <div class="tl item item5"><div></div></div>
+
+ <div class="tr item item1"><div></div></div>
+ <div class="tr item item2"><div></div></div>
+ <div class="tr item item3"><div></div></div>
+ <div class="tr item item4"><div></div></div>
+ <div class="tr item item5"><div></div></div>
+
+ <div class="bl item item1"><div></div></div>
+ <div class="bl item item2"><div></div></div>
+ <div class="bl item item3"><div></div></div>
+ <div class="bl item item4"><div></div></div>
+ <div class="bl item item5"><div></div></div>
+
+ <div class="br item item1"><div></div></div>
+ <div class="br item item2"><div></div></div>
+ <div class="br item item3"><div></div></div>
+ <div class="br item item4"><div></div></div>
+ <div class="br item item5"><div></div></div>
+</div>
+
+<div class="set varydim border">
+ <div class="tl item item1"><div></div><div></div></div>
+ <div class="tl item item2"><div></div><div></div></div>
+ <div class="tl item item3"><div></div><div></div></div>
+ <div class="tl item item4"><div></div><div></div></div>
+ <div class="tl item item5"><div></div><div></div></div>
+
+ <div class="tr item item1"><div></div><div></div></div>
+ <div class="tr item item2"><div></div><div></div></div>
+ <div class="tr item item3"><div></div><div></div></div>
+ <div class="tr item item4"><div></div><div></div></div>
+ <div class="tr item item5"><div></div><div></div></div>
+
+ <div class="bl item item1"><div></div><div></div></div>
+ <div class="bl item item2"><div></div><div></div></div>
+ <div class="bl item item3"><div></div><div></div></div>
+ <div class="bl item item4"><div></div><div></div></div>
+ <div class="bl item item5"><div></div><div></div></div>
+
+ <div class="br item item1"><div></div><div></div></div>
+ <div class="br item item2"><div></div><div></div></div>
+ <div class="br item item3"><div></div><div></div></div>
+ <div class="br item item4"><div></div><div></div></div>
+ <div class="br item item5"><div></div><div></div></div>
+</div>
+
+<div class="set varypos border">
+ <div class="tl item item1"><div></div><div></div></div>
+ <div class="tl item item2"><div></div><div></div></div>
+ <div class="tl item item3"><div></div><div></div></div>
+ <div class="tl item item4"><div></div><div></div></div>
+ <div class="tl item item5"><div></div><div></div></div>
+
+ <div class="tr item item1"><div></div><div></div></div>
+ <div class="tr item item2"><div></div><div></div></div>
+ <div class="tr item item3"><div></div><div></div></div>
+ <div class="tr item item4"><div></div><div></div></div>
+ <div class="tr item item5"><div></div><div></div></div>
+
+ <div class="bl item item1"><div></div><div></div></div>
+ <div class="bl item item2"><div></div><div></div></div>
+ <div class="bl item item3"><div></div><div></div></div>
+ <div class="bl item item4"><div></div><div></div></div>
+ <div class="bl item item5"><div></div><div></div></div>
+
+ <div class="br item item1"><div></div><div></div></div>
+ <div class="br item item2"><div></div><div></div></div>
+ <div class="br item item3"><div></div><div></div></div>
+ <div class="br item item4"><div></div><div></div></div>
+ <div class="br item item5"><div></div><div></div></div>
+</div>
+
+<div class="set varydim athalf border">
+ <div class="tl item item1"><div></div><div></div></div>
+ <div class="tl item item2"><div></div><div></div></div>
+ <div class="tl item item3"><div></div><div></div></div>
+ <div class="tl item item4"><div></div><div></div></div>
+ <div class="tl item item5"><div></div><div></div></div>
+
+ <div class="tr item item1"><div></div><div></div></div>
+ <div class="tr item item2"><div></div><div></div></div>
+ <div class="tr item item3"><div></div><div></div></div>
+ <div class="tr item item4"><div></div><div></div></div>
+ <div class="tr item item5"><div></div><div></div></div>
+
+ <div class="bl item item1"><div></div><div></div></div>
+ <div class="bl item item2"><div></div><div></div></div>
+ <div class="bl item item3"><div></div><div></div></div>
+ <div class="bl item item4"><div></div><div></div></div>
+ <div class="bl item item5"><div></div><div></div></div>
+
+ <div class="br item item1"><div></div><div></div></div>
+ <div class="br item item2"><div></div><div></div></div>
+ <div class="br item item3"><div></div><div></div></div>
+ <div class="br item item4"><div></div><div></div></div>
+ <div class="br item item5"><div></div><div></div></div>
+</div>
+
+<div class="set varypos athalf border">
+ <div class="tl item item1"><div></div><div></div></div>
+ <div class="tl item item2"><div></div><div></div></div>
+ <div class="tl item item3"><div></div><div></div></div>
+ <div class="tl item item4"><div></div><div></div></div>
+ <div class="tl item item5"><div></div><div></div></div>
+
+ <div class="tr item item1"><div></div><div></div></div>
+ <div class="tr item item2"><div></div><div></div></div>
+ <div class="tr item item3"><div></div><div></div></div>
+ <div class="tr item item4"><div></div><div></div></div>
+ <div class="tr item item5"><div></div><div></div></div>
+
+ <div class="bl item item1"><div></div><div></div></div>
+ <div class="bl item item2"><div></div><div></div></div>
+ <div class="bl item item3"><div></div><div></div></div>
+ <div class="bl item item4"><div></div><div></div></div>
+ <div class="bl item item5"><div></div><div></div></div>
+
+ <div class="br item item1"><div></div><div></div></div>
+ <div class="br item item2"><div></div><div></div></div>
+ <div class="br item item3"><div></div><div></div></div>
+ <div class="br item item4"><div></div><div></div></div>
+ <div class="br item item5"><div></div><div></div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-tiling.html b/layout/reftests/pixel-rounding/background-image-tiling.html
new file mode 100644
index 0000000000..85a1d49286
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-tiling.html
@@ -0,0 +1,291 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title>Pixel rounding of background image tiling</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta http-equiv="Content-Style-Type" content="text/css">
+ <style type="text/css">
+
+ body { background: black; }
+
+ .set {
+ height: 60px;
+ position: relative;
+ }
+
+ .item {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ }
+
+ .item1 { left: 0px; }
+ .item2 { left: 15px; }
+ .item3 { left: 30px; }
+ .item4 { left: 45px; }
+ .item5 { left: 60px; }
+
+ .tl {
+ top: 0px;
+ background-image: url(corner-tl.png);
+ background-position: top left;
+ }
+
+ .tr {
+ top: 15px;
+ background-image: url(corner-tr.png);
+ background-position: top right;
+ }
+
+ .bl {
+ top: 30px;
+ background-image: url(corner-bl.png);
+ background-position: bottom left;
+ }
+
+ .br {
+ top: 45px;
+ background-image: url(corner-br.png);
+ background-position: bottom right;
+ }
+
+ .varydim .item1 { height: 10.0px; width: 11.0px; }
+ .varydim .item2 { height: 10.4px; width: 10.6px; }
+ .varydim .item3 { height: 10.5px; width: 10.5px; }
+ .varydim .item4 { height: 10.6px; width: 10.4px; }
+ .varydim .item5 { height: 11.0px; width: 10.0px; }
+
+ .varypos .item1 { margin-top: 0.0px; margin-left: 1.0px; }
+ .varypos .item2 { margin-top: 0.4px; margin-left: 0.6px; }
+ .varypos .item3 { margin-top: 0.5px; margin-left: 0.5px; }
+ .varypos .item4 { margin-top: 0.6px; margin-left: 0.4px; }
+ .varypos .item5 { margin-top: 1.0px; margin-left: 0.0px; }
+
+ .varydim.athalf .item {
+ margin-top: 0.5px; margin-left: 0.5px;
+ }
+
+ .varypos.athalf .item {
+ width: 10.5px; height: 10.5px;
+ }
+
+ .border .item {
+ /* force the tiling codepath by making sure there are multiple images */
+ border: 1px solid transparent;
+ }
+
+ </style>
+</head>
+<body>
+
+<div class="set varydim">
+ <div class="tl item item1"></div>
+ <div class="tl item item2"></div>
+ <div class="tl item item3"></div>
+ <div class="tl item item4"></div>
+ <div class="tl item item5"></div>
+
+ <div class="tr item item1"></div>
+ <div class="tr item item2"></div>
+ <div class="tr item item3"></div>
+ <div class="tr item item4"></div>
+ <div class="tr item item5"></div>
+
+ <div class="bl item item1"></div>
+ <div class="bl item item2"></div>
+ <div class="bl item item3"></div>
+ <div class="bl item item4"></div>
+ <div class="bl item item5"></div>
+
+ <div class="br item item1"></div>
+ <div class="br item item2"></div>
+ <div class="br item item3"></div>
+ <div class="br item item4"></div>
+ <div class="br item item5"></div>
+</div>
+
+<div class="set varypos">
+ <div class="tl item item1"></div>
+ <div class="tl item item2"></div>
+ <div class="tl item item3"></div>
+ <div class="tl item item4"></div>
+ <div class="tl item item5"></div>
+
+ <div class="tr item item1"></div>
+ <div class="tr item item2"></div>
+ <div class="tr item item3"></div>
+ <div class="tr item item4"></div>
+ <div class="tr item item5"></div>
+
+ <div class="bl item item1"></div>
+ <div class="bl item item2"></div>
+ <div class="bl item item3"></div>
+ <div class="bl item item4"></div>
+ <div class="bl item item5"></div>
+
+ <div class="br item item1"></div>
+ <div class="br item item2"></div>
+ <div class="br item item3"></div>
+ <div class="br item item4"></div>
+ <div class="br item item5"></div>
+</div>
+
+<div class="set varydim athalf">
+ <div class="tl item item1"></div>
+ <div class="tl item item2"></div>
+ <div class="tl item item3"></div>
+ <div class="tl item item4"></div>
+ <div class="tl item item5"></div>
+
+ <div class="tr item item1"></div>
+ <div class="tr item item2"></div>
+ <div class="tr item item3"></div>
+ <div class="tr item item4"></div>
+ <div class="tr item item5"></div>
+
+ <div class="bl item item1"></div>
+ <div class="bl item item2"></div>
+ <div class="bl item item3"></div>
+ <div class="bl item item4"></div>
+ <div class="bl item item5"></div>
+
+ <div class="br item item1"></div>
+ <div class="br item item2"></div>
+ <div class="br item item3"></div>
+ <div class="br item item4"></div>
+ <div class="br item item5"></div>
+</div>
+
+<div class="set varypos athalf">
+ <div class="tl item item1"></div>
+ <div class="tl item item2"></div>
+ <div class="tl item item3"></div>
+ <div class="tl item item4"></div>
+ <div class="tl item item5"></div>
+
+ <div class="tr item item1"></div>
+ <div class="tr item item2"></div>
+ <div class="tr item item3"></div>
+ <div class="tr item item4"></div>
+ <div class="tr item item5"></div>
+
+ <div class="bl item item1"></div>
+ <div class="bl item item2"></div>
+ <div class="bl item item3"></div>
+ <div class="bl item item4"></div>
+ <div class="bl item item5"></div>
+
+ <div class="br item item1"></div>
+ <div class="br item item2"></div>
+ <div class="br item item3"></div>
+ <div class="br item item4"></div>
+ <div class="br item item5"></div>
+</div>
+
+<div class="set varydim border">
+ <div class="tl item item1"></div>
+ <div class="tl item item2"></div>
+ <div class="tl item item3"></div>
+ <div class="tl item item4"></div>
+ <div class="tl item item5"></div>
+
+ <div class="tr item item1"></div>
+ <div class="tr item item2"></div>
+ <div class="tr item item3"></div>
+ <div class="tr item item4"></div>
+ <div class="tr item item5"></div>
+
+ <div class="bl item item1"></div>
+ <div class="bl item item2"></div>
+ <div class="bl item item3"></div>
+ <div class="bl item item4"></div>
+ <div class="bl item item5"></div>
+
+ <div class="br item item1"></div>
+ <div class="br item item2"></div>
+ <div class="br item item3"></div>
+ <div class="br item item4"></div>
+ <div class="br item item5"></div>
+</div>
+
+<div class="set varypos border">
+ <div class="tl item item1"></div>
+ <div class="tl item item2"></div>
+ <div class="tl item item3"></div>
+ <div class="tl item item4"></div>
+ <div class="tl item item5"></div>
+
+ <div class="tr item item1"></div>
+ <div class="tr item item2"></div>
+ <div class="tr item item3"></div>
+ <div class="tr item item4"></div>
+ <div class="tr item item5"></div>
+
+ <div class="bl item item1"></div>
+ <div class="bl item item2"></div>
+ <div class="bl item item3"></div>
+ <div class="bl item item4"></div>
+ <div class="bl item item5"></div>
+
+ <div class="br item item1"></div>
+ <div class="br item item2"></div>
+ <div class="br item item3"></div>
+ <div class="br item item4"></div>
+ <div class="br item item5"></div>
+</div>
+
+<div class="set varydim athalf border">
+ <div class="tl item item1"></div>
+ <div class="tl item item2"></div>
+ <div class="tl item item3"></div>
+ <div class="tl item item4"></div>
+ <div class="tl item item5"></div>
+
+ <div class="tr item item1"></div>
+ <div class="tr item item2"></div>
+ <div class="tr item item3"></div>
+ <div class="tr item item4"></div>
+ <div class="tr item item5"></div>
+
+ <div class="bl item item1"></div>
+ <div class="bl item item2"></div>
+ <div class="bl item item3"></div>
+ <div class="bl item item4"></div>
+ <div class="bl item item5"></div>
+
+ <div class="br item item1"></div>
+ <div class="br item item2"></div>
+ <div class="br item item3"></div>
+ <div class="br item item4"></div>
+ <div class="br item item5"></div>
+</div>
+
+<div class="set varypos athalf border">
+ <div class="tl item item1"></div>
+ <div class="tl item item2"></div>
+ <div class="tl item item3"></div>
+ <div class="tl item item4"></div>
+ <div class="tl item item5"></div>
+
+ <div class="tr item item1"></div>
+ <div class="tr item item2"></div>
+ <div class="tr item item3"></div>
+ <div class="tr item item4"></div>
+ <div class="tr item item5"></div>
+
+ <div class="bl item item1"></div>
+ <div class="bl item item2"></div>
+ <div class="bl item item3"></div>
+ <div class="bl item item4"></div>
+ <div class="bl item item5"></div>
+
+ <div class="br item item1"></div>
+ <div class="br item item2"></div>
+ <div class="br item item3"></div>
+ <div class="br item item4"></div>
+ <div class="br item item5"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-top-10-ref.html b/layout/reftests/pixel-rounding/background-image-top-10-ref.html
new file mode 100644
index 0000000000..f41a1626bc
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-top-10-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div { background: blue; } /* for reference only */
+
+div.i1 { top: 11px; }
+div.i3 { top: 31px; }
+div.i5 { top: 51px; }
+div.i25 { top: 71px; }
+
+div.p1 { left: 10px; }
+div.p2 { left: 30px; }
+div.p3 { left: 50px; }
+div.p4 { left: 70px; }
+div.p5 { left: 90px; }
+div.p6 { left: 110px; }
+div.p7 { left: 130px; }
+div.p8 { left: 150px; }
+div.p9 { left: 170px; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-top-4.html b/layout/reftests/pixel-rounding/background-image-top-4.html
new file mode 100644
index 0000000000..7bfdfe0bc7
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-top-4.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div.i1 { top: 10.4px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30.4px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50.4px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70.4px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-top-5.html b/layout/reftests/pixel-rounding/background-image-top-5.html
new file mode 100644
index 0000000000..33a774cb97
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-top-5.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div.i1 { top: 10.5px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30.5px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50.5px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70.5px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-top-6.html b/layout/reftests/pixel-rounding/background-image-top-6.html
new file mode 100644
index 0000000000..18fdbf62af
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-top-6.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; }
+
+div.i1 { top: 10.6px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30.6px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50.6px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70.6px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-top-height-4.html b/layout/reftests/pixel-rounding/background-image-top-height-4.html
new file mode 100644
index 0000000000..2da79e5939
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-top-height-4.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10.9px; width: 10px; }
+
+div.i1 { top: 9.5px; background-image: url(blue-1x1.png); }
+div.i3 { top: 29.5px; background-image: url(blue-3x3.png); }
+div.i5 { top: 49.5px; background-image: url(blue-5x5.png); }
+div.i25 { top: 69.5px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-top-height-5.html b/layout/reftests/pixel-rounding/background-image-top-height-5.html
new file mode 100644
index 0000000000..61030791a4
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-top-height-5.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 11px; width: 10px; }
+
+div.i1 { top: 9.5px; background-image: url(blue-1x1.png); }
+div.i3 { top: 29.5px; background-image: url(blue-3x3.png); }
+div.i5 { top: 49.5px; background-image: url(blue-5x5.png); }
+div.i25 { top: 69.5px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-top-height-6.html b/layout/reftests/pixel-rounding/background-image-top-height-6.html
new file mode 100644
index 0000000000..26db7c0b8f
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-top-height-6.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 11.1px; width: 10px; }
+
+div.i1 { top: 9.5px; background-image: url(blue-1x1.png); }
+div.i3 { top: 29.5px; background-image: url(blue-3x3.png); }
+div.i5 { top: 49.5px; background-image: url(blue-5x5.png); }
+div.i25 { top: 69.5px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-width-10-ref.html b/layout/reftests/pixel-rounding/background-image-width-10-ref.html
new file mode 100644
index 0000000000..f3f70b7de2
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-width-10-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 11px; }
+
+div { background: blue; } /* for reference only */
+
+div.i1 { top: 10px; }
+div.i3 { top: 30px; }
+div.i5 { top: 50px; }
+div.i25 { top: 70px; }
+
+div.p1 { left: 10px; }
+div.p2 { left: 30px; }
+div.p3 { left: 50px; }
+div.p4 { left: 70px; }
+div.p5 { left: 90px; }
+div.p6 { left: 110px; }
+div.p7 { left: 130px; }
+div.p8 { left: 150px; }
+div.p9 { left: 170px; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-width-4.html b/layout/reftests/pixel-rounding/background-image-width-4.html
new file mode 100644
index 0000000000..3bcd21269f
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-width-4.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10.4px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-width-5.html b/layout/reftests/pixel-rounding/background-image-width-5.html
new file mode 100644
index 0000000000..ac6f860fe4
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-width-5.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10.5px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-width-6.html b/layout/reftests/pixel-rounding/background-image-width-6.html
new file mode 100644
index 0000000000..128a6abcf6
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-width-6.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10.6px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-width-left-4.html b/layout/reftests/pixel-rounding/background-image-width-left-4.html
new file mode 100644
index 0000000000..b45b868c34
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-width-left-4.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10.5px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 9.9px; background-position: top left; }
+div.p2 { left: 29.9px; background-position: top; }
+div.p3 { left: 49.9px; background-position: top right; }
+div.p4 { left: 69.9px; background-position: left; }
+div.p5 { left: 89.9px; background-position: center; }
+div.p6 { left: 109.9px; background-position: right; }
+div.p7 { left: 129.9px; background-position: bottom left; }
+div.p8 { left: 149.9px; background-position: bottom; }
+div.p9 { left: 169.9px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-width-left-5.html b/layout/reftests/pixel-rounding/background-image-width-left-5.html
new file mode 100644
index 0000000000..ac6f860fe4
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-width-left-5.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10.5px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10px; background-position: top left; }
+div.p2 { left: 30px; background-position: top; }
+div.p3 { left: 50px; background-position: top right; }
+div.p4 { left: 70px; background-position: left; }
+div.p5 { left: 90px; background-position: center; }
+div.p6 { left: 110px; background-position: right; }
+div.p7 { left: 130px; background-position: bottom left; }
+div.p8 { left: 150px; background-position: bottom; }
+div.p9 { left: 170px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/background-image-width-left-6.html b/layout/reftests/pixel-rounding/background-image-width-left-6.html
new file mode 100644
index 0000000000..ec3ab5576a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/background-image-width-left-6.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10.5px; }
+
+div.i1 { top: 10px; background-image: url(blue-1x1.png); }
+div.i3 { top: 30px; background-image: url(blue-3x3.png); }
+div.i5 { top: 50px; background-image: url(blue-5x5.png); }
+div.i25 { top: 70px; background-image: url(blue-25x25.png); }
+
+div.p1 { left: 10.1px; background-position: top left; }
+div.p2 { left: 30.1px; background-position: top; }
+div.p3 { left: 50.1px; background-position: top right; }
+div.p4 { left: 70.1px; background-position: left; }
+div.p5 { left: 90.1px; background-position: center; }
+div.p6 { left: 110.1px; background-position: right; }
+div.p7 { left: 130.1px; background-position: bottom left; }
+div.p8 { left: 150.1px; background-position: bottom; }
+div.p9 { left: 170.1px; background-position: bottom right; }
+
+</style>
+</head>
+<body>
+
+<div class="i1 p1"></div>
+<div class="i1 p2"></div>
+<div class="i1 p3"></div>
+<div class="i1 p4"></div>
+<div class="i1 p5"></div>
+<div class="i1 p6"></div>
+<div class="i1 p7"></div>
+<div class="i1 p8"></div>
+<div class="i1 p9"></div>
+
+<div class="i3 p1"></div>
+<div class="i3 p2"></div>
+<div class="i3 p3"></div>
+<div class="i3 p4"></div>
+<div class="i3 p5"></div>
+<div class="i3 p6"></div>
+<div class="i3 p7"></div>
+<div class="i3 p8"></div>
+<div class="i3 p9"></div>
+
+<div class="i5 p1"></div>
+<div class="i5 p2"></div>
+<div class="i5 p3"></div>
+<div class="i5 p4"></div>
+<div class="i5 p5"></div>
+<div class="i5 p6"></div>
+<div class="i5 p7"></div>
+<div class="i5 p8"></div>
+<div class="i5 p9"></div>
+
+<div class="i25 p1"></div>
+<div class="i25 p2"></div>
+<div class="i25 p3"></div>
+<div class="i25 p4"></div>
+<div class="i25 p5"></div>
+<div class="i25 p6"></div>
+<div class="i25 p7"></div>
+<div class="i25 p8"></div>
+<div class="i25 p9"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/blue-1x1.png b/layout/reftests/pixel-rounding/blue-1x1.png
new file mode 100644
index 0000000000..5da0137001
--- /dev/null
+++ b/layout/reftests/pixel-rounding/blue-1x1.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/blue-25x25.png b/layout/reftests/pixel-rounding/blue-25x25.png
new file mode 100644
index 0000000000..dfe7542b82
--- /dev/null
+++ b/layout/reftests/pixel-rounding/blue-25x25.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/blue-3x3.png b/layout/reftests/pixel-rounding/blue-3x3.png
new file mode 100644
index 0000000000..c049b55008
--- /dev/null
+++ b/layout/reftests/pixel-rounding/blue-3x3.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/blue-5x5.png b/layout/reftests/pixel-rounding/blue-5x5.png
new file mode 100644
index 0000000000..35d8f33684
--- /dev/null
+++ b/layout/reftests/pixel-rounding/blue-5x5.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/border-base-ref.html b/layout/reftests/pixel-rounding/border-base-ref.html
new file mode 100644
index 0000000000..7be5e23d9a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-base-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+
+<div style="left: 10px"></div>
+<div style="left: 30px"></div>
+<div style="left: 50px"></div>
+<div style="left: 70px"></div>
+<div style="left: 90px"></div>
+<div style="left: 110px"></div>
+<div style="left: 130px"></div>
+<div style="left: 150px"></div>
+<div style="left: 170px"></div>
+<div style="left: 190px"></div>
+<div style="left: 210px"></div>
+<div style="left: 230px"></div>
+<div style="left: 250px"></div>
+<div style="left: 270px"></div>
+<div style="left: 290px"></div>
+<div style="left: 310px"></div>
+<div style="left: 330px"></div>
+<div style="left: 350px"></div>
+<div style="left: 370px"></div>
+
+<div style="top: 30px; left: 10px; width: 30px; height: 30px">
+ <div style="background:white; top: 10px; left: 10px"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-height-10-ref.html b/layout/reftests/pixel-rounding/border-height-10-ref.html
new file mode 100644
index 0000000000..75369f3372
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-height-10-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; height: 11px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+
+<div style="left: 10px"></div>
+<div style="left: 30px"></div>
+<div style="left: 50px"></div>
+<div style="left: 70px"></div>
+<div style="left: 90px"></div>
+<div style="left: 110px"></div>
+<div style="left: 130px"></div>
+<div style="left: 150px"></div>
+<div style="left: 170px"></div>
+<div style="left: 190px"></div>
+<div style="left: 210px"></div>
+<div style="left: 230px"></div>
+<div style="left: 250px"></div>
+<div style="left: 270px"></div>
+<div style="left: 290px"></div>
+<div style="left: 310px"></div>
+<div style="left: 330px"></div>
+<div style="left: 350px"></div>
+<div style="left: 370px"></div>
+
+<div style="top: 30px; left: 10px; width: 30px; height: 31px">
+ <div style="background:white; top: 10px; left: 10px"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-height-4.html b/layout/reftests/pixel-rounding/border-height-4.html
new file mode 100644
index 0000000000..db9ea23e12
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-height-4.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10px; border-top: 10.4px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10.4px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10px; border-bottom: 10.4px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10.4px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10.4px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10.4px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10.4px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10.4px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; width: 10px; border-top: 5.4px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5.4px solid green;"></div>
+<div style="top: 10px; left: 210px; height: 10.4px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 10.4px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 10.4px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 5.4px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-top: 5.4px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 5.4px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-top: 5.4px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5.4px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5.4px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 10.4px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-height-5.html b/layout/reftests/pixel-rounding/border-height-5.html
new file mode 100644
index 0000000000..60c38855f9
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-height-5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10px; border-top: 11.5px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10.5px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10px; border-bottom: 11.5px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10.5px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 11.5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 11.5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 11.5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 11.5px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; width: 10px; border-top: 6.5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 6.5px solid green;"></div>
+<div style="top: 10px; left: 210px; height: 10.5px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 11.5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 11.5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 6.5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-top: 6.5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 6.5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-top: 6.5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 6.5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 6.5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 10.5px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-height-6.html b/layout/reftests/pixel-rounding/border-height-6.html
new file mode 100644
index 0000000000..124fa68e28
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-height-6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10px; border-top: 11.6px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10.6px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10px; border-bottom: 11.6px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10.6px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 11.6px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 11.6px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 11.6px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 11.6px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; width: 10px; border-top: 6.6px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 6.6px solid green;"></div>
+<div style="top: 10px; left: 210px; height: 10.6px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 11.6px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 11.6px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 6.6px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-top: 6.6px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 6.6px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-top: 6.6px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 6.6px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 6.6px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 10.6px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-image-width-0.html b/layout/reftests/pixel-rounding/border-image-width-0.html
new file mode 100644
index 0000000000..dce8ac7179
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-image-width-0.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; border-style: solid; }
+
+</style>
+</head>
+<body>
+
+<div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2px;"></div>
+
+<div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2px 2px 2px 2px;"></div>
+
+<div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2px 2px 2px 2px;"></div>
+
+<div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2px;"></div>
+<div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2px;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-image-width-10.html b/layout/reftests/pixel-rounding/border-image-width-10.html
new file mode 100644
index 0000000000..71c2ea7dec
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-image-width-10.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; border-style:solid; }
+
+</style>
+</head>
+<body>
+
+<div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 3px 2px 2px;"></div>
+<div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 3px 2px;"></div>
+<div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 3px;"></div>
+<div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 3px 3px 3px 3px;"></div>
+
+<div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 2px 2px 2px;"></div>
+<div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 3px 2px 2px;"></div>
+<div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 3px 2px;"></div>
+<div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 3px;"></div>
+<div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 3px 3px 3px 3px;"></div>
+
+<div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 2px 2px 2px;"></div>
+<div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 3px 2px 2px;"></div>
+<div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 3px 2px;"></div>
+<div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 3px;"></div>
+<div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 3px 3px 3px 3px;"></div>
+
+<div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 3px 2px 2px 2px;"></div>
+<div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 3px 2px 2px;"></div>
+<div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 3px 2px;"></div>
+<div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 3px;"></div>
+<div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 3px 3px 3px 3px;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-image-width-4.html b/layout/reftests/pixel-rounding/border-image-width-4.html
new file mode 100644
index 0000000000..d47411e7a1
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-image-width-4.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; border-style: solid; }
+
+</style>
+</head>
+<body>
+
+<div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.4px 2px 2px;"></div>
+<div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.4px 2px;"></div>
+<div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.4px;"></div>
+<div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
+
+<div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2px 2px 2px;"></div>
+<div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.4px 2px 2px;"></div>
+<div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.4px 2px;"></div>
+<div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.4px;"></div>
+<div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
+
+<div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2px 2px 2px;"></div>
+<div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.4px 2px 2px;"></div>
+<div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.4px 2px;"></div>
+<div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.4px;"></div>
+<div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
+
+<div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.4px 2px 2px 2px;"></div>
+<div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.4px 2px 2px;"></div>
+<div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.4px 2px;"></div>
+<div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2.4px;"></div>
+<div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-image-width-9.html b/layout/reftests/pixel-rounding/border-image-width-9.html
new file mode 100644
index 0000000000..e45dbe5724
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-image-width-9.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; height: 10px; width: 10px; border-style: solid;}
+
+</style>
+</head>
+<body>
+
+<div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2px 2px 2px;"></div>
+<div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.9px 2px 2px;"></div>
+<div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.9px 2px;"></div>
+<div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.9px;"></div>
+<div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
+
+<div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2px 2px 2px;"></div>
+<div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.9px 2px 2px;"></div>
+<div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.9px 2px;"></div>
+<div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.9px;"></div>
+<div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
+
+<div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2px 2px 2px;"></div>
+<div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.9px 2px 2px;"></div>
+<div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.9px 2px;"></div>
+<div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.9px;"></div>
+<div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
+
+<div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.9px 2px 2px 2px;"></div>
+<div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.9px 2px 2px;"></div>
+<div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.9px 2px;"></div>
+<div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2.9px;"></div>
+<div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2.9px 2.9px 2.9px 2.9px;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-left-10-ref.html b/layout/reftests/pixel-rounding/border-left-10-ref.html
new file mode 100644
index 0000000000..6244d3f072
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-left-10-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+
+<div style="left: 11px"></div>
+<div style="left: 31px"></div>
+<div style="left: 51px"></div>
+<div style="left: 71px"></div>
+<div style="left: 91px"></div>
+<div style="left: 111px"></div>
+<div style="left: 131px"></div>
+<div style="left: 151px"></div>
+<div style="left: 171px"></div>
+<div style="left: 191px"></div>
+<div style="left: 211px"></div>
+<div style="left: 231px"></div>
+<div style="left: 251px"></div>
+<div style="left: 271px"></div>
+<div style="left: 291px"></div>
+<div style="left: 311px"></div>
+<div style="left: 331px"></div>
+<div style="left: 351px"></div>
+<div style="left: 371px"></div>
+
+<div style="top: 30px; left: 11px; width: 30px; height: 30px">
+ <div style="background:white; top: 10px; left: 10px"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-left-4.html b/layout/reftests/pixel-rounding/border-left-4.html
new file mode 100644
index 0000000000..1e5271c21f
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-left-4.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10.4px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30.4px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50.4px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70.4px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90.4px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110.4px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130.4px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150.4px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170.4px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190.4px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 210.4px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230.4px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250.4px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270.4px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290.4px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310.4px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330.4px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350.4px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370.4px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10.4px; border: 10px solid green; height: 10px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-left-5.html b/layout/reftests/pixel-rounding/border-left-5.html
new file mode 100644
index 0000000000..cc3f784ead
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-left-5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10.5px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30.5px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50.5px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70.5px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90.5px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110.5px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130.5px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150.5px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170.5px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190.5px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 210.5px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230.5px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250.5px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270.5px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290.5px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310.5px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330.5px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350.5px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370.5px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10.5px; border: 10px solid green; height: 10px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-left-6.html b/layout/reftests/pixel-rounding/border-left-6.html
new file mode 100644
index 0000000000..a6a6fd11a1
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-left-6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10.6px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30.6px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50.6px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70.6px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90.6px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110.6px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130.6px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150.6px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170.6px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190.6px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 210.6px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230.6px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250.6px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270.6px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290.6px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310.6px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330.6px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350.6px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370.6px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10.6px; border: 10px solid green; height: 10px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-top-10-ref.html b/layout/reftests/pixel-rounding/border-top-10-ref.html
new file mode 100644
index 0000000000..65a0f9516c
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-top-10-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 11px; height: 10px; width: 10px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+
+<div style="left: 10px"></div>
+<div style="left: 30px"></div>
+<div style="left: 50px"></div>
+<div style="left: 70px"></div>
+<div style="left: 90px"></div>
+<div style="left: 110px"></div>
+<div style="left: 130px"></div>
+<div style="left: 150px"></div>
+<div style="left: 170px"></div>
+<div style="left: 190px"></div>
+<div style="left: 210px"></div>
+<div style="left: 230px"></div>
+<div style="left: 250px"></div>
+<div style="left: 270px"></div>
+<div style="left: 290px"></div>
+<div style="left: 310px"></div>
+<div style="left: 330px"></div>
+<div style="left: 350px"></div>
+<div style="left: 370px"></div>
+
+<div style="top: 31px; left: 10px; width: 30px; height: 30px">
+ <div style="background:white; top: 10px; left: 10px"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-top-4.html b/layout/reftests/pixel-rounding/border-top-4.html
new file mode 100644
index 0000000000..e2d66b2384
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-top-4.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10.4px; left: 10px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10.4px; left: 30px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10.4px; left: 50px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10.4px; left: 70px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10.4px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.4px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.4px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.4px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10.4px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.4px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.4px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10.4px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.4px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.4px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.4px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.4px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.4px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10.4px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.4px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30.4px; left: 10px; border: 10px solid green; height: 10px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-top-5.html b/layout/reftests/pixel-rounding/border-top-5.html
new file mode 100644
index 0000000000..e949fd07d5
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-top-5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10.5px; left: 10px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10.5px; left: 30px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10.5px; left: 50px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10.5px; left: 70px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10.5px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.5px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.5px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.5px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10.5px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.5px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.5px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10.5px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.5px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.5px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.5px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.5px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.5px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10.5px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.5px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30.5px; left: 10px; border: 10px solid green; height: 10px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-top-6.html b/layout/reftests/pixel-rounding/border-top-6.html
new file mode 100644
index 0000000000..a92e528960
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-top-6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10.6px; left: 10px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10.6px; left: 30px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10.6px; left: 50px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10.6px; left: 70px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10.6px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.6px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.6px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.6px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10.6px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.6px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.6px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10.6px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.6px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.6px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.6px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.6px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.6px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10.6px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.6px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30.6px; left: 10px; border: 10px solid green; height: 10px; width: 10px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-width-10-ref.html b/layout/reftests/pixel-rounding/border-width-10-ref.html
new file mode 100644
index 0000000000..a27dc2eb01
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-width-10-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; top: 10px; height: 10px; width: 11px; }
+
+div { background: green; }
+
+</style>
+</head>
+<body>
+
+<div style="left: 10px"></div>
+<div style="left: 30px"></div>
+<div style="left: 50px"></div>
+<div style="left: 70px"></div>
+<div style="left: 90px"></div>
+<div style="left: 110px"></div>
+<div style="left: 130px"></div>
+<div style="left: 150px"></div>
+<div style="left: 170px"></div>
+<div style="left: 190px"></div>
+<div style="left: 210px"></div>
+<div style="left: 230px"></div>
+<div style="left: 250px"></div>
+<div style="left: 270px"></div>
+<div style="left: 290px"></div>
+<div style="left: 310px"></div>
+<div style="left: 330px"></div>
+<div style="left: 350px"></div>
+<div style="left: 370px"></div>
+
+<div style="top: 30px; left: 10px; width: 31px; height: 30px">
+ <div style="background:white; top: 10px; left: 10px"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-width-4.html b/layout/reftests/pixel-rounding/border-width-4.html
new file mode 100644
index 0000000000..0ca001eced
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-width-4.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10.4px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10px; border-right: 10.4px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10.4px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10px; border-left: 10.4px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 10.4px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 10.4px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 10.4px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 10.4px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; height: 10px; border-left: 5.4px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 5.4px solid green;"></div>
+<div style="top: 10px; left: 210px; width: 10.4px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 10.4px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 10.4px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 5.4px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-left: 5.4px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 5.4px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-left: 5.4px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 5.4px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5.4px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 10px; width: 10.4px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-width-5.html b/layout/reftests/pixel-rounding/border-width-5.html
new file mode 100644
index 0000000000..3544855af9
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-width-5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10.5px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10px; border-right: 11.5px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10.5px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10px; border-left: 11.5px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 11.5px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 11.5px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 11.5px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 11.5px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; height: 10px; border-left: 6.5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 6.5px solid green;"></div>
+<div style="top: 10px; left: 210px; width: 10.5px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 11.5px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 11.5px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 6.5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-left: 6.5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 6.5px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-left: 6.5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 6.5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 6.5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 10px; width: 10.5px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/border-width-6.html b/layout/reftests/pixel-rounding/border-width-6.html
new file mode 100644
index 0000000000..dd846e900e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/border-width-6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10.6px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10px; border-right: 11.6px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10.6px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10px; border-left: 11.6px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 11.6px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 11.6px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 11.6px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 11.6px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; height: 10px; border-left: 6.6px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 6.6px solid green;"></div>
+<div style="top: 10px; left: 210px; width: 10.6px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 11.6px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 11.6px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 6.6px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-left: 6.6px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 6.6px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-left: 6.6px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 6.6px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 6.6px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 10px; width: 10.6px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/check-image-blue-ref.html b/layout/reftests/pixel-rounding/check-image-blue-ref.html
new file mode 100644
index 0000000000..7219b2e448
--- /dev/null
+++ b/layout/reftests/pixel-rounding/check-image-blue-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { margin: 10px; background: blue; }
+
+</style>
+</head>
+<body>
+<div style="width: 1px; height: 1px"></div>
+<div style="width: 3px; height: 3px"></div>
+<div style="width: 5px; height: 5px"></div>
+<div style="width: 25px; height: 25px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/check-image-blue.html b/layout/reftests/pixel-rounding/check-image-blue.html
new file mode 100644
index 0000000000..28f596cdb6
--- /dev/null
+++ b/layout/reftests/pixel-rounding/check-image-blue.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { margin: 10px; display: block; }
+
+</style>
+</head>
+<body>
+<img src="blue-1x1.png">
+<img src="blue-3x3.png">
+<img src="blue-5x5.png">
+<img src="blue-25x25.png">
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/check-image-ref.html b/layout/reftests/pixel-rounding/check-image-ref.html
new file mode 100644
index 0000000000..dbe76aa9b0
--- /dev/null
+++ b/layout/reftests/pixel-rounding/check-image-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { margin: 10px; background: green; }
+
+</style>
+</head>
+<body>
+<div style="width: 1px; height: 1px"></div>
+<div style="width: 3px; height: 3px"></div>
+<div style="width: 5px; height: 5px"></div>
+<div style="width: 25px; height: 25px"></div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/check-image.html b/layout/reftests/pixel-rounding/check-image.html
new file mode 100644
index 0000000000..8318f36811
--- /dev/null
+++ b/layout/reftests/pixel-rounding/check-image.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { margin: 10px; display: block; }
+
+</style>
+</head>
+<body>
+<img src="green-1x1.png">
+<img src="green-3x3.png">
+<img src="green-5x5.png">
+<img src="green-25x25.png">
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-height-4.html b/layout/reftests/pixel-rounding/collapsed-border-height-4.html
new file mode 100644
index 0000000000..75eddeb223
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-height-4.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10px; border-top: 10.4px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10.4px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10px; border-bottom: 10.4px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10.4px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10.4px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10.4px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10.4px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10.4px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; width: 10px; border-top: 5.4px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5.4px solid green;"></div>
+<div style="top: 10px; left: 210px; height: 10.4px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 10.4px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 10.4px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 5.4px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-top: 5.4px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 5.4px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-top: 5.4px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5.4px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5.4px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 20.4px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-height-5.html b/layout/reftests/pixel-rounding/collapsed-border-height-5.html
new file mode 100644
index 0000000000..5f080ac40e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-height-5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10px; border-top: 10.5px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10.5px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10px; border-bottom: 10.5px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10.5px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10.5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10.5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10.5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10.5px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; width: 10px; border-top: 5.5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5.5px solid green;"></div>
+<div style="top: 10px; left: 210px; height: 10.5px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 10.5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 10.5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 5.5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-top: 5.5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 5.5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-top: 5.5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5.5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5.5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 20.5px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-height-6.html b/layout/reftests/pixel-rounding/collapsed-border-height-6.html
new file mode 100644
index 0000000000..20d8095e3a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-height-6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10px; border-top: 10.6px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10.6px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10px; border-bottom: 10.6px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10.6px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10.6px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10.6px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10.6px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10.6px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; width: 10px; border-top: 5.6px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5.6px solid green;"></div>
+<div style="top: 10px; left: 210px; height: 10.6px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-right: 5px solid green; border-bottom: 10.6px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-right: 5px solid green; border-top: 10.6px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-top: 5px solid green; border-bottom: 5.6px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-top: 5.6px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-top: 5px solid green; border-bottom: 5.6px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-top: 5.6px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5.6px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5.6px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 20.6px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-left-4.html b/layout/reftests/pixel-rounding/collapsed-border-left-4.html
new file mode 100644
index 0000000000..4ad5610a80
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-left-4.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10.4px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30.4px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50.4px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70.4px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90.4px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110.4px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130.4px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150.4px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170.4px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190.4px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 210.4px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230.4px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250.4px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270.4px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290.4px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310.4px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330.4px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350.4px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370.4px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10.4px; border: 10px solid green; height: 20px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-left-5.html b/layout/reftests/pixel-rounding/collapsed-border-left-5.html
new file mode 100644
index 0000000000..d0316841a7
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-left-5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10.5px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30.5px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50.5px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70.5px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90.5px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110.5px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130.5px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150.5px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170.5px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190.5px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 210.5px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230.5px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250.5px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270.5px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290.5px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310.5px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330.5px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350.5px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370.5px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10.5px; border: 10px solid green; height: 20px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-left-6.html b/layout/reftests/pixel-rounding/collapsed-border-left-6.html
new file mode 100644
index 0000000000..1059fe17ab
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-left-6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10.6px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30.6px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 50.6px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70.6px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90.6px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 110.6px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10px; left: 130.6px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10px; left: 150.6px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170.6px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190.6px; height: 10px; border-left: 5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 210.6px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230.6px; border-top: 5px solid green; border-right: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250.6px; border-top: 5px solid green; border-left: 10px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270.6px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290.6px; border-left: 5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310.6px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330.6px; border-left: 5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350.6px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370.6px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10.6px; border: 10px solid green; height: 20px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-top-4.html b/layout/reftests/pixel-rounding/collapsed-border-top-4.html
new file mode 100644
index 0000000000..dea7979204
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-top-4.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10.4px; left: 10px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10.4px; left: 30px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10.4px; left: 50px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10.4px; left: 70px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10.4px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.4px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.4px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.4px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10.4px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.4px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.4px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10.4px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.4px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.4px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.4px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.4px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.4px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10.4px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.4px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30.4px; left: 10px; border: 10px solid green; height: 20px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-top-5.html b/layout/reftests/pixel-rounding/collapsed-border-top-5.html
new file mode 100644
index 0000000000..41674af3ec
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-top-5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10.5px; left: 10px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10.5px; left: 30px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10.5px; left: 50px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10.5px; left: 70px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10.5px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.5px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.5px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.5px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10.5px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.5px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.5px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10.5px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.5px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.5px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.5px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.5px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.5px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10.5px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.5px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30.5px; left: 10px; border: 10px solid green; height: 20px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-top-6.html b/layout/reftests/pixel-rounding/collapsed-border-top-6.html
new file mode 100644
index 0000000000..d45a281800
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-top-6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10.6px; left: 10px; width: 10px; border-top: 10px solid green"></div>
+<div style="top: 10.6px; left: 30px; height: 10px; border-right: 10px solid green"></div>
+<div style="top: 10.6px; left: 50px; width: 10px; border-bottom: 10px solid green"></div>
+<div style="top: 10.6px; left: 70px; height: 10px; border-left: 10px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10.6px; left: 90px; border-top: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.6px; left: 110px; border-bottom: 10px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.6px; left: 130px; border-top: 10px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.6px; left: 150px; border-bottom: 10px solid green; border-left: 10px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10.6px; left: 170px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.6px; left: 190px; width: 10px; border-top: 5px solid green; border-bottom: 5px solid green;"></div>
+<div style="top: 10.6px; left: 210px; height: 10px; border-right: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10.6px; left: 230px; border-right: 5px solid green; border-bottom: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.6px; left: 250px; border-right: 5px solid green; border-top: 10px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.6px; left: 270px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.6px; left: 290px; border-top: 5px solid green; border-bottom: 5px solid green; border-left: 10px solid green"></div>
+<div style="top: 10.6px; left: 310px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+<div style="top: 10.6px; left: 330px; border-top: 5px solid green; border-bottom: 5px solid green; border-right: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10.6px; left: 350px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10.6px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30.6px; left: 10px; border: 10px solid green; height: 20px; width: 20px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-width-4.html b/layout/reftests/pixel-rounding/collapsed-border-width-4.html
new file mode 100644
index 0000000000..e537610efc
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-width-4.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10.4px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10px; border-right: 10.4px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10.4px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10px; border-left: 10.4px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 10.4px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 10.4px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 10.4px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 10.4px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; height: 10px; border-left: 5.4px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 5.4px solid green;"></div>
+<div style="top: 10px; left: 210px; width: 10.4px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 10.4px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 10.4px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 5.4px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-left: 5.4px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 5.4px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-left: 5.4px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 5.4px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5.4px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 20px; width: 20.4px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-width-5.html b/layout/reftests/pixel-rounding/collapsed-border-width-5.html
new file mode 100644
index 0000000000..ffdeb5c4fa
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-width-5.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10.5px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10px; border-right: 10.5px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10.5px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10px; border-left: 10.5px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 10.5px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 10.5px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 10.5px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 10.5px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; height: 10px; border-left: 5.5px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 5.5px solid green;"></div>
+<div style="top: 10px; left: 210px; width: 10.5px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 10.5px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 10.5px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 5.5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-left: 5.5px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 5.5px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-left: 5.5px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 5.5px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5.5px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 20px; width: 20.5px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/collapsed-border-width-6.html b/layout/reftests/pixel-rounding/collapsed-border-width-6.html
new file mode 100644
index 0000000000..732524ad1a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/collapsed-border-width-6.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { display: table; position: absolute; }
+
+</style>
+</head>
+<body>
+
+<!-- one border -->
+<div style="top: 10px; left: 10px; width: 10.6px; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 30px; height: 10px; border-right: 10.6px solid green"></div>
+<div style="top: 10px; left: 50px; width: 10.6px; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 70px; height: 10px; border-left: 10.6px solid green"></div>
+
+<!-- two adjacent borders -->
+<div style="top: 10px; left: 90px; border-top: 10px solid green; border-right: 10.6px solid green"></div>
+<div style="top: 10px; left: 110px; border-bottom: 10px solid green; border-right: 10.6px solid green"></div>
+<div style="top: 10px; left: 130px; border-top: 10px solid green; border-left: 10.6px solid green"></div>
+<div style="top: 10px; left: 150px; border-bottom: 10px solid green; border-left: 10.6px solid green"></div>
+
+<!-- two opposite borders -->
+<div style="top: 10px; left: 170px; height: 10px; border-left: 5.6px solid green; border-right: 5px solid green;"></div>
+<div style="top: 10px; left: 190px; height: 10px; border-left: 5px solid green; border-right: 5.6px solid green;"></div>
+<div style="top: 10px; left: 210px; width: 10.6px; border-top: 5px solid green; border-bottom: 5px solid green"></div>
+
+<!-- three borders -->
+<div style="top: 10px; left: 230px; border-top: 5px solid green; border-right: 10.6px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 250px; border-top: 5px solid green; border-left: 10.6px solid green; border-bottom: 5px solid green"></div>
+<div style="top: 10px; left: 270px; border-left: 5px solid green; border-right: 5.6px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 290px; border-left: 5.6px solid green; border-right: 5px solid green; border-bottom: 10px solid green"></div>
+<div style="top: 10px; left: 310px; border-left: 5px solid green; border-right: 5.6px solid green; border-top: 10px solid green"></div>
+<div style="top: 10px; left: 330px; border-left: 5.6px solid green; border-right: 5px solid green; border-top: 10px solid green"></div>
+
+<!-- four borders -->
+<div style="top: 10px; left: 350px; border-top: 5px solid green; border-right: 5.6px solid green; border-bottom: 5px solid green; border-left: 5px solid green"></div>
+<div style="top: 10px; left: 370px; border-top: 5px solid green; border-right: 5px solid green; border-bottom: 5px solid green; border-left: 5.6px solid green"></div>
+
+<!-- border around space -->
+<div style="top: 30px; left: 10px; border: 10px solid green; height: 20px; width: 20.6px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/corner-bl.png b/layout/reftests/pixel-rounding/corner-bl.png
new file mode 100644
index 0000000000..f9be106e07
--- /dev/null
+++ b/layout/reftests/pixel-rounding/corner-bl.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/corner-br.png b/layout/reftests/pixel-rounding/corner-br.png
new file mode 100644
index 0000000000..44accf9449
--- /dev/null
+++ b/layout/reftests/pixel-rounding/corner-br.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/corner-tl.png b/layout/reftests/pixel-rounding/corner-tl.png
new file mode 100644
index 0000000000..65a71e1199
--- /dev/null
+++ b/layout/reftests/pixel-rounding/corner-tl.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/corner-tr.png b/layout/reftests/pixel-rounding/corner-tr.png
new file mode 100644
index 0000000000..97cedba6ca
--- /dev/null
+++ b/layout/reftests/pixel-rounding/corner-tr.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/green-1x1.png b/layout/reftests/pixel-rounding/green-1x1.png
new file mode 100644
index 0000000000..18b59be474
--- /dev/null
+++ b/layout/reftests/pixel-rounding/green-1x1.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/green-25x25.png b/layout/reftests/pixel-rounding/green-25x25.png
new file mode 100644
index 0000000000..a972cb073a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/green-25x25.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/green-3x3.png b/layout/reftests/pixel-rounding/green-3x3.png
new file mode 100644
index 0000000000..86d1cd244a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/green-3x3.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/green-5x5.png b/layout/reftests/pixel-rounding/green-5x5.png
new file mode 100644
index 0000000000..94fdffd033
--- /dev/null
+++ b/layout/reftests/pixel-rounding/green-5x5.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/green-circle-with-blue-border.png b/layout/reftests/pixel-rounding/green-circle-with-blue-border.png
new file mode 100644
index 0000000000..570fd24944
--- /dev/null
+++ b/layout/reftests/pixel-rounding/green-circle-with-blue-border.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/iframe-1-ref.html b/layout/reftests/pixel-rounding/iframe-1-ref.html
new file mode 100644
index 0000000000..bc38a6fffd
--- /dev/null
+++ b/layout/reftests/pixel-rounding/iframe-1-ref.html
@@ -0,0 +1,6 @@
+<html>
+<body style="background-color: rgb(255,0,0)">
+<iframe style="position: fixed; top: 11" src="data:text/html,<body style='background-color: rgba(0,0,255,0.5)'>">
+</iframe>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/iframe-1.html b/layout/reftests/pixel-rounding/iframe-1.html
new file mode 100644
index 0000000000..c98f73cb37
--- /dev/null
+++ b/layout/reftests/pixel-rounding/iframe-1.html
@@ -0,0 +1,6 @@
+<html>
+<body style="background-color: rgb(255,0,0)">
+<iframe style="position: fixed; top: 10.5" src="data:text/html,<body style='background-color: rgba(0,0,255,0.5)'>">
+</iframe>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-base-ref.html b/layout/reftests/pixel-rounding/image-base-ref.html
new file mode 100644
index 0000000000..5cffc12359
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-base-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue; }
+
+div.i1 { left: 10px; }
+div.i3 { left: 40px; }
+div.i5 { left: 70px; }
+div.i25 { left: 100px; }
+
+div.s1 { top: 10px; height: 1px; width: 1px; }
+div.s3 { top: 30px; height: 3px; width: 3px; }
+div.s5 { top: 50px; height: 5px; width: 5px; }
+div.s25 { top: 70px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<div class="s1 i1"></div>
+<div class="s1 i3"></div>
+<div class="s1 i5"></div>
+<div class="s1 i25"></div>
+
+<div class="s3 i1"></div>
+<div class="s3 i3"></div>
+<div class="s3 i5"></div>
+<div class="s3 i25"></div>
+
+<div class="s5 i1"></div>
+<div class="s5 i3"></div>
+<div class="s5 i5"></div>
+<div class="s5 i25"></div>
+
+<div class="s25 i1"></div>
+<div class="s25 i3"></div>
+<div class="s25 i5"></div>
+<div class="s25 i25"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-height-10-ref.html b/layout/reftests/pixel-rounding/image-height-10-ref.html
new file mode 100644
index 0000000000..858e4445a8
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-height-10-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue; }
+
+div.i1 { left: 10px; }
+div.i3 { left: 40px; }
+div.i5 { left: 70px; }
+div.i25 { left: 100px; }
+
+div.s1 { top: 10px; height: 2px; width: 1px; }
+div.s3 { top: 30px; height: 4px; width: 3px; }
+div.s5 { top: 50px; height: 6px; width: 5px; }
+div.s25 { top: 70px; height: 26px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<div class="s1 i1"></div>
+<div class="s1 i3"></div>
+<div class="s1 i5"></div>
+<div class="s1 i25"></div>
+
+<div class="s3 i1"></div>
+<div class="s3 i3"></div>
+<div class="s3 i5"></div>
+<div class="s3 i25"></div>
+
+<div class="s5 i1"></div>
+<div class="s5 i3"></div>
+<div class="s5 i5"></div>
+<div class="s5 i25"></div>
+
+<div class="s25 i1"></div>
+<div class="s25 i3"></div>
+<div class="s25 i5"></div>
+<div class="s25 i25"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-height-4.html b/layout/reftests/pixel-rounding/image-height-4.html
new file mode 100644
index 0000000000..1903fdf293
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-height-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10px; height: 1.4px; width: 1px; }
+img.s3 { top: 30px; height: 3.4px; width: 3px; }
+img.s5 { top: 50px; height: 5.4px; width: 5px; }
+img.s25 { top: 70px; height: 25.4px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-height-5.html b/layout/reftests/pixel-rounding/image-height-5.html
new file mode 100644
index 0000000000..de8e3e9c97
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-height-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10px; height: 1.5px; width: 1px; }
+img.s3 { top: 30px; height: 3.5px; width: 3px; }
+img.s5 { top: 50px; height: 5.5px; width: 5px; }
+img.s25 { top: 70px; height: 25.5px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-height-6.html b/layout/reftests/pixel-rounding/image-height-6.html
new file mode 100644
index 0000000000..1afc5e6012
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-height-6.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10px; height: 1.6px; width: 1px; }
+img.s3 { top: 30px; height: 3.6px; width: 3px; }
+img.s5 { top: 50px; height: 5.6px; width: 5px; }
+img.s25 { top: 70px; height: 25.6px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-height-top-4.html b/layout/reftests/pixel-rounding/image-height-top-4.html
new file mode 100644
index 0000000000..5f91bd314e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-height-top-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 9.9px; height: 1.5px; width: 1px; }
+img.s3 { top: 29.9px; height: 3.5px; width: 3px; }
+img.s5 { top: 49.9px; height: 5.5px; width: 5px; }
+img.s25 { top: 69.9px; height: 25.5px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-height-top-5.html b/layout/reftests/pixel-rounding/image-height-top-5.html
new file mode 100644
index 0000000000..de8e3e9c97
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-height-top-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10px; height: 1.5px; width: 1px; }
+img.s3 { top: 30px; height: 3.5px; width: 3px; }
+img.s5 { top: 50px; height: 5.5px; width: 5px; }
+img.s25 { top: 70px; height: 25.5px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-height-top-6.html b/layout/reftests/pixel-rounding/image-height-top-6.html
new file mode 100644
index 0000000000..4f446f3e35
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-height-top-6.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10.1px; height: 1.5px; width: 1px; }
+img.s3 { top: 30.1px; height: 3.5px; width: 3px; }
+img.s5 { top: 50.1px; height: 5.5px; width: 5px; }
+img.s25 { top: 70.1px; height: 25.5px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-high-quality-scaling-1-ref.html b/layout/reftests/pixel-rounding/image-high-quality-scaling-1-ref.html
new file mode 100644
index 0000000000..62df7fa511
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-high-quality-scaling-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-wait">
+<head>
+ <script>
+ // We add an artificial delay before the reftest snapshot to increase the
+ // chance that we're snapshotting the high-quality downscaled version of
+ // the image. This is necessary because high-quality downscaling is
+ // currently an async process. Bug 1045926 will eliminate the need for this
+ // delay.
+ function snapshot() {
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+</head>
+<body onload="setTimeout(snapshot, 250)">
+<div style="padding: 1em 3em; font-size: 80%; width: 300px; text-align: center;">
+ <img src="green-circle-with-blue-border.png" width="179" height="220">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-high-quality-scaling-1.html b/layout/reftests/pixel-rounding/image-high-quality-scaling-1.html
new file mode 100644
index 0000000000..e3d14a61f9
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-high-quality-scaling-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="reftest-wait">
+<head>
+ <script>
+ // We add an artificial delay before the reftest snapshot to increase the
+ // chance that we're snapshotting the high-quality downscaled version of
+ // the image. This is necessary because high-quality downscaling is
+ // currently an async process. Bug 1045926 will eliminate the need for this
+ // delay.
+ function snapshot() {
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+</head>
+<body onload="setTimeout(snapshot, 250)">
+<div style="padding: 1em 3em; font-size: 80%; width: 300px; text-align: center;">
+ <img src="green-circle-with-blue-border.png" height="220">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-left-10-ref.html b/layout/reftests/pixel-rounding/image-left-10-ref.html
new file mode 100644
index 0000000000..489e4ff335
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-left-10-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue; }
+
+div.i1 { left: 11px; }
+div.i3 { left: 41px; }
+div.i5 { left: 71px; }
+div.i25 { left: 101px; }
+
+div.s1 { top: 10px; height: 1px; width: 1px; }
+div.s3 { top: 30px; height: 3px; width: 3px; }
+div.s5 { top: 50px; height: 5px; width: 5px; }
+div.s25 { top: 70px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<div class="s1 i1"></div>
+<div class="s1 i3"></div>
+<div class="s1 i5"></div>
+<div class="s1 i25"></div>
+
+<div class="s3 i1"></div>
+<div class="s3 i3"></div>
+<div class="s3 i5"></div>
+<div class="s3 i25"></div>
+
+<div class="s5 i1"></div>
+<div class="s5 i3"></div>
+<div class="s5 i5"></div>
+<div class="s5 i25"></div>
+
+<div class="s25 i1"></div>
+<div class="s25 i3"></div>
+<div class="s25 i5"></div>
+<div class="s25 i25"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-left-4.html b/layout/reftests/pixel-rounding/image-left-4.html
new file mode 100644
index 0000000000..d8e2cab293
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-left-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10.4px; }
+img[src="blue-3x3.png"] { left: 40.4px; }
+img[src="blue-5x5.png"] { left: 70.4px; }
+img[src="blue-25x25.png"] { left: 100.4px; }
+
+img.s1 { top: 10px; height: 1px; width: 1px; }
+img.s3 { top: 30px; height: 3px; width: 3px; }
+img.s5 { top: 50px; height: 5px; width: 5px; }
+img.s25 { top: 70px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-left-5.html b/layout/reftests/pixel-rounding/image-left-5.html
new file mode 100644
index 0000000000..47c80820d0
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-left-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10.5px; }
+img[src="blue-3x3.png"] { left: 40.5px; }
+img[src="blue-5x5.png"] { left: 70.5px; }
+img[src="blue-25x25.png"] { left: 100.5px; }
+
+img.s1 { top: 10px; height: 1px; width: 1px; }
+img.s3 { top: 30px; height: 3px; width: 3px; }
+img.s5 { top: 50px; height: 5px; width: 5px; }
+img.s25 { top: 70px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-left-6.html b/layout/reftests/pixel-rounding/image-left-6.html
new file mode 100644
index 0000000000..68ac4e06d6
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-left-6.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10.6px; }
+img[src="blue-3x3.png"] { left: 40.6px; }
+img[src="blue-5x5.png"] { left: 70.6px; }
+img[src="blue-25x25.png"] { left: 100.6px; }
+
+img.s1 { top: 10px; height: 1px; width: 1px; }
+img.s3 { top: 30px; height: 3px; width: 3px; }
+img.s5 { top: 50px; height: 5px; width: 5px; }
+img.s25 { top: 70px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-left-width-4.html b/layout/reftests/pixel-rounding/image-left-width-4.html
new file mode 100644
index 0000000000..c671875d8f
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-left-width-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 9.5px; }
+img[src="blue-3x3.png"] { left: 39.5px; }
+img[src="blue-5x5.png"] { left: 69.5px; }
+img[src="blue-25x25.png"] { left: 99.5px; }
+
+img.s1 { top: 10px; height: 1px; width: 1.9px; }
+img.s3 { top: 30px; height: 3px; width: 3.9px; }
+img.s5 { top: 50px; height: 5px; width: 5.9px; }
+img.s25 { top: 70px; height: 25px; width: 25.9px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-left-width-5.html b/layout/reftests/pixel-rounding/image-left-width-5.html
new file mode 100644
index 0000000000..f4905bdad3
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-left-width-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 9.5px; }
+img[src="blue-3x3.png"] { left: 39.5px; }
+img[src="blue-5x5.png"] { left: 69.5px; }
+img[src="blue-25x25.png"] { left: 99.5px; }
+
+img.s1 { top: 10px; height: 1px; width: 2px; }
+img.s3 { top: 30px; height: 3px; width: 4px; }
+img.s5 { top: 50px; height: 5px; width: 6px; }
+img.s25 { top: 70px; height: 25px; width: 26px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-left-width-6.html b/layout/reftests/pixel-rounding/image-left-width-6.html
new file mode 100644
index 0000000000..4c51386b5b
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-left-width-6.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 9.5px; }
+img[src="blue-3x3.png"] { left: 39.5px; }
+img[src="blue-5x5.png"] { left: 69.5px; }
+img[src="blue-25x25.png"] { left: 99.5px; }
+
+img.s1 { top: 10px; height: 1px; width: 2.1px; }
+img.s3 { top: 30px; height: 3px; width: 4.1px; }
+img.s5 { top: 50px; height: 5px; width: 6.1px; }
+img.s25 { top: 70px; height: 25px; width: 26.1px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-top-10-ref.html b/layout/reftests/pixel-rounding/image-top-10-ref.html
new file mode 100644
index 0000000000..9df47260a9
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-top-10-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue; }
+
+div.i1 { left: 10px; }
+div.i3 { left: 40px; }
+div.i5 { left: 70px; }
+div.i25 { left: 100px; }
+
+div.s1 { top: 11px; height: 1px; width: 1px; }
+div.s3 { top: 31px; height: 3px; width: 3px; }
+div.s5 { top: 51px; height: 5px; width: 5px; }
+div.s25 { top: 71px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<div class="s1 i1"></div>
+<div class="s1 i3"></div>
+<div class="s1 i5"></div>
+<div class="s1 i25"></div>
+
+<div class="s3 i1"></div>
+<div class="s3 i3"></div>
+<div class="s3 i5"></div>
+<div class="s3 i25"></div>
+
+<div class="s5 i1"></div>
+<div class="s5 i3"></div>
+<div class="s5 i5"></div>
+<div class="s5 i25"></div>
+
+<div class="s25 i1"></div>
+<div class="s25 i3"></div>
+<div class="s25 i5"></div>
+<div class="s25 i25"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-top-4.html b/layout/reftests/pixel-rounding/image-top-4.html
new file mode 100644
index 0000000000..82b260ad37
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-top-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10.4px; height: 1px; width: 1px; }
+img.s3 { top: 30.4px; height: 3px; width: 3px; }
+img.s5 { top: 50.4px; height: 5px; width: 5px; }
+img.s25 { top: 70.4px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-top-5.html b/layout/reftests/pixel-rounding/image-top-5.html
new file mode 100644
index 0000000000..9fe616c5d1
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-top-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10.5px; height: 1px; width: 1px; }
+img.s3 { top: 30.5px; height: 3px; width: 3px; }
+img.s5 { top: 50.5px; height: 5px; width: 5px; }
+img.s25 { top: 70.5px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-top-6.html b/layout/reftests/pixel-rounding/image-top-6.html
new file mode 100644
index 0000000000..d634da9bf9
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-top-6.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10.6px; height: 1px; width: 1px; }
+img.s3 { top: 30.6px; height: 3px; width: 3px; }
+img.s5 { top: 50.6px; height: 5px; width: 5px; }
+img.s25 { top: 70.6px; height: 25px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-top-height-4.html b/layout/reftests/pixel-rounding/image-top-height-4.html
new file mode 100644
index 0000000000..b9127bb056
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-top-height-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 9.5px; height: 1.9px; width: 1px; }
+img.s3 { top: 29.5px; height: 3.9px; width: 3px; }
+img.s5 { top: 49.5px; height: 5.9px; width: 5px; }
+img.s25 { top: 69.5px; height: 25.9px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-top-height-5.html b/layout/reftests/pixel-rounding/image-top-height-5.html
new file mode 100644
index 0000000000..b9c6f4b92c
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-top-height-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 9.5px; height: 2px; width: 1px; }
+img.s3 { top: 29.5px; height: 4px; width: 3px; }
+img.s5 { top: 49.5px; height: 6px; width: 5px; }
+img.s25 { top: 69.5px; height: 26px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-top-height-6.html b/layout/reftests/pixel-rounding/image-top-height-6.html
new file mode 100644
index 0000000000..35b97b3eaf
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-top-height-6.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 9.5px; height: 2.1px; width: 1px; }
+img.s3 { top: 29.5px; height: 4.1px; width: 3px; }
+img.s5 { top: 49.5px; height: 6.1px; width: 5px; }
+img.s25 { top: 69.5px; height: 26.1px; width: 25px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-width-10-ref.html b/layout/reftests/pixel-rounding/image-width-10-ref.html
new file mode 100644
index 0000000000..650389da4c
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-width-10-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue; }
+
+div.i1 { left: 10px; }
+div.i3 { left: 40px; }
+div.i5 { left: 70px; }
+div.i25 { left: 100px; }
+
+div.s1 { top: 10px; height: 1px; width: 2px; }
+div.s3 { top: 30px; height: 3px; width: 4px; }
+div.s5 { top: 50px; height: 5px; width: 6px; }
+div.s25 { top: 70px; height: 25px; width: 26px; }
+
+</style>
+</head>
+<body>
+
+<div class="s1 i1"></div>
+<div class="s1 i3"></div>
+<div class="s1 i5"></div>
+<div class="s1 i25"></div>
+
+<div class="s3 i1"></div>
+<div class="s3 i3"></div>
+<div class="s3 i5"></div>
+<div class="s3 i25"></div>
+
+<div class="s5 i1"></div>
+<div class="s5 i3"></div>
+<div class="s5 i5"></div>
+<div class="s5 i25"></div>
+
+<div class="s25 i1"></div>
+<div class="s25 i3"></div>
+<div class="s25 i5"></div>
+<div class="s25 i25"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-width-4.html b/layout/reftests/pixel-rounding/image-width-4.html
new file mode 100644
index 0000000000..39a4df62d2
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-width-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10px; height: 1px; width: 1.4px; }
+img.s3 { top: 30px; height: 3px; width: 3.4px; }
+img.s5 { top: 50px; height: 5px; width: 5.4px; }
+img.s25 { top: 70px; height: 25px; width: 25.4px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-width-5.html b/layout/reftests/pixel-rounding/image-width-5.html
new file mode 100644
index 0000000000..d1673b3369
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-width-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10px; height: 1px; width: 1.5px; }
+img.s3 { top: 30px; height: 3px; width: 3.5px; }
+img.s5 { top: 50px; height: 5px; width: 5.5px; }
+img.s25 { top: 70px; height: 25px; width: 25.5px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-width-6.html b/layout/reftests/pixel-rounding/image-width-6.html
new file mode 100644
index 0000000000..a3929ff30e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-width-6.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10px; height: 1px; width: 1.6px; }
+img.s3 { top: 30px; height: 3px; width: 3.6px; }
+img.s5 { top: 50px; height: 5px; width: 5.6px; }
+img.s25 { top: 70px; height: 25px; width: 25.6px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-width-left-4.html b/layout/reftests/pixel-rounding/image-width-left-4.html
new file mode 100644
index 0000000000..b9d381ed76
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-width-left-4.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 9.9px; }
+img[src="blue-3x3.png"] { left: 39.9px; }
+img[src="blue-5x5.png"] { left: 69.9px; }
+img[src="blue-25x25.png"] { left: 99.9px; }
+
+img.s1 { top: 10px; height: 1px; width: 1.5px; }
+img.s3 { top: 30px; height: 3px; width: 3.5px; }
+img.s5 { top: 50px; height: 5px; width: 5.5px; }
+img.s25 { top: 70px; height: 25px; width: 25.5px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-width-left-5.html b/layout/reftests/pixel-rounding/image-width-left-5.html
new file mode 100644
index 0000000000..d1673b3369
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-width-left-5.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10px; }
+img[src="blue-3x3.png"] { left: 40px; }
+img[src="blue-5x5.png"] { left: 70px; }
+img[src="blue-25x25.png"] { left: 100px; }
+
+img.s1 { top: 10px; height: 1px; width: 1.5px; }
+img.s3 { top: 30px; height: 3px; width: 3.5px; }
+img.s5 { top: 50px; height: 5px; width: 5.5px; }
+img.s25 { top: 70px; height: 25px; width: 25.5px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/image-width-left-6.html b/layout/reftests/pixel-rounding/image-width-left-6.html
new file mode 100644
index 0000000000..2d91aec403
--- /dev/null
+++ b/layout/reftests/pixel-rounding/image-width-left-6.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; }
+
+img[src="blue-1x1.png"] { left: 10.1px; }
+img[src="blue-3x3.png"] { left: 40.1px; }
+img[src="blue-5x5.png"] { left: 70.1px; }
+img[src="blue-25x25.png"] { left: 100.1px; }
+
+img.s1 { top: 10px; height: 1px; width: 1.5px; }
+img.s3 { top: 30px; height: 3px; width: 3.5px; }
+img.s5 { top: 50px; height: 5px; width: 5.5px; }
+img.s25 { top: 70px; height: 25px; width: 25.5px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-1x1.png">
+<img class="s1" src="blue-3x3.png">
+<img class="s1" src="blue-5x5.png">
+<img class="s1" src="blue-25x25.png">
+
+<img class="s3" src="blue-1x1.png">
+<img class="s3" src="blue-3x3.png">
+<img class="s3" src="blue-5x5.png">
+<img class="s3" src="blue-25x25.png">
+
+<img class="s5" src="blue-1x1.png">
+<img class="s5" src="blue-3x3.png">
+<img class="s5" src="blue-5x5.png">
+<img class="s5" src="blue-25x25.png">
+
+<img class="s25" src="blue-1x1.png">
+<img class="s25" src="blue-3x3.png">
+<img class="s25" src="blue-5x5.png">
+<img class="s25" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/lime-25x25.png b/layout/reftests/pixel-rounding/lime-25x25.png
new file mode 100644
index 0000000000..165a9d5279
--- /dev/null
+++ b/layout/reftests/pixel-rounding/lime-25x25.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/offscreen-0-ref.html b/layout/reftests/pixel-rounding/offscreen-0-ref.html
new file mode 100644
index 0000000000..de78c62a98
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-0-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue;
+ top: 0px; left: 0px; width: 15px; height: 15px; }
+
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-10-ref.html b/layout/reftests/pixel-rounding/offscreen-10-ref.html
new file mode 100644
index 0000000000..b599e72feb
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-10-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue;
+ top: 0px; left: 0px; width: 16px; height: 16px; }
+
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-pos-4.html b/layout/reftests/pixel-rounding/offscreen-background-color-pos-4.html
new file mode 100644
index 0000000000..ebc8d8058a
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-background-color-pos-4.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue;
+ top: -9.6px; left: -9.6px; width: 25px; height: 25px; }
+
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-pos-5.html b/layout/reftests/pixel-rounding/offscreen-background-color-pos-5.html
new file mode 100644
index 0000000000..c5c9e560d2
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-background-color-pos-5.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue;
+ top: -9.5px; left: -9.5px; width: 25px; height: 25px; }
+
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-pos-6.html b/layout/reftests/pixel-rounding/offscreen-background-color-pos-6.html
new file mode 100644
index 0000000000..83a011e7c7
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-background-color-pos-6.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue;
+ top: -9.4px; left: -9.4px; width: 25px; height: 25px; }
+
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-size-4.html b/layout/reftests/pixel-rounding/offscreen-background-color-size-4.html
new file mode 100644
index 0000000000..d907fe0c11
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-background-color-size-4.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue;
+ top: -10px; left: -10px; width: 25.4px; height: 25.4px; }
+
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-size-5.html b/layout/reftests/pixel-rounding/offscreen-background-color-size-5.html
new file mode 100644
index 0000000000..5d1bd5d4ee
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-background-color-size-5.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue;
+ top: -10px; left: -10px; width: 25.5px; height: 25.5px; }
+
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-background-color-size-6.html b/layout/reftests/pixel-rounding/offscreen-background-color-size-6.html
new file mode 100644
index 0000000000..a9d593eee0
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-background-color-size-6.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+div { position: absolute; background: blue;
+ top: -10px; left: -10px; width: 25.6px; height: 25.6px; }
+
+</style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-image-pos-4.html b/layout/reftests/pixel-rounding/offscreen-image-pos-4.html
new file mode 100644
index 0000000000..a662860224
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-image-pos-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; top: -9.6px; left: -9.6px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-image-pos-5.html b/layout/reftests/pixel-rounding/offscreen-image-pos-5.html
new file mode 100644
index 0000000000..33cacb01dd
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-image-pos-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; top: -9.5px; left: -9.5px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-image-pos-6.html b/layout/reftests/pixel-rounding/offscreen-image-pos-6.html
new file mode 100644
index 0000000000..996051b604
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-image-pos-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; top: -9.4px; left: -9.4px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-image-size-4.html b/layout/reftests/pixel-rounding/offscreen-image-size-4.html
new file mode 100644
index 0000000000..99a630f0a7
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-image-size-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; top: -10px; left: -10px; height: 25.4px; width: 25.4px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-image-size-5.html b/layout/reftests/pixel-rounding/offscreen-image-size-5.html
new file mode 100644
index 0000000000..42cd94925b
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-image-size-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; top: -10px; left: -10px; height: 25.5px; width: 25.5px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/offscreen-image-size-6.html b/layout/reftests/pixel-rounding/offscreen-image-size-6.html
new file mode 100644
index 0000000000..dc1805d54e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/offscreen-image-size-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+img { position: absolute; top: -10px; left: -10px; height: 25.6px; width: 25.6px; }
+
+</style>
+</head>
+<body>
+
+<img class="s1" src="blue-25x25.png">
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/random-10x10.png b/layout/reftests/pixel-rounding/random-10x10.png
new file mode 100644
index 0000000000..466588ade1
--- /dev/null
+++ b/layout/reftests/pixel-rounding/random-10x10.png
Binary files differ
diff --git a/layout/reftests/pixel-rounding/reftest.list b/layout/reftests/pixel-rounding/reftest.list
new file mode 100644
index 0000000000..333d9611bd
--- /dev/null
+++ b/layout/reftests/pixel-rounding/reftest.list
@@ -0,0 +1,183 @@
+== check-image.html check-image-ref.html
+== check-image-blue.html check-image-blue-ref.html
+
+
+!= background-color-base.html background-color-height-10.html
+== background-color-height-4.html background-color-base.html
+== background-color-height-5.html background-color-height-10.html
+== background-color-height-6.html background-color-height-10.html
+!= background-color-base.html background-color-top-10.html
+== background-color-top-4.html background-color-base.html
+== background-color-top-5.html background-color-top-10.html
+== background-color-top-6.html background-color-top-10.html
+!= background-color-base.html background-color-width-10.html
+== background-color-width-4.html background-color-base.html
+== background-color-width-5.html background-color-width-10.html
+== background-color-width-6.html background-color-width-10.html
+!= background-color-base.html background-color-left-10.html
+== background-color-left-4.html background-color-base.html
+== background-color-left-5.html background-color-left-10.html
+== background-color-left-6.html background-color-left-10.html
+== background-color-top-height-4.html background-color-height-4.html
+== background-color-top-height-5.html background-color-height-5.html
+== background-color-top-height-6.html background-color-height-6.html
+== background-color-left-width-4.html background-color-width-4.html
+== background-color-left-width-5.html background-color-width-5.html
+== background-color-left-width-6.html background-color-width-6.html
+== background-color-height-top-4.html background-color-height-4.html
+== background-color-height-top-5.html background-color-height-5.html
+== background-color-height-top-6.html background-color-height-6.html
+== background-color-width-left-4.html background-color-width-4.html
+== background-color-width-left-5.html background-color-width-5.html
+== background-color-width-left-6.html background-color-width-6.html
+
+
+!= border-base-ref.html border-height-10-ref.html
+== border-height-4.html border-base-ref.html
+== border-height-5.html border-height-10-ref.html
+== border-height-6.html border-height-10-ref.html
+!= border-base-ref.html border-width-10-ref.html
+== border-width-4.html border-base-ref.html
+== border-width-5.html border-width-10-ref.html
+== border-width-6.html border-width-10-ref.html
+!= border-base-ref.html border-left-10-ref.html
+== border-left-4.html border-base-ref.html
+== border-left-5.html border-left-10-ref.html
+== border-left-6.html border-left-10-ref.html
+!= border-base-ref.html border-top-10-ref.html
+== border-top-4.html border-base-ref.html
+== border-top-5.html border-top-10-ref.html
+== border-top-6.html border-top-10-ref.html
+
+!= background-image-base.html background-image-height-10-ref.html
+== background-image-height-4.html background-image-base.html
+== background-image-height-5.html background-image-height-10-ref.html
+== background-image-height-6.html background-image-height-10-ref.html
+!= background-image-base.html background-image-top-10-ref.html
+== background-image-top-4.html background-image-base.html
+== background-image-top-5.html background-image-top-10-ref.html
+== background-image-top-6.html background-image-top-10-ref.html
+!= background-image-base.html background-image-width-10-ref.html
+== background-image-width-4.html background-image-base.html
+== background-image-width-5.html background-image-width-10-ref.html
+== background-image-width-6.html background-image-width-10-ref.html
+!= background-image-base.html background-image-left-10-ref.html
+== background-image-left-4.html background-image-base.html
+== background-image-left-5.html background-image-left-10-ref.html
+== background-image-left-6.html background-image-left-10-ref.html
+== background-image-top-height-4.html background-image-height-4.html
+== background-image-top-height-5.html background-image-height-5.html
+== background-image-top-height-6.html background-image-height-6.html
+== background-image-left-width-4.html background-image-width-4.html
+== background-image-left-width-5.html background-image-width-5.html
+== background-image-left-width-6.html background-image-width-6.html
+== background-image-height-top-4.html background-image-height-4.html
+== background-image-height-top-5.html background-image-height-5.html
+== background-image-height-top-6.html background-image-height-6.html
+== background-image-width-left-4.html background-image-width-4.html
+== background-image-width-left-5.html background-image-width-5.html
+== background-image-width-left-6.html background-image-width-6.html
+
+
+# These all fail due bug 371180, plus a bunch of other bugs that ought to be filed.
+fails == collapsed-border-height-4.html border-base-ref.html
+fails == collapsed-border-height-5.html border-height-10-ref.html
+fails == collapsed-border-height-6.html border-height-10-ref.html
+fails == collapsed-border-width-4.html border-base-ref.html
+fails == collapsed-border-width-5.html border-width-10-ref.html
+fails == collapsed-border-width-6.html border-width-10-ref.html
+fails == collapsed-border-left-4.html border-base-ref.html
+fails == collapsed-border-left-5.html border-left-10-ref.html
+fails == collapsed-border-left-6.html border-left-10-ref.html
+fails == collapsed-border-top-4.html border-base-ref.html
+fails == collapsed-border-top-5.html border-top-10-ref.html
+fails == collapsed-border-top-6.html border-top-10-ref.html
+
+
+!= image-base-ref.html image-height-10-ref.html
+== image-height-4.html image-base-ref.html
+== image-height-5.html image-height-10-ref.html
+== image-height-6.html image-height-10-ref.html
+!= image-base-ref.html image-top-10-ref.html
+== image-top-4.html image-base-ref.html
+== image-top-5.html image-top-10-ref.html
+== image-top-6.html image-top-10-ref.html
+!= image-base-ref.html image-width-10-ref.html
+== image-width-4.html image-base-ref.html
+== image-width-5.html image-width-10-ref.html
+== image-width-6.html image-width-10-ref.html
+!= image-base-ref.html image-left-10-ref.html
+== image-left-4.html image-base-ref.html
+== image-left-5.html image-left-10-ref.html
+== image-left-6.html image-left-10-ref.html
+== image-top-height-4.html image-height-4.html
+== image-top-height-5.html image-height-5.html
+== image-top-height-6.html image-height-6.html
+== image-left-width-4.html image-width-4.html
+== image-left-width-5.html image-width-5.html
+== image-left-width-6.html image-width-6.html
+== image-height-top-4.html image-height-4.html
+== image-height-top-5.html image-height-5.html
+== image-height-top-6.html image-height-6.html
+== image-width-left-4.html image-width-4.html
+== image-width-left-5.html image-width-5.html
+== image-width-left-6.html image-width-6.html
+
+
+skip pref(image.downscale-during-decode.enabled,true) == image-high-quality-scaling-1.html image-high-quality-scaling-1-ref.html
+
+
+!= offscreen-0-ref.html offscreen-10-ref.html
+== offscreen-background-color-pos-4.html offscreen-0-ref.html
+== offscreen-background-color-pos-5.html offscreen-10-ref.html
+== offscreen-background-color-pos-6.html offscreen-10-ref.html
+== offscreen-background-color-size-4.html offscreen-0-ref.html
+== offscreen-background-color-size-5.html offscreen-10-ref.html
+== offscreen-background-color-size-6.html offscreen-10-ref.html
+== offscreen-image-pos-4.html offscreen-0-ref.html
+== offscreen-image-pos-5.html offscreen-10-ref.html
+== offscreen-image-pos-6.html offscreen-10-ref.html
+== offscreen-image-size-4.html offscreen-0-ref.html
+== offscreen-image-size-5.html offscreen-10-ref.html
+== offscreen-image-size-6.html offscreen-10-ref.html
+
+
+!= rounded-background-color-base-ref.html rounded-background-color-height-10-ref.html
+fuzzy(0-1,0-14) == rounded-background-color-height-4.html rounded-background-color-base-ref.html
+== rounded-background-color-height-5.html rounded-background-color-height-10-ref.html
+== rounded-background-color-height-6.html rounded-background-color-height-10-ref.html
+!= rounded-background-color-base-ref.html rounded-background-color-top-10-ref.html
+fuzzy(0-1,0-14) == rounded-background-color-top-4.html rounded-background-color-base-ref.html
+== rounded-background-color-top-5.html rounded-background-color-top-10-ref.html
+== rounded-background-color-top-6.html rounded-background-color-top-10-ref.html
+!= rounded-background-color-base-ref.html rounded-background-color-width-10-ref.html
+fuzzy(0-1,0-14) == rounded-background-color-width-4.html rounded-background-color-base-ref.html
+== rounded-background-color-width-5.html rounded-background-color-width-10-ref.html
+== rounded-background-color-width-6.html rounded-background-color-width-10-ref.html
+!= rounded-background-color-base-ref.html rounded-background-color-left-10-ref.html
+fuzzy(0-1,0-225) == rounded-background-color-left-4.html rounded-background-color-base-ref.html
+fuzzy(0-1,0-160) == rounded-background-color-left-5.html rounded-background-color-left-10-ref.html
+fuzzy(0-1,0-145) == rounded-background-color-left-6.html rounded-background-color-left-10-ref.html
+fuzzy(0-1,0-145) == rounded-background-color-top-height-4.html rounded-background-color-height-4.html
+fuzzy(0-1,0-113) == rounded-background-color-top-height-5.html rounded-background-color-height-5.html
+fuzzy(0-1,0-145) == rounded-background-color-top-height-6.html rounded-background-color-height-6.html
+fuzzy(0-1,0-225) == rounded-background-color-left-width-4.html rounded-background-color-width-4.html
+fuzzy(0-1,0-113) == rounded-background-color-left-width-5.html rounded-background-color-width-5.html
+fuzzy(0-1,0-113) == rounded-background-color-left-width-6.html rounded-background-color-width-6.html
+fuzzy(0-1,0-145) == rounded-background-color-height-top-4.html rounded-background-color-height-4.html
+fuzzy(0-1,0-97) == rounded-background-color-height-top-5.html rounded-background-color-height-5.html
+fuzzy(0-1,0-113) == rounded-background-color-height-top-6.html rounded-background-color-height-6.html
+fuzzy(0-1,0-225) == rounded-background-color-width-left-4.html rounded-background-color-width-4.html
+fuzzy(0-1,0-145) == rounded-background-color-width-left-5.html rounded-background-color-width-5.html
+fuzzy(0-1,0-145) == rounded-background-color-width-left-6.html rounded-background-color-width-6.html
+
+== background-image-tiling.html background-image-tiling-ref.html
+
+!= border-image-width-0.html border-image-width-10.html
+== border-image-width-4.html border-image-width-0.html
+== border-image-width-9.html border-image-width-0.html
+
+== iframe-1.html iframe-1-ref.html
+
+fuzzy(0-128,0-220) == viewport-units-rounding-1.html viewport-units-rounding-1-ref.html
+== viewport-units-rounding-2.html about:blank
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-base-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-base-ref.html
new file mode 100644
index 0000000000..7f299a3507
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-base-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-10-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-height-10-ref.html
new file mode 100644
index 0000000000..49d3823e51
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-height-10-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 11px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-4.html b/layout/reftests/pixel-rounding/rounded-background-color-height-4.html
new file mode 100644
index 0000000000..2f8ab99198
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-height-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 10.4px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-5.html b/layout/reftests/pixel-rounding/rounded-background-color-height-5.html
new file mode 100644
index 0000000000..aef9045902
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-height-5.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 10.5px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-6.html b/layout/reftests/pixel-rounding/rounded-background-color-height-6.html
new file mode 100644
index 0000000000..52565b79be
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-height-6.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 10.6px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-top-4.html b/layout/reftests/pixel-rounding/rounded-background-color-height-top-4.html
new file mode 100644
index 0000000000..d0fad8f652
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-height-top-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: -0.1px; left: 0; height: 10.5px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 19.9px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-top-5.html b/layout/reftests/pixel-rounding/rounded-background-color-height-top-5.html
new file mode 100644
index 0000000000..f55313919d
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-height-top-5.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0px; left: 0; height: 10.5px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-height-top-6.html b/layout/reftests/pixel-rounding/rounded-background-color-height-top-6.html
new file mode 100644
index 0000000000..35a94aa2d4
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-height-top-6.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0.1px; left: 0; height: 10.5px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20.1px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-10-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-left-10-ref.html
new file mode 100644
index 0000000000..f57df7ed23
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-left-10-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 1px; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 21px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-4.html b/layout/reftests/pixel-rounding/rounded-background-color-left-4.html
new file mode 100644
index 0000000000..a6ee8a47e2
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-left-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0.4px; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20.4px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-5.html b/layout/reftests/pixel-rounding/rounded-background-color-left-5.html
new file mode 100644
index 0000000000..b6261bb3fc
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-left-5.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0.5px; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20.5px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-6.html b/layout/reftests/pixel-rounding/rounded-background-color-left-6.html
new file mode 100644
index 0000000000..b5b469f7a0
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-left-6.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0.6px; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20.6px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-width-4.html b/layout/reftests/pixel-rounding/rounded-background-color-left-width-4.html
new file mode 100644
index 0000000000..083257d0fb
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-left-width-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: -0.5px; height: 10px; width: 10.9px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 19.5px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-width-5.html b/layout/reftests/pixel-rounding/rounded-background-color-left-width-5.html
new file mode 100644
index 0000000000..e2593fc5a8
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-left-width-5.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: -0.5px; height: 10px; width: 11px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 19.5px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-left-width-6.html b/layout/reftests/pixel-rounding/rounded-background-color-left-width-6.html
new file mode 100644
index 0000000000..5f1fca7d34
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-left-width-6.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: -0.5px; height: 10px; width: 11.1px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 19.5px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-10-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-top-10-ref.html
new file mode 100644
index 0000000000..700262c182
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-top-10-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 1px; left: 0; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 21px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-4.html b/layout/reftests/pixel-rounding/rounded-background-color-top-4.html
new file mode 100644
index 0000000000..34f569a7bc
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-top-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0.4px; left: 0; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20.4px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-5.html b/layout/reftests/pixel-rounding/rounded-background-color-top-5.html
new file mode 100644
index 0000000000..0f139aaf12
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-top-5.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0.5px; left: 0; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20.5px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-6.html b/layout/reftests/pixel-rounding/rounded-background-color-top-6.html
new file mode 100644
index 0000000000..234440c369
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-top-6.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0.6px; left: 0; height: 10px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20.6px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-height-4.html b/layout/reftests/pixel-rounding/rounded-background-color-top-height-4.html
new file mode 100644
index 0000000000..c465bc8d2e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-top-height-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: -0.5px; left: 0; height: 10.9px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 19.5px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-height-5.html b/layout/reftests/pixel-rounding/rounded-background-color-top-height-5.html
new file mode 100644
index 0000000000..a79900c20b
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-top-height-5.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: -0.5px; left: 0; height: 11px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 19.5px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-top-height-6.html b/layout/reftests/pixel-rounding/rounded-background-color-top-height-6.html
new file mode 100644
index 0000000000..c31ff606ae
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-top-height-6.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: -0.5px; left: 0; height: 11.1px; width: 10px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 19.5px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-10-ref.html b/layout/reftests/pixel-rounding/rounded-background-color-width-10-ref.html
new file mode 100644
index 0000000000..2f706bbe49
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-width-10-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 10px; width: 11px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-4.html b/layout/reftests/pixel-rounding/rounded-background-color-width-4.html
new file mode 100644
index 0000000000..f4af683abe
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-width-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 10px; width: 10.4px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-5.html b/layout/reftests/pixel-rounding/rounded-background-color-width-5.html
new file mode 100644
index 0000000000..406d3d3172
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-width-5.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 10px; width: 10.5px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-6.html b/layout/reftests/pixel-rounding/rounded-background-color-width-6.html
new file mode 100644
index 0000000000..8a01dd5031
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-width-6.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0; height: 10px; width: 10.6px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-left-4.html b/layout/reftests/pixel-rounding/rounded-background-color-width-left-4.html
new file mode 100644
index 0000000000..7cba93c2bb
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-width-left-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: -0.1px; height: 10px; width: 10.5px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 19.9px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-left-5.html b/layout/reftests/pixel-rounding/rounded-background-color-width-left-5.html
new file mode 100644
index 0000000000..fe7606646f
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-width-left-5.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0px; height: 10px; width: 10.5px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/rounded-background-color-width-left-6.html b/layout/reftests/pixel-rounding/rounded-background-color-width-left-6.html
new file mode 100644
index 0000000000..c4c6462029
--- /dev/null
+++ b/layout/reftests/pixel-rounding/rounded-background-color-width-left-6.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Pixel rounding testcase</title>
+<style type="text/css">
+
+html, body { margin: 0; border: none; padding: 0; }
+
+body > div { margin: 10px; height: 80px; position: relative; }
+
+body > div > div {
+ position: absolute; top: 0; left: 0.1px; height: 10px; width: 10.5px;
+}
+
+body > div > div { background: green; }
+
+.tl { top: 20px; }
+.tr { margin-top: 40px; }
+.bl { left: 20.1px; }
+.br { margin-left: 40px; }
+
+div.one > div.tl { border-top-left-radius: 1px; }
+div.one > div.tr { border-top-right-radius: 1px; }
+div.one > div.bl { border-bottom-left-radius: 1px; }
+div.one > div.br { border-bottom-right-radius: 1px; }
+div.four > div.tl { border-top-left-radius: 4px; }
+div.four > div.tr { border-top-right-radius: 4px; }
+div.four > div.bl { border-bottom-left-radius: 4px; }
+div.four > div.br { border-bottom-right-radius: 4px; }
+
+</style>
+</head>
+<body>
+
+<div class="one">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+<div class="four">
+<div></div>
+<div class="tl"></div>
+<div class="tr"></div>
+<div class="bl"></div>
+<div class="br"></div>
+<div class="tl tr"></div>
+<div class="tl bl"></div>
+<div class="tl br"></div>
+<div class="tr bl"></div>
+<div class="tr br"></div>
+<div class="bl br"></div>
+<div class="tl tr bl"></div>
+<div class="tl tr br"></div>
+<div class="tl bl br"></div>
+<div class="tr bl br"></div>
+<div class="tl tr bl br"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/pixel-rounding/viewport-units-rounding-1-frame.html b/layout/reftests/pixel-rounding/viewport-units-rounding-1-frame.html
new file mode 100644
index 0000000000..955b873dd6
--- /dev/null
+++ b/layout/reftests/pixel-rounding/viewport-units-rounding-1-frame.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<title>subframe for test of viewport units rounding</title>
+<meta charset="UTF-8">
+<style>
+
+html, body { margin: 0; padding: 0; border: none }
+
+body > div {
+ background: red; /* should never show */
+ overflow: hidden; /* block formatting context */
+}
+
+body > div > div {
+ float: left;
+ height: 10px;
+}
+
+body > div.w25 > div { width: 25vw; }
+
+</style>
+
+<div class="w25">
+ <div style="background: fuchsia"></div>
+ <div style="background: aqua"></div>
+ <div style="background: silver"></div>
+ <div style="background: yellow"></div>
+</div>
+
+<!--
+ Really, though, anything that is a multiple of 5vw will always
+ produce a round number of appunits when starting from an integer
+ number of pixels, since 5vw is 1/20 of the viewport.
+
+ So, more interesting:
+-->
+
+<div>
+ <div style="width: 24vw; background: fuchsia"></div>
+ <div style="width: 24vw; background: aqua"></div>
+ <div style="width: 24vw; background: silver"></div>
+ <div style="width: 24vw; background: yellow"></div>
+ <div style="width: 4vw; background: gray"></div>
+</div>
+
+<div>
+ <div style="width: 21vw; background: fuchsia"></div>
+ <div style="width: 21vw; background: aqua"></div>
+ <div style="width: 21vw; background: silver"></div>
+ <div style="width: 21vw; background: yellow"></div>
+ <div style="width: 16vw; background: gray"></div>
+</div>
diff --git a/layout/reftests/pixel-rounding/viewport-units-rounding-1-ref.html b/layout/reftests/pixel-rounding/viewport-units-rounding-1-ref.html
new file mode 100644
index 0000000000..f762f004ff
--- /dev/null
+++ b/layout/reftests/pixel-rounding/viewport-units-rounding-1-ref.html
@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<title>viewport units rounding reference</title>
+<meta charset="UTF-8">
+<style>
+div.contain { height: 50px }
+div.contain > div { height: 10px }
+div.contain > div > div { height: 10px; float: left }
+</style>
+
+<div class="contain" style="width: 200px">
+ <div>
+ <div style="width: 50px; background: fuchsia"></div>
+ <div style="width: 50px; background: aqua"></div>
+ <div style="width: 50px; background: silver"></div>
+ <div style="width: 50px; background: yellow"></div>
+ </div>
+ <div>
+ <div style="width: 48px; background: fuchsia"></div>
+ <div style="width: 48px; background: aqua"></div>
+ <div style="width: 48px; background: silver"></div>
+ <div style="width: 48px; background: yellow"></div>
+ <div style="width: 8px; background: gray"></div>
+ </div>
+ <div>
+ <div style="width: 42px; background: fuchsia"></div>
+ <div style="width: 42px; background: aqua"></div>
+ <div style="width: 42px; background: silver"></div>
+ <div style="width: 42px; background: yellow"></div>
+ <div style="width: 32px; background: gray"></div>
+ </div>
+</div>
+
+<div class="contain" style="width: 201px">
+ <div>
+ <div style="width: 50px; background: fuchsia"></div>
+ <div style="width: 51px; background: aqua"></div>
+ <div style="width: 50px; background: silver"></div>
+ <div style="width: 50px; background: yellow"></div>
+ </div>
+ <div>
+ <div style="width: 48px; background: fuchsia"></div>
+ <div style="width: 48px; background: aqua"></div>
+ <div style="width: 49px; background: silver"></div>
+ <div style="width: 48px; background: yellow"></div>
+ <div style="width: 8px; background: gray"></div>
+ </div>
+ <div>
+ <div style="width: 42px; background: fuchsia"></div>
+ <div style="width: 42px; background: aqua"></div>
+ <div style="width: 43px; background: silver"></div>
+ <div style="width: 42px; background: yellow"></div>
+ <div style="width: 32px; background: gray"></div>
+ </div>
+</div>
+
+<div class="contain" style="width: 202px">
+ <div>
+ <div style="width: 51px; background: fuchsia"></div>
+ <div style="width: 50px; background: aqua"></div>
+ <div style="width: 51px; background: silver"></div>
+ <div style="width: 50px; background: yellow"></div>
+ </div>
+ <div>
+ <div style="width: 48px; background: fuchsia"></div>
+ <div style="width: 49px; background: aqua"></div>
+ <div style="width: 48px; background: silver"></div>
+ <div style="width: 49px; background: yellow"></div>
+ <div style="width: 8px; background: gray"></div>
+ </div>
+ <div>
+ <div style="width: 42px; background: fuchsia"></div>
+ <div style="width: 43px; background: aqua"></div>
+ <div style="width: 42px; background: silver"></div>
+ <div style="width: 43px; background: yellow"></div>
+ <div style="width: 32px; background: gray"></div>
+ </div>
+</div>
+
+<div class="contain" style="width: 203px">
+ <div>
+ <div style="width: 51px; background: fuchsia"></div>
+ <div style="width: 51px; background: aqua"></div>
+ <div style="width: 50px; background: silver"></div>
+ <div style="width: 51px; background: yellow"></div>
+ </div>
+ <div>
+ <div style="width: 49px; background: fuchsia"></div>
+ <div style="width: 48px; background: aqua"></div>
+ <div style="width: 49px; background: silver"></div>
+ <div style="width: 49px; background: yellow"></div>
+ <div style="width: 8px; background: gray"></div>
+ </div>
+ <div>
+ <div style="width: 43px; background: fuchsia"></div>
+ <div style="width: 42px; background: aqua"></div>
+ <div style="width: 43px; background: silver"></div>
+ <div style="width: 42px; background: yellow"></div>
+ <div style="width: 33px; background: gray"></div>
+ </div>
+</div>
+
+<div class="contain" style="width: 204px">
+ <div>
+ <div style="width: 51px; background: fuchsia"></div>
+ <div style="width: 51px; background: aqua"></div>
+ <div style="width: 51px; background: silver"></div>
+ <div style="width: 51px; background: yellow"></div>
+ </div>
+ <div>
+ <div style="width: 49px; background: fuchsia"></div>
+ <div style="width: 49px; background: aqua"></div>
+ <div style="width: 49px; background: silver"></div>
+ <div style="width: 49px; background: yellow"></div>
+ <div style="width: 8px; background: gray"></div>
+ </div>
+ <div>
+ <div style="width: 43px; background: fuchsia"></div>
+ <div style="width: 43px; background: aqua"></div>
+ <div style="width: 43px; background: silver"></div>
+ <div style="width: 42px; background: yellow"></div>
+ <div style="width: 33px; background: gray"></div>
+ </div>
+</div>
diff --git a/layout/reftests/pixel-rounding/viewport-units-rounding-1.html b/layout/reftests/pixel-rounding/viewport-units-rounding-1.html
new file mode 100644
index 0000000000..a311545467
--- /dev/null
+++ b/layout/reftests/pixel-rounding/viewport-units-rounding-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>viewport units rounding</title>
+<meta charset="UTF-8">
+<style>
+iframe { display: block; border: 0; margin: 0; padding: 0; }
+</style>
+
+<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="200" height="50" ></iframe>
+<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="201" height="50" ></iframe>
+<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="202" height="50" ></iframe>
+<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="203" height="50" ></iframe>
+<iframe scrolling="no" src="viewport-units-rounding-1-frame.html" width="204" height="50" ></iframe>
diff --git a/layout/reftests/pixel-rounding/viewport-units-rounding-2.html b/layout/reftests/pixel-rounding/viewport-units-rounding-2.html
new file mode 100644
index 0000000000..f92009fd6e
--- /dev/null
+++ b/layout/reftests/pixel-rounding/viewport-units-rounding-2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<title>viewport units rounding test</title>
+<meta charset="UTF-8">
+<style>
+
+body > div > div { line-height: 1px }
+span {
+ display: inline-block;
+ height: 1px;
+ width: var(--w);
+ vertical-align: bottom;
+}
+span:nth-child(1) {
+ background: red;
+}
+span:nth-child(2) {
+ background: white;
+ margin-left: var(--negw);
+}
+
+</style>
+<body>
+<script>
+
+for (var p = 0; p < 20; ++p) {
+ var position = ((20 * p) + (p / 50)) + "px";
+ var container = document.createElement("div");
+ container.style.position = "absolute";
+ container.style.top = "0px";
+ container.style.left = position;
+ for (var w = 0; w < 99; ++w) {
+ var width = (0.5 + w / 100) + "vw";
+ var div = document.createElement("div");
+ div.setAttribute("style", "--w: " + width + "; " +
+ "--negw: -" + width);
+ div.appendChild(document.createElement("span"));
+ div.appendChild(document.createElement("span"));
+ container.appendChild(div);
+ }
+ document.body.appendChild(container);
+}
+
+</script>