Adding upstream version 86.0.1.upstream/86.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-28 14:29:10 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-28 14:29:10 +0000
commit: 2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
tree: b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/box
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
211 files changed, 8998 insertions, 0 deletions
diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml
new file mode 100644
index 0000000000..a7f0408f37
--- /dev/null
+++ b/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!DOCTYPE window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()">
+  <script type="application/javascript"><![CDATA[
+
+  function run() {
+    var c = document.getElementById("C");
+    getComputedStyle(c, "").width; // flush
+    c.style.MozBoxOrdinalGroup = "2";
+    document.documentElement.removeAttribute("class");
+  }
+
+  ]]></script>
+  <label id="A" value="A" />
+  <label id="C" value="C" />
+  <label id="B" value="B" />
+</window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml
new file mode 100644
index 0000000000..6ef73bc272
--- /dev/null
+++ b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!DOCTYPE window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()">
+  <script type="application/javascript"><![CDATA[
+
+  function run() {
+    var c = document.getElementById("C");
+    getComputedStyle(c, "").width; // flush
+    c.style.MozBoxOrdinalGroup = "2";
+    document.documentElement.removeAttribute("class");
+  }
+
+  ]]></script>
+  <label id="B" value="B" style="-moz-box-ordinal-group: 2" />
+  <label id="C" value="C" />
+  <label id="A" value="A" />
+</window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml
new file mode 100644
index 0000000000..3c04293df8
--- /dev/null
+++ b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!DOCTYPE window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()">
+  <script type="application/javascript"><![CDATA[
+
+  function run() {
+    var b = document.getElementById("B");
+    getComputedStyle(b, "").width; // flush
+    b.style.MozBoxOrdinalGroup = "2";
+    document.documentElement.removeAttribute("class");
+  }
+
+  ]]></script>
+  <label id="B" value="B" />
+  <label id="C" value="C" style="-moz-box-ordinal-group: 2" />
+  <label id="A" value="A" />
+</window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-ref.xhtml b/layout/reftests/box-ordinal/dynamic-1-ref.xhtml
new file mode 100644
index 0000000000..66052d38dd
--- /dev/null
+++ b/layout/reftests/box-ordinal/dynamic-1-ref.xhtml
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<!DOCTYPE window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <label id="A" value="A" />
+  <label id="B" value="B" />
+  <label id="C" value="C" />
+</window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml
new file mode 100644
index 0000000000..d3c444291d
--- /dev/null
+++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!DOCTYPE window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()">
+  <script type="application/javascript"><![CDATA[
+
+  function run() {
+    var b = document.getElementById("B");
+    getComputedStyle(b, "").width; // flush
+    b.style.MozBoxOrdinalGroup = "";
+    document.documentElement.removeAttribute("class");
+  }
+
+  ]]></script>
+  <label id="A" value="A" />
+  <label id="B" value="B" style="-moz-box-ordinal-group: 2" />
+  <label id="C" value="C" />
+</window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml
new file mode 100644
index 0000000000..f2f2857342
--- /dev/null
+++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!DOCTYPE window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()">
+  <script type="application/javascript"><![CDATA[
+
+  function run() {
+    var b = document.getElementById("B");
+    getComputedStyle(b, "").width; // flush
+    b.style.MozBoxOrdinalGroup = "";
+    document.documentElement.removeAttribute("class");
+  }
+
+  ]]></script>
+  <label id="C" value="C" style="-moz-box-ordinal-group: 2" />
+  <label id="A" value="A" />
+  <label id="B" value="B" style="-moz-box-ordinal-group: 2" />
+</window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml
new file mode 100644
index 0000000000..1fb09c05be
--- /dev/null
+++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!DOCTYPE window>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait" onload="run()">
+  <script type="application/javascript"><![CDATA[
+
+  function run() {
+    var a = document.getElementById("A");
+    getComputedStyle(a, "").width; // flush
+    a.style.MozBoxOrdinalGroup = "";
+    document.documentElement.removeAttribute("class");
+  }
+
+  ]]></script>
+  <label id="C" value="C" style="-moz-box-ordinal-group: 2" />
+  <label id="A" value="A" style="-moz-box-ordinal-group: 2" />
+  <label id="B" value="B" />
+</window>
diff --git a/layout/reftests/box-ordinal/reftest.list b/layout/reftests/box-ordinal/reftest.list
new file mode 100644
index 0000000000..70f675571f
--- /dev/null
+++ b/layout/reftests/box-ordinal/reftest.list
@@ -0,0 +1,6 @@
+== chrome://reftest/content/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml
+== chrome://reftest/content/box-ordinal/dynamic-1-add-to-one-grouped.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml
+== chrome://reftest/content/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml
+== chrome://reftest/content/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml
+== chrome://reftest/content/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml
+== chrome://reftest/content/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml chrome://reftest/content/box-ordinal/dynamic-1-ref.xhtml
diff --git a/layout/reftests/box-properties/CSS21-t100301-ref.xhtml b/layout/reftests/box-properties/CSS21-t100301-ref.xhtml
new file mode 100644
index 0000000000..18d1c21816
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100301-ref.xhtml
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1 Test Suite: Inline, non-replaced elements (reference)</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-width" />
+		<meta name="flags" content="ahem" />
+		<style type="text/css"><![CDATA[
+
+		html { background: white; }
+
+		body {
+			width: 100px; height: 100px;
+			border: 10px solid lime; background: green;
+		}
+
+
+		]]></style>
+	</head>
+	<body>
+	</body>
+</html>
diff --git a/layout/reftests/box-properties/CSS21-t100301.xhtml b/layout/reftests/box-properties/CSS21-t100301.xhtml
new file mode 100644
index 0000000000..e9d61cac85
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100301.xhtml
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1 Test Suite: Inline, non-replaced elements</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-width" />
+		<meta name="flags" content="ahem" />
+		<style type="text/css"><![CDATA[
+
+		@font-face {
+			src: url(../fonts/Ahem.ttf);
+ 			font-family: Ahem;
+        }
+
+		html { background: white; }
+
+		body {
+			width: 100px; height: 100px;
+			border: 10px solid lime; background: red;
+            font: 20px/1 Ahem;
+		}
+
+		span { background: red; color: green; }
+
+		.X::before, .space::before { background:green; color:transparent; }
+		.X::before { content:"X"; }
+		.space::before { content:" "; }
+
+		]]></style>
+	</head>
+	<body>
+
+	<!-- First row -->
+	<!-- The width property does not apply -->
+	<!-- check padding-left and border-right too -->
+	<span style="width: 1px"><span class="X"></span></span
+	><span style="width: 200px"><span class="X"></span></span
+	><span style="width: 10px; padding-left: 10px;background:green"><span class="X"></span></span
+	><span style="border-right: 10px solid green; width: 40px"><span class="X"></span></span>
+
+	<!-- Second row -->
+	<!-- auto values for margin-left and margin-right are zero -->
+	<span style="background:green"
+		><span style="margin-right: auto"><span class="X"></span></span
+		><span style="margin-left: 5px"><span class="X"></span></span
+		><span style="margin-left:auto;background:green"><span class="space"></span></span
+		><span style="margin-right: 15px"><span class="X"></span></span
+	></span>
+
+	<!-- Third row -->
+	<!-- auto values for left and right are 0, and other values don't
+	     do anything either, unless we have position:relative -->
+	<span style="left: auto"><span class="X"></span></span
+	><span style="left:8px"><span class="X"></span></span
+	><span style="right:73px"><span class="X"></span></span
+	><span style="right:auto"><span class="X"></span></span
+	><span style="background:transparent;color:red"><span class="X"></span><span style="position:relative;right:20px"><span class="X"></span></span></span>
+
+	<!-- Fourth row -->
+	<!-- toss in some negative and adjacent margins -->
+	<span style="margin-right: -5px;color:red;background:red"><span class="X"></span></span
+	><span style="margin-left: -15px"><span class="X"></span></span
+	><span style="background:green"
+		><span style="margin-right:25px"><span class="X"></span></span
+		><span style="margin-left: 15px"><span class="X"></span></span
+	></span>
+
+	<!-- Fifth row -->
+	<!-- border and padding and margin -->
+	<span style="margin-left:15px; margin-right:348px"
+		><span style="background: green; margin-left:-15px; border-left: 15px solid; padding-left: 25px;padding-right: 8px;border-right:32px solid;"><span class="X"></span></span
+	></span>
+
+	</body>
+</html>
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-170px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-170px.png
new file mode 100644
index 0000000000..fdb4869786
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-in-170px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-334px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-334px.png
new file mode 100644
index 0000000000..d4809b3648
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-in-334px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-340px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-340px.png
new file mode 100644
index 0000000000..300a54fa14
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-in-340px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-344px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-344px.png
new file mode 100644
index 0000000000..5eec683712
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-in-344px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-350px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-350px.png
new file mode 100644
index 0000000000..6e1a1021fa
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-in-350px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-in-458px.png b/layout/reftests/box-properties/CSS21-t100303-green-in-458px.png
new file mode 100644
index 0000000000..6cb5c22547
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-in-458px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-170px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-170px.png
new file mode 100644
index 0000000000..f52d6def06
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-170px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-334px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-334px.png
new file mode 100644
index 0000000000..8aae25ca25
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-334px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-340px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-340px.png
new file mode 100644
index 0000000000..613bfe782e
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-340px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-344px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-344px.png
new file mode 100644
index 0000000000..434ef98fa5
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-344px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-350px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-350px.png
new file mode 100644
index 0000000000..dd98e59448
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-350px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-green-outside-458px.png b/layout/reftests/box-properties/CSS21-t100303-green-outside-458px.png
new file mode 100644
index 0000000000..f3dc66a6ef
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-green-outside-458px.png
diff --git a/layout/reftests/box-properties/CSS21-t100303-make-images.html b/layout/reftests/box-properties/CSS21-t100303-make-images.html
new file mode 100644
index 0000000000..c397e26af1
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-make-images.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title></title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Script-Type" content="text/javascript">
+	<script type="text/javascript">
+
+	var gWidth = 1024;
+	var gHeight = 1;
+	var gBarriers = [ 170, 334, 340, 344, 350, 458 ];
+
+	var gColors = [ "green", "red" ];
+
+	function append_url(filename, contents_url) {
+	    var p = document.createElement("p");
+	    var a = document.createElement("a");
+	    a.href = contents_url;
+	    var t = document.createTextNode("CSS21-t100303-" + filename);
+	    a.appendChild(t);
+	    p.appendChild(a);
+	    document.body.appendChild(p);
+	}
+
+	function run() {
+	    var canvas = document.getElementById("canvas");
+	    var cx = canvas.getContext("2d");
+	    for (var i in gBarriers) {
+	        var barrier = gBarriers[i];
+
+	        cx.fillStyle = gColors[1];
+	        cx.fillRect(0, 0, gWidth, gHeight);
+	        cx.fillStyle = gColors[0];
+	        cx.fillRect(0, 0, barrier, gHeight);
+	        append_url(gColors[0] + "-in-" + barrier + "px.png",
+	                   canvas.toDataURL("image/png"));
+
+	        cx.fillStyle = gColors[0];
+	        cx.fillRect(0, 0, gWidth, gHeight);
+	        cx.fillStyle = gColors[1];
+	        cx.fillRect(0, 0, barrier, gHeight);
+	        append_url(gColors[0] + "-outside-" + barrier + "px.png",
+	                   canvas.toDataURL("image/png"));
+	    }
+	}
+
+	</script>
+</head>
+<body onload="run()">
+
+<canvas width="1024" height="1" id="canvas"></canvas>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/CSS21-t100303-ref.xhtml b/layout/reftests/box-properties/CSS21-t100303-ref.xhtml
new file mode 100644
index 0000000000..aff2b921eb
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-ref.xhtml
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
+		<meta name="flags" content="" />
+		<style type="text/css"><![CDATA[
+
+		body { direction: ltr; }
+
+		body > div {
+			margin-left: 3px;
+			width: 669px;
+			height: 96px;
+			background: green;
+		}
+		]]></style>
+	</head>
+	<body>
+
+		<div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/box-properties/CSS21-t100303-simple.xhtml b/layout/reftests/box-properties/CSS21-t100303-simple.xhtml
new file mode 100644
index 0000000000..94afe061aa
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303-simple.xhtml
@@ -0,0 +1,202 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title>
+		<!--
+
+		    THIS IS NOT THE FULL TEST.  IT HAS BEEN MODIFIED TO WORK
+		    AROUND THE FOLLOWING BUG:
+		    https://bugzilla.mozilla.org/show_bug.cgi?id=423306
+		    BY MAKING THE INTERMEDIATE ELEMENT NOT HAVE CHANGING 'direction'
+
+		  -->
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
+		<meta name="flags" content="" />
+		<style type="text/css"><![CDATA[
+
+		body { direction: ltr; }
+		div { height: 1px; }
+
+		/* containing block */
+		body > div {
+			margin: 0 17px 0 3px;
+			border: medium solid transparent;
+			border-width: 0 154px 0 157px;
+			padding: 0 6px 0 2px;
+			width: 350px;
+		}
+		/* parent that is not containing block */
+		/* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */
+		/* body > div > div { display: inline; } */
+		/* test element */
+		body > div > div > div {
+			margin: 0 10px 0 6px;
+			border: medium solid transparent;
+			border-width: 0 12px 0 5px;
+			padding: 0 17px 0 9px;
+		}
+
+		/* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */
+		body > div, /* body > div > div, */ body > div > div > div { direction: ltr; }
+		body > div.trtl > div > div { direction: rtl; }
+		/* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */
+		/* body > div.prtl > div { direction: rtl; } */
+		body > div.cbrtl { direction: rtl; }
+		body > div.mlauto > div > div { margin-left: auto; }
+		body > div.mrauto > div > div { margin-right: auto; }
+
+		body > div.wauto > div > div { width: auto; }
+		body > div.wnarrow > div > div { width: 127px; }
+		body > div.wwide > div > div { width: 415px; }
+
+		/*
+		 * make a background on the containing block that is red
+		 * everywhere except where the test should draw its background
+		 */
+		body > div.wnarrow { background-image: url(CSS21-t100303-green-outside-170px.png); }
+		body > div.wwide { background-image: url(CSS21-t100303-green-outside-458px.png); }
+		body > div.wauto { background-image: url(CSS21-t100303-green-outside-334px.png); }
+		body > div.wauto.mlauto { background-image: url(CSS21-t100303-green-outside-340px.png); }
+		body > div.wauto.mrauto { background-image: url(CSS21-t100303-green-outside-344px.png); }
+		body > div.wauto.mlauto.mrauto { background-image: url(CSS21-t100303-green-outside-350px.png); }
+
+		/*
+		 * The only results in the markup rather than using selectors
+		 * are whether the div ends up aligned to the left edge (atl),
+		 * the right edge (atr), or centered (atc).  Things with auto
+		 * widths always count as atl, to make the style rules simpler
+		 * (though they abut both edges).
+		 */
+		body > div.atl { background-position: 8px 0; }
+		body > div.atl.mlauto { background-position: 2px 0; }
+
+		body > div.atr.wnarrow { background-position: 172px 0; }
+		body > div.atr.wnarrow.mrauto { background-position: 182px 0; }
+		body > div.atr.wwide { background-position: -116px 0; }
+		body > div.atr.wwide.mrauto { background-position: -106px 0; }
+
+		/* Can only be atc when mlauto and mrauto and wnarrow. */
+		body > div.atc.wnarrow { background-position: 92px 0; }
+
+		/*
+		 * make a background on the test div that is green only within
+		 * its desired width and red elsewhere
+		 */
+		body > div.wnarrow > div > div { background-image: url(CSS21-t100303-green-in-170px.png); }
+		body > div.wwide > div > div { background-image: url(CSS21-t100303-green-in-458px.png); }
+		body > div.wauto > div > div { background-image: url(CSS21-t100303-green-in-334px.png); }
+		body > div.wauto.mlauto > div > div { background-image: url(CSS21-t100303-green-in-340px.png); }
+		body > div.wauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-344px.png); }
+		body > div.wauto.mlauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-350px.png); }
+		/* move position to border-edge */
+		body > div > div > div { background-position: -5px 0; }
+
+		/* for debugging */
+		/* body > div { background: transparent ! important; } */
+		/* body > div > div > div { background: orange ! important; } */
+
+		]]></style>
+	</head>
+	<body>
+
+		<div class="atl wauto"><div><div></div></div></div>
+		<div class="atl wauto trtl"><div><div></div></div></div>
+		<div class="atl wauto prtl"><div><div></div></div></div>
+		<div class="atl wauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto cbrtl"><div><div></div></div></div>
+		<div class="atl wauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto"><div><div></div></div></div>
+		<div class="atl wauto mlauto trtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto prtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto cbrtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto"><div><div></div></div></div>
+		<div class="atl wauto mrauto trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto prtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto cbrtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto prtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto cbrtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wnarrow"><div><div></div></div></div>
+		<div class="atl wnarrow trtl"><div><div></div></div></div>
+		<div class="atl wnarrow prtl"><div><div></div></div></div>
+		<div class="atl wnarrow prtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow cbrtl"><div><div></div></div></div>
+		<div class="atr wnarrow cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wnarrow cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto trtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto prtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto cbrtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto trtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto prtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto cbrtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto trtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto prtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto cbrtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wwide"><div><div></div></div></div>
+		<div class="atl wwide trtl"><div><div></div></div></div>
+		<div class="atl wwide prtl"><div><div></div></div></div>
+		<div class="atl wwide prtl trtl"><div><div></div></div></div>
+		<div class="atr wwide cbrtl"><div><div></div></div></div>
+		<div class="atr wwide cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wwide cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wwide cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wwide mlauto"><div><div></div></div></div>
+		<div class="atl wwide mlauto trtl"><div><div></div></div></div>
+		<div class="atl wwide mlauto prtl"><div><div></div></div></div>
+		<div class="atl wwide mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mlauto cbrtl"><div><div></div></div></div>
+		<div class="atr wwide mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wwide mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto"><div><div></div></div></div>
+		<div class="atl wwide mrauto trtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto prtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto prtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto cbrtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto mlauto"><div><div></div></div></div>
+		<div class="atl wwide mrauto mlauto trtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto mlauto prtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto mlauto cbrtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/box-properties/CSS21-t100303.xhtml b/layout/reftests/box-properties/CSS21-t100303.xhtml
new file mode 100644
index 0000000000..463dd7ced5
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100303.xhtml
@@ -0,0 +1,191 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
+		<meta name="flags" content="" />
+		<style type="text/css"><![CDATA[
+
+		body { direction: ltr; }
+		div { height: 1px; }
+
+		/* containing block */
+		body > div {
+			margin: 0 17px 0 3px;
+			border: medium solid transparent;
+			border-width: 0 154px 0 157px;
+			padding: 0 6px 0 2px;
+			width: 350px;
+		}
+		/* parent that is not containing block */
+		body > div > div { display: inline; }
+		/* test element */
+		body > div > div > div {
+			margin: 0 10px 0 6px;
+			border: medium solid transparent;
+			border-width: 0 12px 0 5px;
+			padding: 0 17px 0 9px;
+		}
+
+		body > div, body > div > div, body > div > div > div { direction: ltr; }
+		body > div.trtl > div > div { direction: rtl; }
+		body > div.prtl > div { direction: rtl; }
+		body > div.cbrtl { direction: rtl; }
+		body > div.mlauto > div > div { margin-left: auto; }
+		body > div.mrauto > div > div { margin-right: auto; }
+
+		body > div.wauto > div > div { width: auto; }
+		body > div.wnarrow > div > div { width: 127px; }
+		body > div.wwide > div > div { width: 415px; }
+
+		/*
+		 * make a background on the containing block that is red
+		 * everywhere except where the test should draw its background
+		 */
+		body > div.wnarrow { background-image: url(CSS21-t100303-green-outside-170px.png); }
+		body > div.wwide { background-image: url(CSS21-t100303-green-outside-458px.png); }
+		body > div.wauto { background-image: url(CSS21-t100303-green-outside-334px.png); }
+		body > div.wauto.mlauto { background-image: url(CSS21-t100303-green-outside-340px.png); }
+		body > div.wauto.mrauto { background-image: url(CSS21-t100303-green-outside-344px.png); }
+		body > div.wauto.mlauto.mrauto { background-image: url(CSS21-t100303-green-outside-350px.png); }
+
+		/*
+		 * The only results in the markup rather than using selectors
+		 * are whether the div ends up aligned to the left edge (atl),
+		 * the right edge (atr), or centered (atc).  Things with auto
+		 * widths always count as atl, to make the style rules simpler
+		 * (though they abut both edges).
+		 */
+		body > div.atl { background-position: 8px 0; }
+		body > div.atl.mlauto { background-position: 2px 0; }
+
+		body > div.atr.wnarrow { background-position: 172px 0; }
+		body > div.atr.wnarrow.mrauto { background-position: 182px 0; }
+		body > div.atr.wwide { background-position: -116px 0; }
+		body > div.atr.wwide.mrauto { background-position: -106px 0; }
+
+		/* Can only be atc when mlauto and mrauto and wnarrow. */
+		body > div.atc.wnarrow { background-position: 92px 0; }
+
+		/*
+		 * make a background on the test div that is green only within
+		 * its desired width and red elsewhere
+		 */
+		body > div.wnarrow > div > div { background-image: url(CSS21-t100303-green-in-170px.png); }
+		body > div.wwide > div > div { background-image: url(CSS21-t100303-green-in-458px.png); }
+		body > div.wauto > div > div { background-image: url(CSS21-t100303-green-in-334px.png); }
+		body > div.wauto.mlauto > div > div { background-image: url(CSS21-t100303-green-in-340px.png); }
+		body > div.wauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-344px.png); }
+		body > div.wauto.mlauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-350px.png); }
+		/* move position to border-edge */
+		body > div > div > div { background-position: -5px 0; }
+
+		/* for debugging */
+		/* body > div { background: transparent ! important; } */
+		/* body > div > div > div { background: orange ! important; } */
+
+		]]></style>
+	</head>
+	<body>
+
+		<div class="atl wauto"><div><div></div></div></div>
+		<div class="atl wauto trtl"><div><div></div></div></div>
+		<div class="atl wauto prtl"><div><div></div></div></div>
+		<div class="atl wauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto cbrtl"><div><div></div></div></div>
+		<div class="atl wauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto"><div><div></div></div></div>
+		<div class="atl wauto mlauto trtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto prtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto cbrtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto"><div><div></div></div></div>
+		<div class="atl wauto mrauto trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto prtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto cbrtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto prtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto cbrtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wauto mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wnarrow"><div><div></div></div></div>
+		<div class="atl wnarrow trtl"><div><div></div></div></div>
+		<div class="atl wnarrow prtl"><div><div></div></div></div>
+		<div class="atl wnarrow prtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow cbrtl"><div><div></div></div></div>
+		<div class="atr wnarrow cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wnarrow cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto trtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto prtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto cbrtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wnarrow mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto trtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto prtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto prtl trtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto cbrtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atl wnarrow mrauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto trtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto prtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto cbrtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atc wnarrow mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wwide"><div><div></div></div></div>
+		<div class="atl wwide trtl"><div><div></div></div></div>
+		<div class="atl wwide prtl"><div><div></div></div></div>
+		<div class="atl wwide prtl trtl"><div><div></div></div></div>
+		<div class="atr wwide cbrtl"><div><div></div></div></div>
+		<div class="atr wwide cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wwide cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wwide cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wwide mlauto"><div><div></div></div></div>
+		<div class="atl wwide mlauto trtl"><div><div></div></div></div>
+		<div class="atl wwide mlauto prtl"><div><div></div></div></div>
+		<div class="atl wwide mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mlauto cbrtl"><div><div></div></div></div>
+		<div class="atr wwide mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wwide mlauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto"><div><div></div></div></div>
+		<div class="atl wwide mrauto trtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto prtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto prtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto cbrtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto cbrtl prtl trtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto mlauto"><div><div></div></div></div>
+		<div class="atl wwide mrauto mlauto trtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto mlauto prtl"><div><div></div></div></div>
+		<div class="atl wwide mrauto mlauto prtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto mlauto cbrtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto mlauto cbrtl trtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto mlauto cbrtl prtl"><div><div></div></div></div>
+		<div class="atr wwide mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/box-properties/CSS21-t100801-vertical-align-ref.xhtml b/layout/reftests/box-properties/CSS21-t100801-vertical-align-ref.xhtml
new file mode 100644
index 0000000000..8e11729e0f
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100801-vertical-align-ref.xhtml
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1 Test Suite: vertical-align (on an inline-block) (reference)</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
+		<meta name="flags" content="" />
+		<meta http-equiv="Content-Style-Type" content="text/css" />
+		<style type="text/css"><![CDATA[
+
+		body { width: 500px; height: 500px; margin: 0; position: relative; }
+		body > div {
+			position: absolute;
+			height: 50px; width: 40px;
+			top: 100px; left: 0;
+			background: green;
+		}
+
+		]]></style>
+	</head>
+	<body>
+
+<div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml b/layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml
new file mode 100644
index 0000000000..34ee8c7884
--- /dev/null
+++ b/layout/reftests/box-properties/CSS21-t100801-vertical-align.xhtml
@@ -0,0 +1,247 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1 Test Suite: vertical-align (on an inline-block)</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
+		<meta name="flags" content="" />
+		<meta http-equiv="Content-Style-Type" content="text/css" />
+		<style type="text/css"><![CDATA[
+
+		body { width: 500px; height: 500px; margin: 0; position: relative; }
+		body > div { position: absolute; width: 500px; }
+
+		b { display:inline-block; height: 50px; width: 1px; background:green; }
+
+		]]></style>
+	</head>
+	<body>
+
+<!--
+
+  The basic structure of this test is that each passing item will create
+  a box 1 pixel wide and 50px tall (stretching from 100px to 150px from
+  the top of the page).  Together these items will line up to form a
+  rectangle.
+
+  This test only tests the 'top', 'bottom', 'text-top', 'text-bottom',
+  'baseline', <length>, and <percentage> values of 'vertical-align'.  It
+  does not test 'sub', 'super', or 'middle', and it does not test
+  anything relative to actual font metrics.
+
+  -->
+
+<!-- vertical-align: top -->
+
+<div style="top: 100px; left: 0;">
+  <b style="vertical-align:top"></b>
+</div>
+
+<div style="top: 100px; left: 1px;">
+  <b style="vertical-align:top"></b>
+  <span style="visibility:hidden; font-size: 10px;">text</span>
+</div>
+
+<div style="top: 100px; left: 2px;">
+  <b style="vertical-align:top"></b>
+  <span style="visibility:hidden; font-size: 100px;">text</span>
+</div>
+
+<div style="top: 100px; right: 496px; text-align: right;">
+  <span style="visibility:hidden; font-size: 10px;">text</span>
+  <b style="vertical-align:top"></b>
+</div>
+
+<div style="top: 100px; right: 495px; text-align: right;">
+  <span style="visibility:hidden; font-size: 100px;">text</span>
+  <b style="vertical-align:top"></b>
+</div>
+
+<!-- Test behavior of the rest of the line when there's a single loose
+	 subtree with vertical-align: top.  This isn't required by the spec, but
+	 test it anyway. -->
+
+<div style="top: 100px; left: 5px;">
+  <b style="vertical-align:baseline"></b>
+  <span style="visibility:hidden; vertical-align: top; font-size: 100px;">text</span>
+</div>
+
+<div style="top: 100px; left: 6px;">
+  <b style="vertical-align:baseline"></b>
+  <span style="visibility:hidden; vertical-align: top; font-size: 10px;">text</span>
+</div>
+
+<div style="top: 100px; right: 492px; text-align: right;">
+  <span style="visibility:hidden; vertical-align: top; font-size: 100px;">text</span>
+  <b style="vertical-align:baseline"></b>
+</div>
+
+<div style="top: 100px; right: 491px; text-align: right;">
+  <span style="visibility:hidden; vertical-align: top; font-size: 10px;">text</span>
+  <b style="vertical-align:baseline"></b>
+</div>
+
+<!-- Test that we align the loose subtree, not just the box (118501) -->
+
+<div style="top: 100px; left: 9px;">
+  <span style="font-size: 10px; vertical-align: top"><b></b></span>
+</div>
+
+<div style="top: 100px; left: 10px;">
+  <span style="font-size: 100px; vertical-align: top; line-height: 0;"><b style="vertical-align:text-top"></b></span>
+</div>
+
+<!-- vertical-align: bottom -->
+
+<div style="bottom: 350px; left: 11px;">
+  <b style="vertical-align:bottom"></b>
+</div>
+
+<div style="bottom: 350px; left: 12px;">
+  <b style="vertical-align:bottom"></b>
+  <span style="visibility:hidden; font-size: 10px;">text</span>
+</div>
+
+<div style="bottom: 350px; left: 13px;">
+  <b style="vertical-align:bottom"></b>
+  <span style="visibility:hidden; font-size: 100px;">text</span>
+</div>
+
+<div style="bottom: 350px; right: 485px; text-align: right;">
+  <span style="visibility:hidden; font-size: 10px;">text</span>
+  <b style="vertical-align:bottom"></b>
+</div>
+
+<div style="bottom: 350px; right: 484px; text-align: right;">
+  <span style="visibility:hidden; font-size: 100px;">text</span>
+  <b style="vertical-align:bottom"></b>
+</div>
+
+<!-- Test behavior of the rest of the line when there's a single loose
+	 subtree with vertical-align: bottom.  This isn't required by the spec, but
+	 test it anyway. -->
+
+<div style="bottom: 350px; left: 16px;">
+  <b style="vertical-align:text-top"></b>
+  <span style="visibility:hidden; vertical-align: bottom; font-size: 100px;">text</span>
+</div>
+
+<div style="bottom: 350px; left: 17px;">
+  <b style="vertical-align:text-top"></b>
+  <span style="visibility:hidden; vertical-align: bottom; font-size: 10px;">text</span>
+</div>
+
+<div style="bottom: 350px; right: 481px; text-align: right;">
+  <span style="visibility:hidden; vertical-align: bottom; font-size: 100px;">text</span>
+  <b style="vertical-align:text-top"></b>
+</div>
+
+<div style="bottom: 350px; right: 480px; text-align: right;">
+  <span style="visibility:hidden; vertical-align: bottom; font-size: 10px;">text</span>
+  <b style="vertical-align:text-top"></b>
+</div>
+
+<!-- Test that we align the loose subtree, not just the box (118501) -->
+
+<div style="bottom: 350px; left: 20px;">
+  <span style="font-size: 10px; vertical-align: bottom"><b style="vertical-align:text-top"></b></span>
+</div>
+
+<div style="bottom: 350px; left: 21px;">
+  <span style="font-size: 100px; vertical-align: bottom; line-height: 0;"><b style="vertical-align:text-bottom"></b></span>
+</div>
+
+<!-- test top and bottom nested within other things -->
+
+<div style="top: 100px; left: 22px;">
+  <span style="font-size: 100px; vertical-align: text-top">
+    <span style="font-size: 10px; vertical-align: text-bottom">
+      <b style="vertical-align:top"></b>
+    </span>
+  </span>
+</div>
+
+<div style="bottom: 350px; left: 23px;">
+  <span style="font-size: 100px; vertical-align: text-bottom">
+    <span style="font-size: 10px; vertical-align: text-top">
+      <b style="vertical-align:bottom"></b>
+    </span>
+  </span>
+</div>
+
+<!-- test top and bottom within the same box -->
+
+<div style="top: 100px; left: 24px;">
+  <b style="vertical-align:top"></b
+  ><b style="vertical-align:bottom"></b>
+</div>
+
+<div style="bottom: 350px; left: 26px; font-size: 10px">
+  <b style="vertical-align:bottom"></b
+  ><b style="vertical-align:top"></b
+  ><b style="vertical-align: -10px"></b>
+</div>
+
+<div style="top: 100px; left: 29px; font-size: 10px">
+  <b style="vertical-align: -10px"></b
+  ><b style="vertical-align:top"></b
+  ><b style="vertical-align:bottom"></b>
+</div>
+
+<!-- test vertical-align: length -->
+
+<div style="top: 100px; left: 32px; font-size: 10px">
+  <b style="vertical-align: baseline; height: 40px"></b
+  ><b style="vertical-align: 20px; height: 20px"></b
+  ><b style="vertical-align: -10px; height: 10px; margin-left: -2px"></b
+  ><b style="vertical-align: -10px; height: 30px"></b>
+</div>
+
+<!-- test vertical-align: percentage -->
+
+<div style="top: 100px; left: 34px; font-size: 10px; line-height: 10px;">
+  <b style="vertical-align: baseline; height: 40px"></b
+  ><b style="vertical-align: 200%; height: 20px"></b
+  ><b style="vertical-align: -25%; height: 10px; margin-left: -2px; line-height: 40px;"></b
+  ><b style="vertical-align: -100%; height: 30px;line-height:10px"></b>
+</div>
+
+<!-- test vertical-align: text-top -->
+
+<div style="top: 100px; left: 36px; font-size: 10px; line-height: 2px;">
+  <!-- we're testing:
+	1) that the top of the first b's background is even with the top of
+	   the span's background, which is likewise even with the top of the
+	   line box (thanks to the b's contribution)
+	2) that the second b (which serves to fill the area under the span)
+	   is aligned relative to its parent, not to the line box
+    -->
+  <span style="background:green"
+    ><b style="vertical-align: text-top"></b
+    ><span style="vertical-align: -8px"
+      ><b style="vertical-align: text-top; height: 42px"></b
+    ></span
+  ></span>
+</div>
+
+<!-- test vertical-align: text-bottom -->
+
+<div style="bottom: 350px; left: 38px; font-size: 10px; line-height: 2px;">
+  <!-- we're testing:
+	1) that the bottom of the first b's background is even with the bottom of
+	   the span's background, which is likewise even with the bottom of the
+	   line box (thanks to the b's contribution)
+	2) that the second b (which serves to fill the area under the span)
+	   is aligned relative to its parent, not to the line box
+    -->
+  <span style="background:green"
+    ><b style="vertical-align: text-bottom"></b
+    ><span style="vertical-align: 8px"
+      ><b style="vertical-align: text-bottom; height: 42px"></b
+    ></span
+  ></span>
+</div>
+
+	</body>
+</html>
diff --git a/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin-ref.html b/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin-ref.html
new file mode 100644
index 0000000000..f48fc42636
--- /dev/null
+++ b/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin-ref.html
@@ -0,0 +1,456 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
+<html>
+<head>
+<title>Test, CSS 2.1, section 10.3.7</title>
+<style type="text/css">
+
+html, body { margin: 0; padding: 0; border: none; }
+div { height: 1px; background: navy; margin-right: 19px; }
+
+</style>
+</head>
+<body>
+
+<!-- ***** NARROW WIDTH ***** -->
+
+<!-- nothing auto -->
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<!-- only left auto -->
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<!-- only right auto -->
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<!-- left and right auto -->
+<div style="margin-left: 167px; width: 177px;"></div>
+<div style="margin-left: 167px; width: 177px;"></div>
+<div style="margin-left: 454px; width: 177px;"></div>
+<div style="margin-left: 454px; width: 177px;"></div>
+<div style="margin-left: 167px; width: 177px;"></div>
+<div style="margin-left: 167px; width: 177px;"></div>
+<div style="margin-left: 454px; width: 177px;"></div>
+<div style="margin-left: 454px; width: 177px;"></div>
+<!-- only margin-left auto -->
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<!-- left and margin-left auto -->
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<div style="margin-left: 496px; width: 177px;"></div>
+<!-- right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<!-- left and right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 150px; width: 177px;"></div>
+<div style="margin-left: 150px; width: 177px;"></div>
+<div style="margin-left: 454px; width: 177px;"></div>
+<div style="margin-left: 454px; width: 177px;"></div>
+<div style="margin-left: 150px; width: 177px;"></div>
+<div style="margin-left: 150px; width: 177px;"></div>
+<div style="margin-left: 454px; width: 177px;"></div>
+<div style="margin-left: 454px; width: 177px;"></div>
+<!-- only margin-right auto -->
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<!-- left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<!-- right and margin-right auto -->
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<div style="margin-left: 70px; width: 177px;"></div>
+<!-- left and right and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 167px; width: 177px;"></div>
+<div style="margin-left: 167px; width: 177px;"></div>
+<div style="margin-left: 473px; width: 177px;"></div>
+<div style="margin-left: 473px; width: 177px;"></div>
+<div style="margin-left: 167px; width: 177px;"></div>
+<div style="margin-left: 167px; width: 177px;"></div>
+<div style="margin-left: 473px; width: 177px;"></div>
+<div style="margin-left: 473px; width: 177px;"></div>
+<!-- margin-left and margin-right auto -->
+<div style="margin-left: 284px; width: 177px;"></div>
+<div style="margin-left: 284px; width: 177px;"></div>
+<div style="margin-left: 284px; width: 177px;"></div>
+<div style="margin-left: 284px; width: 177px;"></div>
+<div style="margin-left: 284px; width: 177px;"></div>
+<div style="margin-left: 284px; width: 177px;"></div>
+<div style="margin-left: 284px; width: 177px;"></div>
+<div style="margin-left: 284px; width: 177px;"></div>
+<!-- left and margin-left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<div style="margin-left: 515px; width: 177px;"></div>
+<!-- right and margin-left and margin-right auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<div style="margin-left: 53px; width: 177px;"></div>
+<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) -->
+<div style="margin-left: 150px; width: 177px;"></div>
+<div style="margin-left: 150px; width: 177px;"></div>
+<div style="margin-left: 473px; width: 177px;"></div>
+<div style="margin-left: 473px; width: 177px;"></div>
+<div style="margin-left: 150px; width: 177px;"></div>
+<div style="margin-left: 150px; width: 177px;"></div>
+<div style="margin-left: 473px; width: 177px;"></div>
+<div style="margin-left: 473px; width: 177px;"></div>
+
+<!-- AUTO WIDTH -->
+
+<!-- nothing auto -->
+<div style="margin-left: 70px; width: 603px;"></div>
+<div style="margin-left: 70px; width: 603px;"></div>
+<div style="margin-left: 70px; width: 603px;"></div>
+<div style="margin-left: 70px; width: 603px;"></div>
+<div style="margin-left: 70px; width: 603px;"></div>
+<div style="margin-left: 70px; width: 603px;"></div>
+<div style="margin-left: 70px; width: 603px;"></div>
+<div style="margin-left: 70px; width: 603px;"></div>
+<!-- only left auto -->
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<!-- only right auto -->
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<!-- left and right auto -->
+<div style="margin-left: 167px; width: 96px;"></div>
+<div style="margin-left: 167px; width: 96px;"></div>
+<div style="margin-left: 535px; width: 96px;"></div>
+<div style="margin-left: 535px; width: 96px;"></div>
+<div style="margin-left: 167px; width: 96px;"></div>
+<div style="margin-left: 167px; width: 96px;"></div>
+<div style="margin-left: 535px; width: 96px;"></div>
+<div style="margin-left: 535px; width: 96px;"></div>
+<!-- only margin-left auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 620px;"></div>
+<div style="margin-left: 53px; width: 620px;"></div>
+<div style="margin-left: 53px; width: 620px;"></div>
+<div style="margin-left: 53px; width: 620px;"></div>
+<div style="margin-left: 53px; width: 620px;"></div>
+<div style="margin-left: 53px; width: 620px;"></div>
+<div style="margin-left: 53px; width: 620px;"></div>
+<div style="margin-left: 53px; width: 620px;"></div>
+<!-- left and margin-left auto -->
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<div style="margin-left: 577px; width: 96px;"></div>
+<!-- right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<!-- left and right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 150px; width: 96px;"></div>
+<div style="margin-left: 150px; width: 96px;"></div>
+<div style="margin-left: 535px; width: 96px;"></div>
+<div style="margin-left: 535px; width: 96px;"></div>
+<div style="margin-left: 150px; width: 96px;"></div>
+<div style="margin-left: 150px; width: 96px;"></div>
+<div style="margin-left: 535px; width: 96px;"></div>
+<div style="margin-left: 535px; width: 96px;"></div>
+<!-- only margin-right auto (margin-right like 0) -->
+<div style="margin-left: 70px; width: 622px;"></div>
+<div style="margin-left: 70px; width: 622px;"></div>
+<div style="margin-left: 70px; width: 622px;"></div>
+<div style="margin-left: 70px; width: 622px;"></div>
+<div style="margin-left: 70px; width: 622px;"></div>
+<div style="margin-left: 70px; width: 622px;"></div>
+<div style="margin-left: 70px; width: 622px;"></div>
+<div style="margin-left: 70px; width: 622px;"></div>
+<!-- left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<!-- right and margin-right auto -->
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<div style="margin-left: 70px; width: 96px;"></div>
+<!-- left and right and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 167px; width: 96px;"></div>
+<div style="margin-left: 167px; width: 96px;"></div>
+<div style="margin-left: 554px; width: 96px;"></div>
+<div style="margin-left: 554px; width: 96px;"></div>
+<div style="margin-left: 167px; width: 96px;"></div>
+<div style="margin-left: 167px; width: 96px;"></div>
+<div style="margin-left: 554px; width: 96px;"></div>
+<div style="margin-left: 554px; width: 96px;"></div>
+<!-- margin-left and margin-right auto (both like 0) -->
+<div style="margin-left: 53px; width: 639px;"></div>
+<div style="margin-left: 53px; width: 639px;"></div>
+<div style="margin-left: 53px; width: 639px;"></div>
+<div style="margin-left: 53px; width: 639px;"></div>
+<div style="margin-left: 53px; width: 639px;"></div>
+<div style="margin-left: 53px; width: 639px;"></div>
+<div style="margin-left: 53px; width: 639px;"></div>
+<div style="margin-left: 53px; width: 639px;"></div>
+<!-- left and margin-left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<div style="margin-left: 596px; width: 96px;"></div>
+<!-- right and margin-left and margin-right auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<div style="margin-left: 53px; width: 96px;"></div>
+<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) -->
+<div style="margin-left: 150px; width: 96px;"></div>
+<div style="margin-left: 150px; width: 96px;"></div>
+<div style="margin-left: 554px; width: 96px;"></div>
+<div style="margin-left: 554px; width: 96px;"></div>
+<div style="margin-left: 150px; width: 96px;"></div>
+<div style="margin-left: 150px; width: 96px;"></div>
+<div style="margin-left: 554px; width: 96px;"></div>
+<div style="margin-left: 554px; width: 96px;"></div>
+
+<!-- ***** WIDE WIDTH ***** -->
+
+<!-- nothing auto -->
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<!-- only left auto -->
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<!-- only right auto -->
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<!-- left and right auto -->
+<div style="margin-left: 167px; width: 684px;"></div>
+<div style="margin-left: 167px; width: 684px;"></div>
+<div style="margin-left: -53px; width: 684px;"></div>
+<div style="margin-left: -53px; width: 684px;"></div>
+<div style="margin-left: 167px; width: 684px;"></div>
+<div style="margin-left: 167px; width: 684px;"></div>
+<div style="margin-left: -53px; width: 684px;"></div>
+<div style="margin-left: -53px; width: 684px;"></div>
+<!-- only margin-left auto -->
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<!-- left and margin-left auto -->
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<div style="margin-left: -11px; width: 684px;"></div>
+<!-- right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<!-- left and right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 150px; width: 684px;"></div>
+<div style="margin-left: 150px; width: 684px;"></div>
+<div style="margin-left: -53px; width: 684px;"></div>
+<div style="margin-left: -53px; width: 684px;"></div>
+<div style="margin-left: 150px; width: 684px;"></div>
+<div style="margin-left: 150px; width: 684px;"></div>
+<div style="margin-left: -53px; width: 684px;"></div>
+<div style="margin-left: -53px; width: 684px;"></div>
+<!-- only margin-right auto -->
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<!-- left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<!-- right and margin-right auto -->
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<div style="margin-left: 70px; width: 684px;"></div>
+<!-- left and right and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 167px; width: 684px;"></div>
+<div style="margin-left: 167px; width: 684px;"></div>
+<div style="margin-left: -34px; width: 684px;"></div>
+<div style="margin-left: -34px; width: 684px;"></div>
+<div style="margin-left: 167px; width: 684px;"></div>
+<div style="margin-left: 167px; width: 684px;"></div>
+<div style="margin-left: -34px; width: 684px;"></div>
+<div style="margin-left: -34px; width: 684px;"></div>
+<!-- margin-left and margin-right auto (alternately like 0) -->
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<!-- left and margin-left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<div style="margin-left: 8px; width: 684px;"></div>
+<!-- right and margin-left and margin-right auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<div style="margin-left: 53px; width: 684px;"></div>
+<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) -->
+<div style="margin-left: 150px; width: 684px;"></div>
+<div style="margin-left: 150px; width: 684px;"></div>
+<div style="margin-left: -34px; width: 684px;"></div>
+<div style="margin-left: -34px; width: 684px;"></div>
+<div style="margin-left: 150px; width: 684px;"></div>
+<div style="margin-left: 150px; width: 684px;"></div>
+<div style="margin-left: -34px; width: 684px;"></div>
+<div style="margin-left: -34px; width: 684px;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin.html b/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin.html
new file mode 100644
index 0000000000..2f67f9fd1c
--- /dev/null
+++ b/layout/reftests/box-properties/abspos-non-replaced-width-offset-margin.html
@@ -0,0 +1,488 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
+<html>
+<head>
+<title>Test, CSS 2.1, section 10.3.7</title>
+<style type="text/css">
+
+div { height: 1px; direction: ltr; }
+
+/*
+ * Every case here has three divs nested inside of each other.  The
+ * innermost div (absolutely positioned) is the testcase (and has
+ * color).  The middle div's content edge establishes the containing
+ * block it would have if it were statically positioned.  The outermost
+ * div is actually its containing block.
+ *
+ * the abs pos containing block runs from 50px to 700px from the left edge
+ * the static pos containing block runs from 150px to 650px from the left edge
+ */
+
+/* totals for html and body: 21px on the left,  34px on the right */
+html, body { border: transparent medium solid; }
+html { margin: 0 3px 0 2px; padding: 0 4px 0 3px; border-width: 0 3px 0 8px; }
+body { margin: 0 6px 0 3px; padding: 0 7px 0 1px; border-width: 0 11px 0 4px; }
+
+body > div {
+  position: relative;
+
+  top: 0;
+  left: 4px;
+
+  margin-left: 16px;
+  border-left: 9px solid transparent;
+  /* sum of above items (29px), plus 21px above, is 50px */
+  padding-left: 40px;
+
+  width: 595px;
+
+  padding-right: 15px;
+  /* sum of above items (650px), plus 50px above, is 700px */
+
+  border-right: 27px solid transparent;
+  margin-right: 13px;
+}
+
+body > div > div {
+  /* padding-left above: 40px */
+  margin-left: 7px;
+  border-left: 29px solid transparent;
+  padding-left: 24px;
+  /* sum of above items (100px), plus 50px above, is 150px */
+
+  /* padding-right above: 15px */
+  padding-right: 14px;
+  border-right: 3px solid transparent;
+  margin-right: 18px;
+  /* sum of above items (50px), subtracted from 700px, is 650px */
+}
+
+body > div > div > div {
+  background: navy;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+
+  /* specify everything; we'll put the autos as overrides below */
+  left: 3px;
+  margin-left: 17px;
+  border-left: 6px solid transparent;
+  padding-left: 1px;
+  padding-right: 9px;
+  border-right: 8px solid transparent;
+  margin-right: 19px;
+  right: 8px;
+}
+
+/* and give it 72px of intrinsic width for the case where it has width:auto */
+body > div > div > div > div {
+  width: 72px;
+}
+
+/* now we want to test all 128 combinations of presence of the following */
+
+body > div.adir { direction: rtl; }
+body > div.sdir > div { direction: rtl; }
+body > div.edir > div > div { direction: rtl; }
+body > div.ol > div > div { left: auto; }
+body > div.or > div > div { right: auto; }
+body > div.ml > div > div { margin-left: auto; }
+body > div.mr > div > div { margin-right: auto; }
+
+/* combined with each of these three */
+body > div.narrowwidth > div > div { width: 153px; }
+body > div.autowidth > div > div { width: auto; }
+body > div.widewidth > div > div { width: 660px; }
+
+</style>
+</head>
+<body>
+
+<div class="narrowwidth"><div><div><div></div></div></div></div>
+<div class="narrowwidth adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ol"><div><div><div></div></div></div></div>
+<div class="narrowwidth ol adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ol sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ol sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ol edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ol edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ol edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or"><div><div><div></div></div></div></div>
+<div class="narrowwidth or adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or ol"><div><div><div></div></div></div></div>
+<div class="narrowwidth or ol adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or ol sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or ol edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or ol edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml ol"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml ol adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml ol sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml ol sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml ol edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml ol edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml ol edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or ol"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or ol adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or ol sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or ol edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or ol edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth ml or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ol"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ol adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ol sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ol sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ol edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ol edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ol edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or ol"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or ol adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or ol sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or ol edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or ol edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml ol"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml ol adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml ol sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml ol sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml ol edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml ol edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml ol edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or ol"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or ol adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or ol sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or ol edir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or ol edir adir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="narrowwidth mr ml or ol edir sdir adir"><div><div><div></div></div></div></div>
+
+<div class="autowidth"><div><div><div></div></div></div></div>
+<div class="autowidth adir"><div><div><div></div></div></div></div>
+<div class="autowidth sdir"><div><div><div></div></div></div></div>
+<div class="autowidth sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth edir"><div><div><div></div></div></div></div>
+<div class="autowidth edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ol"><div><div><div></div></div></div></div>
+<div class="autowidth ol adir"><div><div><div></div></div></div></div>
+<div class="autowidth ol sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ol sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ol edir"><div><div><div></div></div></div></div>
+<div class="autowidth ol edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ol edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth or"><div><div><div></div></div></div></div>
+<div class="autowidth or adir"><div><div><div></div></div></div></div>
+<div class="autowidth or sdir"><div><div><div></div></div></div></div>
+<div class="autowidth or sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth or edir"><div><div><div></div></div></div></div>
+<div class="autowidth or edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth or edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth or ol"><div><div><div></div></div></div></div>
+<div class="autowidth or ol adir"><div><div><div></div></div></div></div>
+<div class="autowidth or ol sdir"><div><div><div></div></div></div></div>
+<div class="autowidth or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth or ol edir"><div><div><div></div></div></div></div>
+<div class="autowidth or ol edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml"><div><div><div></div></div></div></div>
+<div class="autowidth ml adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ml sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml edir"><div><div><div></div></div></div></div>
+<div class="autowidth ml edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ml edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml ol"><div><div><div></div></div></div></div>
+<div class="autowidth ml ol adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml ol sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ml ol sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml ol edir"><div><div><div></div></div></div></div>
+<div class="autowidth ml ol edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml ol edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ml ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or"><div><div><div></div></div></div></div>
+<div class="autowidth ml or adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or edir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or ol"><div><div><div></div></div></div></div>
+<div class="autowidth ml or ol adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or ol sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or ol edir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or ol edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth ml or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr"><div><div><div></div></div></div></div>
+<div class="autowidth mr adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr edir"><div><div><div></div></div></div></div>
+<div class="autowidth mr edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ol"><div><div><div></div></div></div></div>
+<div class="autowidth mr ol adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ol sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ol sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ol edir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ol edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ol edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or"><div><div><div></div></div></div></div>
+<div class="autowidth mr or adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or edir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or ol"><div><div><div></div></div></div></div>
+<div class="autowidth mr or ol adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or ol sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or ol edir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or ol edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml edir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml ol"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml ol adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml ol sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml ol sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml ol edir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml ol edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml ol edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or edir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or ol"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or ol adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or ol sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or ol edir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or ol edir adir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="autowidth mr ml or ol edir sdir adir"><div><div><div></div></div></div></div>
+
+<div class="widewidth"><div><div><div></div></div></div></div>
+<div class="widewidth adir"><div><div><div></div></div></div></div>
+<div class="widewidth sdir"><div><div><div></div></div></div></div>
+<div class="widewidth sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth edir"><div><div><div></div></div></div></div>
+<div class="widewidth edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ol"><div><div><div></div></div></div></div>
+<div class="widewidth ol adir"><div><div><div></div></div></div></div>
+<div class="widewidth ol sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ol sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ol edir"><div><div><div></div></div></div></div>
+<div class="widewidth ol edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ol edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth or"><div><div><div></div></div></div></div>
+<div class="widewidth or adir"><div><div><div></div></div></div></div>
+<div class="widewidth or sdir"><div><div><div></div></div></div></div>
+<div class="widewidth or sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth or edir"><div><div><div></div></div></div></div>
+<div class="widewidth or edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth or edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth or ol"><div><div><div></div></div></div></div>
+<div class="widewidth or ol adir"><div><div><div></div></div></div></div>
+<div class="widewidth or ol sdir"><div><div><div></div></div></div></div>
+<div class="widewidth or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth or ol edir"><div><div><div></div></div></div></div>
+<div class="widewidth or ol edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml"><div><div><div></div></div></div></div>
+<div class="widewidth ml adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ml sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml edir"><div><div><div></div></div></div></div>
+<div class="widewidth ml edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ml edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml ol"><div><div><div></div></div></div></div>
+<div class="widewidth ml ol adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml ol sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ml ol sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml ol edir"><div><div><div></div></div></div></div>
+<div class="widewidth ml ol edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml ol edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ml ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or"><div><div><div></div></div></div></div>
+<div class="widewidth ml or adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or edir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or ol"><div><div><div></div></div></div></div>
+<div class="widewidth ml or ol adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or ol sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or ol edir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or ol edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth ml or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr"><div><div><div></div></div></div></div>
+<div class="widewidth mr adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr edir"><div><div><div></div></div></div></div>
+<div class="widewidth mr edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ol"><div><div><div></div></div></div></div>
+<div class="widewidth mr ol adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ol sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ol sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ol edir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ol edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ol edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or"><div><div><div></div></div></div></div>
+<div class="widewidth mr or adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or edir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or ol"><div><div><div></div></div></div></div>
+<div class="widewidth mr or ol adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or ol sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or ol edir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or ol edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr or ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml edir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml ol"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml ol adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml ol sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml ol sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml ol edir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml ol edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml ol edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml ol edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or edir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or edir sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or ol"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or ol adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or ol sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or ol sdir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or ol edir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or ol edir adir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or ol edir sdir"><div><div><div></div></div></div></div>
+<div class="widewidth mr ml or ol edir sdir adir"><div><div><div></div></div></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/abspos-replaced-width-offset-margin-narrow.png b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-narrow.png
new file mode 100644
index 0000000000..b36c5f4f99
--- /dev/null
+++ b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-narrow.png
diff --git a/layout/reftests/box-properties/abspos-replaced-width-offset-margin-ref.html b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-ref.html
new file mode 100644
index 0000000000..38aed2c96e
--- /dev/null
+++ b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-ref.html
@@ -0,0 +1,604 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
+<html>
+<head>
+<title>Test, CSS 2.1, section 10.3.8</title>
+<style type="text/css">
+
+html, body { margin: 0; padding: 0; border: none; }
+div { height: 1px; background: blue;
+      border-left: 7px solid navy; border-right: 17px solid navy; margin-right: 19px; }
+
+</style>
+</head>
+<body>
+
+<!-- ***** WIDE WIDTH ***** -->
+
+<!-- nothing auto -->
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<!-- only left auto -->
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<!-- only right auto -->
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<!-- left and right auto -->
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<!-- only margin-left auto -->
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<!-- left and margin-left auto -->
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<!-- right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<!-- left and right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<!-- only margin-right auto -->
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<!-- left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<!-- right and margin-right auto -->
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<!-- left and right and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<!-- margin-left and margin-right auto (alternately like 0) -->
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<!-- left and margin-left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<!-- right and margin-left and margin-right auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) -->
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+
+<!-- ***** NARROW WIDTH ***** -->
+
+<!-- nothing auto -->
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<!-- only left auto -->
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<!-- only right auto -->
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<!-- left and right auto -->
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<!-- only margin-left auto -->
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<!-- left and margin-left auto -->
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<!-- right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<!-- left and right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<!-- only margin-right auto -->
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<!-- left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<!-- right and margin-right auto -->
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<!-- left and right and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<!-- margin-left and margin-right auto -->
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<!-- left and margin-left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<!-- right and margin-left and margin-right auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) -->
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+
+<!-- ***** NARROW WIDTH ***** -->
+
+<!-- nothing auto -->
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<!-- only left auto -->
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<!-- only right auto -->
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<!-- left and right auto -->
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<!-- only margin-left auto -->
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<!-- left and margin-left auto -->
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<div style="margin-left: 496px; width: 153px;"></div>
+<!-- right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<!-- left and right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<div style="margin-left: 454px; width: 153px;"></div>
+<!-- only margin-right auto -->
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<!-- left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<!-- right and margin-right auto -->
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<div style="margin-left: 70px; width: 153px;"></div>
+<!-- left and right and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 167px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<!-- margin-left and margin-right auto -->
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<div style="margin-left: 284px; width: 153px;"></div>
+<!-- left and margin-left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<div style="margin-left: 515px; width: 153px;"></div>
+<!-- right and margin-left and margin-right auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<div style="margin-left: 53px; width: 153px;"></div>
+<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) -->
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 150px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+<div style="margin-left: 473px; width: 153px;"></div>
+
+<!-- ***** WIDE WIDTH ***** -->
+
+<!-- nothing auto -->
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<!-- only left auto -->
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<!-- only right auto -->
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<!-- left and right auto -->
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<!-- only margin-left auto -->
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<!-- left and margin-left auto -->
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<div style="margin-left: -11px; width: 660px;"></div>
+<!-- right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<!-- left and right and margin-left auto (margin-left like 0) -->
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<div style="margin-left: -53px; width: 660px;"></div>
+<!-- only margin-right auto -->
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<!-- left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<!-- right and margin-right auto -->
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<div style="margin-left: 70px; width: 660px;"></div>
+<!-- left and right and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: 167px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<!-- margin-left and margin-right auto (alternately like 0) -->
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<!-- left and margin-left and margin-right auto (margin-right like 0) -->
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<div style="margin-left: 8px; width: 660px;"></div>
+<!-- right and margin-left and margin-right auto (margin-left like 0) -->
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<div style="margin-left: 53px; width: 660px;"></div>
+<!-- left and right and margin-left and margin-right auto (margin-left and margin-right like 0) -->
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: 150px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+<div style="margin-left: -34px; width: 660px;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/abspos-replaced-width-offset-margin-wide.png b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-wide.png
new file mode 100644
index 0000000000..ef3fce2dce
--- /dev/null
+++ b/layout/reftests/box-properties/abspos-replaced-width-offset-margin-wide.png
diff --git a/layout/reftests/box-properties/abspos-replaced-width-offset-margin.html b/layout/reftests/box-properties/abspos-replaced-width-offset-margin.html
new file mode 100644
index 0000000000..a8417dad42
--- /dev/null
+++ b/layout/reftests/box-properties/abspos-replaced-width-offset-margin.html
@@ -0,0 +1,612 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
+<html>
+<head>
+<title>Test, CSS 2.1, section 10.3.8</title>
+<style type="text/css">
+
+div { height: 1px; direction: ltr; }
+
+/*
+ * Every case here has two divs and an image nested inside of each other.  The
+ * innermost div (absolutely positioned) is the testcase (and has
+ * color).  The middle div's content edge establishes the containing
+ * block it would have if it were statically positioned.  The outermost
+ * div is actually its containing block.
+ *
+ * the abs pos containing block runs from 50px to 700px from the left edge
+ * the static pos containing block runs from 150px to 650px from the left edge
+ */
+
+/* totals for html and body: 21px on the left,  34px on the right */
+html, body { border: transparent medium solid; }
+html { margin: 0 3px 0 2px; padding: 0 4px 0 3px; border-width: 0 3px 0 8px; }
+body { margin: 0 6px 0 3px; padding: 0 7px 0 1px; border-width: 0 11px 0 4px; }
+
+body > div {
+  position: relative;
+
+  top: 0;
+  left: 4px;
+
+  margin-left: 16px;
+  border-left: 9px solid transparent;
+  /* sum of above items (29px), plus 21px above, is 50px */
+  padding-left: 40px;
+
+  width: 595px;
+
+  padding-right: 15px;
+  /* sum of above items (650px), plus 50px above, is 700px */
+
+  border-right: 27px solid transparent;
+  margin-right: 13px;
+}
+
+body > div > div {
+  /* padding-left above: 40px */
+  margin-left: 7px;
+  border-left: 29px solid transparent;
+  padding-left: 24px;
+  /* sum of above items (100px), plus 50px above, is 150px */
+
+  /* padding-right above: 15px */
+  padding-right: 14px;
+  border-right: 3px solid transparent;
+  margin-right: 18px;
+  /* sum of above items (50px), subtracted from 700px, is 650px */
+}
+
+body > div > div > img {
+  background: navy;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+
+  /* specify everything; we'll put the autos as overrides below */
+  left: 3px;
+  margin-left: 17px;
+  border-left: 6px solid transparent;
+  padding-left: 1px;
+  padding-right: 9px;
+  border-right: 8px solid transparent;
+  margin-right: 19px;
+  right: 8px;
+}
+
+/* now we want to test all 128 combinations of presence of the following */
+
+body > div.adir { direction: rtl; }
+body > div.sdir > div { direction: rtl; }
+body > div.edir > div > img { direction: rtl; }
+body > div.ol > div > img { left: auto; }
+body > div.or > div > img { right: auto; }
+body > div.ml > div > img { margin-left: auto; }
+body > div.mr > div > img { margin-right: auto; }
+
+/* combined with each of these three (as appropriate for narrow/wide images) */
+body > div.narrowwidth > div > img { width: 153px; height: 1px; }
+body > div.autowidth > div > img { width: auto; }
+body > div.widewidth > div > img { width: 660px; height: 1px; }
+
+</style>
+</head>
+<body>
+
+<div class="autowidth"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="autowidth mr ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+
+<div class="narrowwidth"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+<div class="narrowwidth mr ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-wide.png"></div></div>
+
+<div class="autowidth"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="autowidth mr ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+
+<div class="widewidth"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or ol"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or ol adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or ol sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or ol sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or ol edir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or ol edir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or ol edir sdir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+<div class="widewidth mr ml or ol edir sdir adir"><div><img alt="" src="abspos-replaced-width-offset-margin-narrow.png"></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-1-ref.html b/layout/reftests/box-properties/box-sizing-1-ref.html
new file mode 100644
index 0000000000..42aee17719
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-1-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of box-sizing</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 { font-size: 10px; line-height: 1; }
+    table { border-spacing: 0; margin: 0; }
+    td { border: 1px solid; padding: 1px; }
+
+    td > div { width: 100px; }
+
+    td > div > div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+      margin-bottom: 1px;
+
+      float: left;
+      clear: left;
+    }
+
+  </style>
+</head>
+<body>
+
+<table><tr>
+
+<td id="bscontent"><div>
+
+<!-- box-sizing: content-box -->
+<div style="width: 37px">A B</div>
+<div style="width: auto">A B</div>
+<div style="width: auto">A<br>B</div>
+<div style="width: auto">A B</div>
+<div style="width: 37px">A B</div>
+<div style="width: 50px">A B</div>
+<div style="width: 60px">A B</div>
+
+</div></td>
+
+<td id="bsborder"><div>
+<!-- box-sizing: border-box -->
+<div style="width: 37px">A B</div>
+<div style="width: auto">A B</div>
+<div style="width: auto">A<br>B</div>
+<div style="width: auto">A B</div>
+<div style="width: 37px">A B</div>
+<div style="width: 20px">A B</div>
+<div style="width: 30px">A B</div>
+
+</div></td>
+
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-1.html b/layout/reftests/box-properties/box-sizing-1.html
new file mode 100644
index 0000000000..7070f9c97f
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-1.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of box-sizing</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 { font-size: 10px; line-height: 1; }
+    table { border-spacing: 0; margin: 0; }
+    td { border: 1px solid; padding: 1px; }
+
+    td > div { width: 100px; }
+
+    td#bscontent > div > div { box-sizing: content-box; }
+    td#bsborder > div > div { box-sizing: border-box; }
+
+    td > div > div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+      margin-bottom: 1px;
+    }
+
+  </style>
+</head>
+<body>
+
+<table><tr>
+
+<td id="bscontent"><div>
+
+<!-- box-sizing: content-box -->
+<div style="width: auto">A B</div>
+<div style="width: max-content">A B</div>
+<div style="width: min-content">A B</div>
+<div style="width: -moz-fit-content">A B</div>
+<div style="width: -moz-available">A B</div>
+<div style="width: 50px">A B</div>
+<div style="width: 60%">A B</div>
+
+</div></td>
+
+<td id="bsborder"><div>
+<!-- box-sizing: border-box -->
+<div style="width: auto">A B</div>
+<div style="width: max-content">A B</div>
+<div style="width: min-content">A B</div>
+<div style="width: -moz-fit-content">A B</div>
+<div style="width: -moz-available">A B</div>
+<div style="width: 50px">A B</div>
+<div style="width: 60%">A B</div>
+
+</div></td>
+
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-2-ref.html b/layout/reftests/box-properties/box-sizing-2-ref.html
new file mode 100644
index 0000000000..b11313ed4e
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-2-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of box-sizing</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 { font-size: 10px; line-height: 1; }
+    table { border-spacing: 0; margin: 0; }
+    td { border: 1px solid; padding: 1px solid; }
+
+    td td > div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+    }
+
+  </style>
+</head>
+<body>
+
+<table><tr>
+
+<td id="bscontent">
+
+<!-- box-sizing: content-box -->
+<table><tr><td><div>A B</div></td></tr></table>
+<table><tr><td><div>A B</div></td></tr></table>
+<table><tr><td><div>A<br>B</div></td></tr></table>
+<table><tr><td><div>A B</div></td></tr></table>
+<table><tr><td><div>A B</div></td></tr></table>
+<table><tr><td><div style="width: 150px">A B</div></td></tr></table>
+
+</td>
+
+<td id="bsborder">
+<!-- box-sizing: border-box -->
+<table><tr><td><div>A B</div></td></tr></table>
+<table><tr><td><div>A B</div></td></tr></table>
+<table><tr><td><div>A<br>B</div></td></tr></table>
+<table><tr><td><div>A B</div></td></tr></table>
+<table><tr><td><div>A B</div></td></tr></table>
+<table><tr><td><div style="width: 120px">A B</div></td></tr></table>
+
+</td>
+
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-2.html b/layout/reftests/box-properties/box-sizing-2.html
new file mode 100644
index 0000000000..bb9ae4714e
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-2.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of box-sizing</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 { font-size: 10px; line-height: 1; }
+    table { border-spacing: 0; margin: 0; }
+    td { border: 1px solid; padding: 1px solid; }
+
+    td#bscontent td > div { box-sizing: content-box; }
+    td#bsborder td > div { box-sizing: border-box; }
+
+    td td > div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+    }
+
+  </style>
+</head>
+<body>
+
+<table><tr>
+
+<td id="bscontent">
+
+<!-- box-sizing: content-box -->
+<table><tr><td><div style="width: auto">A B</div></td></tr></table>
+<table><tr><td><div style="width: max-content">A B</div></td></tr></table>
+<table><tr><td><div style="width: min-content">A B</div></td></tr></table>
+<table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table>
+<table><tr><td><div style="width: -moz-available">A B</div></td></tr></table>
+<table><tr><td><div style="width: 150px">A B</div></td></tr></table>
+
+</td>
+
+<td id="bsborder">
+<!-- box-sizing: border-box -->
+<table><tr><td><div style="width: auto">A B</div></td></tr></table>
+<table><tr><td><div style="width: max-content">A B</div></td></tr></table>
+<table><tr><td><div style="width: min-content">A B</div></td></tr></table>
+<table><tr><td><div style="width: -moz-fit-content">A B</div></td></tr></table>
+<table><tr><td><div style="width: -moz-available">A B</div></td></tr></table>
+<table><tr><td><div style="width: 150px">A B</div></td></tr></table>
+
+</td>
+
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-3.html b/layout/reftests/box-properties/box-sizing-3.html
new file mode 100644
index 0000000000..ca346e538f
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-3.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of box-sizing</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 { font-size: 10px; line-height: 1; }
+    table { border-spacing: 0; margin: 0; }
+    td { border: 1px solid; padding: 1px solid; }
+
+    td > div { width: 100px; }
+
+    td#bscontent > div > div { box-sizing: content-box; }
+    td#bsborder > div > div { box-sizing: border-box; }
+
+    td > div > div {
+      margin-left: 1%;
+      border-left: 2px solid;
+      padding-left: 4%;
+      padding-right: 8%;
+      border-right: 16px solid;
+      margin-right: 32%;
+
+      background: yellow;
+      margin-bottom: 1px;
+    }
+
+  </style>
+</head>
+<body>
+
+<table><tr>
+
+<td id="bscontent"><div>
+
+<!-- box-sizing: content-box -->
+<div style="width: auto">A B</div>
+<div style="width: max-content">A B</div>
+<div style="width: min-content">A B</div>
+<div style="width: -moz-fit-content">A B</div>
+<div style="width: -moz-available">A B</div>
+<div style="width: 50px">A B</div>
+<div style="width: 60%">A B</div>
+
+</div></td>
+
+<td id="bsborder"><div>
+<!-- box-sizing: border-box -->
+<div style="width: auto">A B</div>
+<div style="width: max-content">A B</div>
+<div style="width: min-content">A B</div>
+<div style="width: -moz-fit-content">A B</div>
+<div style="width: -moz-available">A B</div>
+<div style="width: 50px">A B</div>
+<div style="width: 60%">A B</div>
+
+</div></td>
+
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-4-ref.html b/layout/reftests/box-properties/box-sizing-4-ref.html
new file mode 100644
index 0000000000..b2a149dbe8
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-4-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of box-sizing</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 { font-size: 10px; line-height: 1; }
+    table { border-spacing: 0; margin: 0 100px; }
+    td { border: 1px solid; padding: 1px solid; }
+
+    td > div { width: 100px; }
+
+    td > div > div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+      margin-bottom: 10px;
+      float: right;
+      clear: right;
+      text-align: right;
+      height: 40px;
+      right: 0;
+    }
+
+  </style>
+</head>
+<body>
+
+<table><tr>
+
+<td id="bscontent"><div>
+
+<!-- box-sizing: content-box -->
+<div>A B</div>
+<div>A B</div>
+<div>A<br>B</div>
+<div>A B</div>
+<div style="width: 37px">A B</div>
+<div style="width: 50px">A B</div>
+<div style="width: 60px">A B</div>
+
+</div></td>
+
+<td id="bsborder"><div>
+<!-- box-sizing: border-box -->
+<div>A B</div>
+<div>A B</div>
+<div>A<br>B</div>
+<div>A B</div>
+<div style="width: 37px">A B</div>
+<div style="width: 20px">A B</div>
+<div style="width: 30px">A B</div>
+
+</div></td>
+
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-4.html b/layout/reftests/box-properties/box-sizing-4.html
new file mode 100644
index 0000000000..c170f37465
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-4.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>test of box-sizing</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 { font-size: 10px; line-height: 1; }
+    table { border-spacing: 0; margin: 0 100px; }
+    td { border: 1px solid; padding: 1px solid; }
+
+    td > div { width: 100px; height: 350px;
+               direction: rtl; position: relative; }
+
+    td#bscontent > div > div { box-sizing: content-box; }
+    td#bsborder > div > div { box-sizing: border-box; }
+
+    td > div > div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+      margin-bottom: 10px;
+      position: absolute;
+      height: 40px;
+      right: 0;
+    }
+
+    td > div > div { top: 0px; }
+    td > div > div + div { top: 50px; }
+    td > div > div + div + div { top: 100px; }
+    td > div > div + div + div + div { top: 150px; }
+    td > div > div + div + div  + div + div { top: 200px; }
+    td > div > div + div + div + div  + div + div { top: 250px; }
+    td > div > div + div + div  + div + div  + div + div { top: 300px; }
+
+  </style>
+</head>
+<body>
+
+<table><tr>
+
+<td id="bscontent"><div>
+
+<!-- box-sizing: content-box -->
+<div style="width: auto">A B</div>
+<div style="width: max-content">A B</div>
+<div style="width: min-content">A B</div>
+<div style="width: -moz-fit-content">A B</div>
+<div style="width: -moz-available">A B</div>
+<div style="width: 50px">A B</div>
+<div style="width: 60%">A B</div>
+
+</div></td>
+
+<td id="bsborder"><div>
+<!-- box-sizing: border-box -->
+<div style="width: auto">A B</div>
+<div style="width: max-content">A B</div>
+<div style="width: min-content">A B</div>
+<div style="width: -moz-fit-content">A B</div>
+<div style="width: -moz-available">A B</div>
+<div style="width: 50px">A B</div>
+<div style="width: 60%">A B</div>
+
+</div></td>
+
+</tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-minmax-height-ref.html b/layout/reftests/box-properties/box-sizing-minmax-height-ref.html
new file mode 100644
index 0000000000..ec9027039c
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-minmax-height-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html><head>
+    <title>min-/max-height testcase for bug 308801</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0; 
+        }
+
+        .test1 {
+            height:35px;
+            border:1px solid black;
+        }
+
+        .test2 {
+            height:37px;
+	    background:black;
+        }
+
+        .test3 {
+            height:21px;
+            border:8px solid black;
+        }
+
+        p { height:43px; margin:0; padding:0; }
+    </style>
+</head>
+<body>
+
+<div class="box min test1"></div>
+
+<br><div class="box min test2"></div>
+
+<br><div class="box min test3"></div>
+
+<br><div class="box max test1"><p></div>
+
+<br><div class="box max test2"><p></div>
+
+<br><div class="box max test3"><p></div>
+
+<br><!-- overflow:hidden -->
+
+<div class="hidden box min test1"></div>
+
+<br><div class="hidden box min test2"></div>
+
+<br><div class="hidden box min test3"></div>
+
+<br><div class="hidden box max test1"><p></div>
+
+<br><div class="hidden box max test2"><p></div>
+
+<br><div class="hidden box max test3"><p></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-minmax-height.html b/layout/reftests/box-properties/box-sizing-minmax-height.html
new file mode 100644
index 0000000000..2a745fca0d
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-minmax-height.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html><head>
+    <title>min-/max-height testcase for bug 308801</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0; 
+        }
+
+        div {
+            margin:0;
+            padding:0;
+        }
+        
+	.min { min-height:37px; }
+	.max { max-height:37px; }
+	.hidden { overflow:hidden;  }
+
+        .box {
+            box-sizing: border-box;
+        }
+
+        .test1 {
+            border:1px solid black;
+        }
+
+        .test2 {
+            padding:3px;
+	    background:black;
+        }
+
+        .test3 {
+            border:8px solid black;
+            padding:5px;
+        }
+
+        p { height:43px; margin:0; padding:0; }
+
+    </style>
+</head>
+<body>
+
+<div class="box min test1"></div>
+
+<br><div class="box min test2"></div>
+
+<br><div class="box min test3"></div>
+
+<br><div class="box max test1"><p></div>
+
+<br><div class="box max test2"><p></div>
+
+<br><div class="box max test3"><p></div>
+
+<br><!-- overflow:hidden -->
+
+<div class="hidden box min test1"></div>
+
+<br><div class="hidden box min test2"></div>
+
+<br><div class="hidden box min test3"></div>
+
+<br><div class="hidden box max test1"><p></div>
+
+<br><div class="hidden box max test2"><p></div>
+
+<br><div class="hidden box max test3"><p></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-minmax-width-ref.html b/layout/reftests/box-properties/box-sizing-minmax-width-ref.html
new file mode 100644
index 0000000000..f962ace1f4
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-minmax-width-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html><head>
+    <title>min-/max-width testcase for bug 308801</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px;
+        }
+
+        .test1, .test2 {
+            width:100px;
+            height:20px;
+	    background:black;
+        }
+
+        .test3 {
+            width:30px;
+            border:10px solid black;
+            padding:25px;
+        }
+br { margin-top:13px; }
+    </style>
+</head>
+<body>
+
+<div style="float:left"><div class="box min test1"></div></div>
+
+<br clear="all">
+<div style="float:left"><div class="box min test2"></div></div>
+
+<br clear="all">
+<div style="float:left"><div class="box min test3"></div></div>
+
+<br clear="all">
+<br clear="all">
+<div class="box max test1"></div>
+
+<br clear="all">
+<div class="box max test2"></div>
+
+<br clear="all">
+<div class="box max test3"></div>
+
+<br clear="all">
+<!-- overflow:hidden -->
+
+<div style="float:left"><div class="hidden box min test1"></div></div>
+
+<br clear="all">
+<div style="float:left"><div class="hidden box min test2"></div></div>
+
+<br clear="all">
+<div style="float:left"><div class="hidden box min test3"></div></div>
+
+<br clear="all">
+<br clear="all">
+<div class="hidden box max test1"></div>
+
+<br clear="all">
+<div class="hidden box max test2"></div>
+
+<br clear="all">
+<div class="hidden box max test3"></div>
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-minmax-width.html b/layout/reftests/box-properties/box-sizing-minmax-width.html
new file mode 100644
index 0000000000..d5ec531108
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-minmax-width.html
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html><head>
+    <title>min-/max-width testcase for bug 308801</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px;
+        }
+
+        div {
+            margin:0;
+            padding:0;
+        }
+        
+	.min { min-width:100px; }
+	.max { max-width:100px; }
+	.hidden { overflow:hidden; }
+
+        .box {
+            box-sizing: border-box;
+        }
+
+        .test1 {
+            border:10px solid black;
+        }
+
+        .test2 {
+            padding:10px;
+	    background:black;
+        }
+
+        .test3 {
+            border:10px solid black;
+            padding:25px;
+        }
+br { margin-top:13px; }
+    </style>
+</head>
+<body>
+
+<div style="float:left"><div class="box min test1"></div></div>
+
+<br clear="all">
+<div style="float:left"><div class="box min test2"></div></div>
+
+<br clear="all">
+<div style="float:left"><div class="box min test3"></div></div>
+
+<br clear="all">
+<br clear="all">
+<div class="box max test1"></div>
+
+<br clear="all">
+<div class="box max test2"></div>
+
+<br clear="all">
+<div class="box max test3"></div>
+
+<br clear="all">
+<!-- overflow:hidden -->
+
+<div style="float:left"><div class="hidden box min test1"></div></div>
+
+<br clear="all">
+<div style="float:left"><div class="hidden box min test2"></div></div>
+
+<br clear="all">
+<div style="float:left"><div class="hidden box min test3"></div></div>
+
+<br clear="all">
+<br clear="all">
+<div class="hidden box max test1"></div>
+
+<br clear="all">
+<div class="hidden box max test2"></div>
+
+<br clear="all">
+<div class="hidden box max test3"></div>
+
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html
new file mode 100644
index 0000000000..71b19db8c7
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 789824</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:24px; padding:0; margin:0;
+        }
+	
+div { padding:5px; }
+
+hbox {
+  display:-moz-box;
+  border-top:3px solid;
+  border-bottom:2px solid;
+  padding-bottom:4px;
+  background:lime;
+
+  box-sizing:content-box;
+}
+
+.cb {
+  background:pink;
+  box-sizing:border-box;
+}
+
+.pb {
+  background:cyan;
+}
+
+    </style>
+</head>
+<body>
+
+
+<div><hbox style="height:11px;">border-box 20px</hbox></div>
+<div><hbox style="height:41px;">border-box 50px</hbox></div>
+<div><hbox style="height:11px;">border-box 20px</hbox></div>
+
+<div><hbox class="cb" style="height:29px;">content-box 20px</hbox></div>
+<div><hbox class="cb" style="height:59px;">content-box 50px</hbox></div>
+<div><hbox class="cb" style="height:29px;">content-box 20px</hbox></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html
new file mode 100644
index 0000000000..df4d8c503f
--- /dev/null
+++ b/layout/reftests/box-properties/box-sizing-mozbox-minmax-height.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 789824</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:24px; padding:0; margin:0;
+        }
+	
+div { padding:5px; }
+
+hbox {
+  display:-moz-box;
+  border-top:3px solid;
+  border-bottom:2px solid;
+  padding-bottom:4px;
+  height:auto;
+  box-sizing:border-box;
+  background:lime;
+}
+
+.cb {
+  box-sizing:content-box;
+  background:pink;
+}
+
+    </style>
+</head>
+<body>
+
+
+<div><hbox style="height:20px;">border-box 20px</hbox></div>
+<div><hbox style="min-height:50px;">border-box 50px</hbox></div>
+<div><hbox style="max-height:20px;">border-box 20px</hbox></div>
+
+<div><hbox class="cb" style="height:20px;">content-box 20px</hbox></div>
+<div><hbox class="cb" style="min-height:50px;">content-box 50px</hbox></div>
+<div><hbox class="cb" style="max-height:20px;">content-box 20px</hbox></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/clip-auto-ref.html b/layout/reftests/box-properties/clip-auto-ref.html
new file mode 100644
index 0000000000..625d3c3212
--- /dev/null
+++ b/layout/reftests/box-properties/clip-auto-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<title>test for 'clip: auto'</title>
+<div style="position: absolute; top: 0px; left: 0px; width: 300px; height: 300px; background: blue">
+</div>
diff --git a/layout/reftests/box-properties/clip-auto.html b/layout/reftests/box-properties/clip-auto.html
new file mode 100644
index 0000000000..06cb49f12c
--- /dev/null
+++ b/layout/reftests/box-properties/clip-auto.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<title>test for 'clip: auto'</title>
+<div style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; clip: auto">
+  <div style="width: 300px; height: 300px; margin: -100px; background: blue">
+  </div>
+</div>
diff --git a/layout/reftests/box-properties/clip-rect-auto-ref.html b/layout/reftests/box-properties/clip-rect-auto-ref.html
new file mode 100644
index 0000000000..4f486809a3
--- /dev/null
+++ b/layout/reftests/box-properties/clip-rect-auto-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<title>test for 'clip: auto'</title>
+<div style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background: blue">
+</div>
diff --git a/layout/reftests/box-properties/clip-rect-auto.html b/layout/reftests/box-properties/clip-rect-auto.html
new file mode 100644
index 0000000000..a47472bef8
--- /dev/null
+++ b/layout/reftests/box-properties/clip-rect-auto.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<title>test for 'clip: auto'</title>
+<div style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; clip: rect(auto,auto,auto,auto)">
+  <div style="width: 300px; height: 300px; margin: -100px; background: blue">
+  </div>
+</div>
diff --git a/layout/reftests/box-properties/max-height-1-ref.html b/layout/reftests/box-properties/max-height-1-ref.html
new file mode 100644
index 0000000000..0b955cd015
--- /dev/null
+++ b/layout/reftests/box-properties/max-height-1-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div:empty { background: yellow; border: 1px solid black;
+                  padding: 0; margin: 0; }
+      body > div:not(:empty) { height: 20px}
+    </style>
+  </head>
+  <body>
+    <div style="height: 10px; max-height: 15px;"></div>
+    <div style="height: 10px; max-height: 5px;"></div>
+    <div style="height: 10px; max-height: 5px; min-height: 2px"></div>
+    <div style="height: 10px; max-height: 5px; min-height: 15px"></div>
+    <div style="max-height: 5px; min-height: 15px"></div>
+    <div>
+      <div style="height: 50%;"></div>
+    </div>
+    <div>
+      <div style="height: 50%; max-height: 15px;"></div>
+    </div>
+    <div>
+      <div style="height: 50%; max-height: 5px;"></div>
+    </div>
+    <div>
+      <div style="height: 50%; max-height: 75%;"></div>
+    </div>
+    <div>
+      <div style="height: 50%; max-height: 10%;"></div>
+    </div>
+    <div style="padding: 10px 0;">
+      <div style="height: 50%; max-height: 75%;"></div>
+    </div>
+    <div style="padding: 10px 0;">
+      <div style="height: 50%; max-height: 10%;"></div>
+    </div>
+    <div style="border-width: 10px 0; border-style: solid;
+                border-color: transparent;">
+      <div style="height: 50%; max-height: 75%;"></div>
+    </div>
+    <div style="border-width: 10px 0; border-style: solid;
+                border-color: transparent;">
+      <div style="height: 50%; max-height: 10%;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/max-height-1.html b/layout/reftests/box-properties/max-height-1.html
new file mode 100644
index 0000000000..b0c6f737e2
--- /dev/null
+++ b/layout/reftests/box-properties/max-height-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div:empty { background: yellow; border: 1px solid black;
+                  padding: 0; margin: 0; }
+      body > div:not(:empty) { height: 20px; }
+    </style>
+  </head>
+  <body>
+    <div style="height: 10px;"></div>
+    <div style="height: 5px;"></div>
+    <div style="height: 5px;"></div>
+    <div style="height: 15px;"></div>
+    <div style="height: 15px;"></div>
+    <div>
+      <div style="height: 10px;"></div>
+    </div>
+    <div>
+      <div style="height: 10px;"></div>
+    </div>
+    <div>
+      <div style="height: 5px;"></div>
+    </div>
+    <div>
+      <div style="height: 10px;"></div>
+    </div>
+    <div>
+      <div style="height: 2px;"></div>
+    </div>
+    <div style="padding: 10px 0;">
+      <div style="height: 10px;"></div>
+    </div>
+    <div style="padding: 10px 0;">
+      <div style="height: 2px;"></div>
+    </div>
+    <div style="border-width: 10px 0; border-style: solid;
+                border-color: transparent;">
+      <div style="height: 10px;"></div>
+    </div>
+    <div style="border-width: 10px 0; border-style: solid;
+                border-color: transparent;">
+      <div style="height: 2px;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/max-width-1-ref.html b/layout/reftests/box-properties/max-width-1-ref.html
new file mode 100644
index 0000000000..916b24ccf7
--- /dev/null
+++ b/layout/reftests/box-properties/max-width-1-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div:empty { background: yellow; border: 1px solid black; height: 10px;
+                  padding: 0; margin: 0; }
+      body > div:not(:empty) { width: 400px; }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100px;"></div>
+    <div style="width: 50px;"></div>
+    <div style="width: 50px;"></div>
+    <div style="width: 150px;"></div>
+    <div style="width: 150px;"></div>
+    <div>
+      <div style="width: 200px;"></div>
+    </div>
+    <div>
+      <div style="width: 200px;"></div>
+    </div>
+    <div>
+      <div style="width: 100px;"></div>
+    </div>
+    <div>
+      <div style="width: 200px;"></div>
+    </div>
+    <div>
+      <div style="width: 40px;"></div>
+    </div>
+    <div style="padding: 0 100px;">
+      <div style="width: 200px;"></div>
+    </div>
+    <div style="padding: 0 100px;">
+      <div style="width: 40px;"></div>
+    </div>
+    <div style="border-width: 0 100px; border-style: solid;
+                border-color: transparent;">
+      <div style="width: 200px;"></div>
+    </div>
+    <div style="border-width: 0 100px; border-style: solid;
+                border-color: transparent;">
+      <div style="width: 40px;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/max-width-1.html b/layout/reftests/box-properties/max-width-1.html
new file mode 100644
index 0000000000..423e84b27e
--- /dev/null
+++ b/layout/reftests/box-properties/max-width-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div:empty { background: yellow; border: 1px solid black; height: 10px;
+                  padding: 0; margin: 0; }
+      body > div:not(:empty) { width: 400px; }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100px; max-width: 150px;"></div>
+    <div style="width: 100px; max-width: 50px;"></div>
+    <div style="width: 100px; max-width: 50px; min-width: 20px"></div>
+    <div style="width: 100px; max-width: 50px; min-width: 150px"></div>
+    <div style="max-width: 50px; min-width: 150px"></div>
+    <div>
+      <div style="width: 50%;"></div>
+    </div>
+    <div>
+      <div style="width: 50%; max-width: 300px;"></div>
+    </div>
+    <div>
+      <div style="width: 50%; max-width: 100px;"></div>
+    </div>
+    <div>
+      <div style="width: 50%; max-width: 75%;"></div>
+    </div>
+    <div>
+      <div style="width: 50%; max-width: 10%;"></div>
+    </div>
+    <div style="padding: 0 100px;">
+      <div style="width: 50%; max-width: 75%;"></div>
+    </div>
+    <div style="padding: 0 100px;">
+      <div style="width: 50%; max-width: 10%;"></div>
+    </div>
+    <div style="border-width: 0 100px; border-style: solid;
+                border-color: transparent;">
+      <div style="width: 50%; max-width: 75%;"></div>
+    </div>
+    <div style="border-width: 0 100px; border-style: solid;
+                border-color: transparent;">
+      <div style="width: 50%; max-width: 10%;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/min-height-1-ref.html b/layout/reftests/box-properties/min-height-1-ref.html
new file mode 100644
index 0000000000..a0f8fa5d77
--- /dev/null
+++ b/layout/reftests/box-properties/min-height-1-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div:empty { background: yellow; border: 1px solid black;
+                  padding: 0; margin: 0; }
+      body > div:not(:empty) { height: 20px; }
+    </style>
+  </head>
+  <body>
+    <div style="height: 10px;"></div>
+    <div style="height: 15px;"></div>
+    <div>
+      <div style="height: 10px;"></div>
+    </div>
+    <div>
+      <div style="height: 10px;"></div>
+    </div>
+    <div>
+      <div style="height: 15px;"></div>
+    </div>
+    <div>
+      <div style="height: 10px;"></div>
+    </div>
+    <div>
+      <div style="height: 15px;"></div>
+    </div>
+    <div style="padding: 10px 0;">
+      <div style="height: 10px;"></div>
+    </div>
+    <div style="padding: 10px 0;">
+      <div style="height: 15px;"></div>
+    </div>
+    <div style="border-width: 10px 0; border-style: solid;
+                border-color: transparent;">
+      <div style="height: 10px;"></div>
+    </div>
+    <div style="border-width: 10px 0; border-style: solid;
+                border-color: transparent;">
+      <div style="height: 15px;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/min-height-1.html b/layout/reftests/box-properties/min-height-1.html
new file mode 100644
index 0000000000..cc17951fda
--- /dev/null
+++ b/layout/reftests/box-properties/min-height-1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div:empty { background: yellow; border: 1px solid black;
+                  padding: 0; margin: 0; }
+      body > div:not(:empty) { height: 20px; }
+    </style>
+  </head>
+  <body>
+    <div style="height: 10px; min-height: 5px;"></div>
+    <div style="height: 10px; min-height: 15px;"></div>
+    <div>
+      <div style="height: 50%;"></div>
+    </div>
+    <div>
+      <div style="height: 50%; min-height: 5px;"></div>
+    </div>
+    <div>
+      <div style="height: 50%; min-height: 15px;"></div>
+    </div>
+    <div>
+      <div style="height: 50%; min-height: 10%;"></div>
+    </div>
+    <div>
+      <div style="height: 50%; min-height: 75%;"></div>
+    </div>
+    <div style="padding: 10px 0">
+      <div style="height: 50%; min-height: 10%;"></div>
+    </div>
+    <div style="padding: 10px 0;">
+      <div style="height: 50%; min-height: 75%;"></div>
+    </div>
+    <div style="border-width: 10px 0; border-style: solid;
+                border-color: transparent;">
+      <div style="height: 50%; min-height: 10%;"></div>
+    </div>
+    <div style="border-width: 10px 0; border-style: solid;
+                border-color: transparent;">
+      <div style="height: 50%; min-height: 75%;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/min-width-1-ref.html b/layout/reftests/box-properties/min-width-1-ref.html
new file mode 100644
index 0000000000..0af8138fa3
--- /dev/null
+++ b/layout/reftests/box-properties/min-width-1-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div:empty { background: yellow; border: 1px solid black; height: 10px;
+                  padding: 0; margin: 0; }
+      body > div:not(:empty) { width: 400px; }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100px;"></div>
+    <div style="width: 150px;"></div>
+    <div>
+      <div style="width: 200px;"></div>
+    </div>
+    <div>
+      <div style="width: 200px;"></div>
+    </div>
+    <div>
+      <div style="width: 300px;"></div>
+    </div>
+    <div>
+      <div style="width: 200px;"></div>
+    </div>
+    <div>
+      <div style="width: 300px;"></div>
+    </div>
+    <div style="padding: 0 100px;">
+      <div style="width: 200px;"></div>
+    </div>
+    <div style="padding: 0 100px;">
+      <div style="width: 300px;"></div>
+    </div>
+    <div style="border-width: 0 100px; border-style: solid;
+                border-color: transparent;">
+      <div style="width: 200px;"></div>
+    </div>
+    <div style="border-width: 0 100px; border-style: solid;
+                border-color: transparent;">
+      <div style="width: 300px;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/min-width-1.html b/layout/reftests/box-properties/min-width-1.html
new file mode 100644
index 0000000000..e7624c254e
--- /dev/null
+++ b/layout/reftests/box-properties/min-width-1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div:empty { background: yellow; border: 1px solid black; height: 10px;
+                  padding: 0; margin: 0; }
+      body > div:not(:empty) { width: 400px; }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100px; min-width: 50px;"></div>
+    <div style="width: 100px; min-width: 150px;"></div>
+    <div>
+      <div style="width: 50%;"></div>
+    </div>
+    <div>
+      <div style="width: 50%; min-width: 100px;"></div>
+    </div>
+    <div>
+      <div style="width: 50%; min-width: 300px;"></div>
+    </div>
+    <div>
+      <div style="width: 50%; min-width: 10%;"></div>
+    </div>
+    <div>
+      <div style="width: 50%; min-width: 75%;"></div>
+    </div>
+    <div style="padding: 0 100px;">
+      <div style="width: 50%; min-width: 10%;"></div>
+    </div>
+    <div style="padding: 0 100px;">
+      <div style="width: 50%; min-width: 75%;"></div>
+    </div>
+    <div style="border-width: 0 100px; border-style: solid;
+                border-color: transparent;">
+      <div style="width: 50%; min-width: 10%;"></div>
+    </div>
+    <div style="border-width: 0 100px; border-style: solid;
+                border-color: transparent;">
+      <div style="width: 50%; min-width: 75%;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic-ref.html b/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic-ref.html
new file mode 100644
index 0000000000..a78e3a9e82
--- /dev/null
+++ b/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>intrinsic min-widths and max-widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 1px;">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 1px;">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 500px">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 500px">AA B</div>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic.html b/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic.html
new file mode 100644
index 0000000000..70fcf7cafd
--- /dev/null
+++ b/layout/reftests/box-properties/minmax-width-special-values-block-intrinsic.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>intrinsic min-widths and max-widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+
+<table border><tr><td>
+  <div style="width: 1px; min-width: max-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 1px; min-width: max-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 1px; min-width: min-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 1px; min-width: min-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 1px; min-width: -moz-fit-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 1px; min-width: -moz-fit-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 1px; min-width: -moz-available">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 1px; min-width: -moz-available">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 500px; max-width: max-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 500px; max-width: max-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 500px; max-width: min-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 500px; max-width: min-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 500px; max-width: -moz-fit-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 500px; max-width: -moz-fit-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: 500px; max-width: -moz-available">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: 500px; max-width: -moz-available">AA B</div>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/outline-radius-percent-1-ref.html b/layout/reftests/box-properties/outline-radius-percent-1-ref.html
new file mode 100644
index 0000000000..f7342c1dff
--- /dev/null
+++ b/layout/reftests/box-properties/outline-radius-percent-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div {
+        outline-width: 10px; outline-style: solid;
+        width: 400px; height: 50px;
+        margin: 20px 0;
+        border-style: solid; border-color: transparent; border-width: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="-moz-outline-radius: 20px / 2.5px;"></div>
+    <div style="-moz-outline-radius: 40px / 5px;"></div>
+    <div style="-moz-outline-radius: 80px / 10px;"></div>
+    <div style="padding: 0 100px; -moz-outline-radius: 60px / 5px;"></div>
+    <div style="padding: 0 100px 0 0; -moz-outline-radius: 50px / 5px;"></div>
+    <div style="padding: 0 0 0 100px; -moz-outline-radius: 50px / 5px;"></div>
+    <div style="border-width: 0 100px; -moz-outline-radius: 60px / 5px;"></div>
+    <div style="border-width: 0 100px 0 0; -moz-outline-radius: 50px / 5px;"></div>
+    <div style="border-width: 0 0 0 100px; -moz-outline-radius: 50px / 5px;"></div>
+    <div style="border-width: 0 100px; padding: 0 100px;
+                -moz-outline-radius: 80px / 5px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/outline-radius-percent-1.html b/layout/reftests/box-properties/outline-radius-percent-1.html
new file mode 100644
index 0000000000..9a683f82f7
--- /dev/null
+++ b/layout/reftests/box-properties/outline-radius-percent-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div {
+        outline-width: 10px; outline-style: solid;
+        width: 400px; height: 50px;
+        margin: 20px 0;
+        border-style: solid; border-color: transparent; border-width: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="-moz-outline-radius: 5%;"></div>
+    <div style="-moz-outline-radius: 10%;"></div>
+    <div style="-moz-outline-radius: 20%;"></div>
+    <div style="padding: 0 100px; -moz-outline-radius: 10%;"></div>
+    <div style="padding: 0 100px 0 0; -moz-outline-radius: 10%;"></div>
+    <div style="padding: 0 0 0 100px; -moz-outline-radius: 10%;"></div>
+    <div style="border-width: 0 100px; -moz-outline-radius: 10%;"></div>
+    <div style="border-width: 0 100px 0 0; -moz-outline-radius: 10%;"></div>
+    <div style="border-width: 0 0 0 100px; -moz-outline-radius: 10%;"></div>
+    <div style="border-width: 0 100px; padding: 0 100px;
+                -moz-outline-radius: 10%;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/box-properties/overflow-clip-box-1-ref.html b/layout/reftests/box-properties/overflow-clip-box-1-ref.html
new file mode 100644
index 0000000000..d75ef6c8d7
--- /dev/null
+++ b/layout/reftests/box-properties/overflow-clip-box-1-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testcase for bug 1422839</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0;
+}
+
+div {
+  width: 0;
+  height: 0;
+  white-space: pre;
+  overflow: hidden;
+  border: 1px solid;
+  width: 100px;
+  height: 100px;
+}
+.h > div { height: 120px; }
+.w > div { width: 120px; }
+
+c {
+  display: block;
+  width: 100px;
+  height: 40px;
+  border: 1px solid black;
+}
+
+.float { float: left; }
+
+x {
+  display: block;
+  overflow: hidden;
+  padding-left: 50px;
+  padding-top: 50px;
+  width: 50px;
+  height: 50px;
+}
+
+.w x { width: 20px; }
+.h x { height: 20px; }
+.w.h x {
+  background-color: lime;
+  background-clip: content-box;
+  overflow: visible;
+}
+y {
+  display: block;
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+}
+
+  </style>
+</head>
+<body>
+
+<span class="float">
+<div><x><c></c></x></div>
+<div></div>
+<div></div>
+<div></div>
+<div><x><c></c></x></div>
+<div></div>
+</span>
+
+<span class="float h">
+<div><x style="height:70px"><c></c></x></div>
+<div></div>
+<div></div>
+<div><x><c></c></x></div>
+<div><x style="height:70px"><c></c></x></div>
+<div></div>
+</span>
+
+<span class="float w">
+<div><x style="width:70px"><c></c></x></div>
+<div></div>
+<div><x><c></c></x></div>
+<div></div>
+<div><x style="width:70px"><c></c></x></div>
+<div></div>
+</span>
+
+<span class="float w h">
+<div><x><y style="height:70px; width:70px"><c></c></y></x></div>
+<div><x><y><c></c></y></x></div>
+<div><x><y style="height:70px"><c></c></y></x></div>
+<div><x><y style="width:70px"><c></c></y></x></div>
+<div><x><y style="height:70px; width:70px"><c></c></y></x></div>
+<div><x><y><c></c></y></x></div>
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/overflow-clip-box-1.html b/layout/reftests/box-properties/overflow-clip-box-1.html
new file mode 100644
index 0000000000..3c218e1315
--- /dev/null
+++ b/layout/reftests/box-properties/overflow-clip-box-1.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 1422839</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0;
+}
+
+div {
+  width: 0;
+  height: 0;
+  padding: 50px;
+  white-space: pre;
+  overflow: hidden;
+  background-color: lime;
+  background-clip: content-box;
+  border: 1px solid;
+}
+
+.float { float: left; }
+.w > div { width: 20px; }
+.h > div { height: 20px; }
+
+c {
+  display: block;
+  width: 100px;
+  height: 40px;
+  border: 1px solid black;
+}
+  </style>
+</head>
+<body>
+
+<span class="float">
+<div style="overflow-clip-box: padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box"><c></c></div>
+<div style="overflow-clip-box: padding-box content-box"><c></c></div>
+<div style="overflow-clip-box: content-box padding-box"><c></c></div>
+<div style="overflow-clip-box: padding-box padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box content-box"><c></c></div>
+</span>
+
+<span class="float h">
+<div style="overflow-clip-box: padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box"><c></c></div>
+<div style="overflow-clip-box: padding-box content-box"><c></c></div>
+<div style="overflow-clip-box: content-box padding-box"><c></c></div>
+<div style="overflow-clip-box: padding-box padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box content-box"><c></c></div>
+</span>
+
+<span class="float w">
+<div style="overflow-clip-box: padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box"><c></c></div>
+<div style="overflow-clip-box: padding-box content-box"><c></c></div>
+<div style="overflow-clip-box: content-box padding-box"><c></c></div>
+<div style="overflow-clip-box: padding-box padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box content-box"><c></c></div>
+</span>
+
+<span class="float w h">
+<div style="overflow-clip-box: padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box"><c></c></div>
+<div style="overflow-clip-box: padding-box content-box"><c></c></div>
+<div style="overflow-clip-box: content-box padding-box"><c></c></div>
+<div style="overflow-clip-box: padding-box padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box content-box"><c></c></div>
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/overflow-clip-box-2-ref.html b/layout/reftests/box-properties/overflow-clip-box-2-ref.html
new file mode 100644
index 0000000000..93ee44f679
--- /dev/null
+++ b/layout/reftests/box-properties/overflow-clip-box-2-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testcase for bug 1422839</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0;
+}
+
+div {
+  width: 0;
+  height: 0;
+  white-space: pre;
+  overflow: hidden;
+  border: 1px solid;
+  width: 100px;
+  height: 100px;
+  direction: rtl;
+}
+.h > div { height: 120px; }
+.w > div { width: 120px; }
+
+c {
+  display: block;
+  width: 100px;
+  height: 40px;
+  border: 1px solid black;
+  margin-top: -10px;
+}
+
+.float { float: left; }
+
+x {
+  display: block;
+  overflow: hidden;
+  padding-right: 50px;
+  padding-top: 50px;
+  width: 50px;
+  height: 50px;
+}
+
+.w x { width: 20px; }
+.h x { height: 20px; }
+.w.h x {
+  background-color: lime;
+  background-clip: content-box;
+  overflow: visible;
+}
+y {
+  display: block;
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+}
+
+  </style>
+</head>
+<body>
+
+<span class="float">
+<div><x><c></c></x></div>
+<div></div>
+<div></div>
+<div></div>
+<div><x><c></c></x></div>
+<div></div>
+</span>
+
+<span class="float h">
+<div><x style="height:70px"><c></c></x></div>
+<div></div>
+<div></div>
+<div><x style="height:20px"><c style="margin:0; border-top-width:0"></c></x></div>
+<div><x style="height:70px"><c></c></x></div>
+<div></div>
+</span>
+
+<span class="float w">
+<div><x style="width:70px"><c></c></x></div>
+<div></div>
+<div><x><c></c></x></div>
+<div></div>
+<div><x style="width:70px"><c></c></x></div>
+<div></div>
+</span>
+
+<span class="float w h">
+<div><x><y style="height:70px; width:70px; margin-top:-10px"><c style="margin-top:0px"></c></y></x></div>
+<div><x><y><c></c></y></x></div>
+<div><x><y style="height:70px; margin-top:-10px"><c style="margin-top:0px"></c></y></x></div>
+<div><x><y style="width:70px"><c></c></y></x></div>
+<div><x><y style="height:70px; width:70px; margin-top:-10px"><c style="margin-top:0px"></c></y></x></div>
+<div><x><y><c></c></y></x></div>
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/overflow-clip-box-2.html b/layout/reftests/box-properties/overflow-clip-box-2.html
new file mode 100644
index 0000000000..225d894203
--- /dev/null
+++ b/layout/reftests/box-properties/overflow-clip-box-2.html
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 1422839</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; line-height:1; padding:0; margin:0;
+}
+
+div {
+  width: 0;
+  height: 0;
+  padding: 50px;
+  white-space: pre;
+  overflow: hidden;
+  background-color: lime;
+  background-clip: content-box;
+  border: 1px solid;
+  direction: rtl;
+}
+
+.float { float: left; }
+.w > div { width: 20px; }
+.h > div { height: 20px; }
+
+c {
+  display: block;
+  width: 100px;
+  height: 40px;
+  border: 1px solid black;
+  margin-top: -10px;
+}
+  </style>
+</head>
+<body>
+
+<span class="float">
+<div style="overflow-clip-box: padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box"><c></c></div>
+<div style="overflow-clip-box: padding-box content-box"><c></c></div>
+<div style="overflow-clip-box: content-box padding-box"><c></c></div>
+<div style="overflow-clip-box: padding-box padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box content-box"><c></c></div>
+</span>
+
+<span class="float h">
+<div style="overflow-clip-box: padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box"><c></c></div>
+<div style="overflow-clip-box: padding-box content-box"><c></c></div>
+<div style="overflow-clip-box: content-box padding-box"><c></c></div>
+<div style="overflow-clip-box: padding-box padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box content-box"><c></c></div>
+</span>
+
+<span class="float w">
+<div style="overflow-clip-box: padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box"><c></c></div>
+<div style="overflow-clip-box: padding-box content-box"><c></c></div>
+<div style="overflow-clip-box: content-box padding-box"><c></c></div>
+<div style="overflow-clip-box: padding-box padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box content-box"><c></c></div>
+</span>
+
+<span class="float w h">
+<div style="overflow-clip-box: padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box"><c></c></div>
+<div style="overflow-clip-box: padding-box content-box"><c></c></div>
+<div style="overflow-clip-box: content-box padding-box"><c></c></div>
+<div style="overflow-clip-box: padding-box padding-box"><c></c></div>
+<div style="overflow-clip-box: content-box content-box"><c></c></div>
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/reftest.list b/layout/reftests/box-properties/reftest.list
new file mode 100644
index 0000000000..b8d3a36c41
--- /dev/null
+++ b/layout/reftests/box-properties/reftest.list
@@ -0,0 +1,32 @@
+== outline-radius-percent-1.html outline-radius-percent-1-ref.html
+== min-width-1.html min-width-1-ref.html
+== min-height-1.html min-height-1-ref.html
+== max-width-1.html max-width-1-ref.html
+== max-height-1.html max-height-1-ref.html
+== width-special-values-block.html width-special-values-block-ref.html
+== width-special-values-float.html width-special-values-block-ref.html
+== width-special-values-image-block.html width-special-values-image-block-ref.html
+== width-special-values-image.html width-special-values-image-ref.html
+== width-special-values-block-intrinsic.html width-special-values-block-intrinsic-ref.html
+== width-special-values-float-intrinsic.html width-special-values-block-intrinsic-ref.html
+== minmax-width-special-values-block-intrinsic.html minmax-width-special-values-block-intrinsic-ref.html
+== width-special-values-cell-auto.html width-special-values-cell-auto-ref.html
+== width-special-values-cell-fixed.html width-special-values-cell-fixed-ref.html
+== box-sizing-1.html box-sizing-1-ref.html
+== box-sizing-2.html box-sizing-2-ref.html
+== box-sizing-3.html box-sizing-1-ref.html
+== box-sizing-4.html box-sizing-4-ref.html
+== box-sizing-minmax-height.html box-sizing-minmax-height-ref.html
+== box-sizing-minmax-width.html box-sizing-minmax-width-ref.html
+== box-sizing-mozbox-minmax-height.html box-sizing-mozbox-minmax-height-ref.html
+== abspos-non-replaced-width-offset-margin.html abspos-non-replaced-width-offset-margin-ref.html
+== abspos-replaced-width-offset-margin.html abspos-replaced-width-offset-margin-ref.html
+== CSS21-t100301.xhtml CSS21-t100301-ref.xhtml
+== CSS21-t100303.xhtml CSS21-t100303-ref.xhtml
+== CSS21-t100303-simple.xhtml CSS21-t100303-ref.xhtml
+== CSS21-t100801-vertical-align.xhtml CSS21-t100801-vertical-align-ref.xhtml
+== clip-auto.html clip-auto-ref.html
+== clip-rect-auto.html clip-rect-auto-ref.html
+== width-rounding.html width-rounding-ref.html
+pref(layout.css.overflow-clip-box.enabled,true) == overflow-clip-box-1.html overflow-clip-box-1-ref.html
+pref(layout.css.overflow-clip-box.enabled,true) == overflow-clip-box-2.html overflow-clip-box-2-ref.html
diff --git a/layout/reftests/box-properties/width-rounding-ref.html b/layout/reftests/box-properties/width-rounding-ref.html
new file mode 100644
index 0000000000..3f9166f863
--- /dev/null
+++ b/layout/reftests/box-properties/width-rounding-ref.html
@@ -0,0 +1,207 @@
+<!DOCTYPE HTML>
+<title>width rounding (bug 590417)</title>
+<style>
+
+p { margin: 0; height: 1px; background: blue; }
+
+</style>
+<p style="width: 200.00px"></p>
+<p style="width: 200.01px"></p>
+<p style="width: 200.02px"></p>
+<p style="width: 200.03px"></p>
+<p style="width: 200.04px"></p>
+<p style="width: 200.05px"></p>
+<p style="width: 200.06px"></p>
+<p style="width: 200.07px"></p>
+<p style="width: 200.08px"></p>
+<p style="width: 200.09px"></p>
+<p style="width: 200.10px"></p>
+<p style="width: 200.11px"></p>
+<p style="width: 200.12px"></p>
+<p style="width: 200.13px"></p>
+<p style="width: 200.14px"></p>
+<p style="width: 200.15px"></p>
+<p style="width: 200.16px"></p>
+<p style="width: 200.17px"></p>
+<p style="width: 200.18px"></p>
+<p style="width: 200.19px"></p>
+<p style="width: 200.20px"></p>
+<p style="width: 200.21px"></p>
+<p style="width: 200.22px"></p>
+<p style="width: 200.23px"></p>
+<p style="width: 200.24px"></p>
+<p style="width: 200.25px"></p>
+<p style="width: 200.26px"></p>
+<p style="width: 200.27px"></p>
+<p style="width: 200.28px"></p>
+<p style="width: 200.29px"></p>
+<p style="width: 200.30px"></p>
+<p style="width: 200.31px"></p>
+<p style="width: 200.32px"></p>
+<p style="width: 200.33px"></p>
+<p style="width: 200.34px"></p>
+<p style="width: 200.35px"></p>
+<p style="width: 200.36px"></p>
+<p style="width: 200.37px"></p>
+<p style="width: 200.38px"></p>
+<p style="width: 200.39px"></p>
+<p style="width: 200.40px"></p>
+<p style="width: 200.41px"></p>
+<p style="width: 200.42px"></p>
+<p style="width: 200.43px"></p>
+<p style="width: 200.44px"></p>
+<p style="width: 200.45px"></p>
+<p style="width: 200.46px"></p>
+<p style="width: 200.47px"></p>
+<p style="width: 200.48px"></p>
+<p style="width: 200.49px"></p>
+<p style="width: 200.50px"></p>
+<p style="width: 200.51px"></p>
+<p style="width: 200.52px"></p>
+<p style="width: 200.53px"></p>
+<p style="width: 200.54px"></p>
+<p style="width: 200.55px"></p>
+<p style="width: 200.56px"></p>
+<p style="width: 200.57px"></p>
+<p style="width: 200.58px"></p>
+<p style="width: 200.59px"></p>
+<p style="width: 200.60px"></p>
+<p style="width: 200.61px"></p>
+<p style="width: 200.62px"></p>
+<p style="width: 200.63px"></p>
+<p style="width: 200.64px"></p>
+<p style="width: 200.65px"></p>
+<p style="width: 200.66px"></p>
+<p style="width: 200.67px"></p>
+<p style="width: 200.68px"></p>
+<p style="width: 200.69px"></p>
+<p style="width: 200.70px"></p>
+<p style="width: 200.71px"></p>
+<p style="width: 200.72px"></p>
+<p style="width: 200.73px"></p>
+<p style="width: 200.74px"></p>
+<p style="width: 200.75px"></p>
+<p style="width: 200.76px"></p>
+<p style="width: 200.77px"></p>
+<p style="width: 200.78px"></p>
+<p style="width: 200.79px"></p>
+<p style="width: 200.80px"></p>
+<p style="width: 200.81px"></p>
+<p style="width: 200.82px"></p>
+<p style="width: 200.83px"></p>
+<p style="width: 200.84px"></p>
+<p style="width: 200.85px"></p>
+<p style="width: 200.86px"></p>
+<p style="width: 200.87px"></p>
+<p style="width: 200.88px"></p>
+<p style="width: 200.89px"></p>
+<p style="width: 200.90px"></p>
+<p style="width: 200.91px"></p>
+<p style="width: 200.92px"></p>
+<p style="width: 200.93px"></p>
+<p style="width: 200.94px"></p>
+<p style="width: 200.95px"></p>
+<p style="width: 200.96px"></p>
+<p style="width: 200.97px"></p>
+<p style="width: 200.98px"></p>
+<p style="width: 200.99px"></p>
+<p style="width: 201.00px"></p>
+<p style="width: 201.01px"></p>
+<p style="width: 201.02px"></p>
+<p style="width: 201.03px"></p>
+<p style="width: 201.04px"></p>
+<p style="width: 201.05px"></p>
+<p style="width: 201.06px"></p>
+<p style="width: 201.07px"></p>
+<p style="width: 201.08px"></p>
+<p style="width: 201.09px"></p>
+<p style="width: 201.10px"></p>
+<p style="width: 201.11px"></p>
+<p style="width: 201.12px"></p>
+<p style="width: 201.13px"></p>
+<p style="width: 201.14px"></p>
+<p style="width: 201.15px"></p>
+<p style="width: 201.16px"></p>
+<p style="width: 201.17px"></p>
+<p style="width: 201.18px"></p>
+<p style="width: 201.19px"></p>
+<p style="width: 201.20px"></p>
+<p style="width: 201.21px"></p>
+<p style="width: 201.22px"></p>
+<p style="width: 201.23px"></p>
+<p style="width: 201.24px"></p>
+<p style="width: 201.25px"></p>
+<p style="width: 201.26px"></p>
+<p style="width: 201.27px"></p>
+<p style="width: 201.28px"></p>
+<p style="width: 201.29px"></p>
+<p style="width: 201.30px"></p>
+<p style="width: 201.31px"></p>
+<p style="width: 201.32px"></p>
+<p style="width: 201.33px"></p>
+<p style="width: 201.34px"></p>
+<p style="width: 201.35px"></p>
+<p style="width: 201.36px"></p>
+<p style="width: 201.37px"></p>
+<p style="width: 201.38px"></p>
+<p style="width: 201.39px"></p>
+<p style="width: 201.40px"></p>
+<p style="width: 201.41px"></p>
+<p style="width: 201.42px"></p>
+<p style="width: 201.43px"></p>
+<p style="width: 201.44px"></p>
+<p style="width: 201.45px"></p>
+<p style="width: 201.46px"></p>
+<p style="width: 201.47px"></p>
+<p style="width: 201.48px"></p>
+<p style="width: 201.49px"></p>
+<p style="width: 201.50px"></p>
+<p style="width: 201.51px"></p>
+<p style="width: 201.52px"></p>
+<p style="width: 201.53px"></p>
+<p style="width: 201.54px"></p>
+<p style="width: 201.55px"></p>
+<p style="width: 201.56px"></p>
+<p style="width: 201.57px"></p>
+<p style="width: 201.58px"></p>
+<p style="width: 201.59px"></p>
+<p style="width: 201.60px"></p>
+<p style="width: 201.61px"></p>
+<p style="width: 201.62px"></p>
+<p style="width: 201.63px"></p>
+<p style="width: 201.64px"></p>
+<p style="width: 201.65px"></p>
+<p style="width: 201.66px"></p>
+<p style="width: 201.67px"></p>
+<p style="width: 201.68px"></p>
+<p style="width: 201.69px"></p>
+<p style="width: 201.70px"></p>
+<p style="width: 201.71px"></p>
+<p style="width: 201.72px"></p>
+<p style="width: 201.73px"></p>
+<p style="width: 201.74px"></p>
+<p style="width: 201.75px"></p>
+<p style="width: 201.76px"></p>
+<p style="width: 201.77px"></p>
+<p style="width: 201.78px"></p>
+<p style="width: 201.79px"></p>
+<p style="width: 201.80px"></p>
+<p style="width: 201.81px"></p>
+<p style="width: 201.82px"></p>
+<p style="width: 201.83px"></p>
+<p style="width: 201.84px"></p>
+<p style="width: 201.85px"></p>
+<p style="width: 201.86px"></p>
+<p style="width: 201.87px"></p>
+<p style="width: 201.88px"></p>
+<p style="width: 201.89px"></p>
+<p style="width: 201.90px"></p>
+<p style="width: 201.91px"></p>
+<p style="width: 201.92px"></p>
+<p style="width: 201.93px"></p>
+<p style="width: 201.94px"></p>
+<p style="width: 201.95px"></p>
+<p style="width: 201.96px"></p>
+<p style="width: 201.97px"></p>
+<p style="width: 201.98px"></p>
+<p style="width: 201.99px"></p>
diff --git a/layout/reftests/box-properties/width-rounding.html b/layout/reftests/box-properties/width-rounding.html
new file mode 100644
index 0000000000..418475f438
--- /dev/null
+++ b/layout/reftests/box-properties/width-rounding.html
@@ -0,0 +1,210 @@
+<!DOCTYPE HTML>
+<title>width rounding (bug 590417)</title>
+<style>
+
+p { margin: 0; background: blue }
+p:after { display:block; clear: left; content: "" }
+span { float: left; width: 30%; height: 1px }
+span:first-child, span:first-child + span { width: 35% }
+
+</style>
+<p style="width: 200.00px"><span></span><span></span><span></span></p>
+<p style="width: 200.01px"><span></span><span></span><span></span></p>
+<p style="width: 200.02px"><span></span><span></span><span></span></p>
+<p style="width: 200.03px"><span></span><span></span><span></span></p>
+<p style="width: 200.04px"><span></span><span></span><span></span></p>
+<p style="width: 200.05px"><span></span><span></span><span></span></p>
+<p style="width: 200.06px"><span></span><span></span><span></span></p>
+<p style="width: 200.07px"><span></span><span></span><span></span></p>
+<p style="width: 200.08px"><span></span><span></span><span></span></p>
+<p style="width: 200.09px"><span></span><span></span><span></span></p>
+<p style="width: 200.10px"><span></span><span></span><span></span></p>
+<p style="width: 200.11px"><span></span><span></span><span></span></p>
+<p style="width: 200.12px"><span></span><span></span><span></span></p>
+<p style="width: 200.13px"><span></span><span></span><span></span></p>
+<p style="width: 200.14px"><span></span><span></span><span></span></p>
+<p style="width: 200.15px"><span></span><span></span><span></span></p>
+<p style="width: 200.16px"><span></span><span></span><span></span></p>
+<p style="width: 200.17px"><span></span><span></span><span></span></p>
+<p style="width: 200.18px"><span></span><span></span><span></span></p>
+<p style="width: 200.19px"><span></span><span></span><span></span></p>
+<p style="width: 200.20px"><span></span><span></span><span></span></p>
+<p style="width: 200.21px"><span></span><span></span><span></span></p>
+<p style="width: 200.22px"><span></span><span></span><span></span></p>
+<p style="width: 200.23px"><span></span><span></span><span></span></p>
+<p style="width: 200.24px"><span></span><span></span><span></span></p>
+<p style="width: 200.25px"><span></span><span></span><span></span></p>
+<p style="width: 200.26px"><span></span><span></span><span></span></p>
+<p style="width: 200.27px"><span></span><span></span><span></span></p>
+<p style="width: 200.28px"><span></span><span></span><span></span></p>
+<p style="width: 200.29px"><span></span><span></span><span></span></p>
+<p style="width: 200.30px"><span></span><span></span><span></span></p>
+<p style="width: 200.31px"><span></span><span></span><span></span></p>
+<p style="width: 200.32px"><span></span><span></span><span></span></p>
+<p style="width: 200.33px"><span></span><span></span><span></span></p>
+<p style="width: 200.34px"><span></span><span></span><span></span></p>
+<p style="width: 200.35px"><span></span><span></span><span></span></p>
+<p style="width: 200.36px"><span></span><span></span><span></span></p>
+<p style="width: 200.37px"><span></span><span></span><span></span></p>
+<p style="width: 200.38px"><span></span><span></span><span></span></p>
+<p style="width: 200.39px"><span></span><span></span><span></span></p>
+<p style="width: 200.40px"><span></span><span></span><span></span></p>
+<p style="width: 200.41px"><span></span><span></span><span></span></p>
+<p style="width: 200.42px"><span></span><span></span><span></span></p>
+<p style="width: 200.43px"><span></span><span></span><span></span></p>
+<p style="width: 200.44px"><span></span><span></span><span></span></p>
+<p style="width: 200.45px"><span></span><span></span><span></span></p>
+<p style="width: 200.46px"><span></span><span></span><span></span></p>
+<p style="width: 200.47px"><span></span><span></span><span></span></p>
+<p style="width: 200.48px"><span></span><span></span><span></span></p>
+<p style="width: 200.49px"><span></span><span></span><span></span></p>
+<p style="width: 200.50px"><span></span><span></span><span></span></p>
+<p style="width: 200.51px"><span></span><span></span><span></span></p>
+<p style="width: 200.52px"><span></span><span></span><span></span></p>
+<p style="width: 200.53px"><span></span><span></span><span></span></p>
+<p style="width: 200.54px"><span></span><span></span><span></span></p>
+<p style="width: 200.55px"><span></span><span></span><span></span></p>
+<p style="width: 200.56px"><span></span><span></span><span></span></p>
+<p style="width: 200.57px"><span></span><span></span><span></span></p>
+<p style="width: 200.58px"><span></span><span></span><span></span></p>
+<p style="width: 200.59px"><span></span><span></span><span></span></p>
+<p style="width: 200.60px"><span></span><span></span><span></span></p>
+<p style="width: 200.61px"><span></span><span></span><span></span></p>
+<p style="width: 200.62px"><span></span><span></span><span></span></p>
+<p style="width: 200.63px"><span></span><span></span><span></span></p>
+<p style="width: 200.64px"><span></span><span></span><span></span></p>
+<p style="width: 200.65px"><span></span><span></span><span></span></p>
+<p style="width: 200.66px"><span></span><span></span><span></span></p>
+<p style="width: 200.67px"><span></span><span></span><span></span></p>
+<p style="width: 200.68px"><span></span><span></span><span></span></p>
+<p style="width: 200.69px"><span></span><span></span><span></span></p>
+<p style="width: 200.70px"><span></span><span></span><span></span></p>
+<p style="width: 200.71px"><span></span><span></span><span></span></p>
+<p style="width: 200.72px"><span></span><span></span><span></span></p>
+<p style="width: 200.73px"><span></span><span></span><span></span></p>
+<p style="width: 200.74px"><span></span><span></span><span></span></p>
+<p style="width: 200.75px"><span></span><span></span><span></span></p>
+<p style="width: 200.76px"><span></span><span></span><span></span></p>
+<p style="width: 200.77px"><span></span><span></span><span></span></p>
+<p style="width: 200.78px"><span></span><span></span><span></span></p>
+<p style="width: 200.79px"><span></span><span></span><span></span></p>
+<p style="width: 200.80px"><span></span><span></span><span></span></p>
+<p style="width: 200.81px"><span></span><span></span><span></span></p>
+<p style="width: 200.82px"><span></span><span></span><span></span></p>
+<p style="width: 200.83px"><span></span><span></span><span></span></p>
+<p style="width: 200.84px"><span></span><span></span><span></span></p>
+<p style="width: 200.85px"><span></span><span></span><span></span></p>
+<p style="width: 200.86px"><span></span><span></span><span></span></p>
+<p style="width: 200.87px"><span></span><span></span><span></span></p>
+<p style="width: 200.88px"><span></span><span></span><span></span></p>
+<p style="width: 200.89px"><span></span><span></span><span></span></p>
+<p style="width: 200.90px"><span></span><span></span><span></span></p>
+<p style="width: 200.91px"><span></span><span></span><span></span></p>
+<p style="width: 200.92px"><span></span><span></span><span></span></p>
+<p style="width: 200.93px"><span></span><span></span><span></span></p>
+<p style="width: 200.94px"><span></span><span></span><span></span></p>
+<p style="width: 200.95px"><span></span><span></span><span></span></p>
+<p style="width: 200.96px"><span></span><span></span><span></span></p>
+<p style="width: 200.97px"><span></span><span></span><span></span></p>
+<p style="width: 200.98px"><span></span><span></span><span></span></p>
+<p style="width: 200.99px"><span></span><span></span><span></span></p>
+<p style="width: 201.00px"><span></span><span></span><span></span></p>
+<p style="width: 201.01px"><span></span><span></span><span></span></p>
+<p style="width: 201.02px"><span></span><span></span><span></span></p>
+<p style="width: 201.03px"><span></span><span></span><span></span></p>
+<p style="width: 201.04px"><span></span><span></span><span></span></p>
+<p style="width: 201.05px"><span></span><span></span><span></span></p>
+<p style="width: 201.06px"><span></span><span></span><span></span></p>
+<p style="width: 201.07px"><span></span><span></span><span></span></p>
+<p style="width: 201.08px"><span></span><span></span><span></span></p>
+<p style="width: 201.09px"><span></span><span></span><span></span></p>
+<p style="width: 201.10px"><span></span><span></span><span></span></p>
+<p style="width: 201.11px"><span></span><span></span><span></span></p>
+<p style="width: 201.12px"><span></span><span></span><span></span></p>
+<p style="width: 201.13px"><span></span><span></span><span></span></p>
+<p style="width: 201.14px"><span></span><span></span><span></span></p>
+<p style="width: 201.15px"><span></span><span></span><span></span></p>
+<p style="width: 201.16px"><span></span><span></span><span></span></p>
+<p style="width: 201.17px"><span></span><span></span><span></span></p>
+<p style="width: 201.18px"><span></span><span></span><span></span></p>
+<p style="width: 201.19px"><span></span><span></span><span></span></p>
+<p style="width: 201.20px"><span></span><span></span><span></span></p>
+<p style="width: 201.21px"><span></span><span></span><span></span></p>
+<p style="width: 201.22px"><span></span><span></span><span></span></p>
+<p style="width: 201.23px"><span></span><span></span><span></span></p>
+<p style="width: 201.24px"><span></span><span></span><span></span></p>
+<p style="width: 201.25px"><span></span><span></span><span></span></p>
+<p style="width: 201.26px"><span></span><span></span><span></span></p>
+<p style="width: 201.27px"><span></span><span></span><span></span></p>
+<p style="width: 201.28px"><span></span><span></span><span></span></p>
+<p style="width: 201.29px"><span></span><span></span><span></span></p>
+<p style="width: 201.30px"><span></span><span></span><span></span></p>
+<p style="width: 201.31px"><span></span><span></span><span></span></p>
+<p style="width: 201.32px"><span></span><span></span><span></span></p>
+<p style="width: 201.33px"><span></span><span></span><span></span></p>
+<p style="width: 201.34px"><span></span><span></span><span></span></p>
+<p style="width: 201.35px"><span></span><span></span><span></span></p>
+<p style="width: 201.36px"><span></span><span></span><span></span></p>
+<p style="width: 201.37px"><span></span><span></span><span></span></p>
+<p style="width: 201.38px"><span></span><span></span><span></span></p>
+<p style="width: 201.39px"><span></span><span></span><span></span></p>
+<p style="width: 201.40px"><span></span><span></span><span></span></p>
+<p style="width: 201.41px"><span></span><span></span><span></span></p>
+<p style="width: 201.42px"><span></span><span></span><span></span></p>
+<p style="width: 201.43px"><span></span><span></span><span></span></p>
+<p style="width: 201.44px"><span></span><span></span><span></span></p>
+<p style="width: 201.45px"><span></span><span></span><span></span></p>
+<p style="width: 201.46px"><span></span><span></span><span></span></p>
+<p style="width: 201.47px"><span></span><span></span><span></span></p>
+<p style="width: 201.48px"><span></span><span></span><span></span></p>
+<p style="width: 201.49px"><span></span><span></span><span></span></p>
+<p style="width: 201.50px"><span></span><span></span><span></span></p>
+<p style="width: 201.51px"><span></span><span></span><span></span></p>
+<p style="width: 201.52px"><span></span><span></span><span></span></p>
+<p style="width: 201.53px"><span></span><span></span><span></span></p>
+<p style="width: 201.54px"><span></span><span></span><span></span></p>
+<p style="width: 201.55px"><span></span><span></span><span></span></p>
+<p style="width: 201.56px"><span></span><span></span><span></span></p>
+<p style="width: 201.57px"><span></span><span></span><span></span></p>
+<p style="width: 201.58px"><span></span><span></span><span></span></p>
+<p style="width: 201.59px"><span></span><span></span><span></span></p>
+<p style="width: 201.60px"><span></span><span></span><span></span></p>
+<p style="width: 201.61px"><span></span><span></span><span></span></p>
+<p style="width: 201.62px"><span></span><span></span><span></span></p>
+<p style="width: 201.63px"><span></span><span></span><span></span></p>
+<p style="width: 201.64px"><span></span><span></span><span></span></p>
+<p style="width: 201.65px"><span></span><span></span><span></span></p>
+<p style="width: 201.66px"><span></span><span></span><span></span></p>
+<p style="width: 201.67px"><span></span><span></span><span></span></p>
+<p style="width: 201.68px"><span></span><span></span><span></span></p>
+<p style="width: 201.69px"><span></span><span></span><span></span></p>
+<p style="width: 201.70px"><span></span><span></span><span></span></p>
+<p style="width: 201.71px"><span></span><span></span><span></span></p>
+<p style="width: 201.72px"><span></span><span></span><span></span></p>
+<p style="width: 201.73px"><span></span><span></span><span></span></p>
+<p style="width: 201.74px"><span></span><span></span><span></span></p>
+<p style="width: 201.75px"><span></span><span></span><span></span></p>
+<p style="width: 201.76px"><span></span><span></span><span></span></p>
+<p style="width: 201.77px"><span></span><span></span><span></span></p>
+<p style="width: 201.78px"><span></span><span></span><span></span></p>
+<p style="width: 201.79px"><span></span><span></span><span></span></p>
+<p style="width: 201.80px"><span></span><span></span><span></span></p>
+<p style="width: 201.81px"><span></span><span></span><span></span></p>
+<p style="width: 201.82px"><span></span><span></span><span></span></p>
+<p style="width: 201.83px"><span></span><span></span><span></span></p>
+<p style="width: 201.84px"><span></span><span></span><span></span></p>
+<p style="width: 201.85px"><span></span><span></span><span></span></p>
+<p style="width: 201.86px"><span></span><span></span><span></span></p>
+<p style="width: 201.87px"><span></span><span></span><span></span></p>
+<p style="width: 201.88px"><span></span><span></span><span></span></p>
+<p style="width: 201.89px"><span></span><span></span><span></span></p>
+<p style="width: 201.90px"><span></span><span></span><span></span></p>
+<p style="width: 201.91px"><span></span><span></span><span></span></p>
+<p style="width: 201.92px"><span></span><span></span><span></span></p>
+<p style="width: 201.93px"><span></span><span></span><span></span></p>
+<p style="width: 201.94px"><span></span><span></span><span></span></p>
+<p style="width: 201.95px"><span></span><span></span><span></span></p>
+<p style="width: 201.96px"><span></span><span></span><span></span></p>
+<p style="width: 201.97px"><span></span><span></span><span></span></p>
+<p style="width: 201.98px"><span></span><span></span><span></span></p>
+<p style="width: 201.99px"><span></span><span></span><span></span></p>
diff --git a/layout/reftests/box-properties/width-special-values-block-intrinsic-ref.html b/layout/reftests/box-properties/width-special-values-block-intrinsic-ref.html
new file mode 100644
index 0000000000..819244746e
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-block-intrinsic-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>intrinsic widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div>AA B</div>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-block-intrinsic.html b/layout/reftests/box-properties/width-special-values-block-intrinsic.html
new file mode 100644
index 0000000000..264e4e117d
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-block-intrinsic.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>intrinsic widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="Content-Style-Type" content="text/css">
+</head>
+<body>
+
+<table border><tr><td>
+  <div style="width: max-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: max-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: min-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: min-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: -moz-fit-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: -moz-fit-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: -moz-available">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: -moz-available">AA B</div>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-block-ref.html b/layout/reftests/box-properties/width-special-values-block-ref.html
new file mode 100644
index 0000000000..35ccc45afd
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-block-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</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 { font-size: 10px; line-height: 1; }
+
+    div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+      margin-bottom: 1px;
+      float: left;
+      clear: left;
+    }
+
+    div.fill { width: 37px; }
+
+  </style>
+</head>
+<body style="width: 100px">
+<div class="">A B</div>
+<div class="">A B</div>
+<div class="">A B</div>
+<div class="">A <br>B</div>
+<div class="">A <br>B</div>
+<div class="">A <br>B</div>
+<div class="">A B</div>
+<div class="">A B</div>
+<div class="">A B</div>
+<div class="fill">A B C D E F G H I J</div>
+<div class="fill">A B C D E F G H I J</div>
+<div class="fill">A B C D E F G H I J</div>
+<div class="">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <br>B</div>
+<div class="">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <br>B</div>
+<div class="">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <br>B</div>
+<div class="fill">A B</div>
+<div class="fill">A B</div>
+<div class="fill">A B</div>
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-block.html b/layout/reftests/box-properties/width-special-values-block.html
new file mode 100644
index 0000000000..4bafc45652
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-block.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</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 { font-size: 10px; line-height: 1; }
+
+    div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+      margin-bottom: 1px;
+    }
+
+    div.v1 { width: max-content; }
+    div.v2 { width: min-content; }
+    div.v3 { width: -moz-fit-content; }
+    div.v4 { width: -moz-available; }
+
+    div.s1 { box-sizing: content; }
+    div.s2 { box-sizing: padding; }
+    div.s3 { box-sizing: border; }
+
+  </style>
+</head>
+<body style="width: 100px">
+<div class="v1 s1">A B</div>
+<div class="v1 s2">A B</div>
+<div class="v1 s3">A B</div>
+<div class="v2 s1">A B</div>
+<div class="v2 s2">A B</div>
+<div class="v2 s3">A B</div>
+<div class="v3 s1">A B</div>
+<div class="v3 s2">A B</div>
+<div class="v3 s3">A B</div>
+<div class="v3 s1">A B C D E F G H I J</div>
+<div class="v3 s2">A B C D E F G H I J</div>
+<div class="v3 s3">A B C D E F G H I J</div>
+<div class="v3 s1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div>
+<div class="v3 s2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div>
+<div class="v3 s3">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div>
+<div class="v4 s1">A B</div>
+<div class="v4 s2">A B</div>
+<div class="v4 s3">A B</div>
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-cell-auto-ref.html b/layout/reftests/box-properties/width-special-values-cell-auto-ref.html
new file mode 100644
index 0000000000..48ce0005d2
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-cell-auto-ref.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: auto</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 { font-size: 10px; line-height: 1; }
+
+    td td {
+      border-left: 1px solid;
+      padding-left: 2px;
+      padding-right: 4px;
+      border-right: 8px solid;
+
+      background: yellow;
+    }
+
+  </style>
+</head>
+<body>
+
+<table border><tr>
+<td>
+<!-- width -->
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+
+</td>
+<td>
+<!-- min-width -->
+
+<table border><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+
+<table border><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+
+</td>
+<td>
+<!-- max-width -->
+
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border><tr><td>A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+<table border><tr><td style="width: 150px">A B</td></tr></table>
+<table border width="1"><tr><td>A B</td></tr></table>
+
+
+</td>
+</tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-cell-auto.html b/layout/reftests/box-properties/width-special-values-cell-auto.html
new file mode 100644
index 0000000000..d0d47c1891
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-cell-auto.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: auto</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 { font-size: 10px; line-height: 1; }
+
+    td td {
+      border-left: 1px solid;
+      padding-left: 2px;
+      padding-right: 4px;
+      border-right: 8px solid;
+
+      background: yellow;
+    }
+
+  </style>
+</head>
+<body>
+
+<table border><tr>
+<td>
+<!-- width -->
+<table border><tr><td style="width: max-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: max-content">A B</td></tr></table>
+<table border><tr><td style="width: min-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: min-content">A B</td></tr></table>
+<table border><tr><td style="width: -moz-fit-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: -moz-fit-content">A B</td></tr></table>
+<table border><tr><td style="width: -moz-available">A B</td></tr></table>
+<table border width="1"><tr><td style="width: -moz-available">A B</td></tr></table>
+
+</td>
+<td>
+<!-- min-width -->
+
+<table border><tr><td style="min-width: max-content">A B</td></tr></table>
+<table border width="1"><tr><td style="min-width: max-content">A B</td></tr></table>
+<table border><tr><td style="min-width: min-content">A B</td></tr></table>
+<table border width="1"><tr><td style="min-width: min-content">A B</td></tr></table>
+<table border><tr><td style="min-width: -moz-fit-content">A B</td></tr></table>
+<table border width="1"><tr><td style="min-width: -moz-fit-content">A B</td></tr></table>
+<table border><tr><td style="min-width: -moz-available">A B</td></tr></table>
+<table border width="1"><tr><td style="min-width: -moz-available">A B</td></tr></table>
+
+<table border><tr><td style="width: 1px; min-width: max-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: 1px; min-width: max-content">A B</td></tr></table>
+<table border><tr><td style="width: 1px; min-width: min-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: 1px; min-width: min-content">A B</td></tr></table>
+<table border><tr><td style="width: 1px; min-width: -moz-fit-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: 1px; min-width: -moz-fit-content">A B</td></tr></table>
+<table border><tr><td style="width: 1px; min-width: -moz-available">A B</td></tr></table>
+<table border width="1"><tr><td style="width: 1px; min-width: -moz-available">A B</td></tr></table>
+
+</td>
+<td>
+<!-- max-width -->
+
+<table border><tr><td style="max-width: max-content">A B</td></tr></table>
+<table border width="1"><tr><td style="max-width: max-content">A B</td></tr></table>
+<table border><tr><td style="max-width: min-content">A B</td></tr></table>
+<table border width="1"><tr><td style="max-width: min-content">A B</td></tr></table>
+<table border><tr><td style="max-width: -moz-fit-content">A B</td></tr></table>
+<table border width="1"><tr><td style="max-width: -moz-fit-content">A B</td></tr></table>
+<table border><tr><td style="max-width: -moz-available">A B</td></tr></table>
+<table border width="1"><tr><td style="max-width: -moz-available">A B</td></tr></table>
+
+<table border><tr><td style="width: 150px; max-width: max-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: 150px; max-width: max-content">A B</td></tr></table>
+<table border><tr><td style="width: 150px; max-width: min-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: 150px; max-width: min-content">A B</td></tr></table>
+<table border><tr><td style="width: 150px; max-width: -moz-fit-content">A B</td></tr></table>
+<table border width="1"><tr><td style="width: 150px; max-width: -moz-fit-content">A B</td></tr></table>
+<table border><tr><td style="width: 150px; max-width: -moz-available">A B</td></tr></table>
+<table border width="1"><tr><td style="width: 150px; max-width: -moz-available">A B</td></tr></table>
+
+
+</td>
+</tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-cell-fixed-ref.html b/layout/reftests/box-properties/width-special-values-cell-fixed-ref.html
new file mode 100644
index 0000000000..04cb8afc15
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-cell-fixed-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: fixed</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 { font-size: 10px; line-height: 1; }
+
+    td table { width: 200px; }
+    td td:first-child {
+      border-left: 1px solid;
+      padding-left: 2px;
+      padding-right: 4px;
+      border-right: 8px solid;
+
+      background: yellow;
+    }
+
+  </style>
+</head>
+<body>
+
+<table border><tr>
+<td>
+<!-- width -->
+<table border><tr><td width="1">A&nbsp;B</td><td></td></tr></table>
+<table border><tr><td width="1">A B</td><td></td></tr></table>
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+
+</td>
+<td>
+<!-- min-width -->
+
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+
+<table border><tr><td width="1">A&nbsp;B</td><td></td></tr></table>
+<table border><tr><td width="1">A B</td><td></td></tr></table>
+<table border><tr><td width="1">A B</td><td></td></tr></table>
+<table border><tr><td width="1"><div style="width: 1px">A B</div></td><td></td></tr></table>
+
+</td>
+<td>
+<!-- max-width -->
+
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+<table border><tr><td width="50%">A B</td><td width="50%"></td></tr></table>
+
+<table border><tr><td width="1">A&nbsp;B</td><td></td></tr></table>
+<table border><tr><td width="1">A B</td><td></td></tr></table>
+<table border><tr><td width="1">A&nbsp;B</td><td></td></tr></table>
+<table border><tr><td width="150">A B</td><td></td></tr></table>
+
+</td>
+</tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-cell-fixed.html b/layout/reftests/box-properties/width-special-values-cell-fixed.html
new file mode 100644
index 0000000000..c258ce6e0f
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-cell-fixed.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on table cells with table-layout: fixed</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 { font-size: 10px; line-height: 1; }
+
+    td table { table-layout: fixed; width: 200px; }
+    td td:first-child {
+      border-left: 1px solid;
+      padding-left: 2px;
+      padding-right: 4px;
+      border-right: 8px solid;
+
+      background: yellow;
+    }
+
+  </style>
+</head>
+<body>
+
+<table border><tr>
+<td>
+<!-- width -->
+<table border><tr><td style="width: max-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: min-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: -moz-fit-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: -moz-available">A B</td><td></td></tr></table>
+
+</td>
+<td>
+<!-- min-width -->
+
+<table border><tr><td style="min-width: max-content">A B</td><td></td></tr></table>
+<table border><tr><td style="min-width: min-content">A B</td><td></td></tr></table>
+<table border><tr><td style="min-width: -moz-fit-content">A B</td><td></td></tr></table>
+<table border><tr><td style="min-width: -moz-available">A B</td><td></td></tr></table>
+
+<table border><tr><td style="width: 1px; min-width: max-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: 1px; min-width: min-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: 1px; min-width: -moz-fit-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: 1px; min-width: -moz-available">A B</td><td></td></tr></table>
+
+</td>
+<td>
+<!-- max-width -->
+
+<table border><tr><td style="max-width: max-content">A B</td><td></td></tr></table>
+<table border><tr><td style="max-width: min-content">A B</td><td></td></tr></table>
+<table border><tr><td style="max-width: -moz-fit-content">A B</td><td></td></tr></table>
+<table border><tr><td style="max-width: -moz-available">A B</td><td></td></tr></table>
+
+<table border><tr><td style="width: 150px; max-width: max-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: 150px; max-width: min-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: 150px; max-width: -moz-fit-content">A B</td><td></td></tr></table>
+<table border><tr><td style="width: 150px; max-width: -moz-available">A B</td><td></td></tr></table>
+
+
+</td>
+</tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-float-intrinsic.html b/layout/reftests/box-properties/width-special-values-float-intrinsic.html
new file mode 100644
index 0000000000..e11c9d18de
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-float-intrinsic.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>intrinsic widths for max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</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">
+
+  div { float: left; clear: left; }
+
+  </style>
+</head>
+<body>
+
+<table border><tr><td>
+  <div style="width: max-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: max-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: min-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: min-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: -moz-fit-content">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: -moz-fit-content">AA B</div>
+</td></tr></table>
+
+<table border><tr><td>
+  <div style="width: -moz-available">AA B</div>
+</td></tr></table>
+
+<table border width="1"><tr><td>
+  <div style="width: -moz-available">AA B</div>
+</td></tr></table>
+
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-float.html b/layout/reftests/box-properties/width-special-values-float.html
new file mode 100644
index 0000000000..d85a86bb30
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-float.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on blocks</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 { font-size: 10px; line-height: 1; }
+
+    div {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+
+      background: yellow;
+      float: left;
+      clear: left;
+      margin-bottom: 1px;
+    }
+
+    div.v1 { width: max-content; }
+    div.v2 { width: min-content; }
+    div.v3 { width: -moz-fit-content; }
+    div.v4 { width: -moz-available; }
+
+    div.s1 { box-sizing: content; }
+    div.s2 { box-sizing: padding; }
+    div.s3 { box-sizing: border; }
+
+  </style>
+</head>
+<body style="width: 100px">
+<div class="v1 s1">A B</div>
+<div class="v1 s2">A B</div>
+<div class="v1 s3">A B</div>
+<div class="v2 s1">A B</div>
+<div class="v2 s2">A B</div>
+<div class="v2 s3">A B</div>
+<div class="v3 s1">A B</div>
+<div class="v3 s2">A B</div>
+<div class="v3 s3">A B</div>
+<div class="v3 s1">A B C D E F G H I J</div>
+<div class="v3 s2">A B C D E F G H I J</div>
+<div class="v3 s3">A B C D E F G H I J</div>
+<div class="v3 s1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div>
+<div class="v3 s2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div>
+<div class="v3 s3">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA B</div>
+<div class="v4 s1">A B</div>
+<div class="v4 s2">A B</div>
+<div class="v4 s3">A B</div>
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-image-block-ref.html b/layout/reftests/box-properties/width-special-values-image-block-ref.html
new file mode 100644
index 0000000000..eb355396f4
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-image-block-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on block images</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">
+
+    img {
+      display: block;
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+      box-sizing: content;
+      margin-bottom: 1px;
+    }
+
+    img.v1 {  }
+    img.v2 {  }
+    img.v3 {  }
+    img.v4 { width: 37px; }
+
+  </style>
+</head>
+<body style="width: 100px">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s3">
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-image-block.html b/layout/reftests/box-properties/width-special-values-image-block.html
new file mode 100644
index 0000000000..fece4995bb
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-image-block.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on block images</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">
+
+    img {
+      display: block;
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+      margin-bottom: 1px;
+    }
+
+    img.v1 { width: max-content; }
+    img.v2 { width: min-content; }
+    img.v3 { width: -moz-fit-content; }
+    img.v4 { width: -moz-available; }
+
+    img.s1 { box-sizing: content; }
+    img.s2 { box-sizing: padding; }
+    img.s3 { box-sizing: border; }
+
+  </style>
+</head>
+<body style="width: 100px">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s3">
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-image-ref.html b/layout/reftests/box-properties/width-special-values-image-ref.html
new file mode 100644
index 0000000000..27abce494f
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-image-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on inline images</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">
+
+    img {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+      box-sizing: content;
+      margin-bottom: 1px;
+    }
+
+    img.v1 {  }
+    img.v2 {  }
+    img.v3 {  }
+    img.v4 { width: 37px; }
+
+  </style>
+</head>
+<body style="width: 100px">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s3">
+</body>
+</html>
diff --git a/layout/reftests/box-properties/width-special-values-image.html b/layout/reftests/box-properties/width-special-values-image.html
new file mode 100644
index 0000000000..c3b09b60bf
--- /dev/null
+++ b/layout/reftests/box-properties/width-special-values-image.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>max-content, min-content, -moz-fit-content, and -moz-available values of CSS width property, on inline images</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">
+
+    img {
+      margin-left: 1px;
+      border-left: 2px solid;
+      padding-left: 4px;
+      padding-right: 8px;
+      border-right: 16px solid;
+      margin-right: 32px;
+      margin-bottom: 1px;
+    }
+
+    img.v1 { width: max-content; }
+    img.v2 { width: min-content; }
+    img.v3 { width: -moz-fit-content; }
+    img.v4 { width: -moz-available; }
+
+    img.s1 { box-sizing: content; }
+    img.s2 { box-sizing: padding; }
+    img.s3 { box-sizing: border; }
+
+  </style>
+</head>
+<body style="width: 100px">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v1 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v2 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v3 s3">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s1">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s2">
+<img src="../pixel-rounding/green-25x25.png" alt="[]" class="v4 s3">
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/1178575-2-ref.html b/layout/reftests/box-shadow/1178575-2-ref.html
new file mode 100644
index 0000000000..2e2b09a57c
--- /dev/null
+++ b/layout/reftests/box-shadow/1178575-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase #2 for bug 1178575</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:20px;
+        }
+
+        div {
+            position: absolute;
+            left: 0;
+            right: 0;
+            box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5);
+            margin-top: 10px;
+            height: 40px;
+        }
+
+        span {
+          position: relative;
+          display: block;
+          overflow: hidden;
+          height: 100px;
+        }
+
+    </style>
+</head>
+<body><span><div></div><span></body></html>
diff --git a/layout/reftests/box-shadow/1178575-2.html b/layout/reftests/box-shadow/1178575-2.html
new file mode 100644
index 0000000000..7bcdadcb8e
--- /dev/null
+++ b/layout/reftests/box-shadow/1178575-2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta charset="utf-8">
+    <title>Testcase #2 for bug 1178575</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:20px;
+        }
+
+        div {
+            position: absolute;
+            left: 0;
+            right: 0;
+            box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5);
+            margin-top: 10px;
+        }
+
+        span {
+          position: relative;
+          display: block;
+          overflow: hidden;
+          height: 200px;
+        }
+
+    </style>
+<script>
+function tweak() {
+  document.querySelector('div').style.height = "40px";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</head>
+<body><span><div></div><span></body></html>
diff --git a/layout/reftests/box-shadow/1178575-ref.html b/layout/reftests/box-shadow/1178575-ref.html
new file mode 100644
index 0000000000..3a6442dddb
--- /dev/null
+++ b/layout/reftests/box-shadow/1178575-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1178575</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+
+        div {
+            position: absolute;
+            left: 0;
+            right: 0;
+            box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5);
+            margin-top: 10px;
+            height: 3em;
+        }
+
+    </style>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/box-shadow/1178575.html b/layout/reftests/box-shadow/1178575.html
new file mode 100644
index 0000000000..8b54c1c7e7
--- /dev/null
+++ b/layout/reftests/box-shadow/1178575.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1178575</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+
+        div {
+            position: absolute;
+            left: 0;
+            right: 0;
+            box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.5);
+            margin-top: 10px;
+        }
+
+    </style>
+<script>
+function tweak() {
+  document.querySelector('div').style.height = "3em";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</head>
+<body><div></div></body></html>
diff --git a/layout/reftests/box-shadow/1212823-1-ref.html b/layout/reftests/box-shadow/1212823-1-ref.html
new file mode 100644
index 0000000000..91cf26d3cc
--- /dev/null
+++ b/layout/reftests/box-shadow/1212823-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:314px; height:16px; top:10px; position:absolute; left:200px; background-color:red; z-index:-1"></div>
+<input style="width:300px; height:10px;"></input>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/1212823-1.html b/layout/reftests/box-shadow/1212823-1.html
new file mode 100644
index 0000000000..2337ddf75f
--- /dev/null
+++ b/layout/reftests/box-shadow/1212823-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<input style="width:300px; height:10px; box-shadow: 200px 0px 0px 0px red;"></input>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/611574-1-ref.html b/layout/reftests/box-shadow/611574-1-ref.html
new file mode 100644
index 0000000000..53fce85e47
--- /dev/null
+++ b/layout/reftests/box-shadow/611574-1-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html><head><style>
+button,span,fieldset { background-color: #0F0; break-inside:avoid; }
+body { font-size:12px; }
+</style></head>
+<body>
+<div style="column-count:3;height:600px;column-fill:auto">
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+
+<p><span>No Blur Radius</span>
+<p><span>No Blur Radius</span>
+<p><span style="box-sizing:border-box;">No Blur Radius</span>
+<p><span>No Blur Radius</span>
+<p><span>No Blur Radius</span>
+
+<p><span>2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+<p><span style="box-sizing:border-box;">2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/611574-1.html b/layout/reftests/box-shadow/611574-1.html
new file mode 100644
index 0000000000..b155f5a414
--- /dev/null
+++ b/layout/reftests/box-shadow/611574-1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html><head><style>
+button,span,fieldset { background-color: #0F0; break-inside:avoid; }
+body { font-size:12px; }
+</style></head>
+<body>
+<div style="column-count:3;height:600px;column-fill:auto">
+<p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button>
+
+<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button>
+
+<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</span>
+<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>
+
+<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</span>
+<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>
+
+<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
+
+<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+
+<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
+
+<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/611574-2-ref.html b/layout/reftests/box-shadow/611574-2-ref.html
new file mode 100644
index 0000000000..b6ef1ba748
--- /dev/null
+++ b/layout/reftests/box-shadow/611574-2-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head><style>
+button,span,fieldset { border-radius: 7px 3px;  background-color: #0F0; }
+button { border: none; outline: 3px solid black; -moz-outline-radius: 7px 3px; outline-offset: -2px; }
+</style></head>
+<body style="margin:30px">
+<div style="column-count:3">
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+<p><button>No Blur Radius</button>
+
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+<p><button>2px Blur Radius</button>
+
+<!--  XXX TODO: SPAN does not work due to differences in anti-aliasing with the test
+<p><span>No Blur Radius</span>
+<p><span>No Blur Radius</span>
+<p><span style="box-sizing:border-box;">No Blur Radius</span>
+<p><span>No Blur Radius</span>
+<p><span>No Blur Radius</span>
+
+<p><span>2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+<p><span style="box-sizing:border-box;">2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+<p><span>2px Blur Radius</span>
+-->
+
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset style="box-sizing:border-box;">No Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+<p><fieldset>No Blur Radius</fieldset>
+
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset style="box-sizing:border-box;">2px Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+<p><fieldset>2px Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing:border-box;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;">No Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline; box-sizing:border-box;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;">2px Blur Radius</fieldset>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/611574-2.html b/layout/reftests/box-shadow/611574-2.html
new file mode 100644
index 0000000000..1b16220393
--- /dev/null
+++ b/layout/reftests/box-shadow/611574-2.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head><style>
+button,span,fieldset { border-radius: 7px 3px;  background-color: #0F0; }
+button { border: none; outline: 3px solid black; -moz-outline-radius: 7px 3px; outline-offset: -2px; }
+</style></head>
+<body style="margin:30px">
+<div style="column-count:3">
+<p><button style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</button>
+<p><button style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</button>
+
+<p><button style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</button>
+<p><button style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</button>
+
+<!--  XXX TODO: SPAN does not work due to differences in anti-aliasing with the reference
+<p><span style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</span>
+<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</span>
+<p><span style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</span>
+
+<p><span style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</span>
+<p><span style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</span>
+<p><span style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</span>
+-->
+
+<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
+
+<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset -20px 10px 0 #0F0;"><legend>No</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset  20px 10px 0 #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 200px 100px 0 4px #0F0;">No Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 200px -100px 0 4px #0F0;">No Blur Radius</fieldset>
+
+<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset -20px 10px 2px #0F0;"><legend>2px</legend> Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset  20px 10px 2px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-sizing: border-box; box-shadow: inset -20px 10px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 200px 100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+<p><fieldset style="display:inline;box-shadow: inset 200px -100px 2px 4px #0F0;">2px Blur Radius</fieldset>
+
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-basic-ref.html b/layout/reftests/box-shadow/boxshadow-basic-ref.html
new file mode 100644
index 0000000000..0a4639491b
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-basic-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  background-color: green;
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 2;
+}
+
+#theshadow {
+  background-color: black;
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 23px;
+  left: 23px;
+  z-index: 1;
+}
+</style>
+
+<div id="theshadow">&nbsp;</div><div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-basic.html b/layout/reftests/box-shadow/boxshadow-basic.html
new file mode 100644
index 0000000000..0870136d3d
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-basic.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  box-shadow: 3px 3px black;
+}
+</style>
+
+<div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-blur-2-notref.html b/layout/reftests/box-shadow/boxshadow-blur-2-notref.html
new file mode 100644
index 0000000000..130d921585
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-2-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+body { margin: 0 }
+p {
+height: 1200px;
+width: 100px;
+box-shadow: 0px -100px 100px black;
+}
+</style>
+<p>
+<div style="position:absolute; background: white; top: 100px; left: 212px; height: 2px; width: 2px"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-blur-2-ref.html b/layout/reftests/box-shadow/boxshadow-blur-2-ref.html
new file mode 100644
index 0000000000..73d192a7ee
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-2-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+body { margin: 0 }
+p {
+height: 1200px;
+width: 100px;
+box-shadow: 0px -100px 100px black;
+}
+</style>
+<p>
+<div style="position:absolute; background: white; top: 100px; left: 215px; height: 2px; width: 2px"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-blur-2.html b/layout/reftests/box-shadow/boxshadow-blur-2.html
new file mode 100644
index 0000000000..173e724de3
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-2.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+body { margin: 0 }
+p {
+height: 1200px;
+width: 100px;
+box-shadow: 0px -100px 100px black;
+}
+</style>
+<p>
diff --git a/layout/reftests/box-shadow/boxshadow-blur-notref.html b/layout/reftests/box-shadow/boxshadow-blur-notref.html
new file mode 100644
index 0000000000..890c8e39ca
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-notref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  box-shadow: 3px 3px red;
+}
+</style>
+
+<div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-blur-notref2.html b/layout/reftests/box-shadow/boxshadow-blur-notref2.html
new file mode 100644
index 0000000000..fdfdc48f5f
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur-notref2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+</style>
+
+<div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-blur.html b/layout/reftests/box-shadow/boxshadow-blur.html
new file mode 100644
index 0000000000..f70c1cd1c0
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-blur.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  box-shadow: 3px 3px 2px red;
+}
+</style>
+
+<div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html b/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html
new file mode 100644
index 0000000000..e797c61a26
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-border-radius-int-ref.html
@@ -0,0 +1,31 @@
+<html>
+<style>
+#boxShadow {
+  height: 210px;
+  width: 290px;
+  box-shadow: 0px 0px 2px graytext inset;
+}
+
+#leftCover {
+  width: 30px;
+  height: 300px;
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+
+#rightCover {
+  width: 20px;
+  height: 300px;
+  background-color: white;
+  position: absolute;
+  top: 0px;
+  left: 280px;
+}
+</style>
+<body>
+<div id="boxShadow">test</div>
+<div id="leftCover"></div>
+<div id="rightCover"></div>
+</body>
diff --git a/layout/reftests/box-shadow/boxshadow-border-radius-int.html b/layout/reftests/box-shadow/boxshadow-border-radius-int.html
new file mode 100644
index 0000000000..737641576a
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-border-radius-int.html
@@ -0,0 +1,32 @@
+<html>
+<style>
+#boxShadow {
+  height: 210px;
+  width: 290px;
+  border-radius: 11px;
+  box-shadow: 0px 0px 2px graytext inset;
+}
+
+#leftCover {
+  width: 30px;
+  height: 300px;
+  background-color: white;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+
+#rightCover {
+  width: 20px;
+  height: 300px;
+  background-color: white;
+  position: absolute;
+  top: 0px;
+  left: 280px;
+}
+</style>
+<body>
+<div id="boxShadow">test</div>
+<div id="leftCover"></div>
+<div id="rightCover"></div>
+</body>
diff --git a/layout/reftests/box-shadow/boxshadow-button-ref.html b/layout/reftests/box-shadow/boxshadow-button-ref.html
new file mode 100644
index 0000000000..9d026129d4
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-button-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<style>
+#a, #b {
+  width: 100px;
+  height: 100px;
+  background-color: grey;
+  -moz-appearance: none;
+  box-shadow: 4px 4px 3px black;
+  border: none !important;
+  position: absolute;
+}
+
+#a {
+  top: 20px;
+  left: 20px;
+}
+
+#b {
+  top: 170px;
+  left: 20px;
+</style>
+
+<div id="a">&nbsp;</div>
+<div id="b">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-button.html b/layout/reftests/box-shadow/boxshadow-button.html
new file mode 100644
index 0000000000..f1522536db
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-button.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<style>
+#a, #b {
+  width: 100px;
+  height: 100px;
+  background-color: grey;
+  -moz-appearance: none;
+  box-shadow: 4px 4px 3px black;
+  border: none !important;
+  position: absolute;
+}
+
+#a {
+  top: 20px;
+  left: 20px;
+}
+
+#b {
+  top: 170px;
+  left: 20px;
+</style>
+
+<input type="button" id="a" value=""></input>
+<button id="b"></button>
diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html b/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html
new file mode 100644
index 0000000000..aa2a57e81d
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-color-rounding-middle-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+#outerDiv {
+  width: 500px;
+  height: 500px;
+  background: lime;
+  position: absolute;
+}
+
+#middleBlur {
+  width: 300px;
+  height: 300px;
+  margin-left: 100px;
+  margin-top: 100px;
+  background: black;
+  box-shadow: inset 0 0 20px 100px lime;
+}
+</style>
+
+<div id="outerDiv">
+  <div id="middleBlur">
+  </div>
+</div>
diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html b/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html
new file mode 100644
index 0000000000..1693fb9a3d
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-color-rounding-middle.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+#thediv {
+  width: 500px;
+  height: 500px;
+  background: black;
+  box-shadow: inset 0 0 20px 200px lime;
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html b/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html
new file mode 100644
index 0000000000..95fa9075ed
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-color-rounding-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+#thediv {
+  width: 300px;
+  height: 300px;
+  background: lime;
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-color-rounding.html b/layout/reftests/box-shadow/boxshadow-color-rounding.html
new file mode 100644
index 0000000000..057c077eb6
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-color-rounding.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+#thediv {
+  width: 300px;
+  height: 300px;
+  background: black;
+  box-shadow: inset 0 0 20px 200px lime;
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml b/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml
new file mode 100644
index 0000000000..0aaddc1a18
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-dynamic-ref.xhtml
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<hbox flex="1" 
+  style="margin:50px; background:yellow; 
+  box-shadow: 1px 2px 2px black, 0 0 7px white, 0 0 14px rgb(50, 170, 255), 0 0 21px rgb(50, 170, 255); 
+  border-radius: 10px;"/>
+</window>
diff --git a/layout/reftests/box-shadow/boxshadow-dynamic.xhtml b/layout/reftests/box-shadow/boxshadow-dynamic.xhtml
new file mode 100644
index 0000000000..97ad1c57ea
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-dynamic.xhtml
@@ -0,0 +1,33 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="data:text/css,
+
+hbox {
+  margin: 50px;
+  background: yellow;
+}
+
+hbox[x] {
+  box-shadow: 1px 2px 2px black, 0 0 7px white, 0 0 14px rgb(50, 170, 255), 0 0 21px rgb(50, 170, 255);
+  border-radius: 10px;
+}
+
+"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        class="reftest-wait">
+  
+  <script>
+  <![CDATA[
+  
+  document.documentElement.addEventListener("MozReftestInvalidate", 
+    doTest, false);
+
+  function doTest() {
+    document.getElementById("hbox1").setAttribute("x",1);
+    document.documentElement.removeAttribute("class"); 
+  }
+  
+  ]]>
+  </script>
+
+  <hbox id="hbox1" flex="1"/>
+</window>
diff --git a/layout/reftests/box-shadow/boxshadow-fileupload-ref.html b/layout/reftests/box-shadow/boxshadow-fileupload-ref.html
new file mode 100644
index 0000000000..ab36e2af5c
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-fileupload-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html><head>
+
+<style>
+#s {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: block;
+  width: 400px;
+  height: 150px;
+}
+
+#p {
+  background-color: black;
+  width: 400px;
+  height: 150px;
+  position: absolute;
+  top: 270px;
+  left: 20px;
+}
+</style>
+
+</head>
+<body>
+
+<input type="file" id="s" />
+<div id="p">&nbsp;</div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-fileupload.html b/layout/reftests/box-shadow/boxshadow-fileupload.html
new file mode 100644
index 0000000000..28ca6ea4e4
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-fileupload.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html><head>
+
+<style>
+#s {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: block;
+  width: 400px;
+  height: 150px;
+  box-shadow: 0px 250px black;
+}
+</style>
+
+</head>
+<body>
+
+<input type="file" id="s" />
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg b/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg
new file mode 100644
index 0000000000..ed63f9a9ae
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inner-basic-ref.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+<!-- This reference SVG must perform *exactly* the same path construction,
+     clipping, and filling operations that PaintBoxShadowInner does for
+     the HTML test file. If it doesn't match perfectly, antialiased
+     pixels at the curved edges will not agree.
+
+     PaintBoxShadowInner defines both its second (nonrectangular)
+     clipping path and its fill path as the even-odd-rule compositions
+     of two rectangles, one with nonzero corner radius. It is
+     impossible to express "the path consisting of the even-odd-rule
+     composition of two |rect| elements" in SVG. This is a minor
+     nuisance because we have to write everything out using |path|,
+     plus a major nuisance because Gecko uses the same ellipse-to-
+     Bezier conversion for rounded rectangles in SVG and HTML, but the
+     SVG 'A' operator uses a different one. Therefore we cannot use 'A'.
+     The 'C' parameters here were obtained by dumping out the cairo
+     operations used to draw the HTML, using cairo-trace. -->
+  <defs>
+    <clipPath id="outer">
+      <rect x="16" y="16" width="240" height="240"/>
+    </clipPath>
+    <clipPath id="inner">
+      <path clip-rule="evenodd"
+	    d="M 248 16
+	       H 24  C 19.58468 16 16 19.58468 16 24
+	       V 248 C 16 252.41532 19.58468 256 24 256
+	       H 248 C 252.41532 256 256 252.41532 256 248
+	       V 24  C 256 19.58468 252.41532 16 248 16 Z
+	       M 48 56 H 272 V 296 H 48 Z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#outer)">
+    <path fill="grey" fill-rule="evenodd" clip-path="url(#inner)"
+	  d="M 16 16 H 256 V 256 H 16 Z
+	     M 280 48
+	     H 56  C 51.58468 48 48 51.58468 48 56
+	     V 280 C 48 284.41532 51.58468 288 56 288
+	     H 280 C 284.41532 288 288 284.41532 288 280
+	     V 56  C 288 51.58468 284.41532 48 280 48 Z"/>
+  </g>
+</svg>
diff --git a/layout/reftests/box-shadow/boxshadow-inner-basic.html b/layout/reftests/box-shadow/boxshadow-inner-basic.html
new file mode 100644
index 0000000000..8ba6109657
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inner-basic.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<div style="
+  width: 240px; height: 240px;
+  border-radius: 8px;
+  box-shadow: 32px 32px grey inset;
+  position: absolute;
+  top: 16px; left: 16px;
+"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html
new file mode 100644
index 0000000000..77c8d299b6
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#ref {
+  background: black;
+  width: 575px;
+  height: 5px;
+  margin-left: 125px;
+}
+
+</style>
+</head>
+<body>
+<div id="ref">
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html
new file mode 100644
index 0000000000..87ce0f01c6
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-large-border-radius.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#boxShadow {
+  background: gray;
+  width: 700px;
+  height: 20px;
+  box-shadow: 15px 15px 3px black inset;
+  border-radius: 100px 0px 0px 0px;
+}
+
+#cutLeft {
+  background: white;
+  width: 125px;
+  height: 20px;
+  position: absolute;
+}
+
+#cutAcross {
+  background: white;
+  width: 700px;
+  height: 15px;
+  position: absolute;
+  margin-top: 5px;
+}
+
+</style>
+</head>
+<body>
+<div id="cutLeft"></div>
+<div id="cutAcross"></div>
+<div id="boxShadow"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html b/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html
new file mode 100644
index 0000000000..f117b53ed9
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-large-offset-ref.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+<style>
+div.test {
+  width: 530px;
+  height: 500px;
+  background-color: black;
+}
+
+div.cover {
+  width: 500px;
+  height: 500px;
+  background-color: black;
+  position: absolute;
+  margin-top: 0px;
+  margin-left: 30px;
+}
+</style>
+<body>
+<div class="test">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-large-offset.html b/layout/reftests/box-shadow/boxshadow-inset-large-offset.html
new file mode 100644
index 0000000000..fe8db9f07a
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-large-offset.html
@@ -0,0 +1,26 @@
+<html>
+<head>
+<style>
+div.test {
+  width: 500px;
+  height: 500px;
+  box-shadow: inset 70px 70px 50px 0px black;
+  position: absolute;
+}
+
+div.cover {
+  width: 500px;
+  height: 500px;
+  background-color: black;
+  position: absolute;
+  margin-top: 0px;
+  margin-left: 30px;
+}
+</style>
+<body>
+<div class="test">
+</div>
+<div class="cover">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html
new file mode 100644
index 0000000000..b018ea062e
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+<style>
+div.neg
+{
+  margin: 35px auto 95px auto;
+  width: 200px;
+  height: 200px;
+  box-shadow: 0px 0px 15px -20px #808080 inset;
+}
+</style>
+</head>
+
+<body>
+<div class="neg"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html
new file mode 100644
index 0000000000..b6b1a3dfc2
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2-ref.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+<style>
+.test {
+  background-color: #fec;
+  display: inline-block;
+  width: 5em;
+  height: 5em;
+}
+</style>
+</head>
+
+<body>
+<div class="test"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html
new file mode 100644
index 0000000000..b846f25aba
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-inset-neg-spread2.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+<style>
+.test {
+  background-color: #fec;
+  display: inline-block;
+  width: 5em;
+  height: 5em;
+}
+
+.first {
+  box-shadow: inset 0 0 1px -3px rgba(0,0,10,0.25);
+}
+</style>
+</head>
+
+<body>
+<div class="first test"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html b/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html
new file mode 100644
index 0000000000..d914fb7abc
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-large-border-radius-ref.html
@@ -0,0 +1,37 @@
+<html>
+<head>
+<style>
+  #leftCover {
+    width: 30px;
+    height: 50px;
+    background-color: white;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+  }
+
+  #rightCover {
+    width: 20px;
+    height: 120px;
+    background-color: white;
+    position: absolute;
+    top: 0px;
+    left: 150px;
+  }
+
+  #boxShadowRegular {
+    width: 152px;
+    height: 19.5px;
+    box-shadow: 0px 0px 1px #3b99FC inset,
+                0px 0px 4px 1px #3B99FC,
+                0px 0px 1.5px 1px #3B99FC;
+    position: absolute;
+  }
+
+</style>
+</head>
+<html>
+  <div id="boxShadowRegular"></div>
+  <div id="leftCover"></div>
+  <div id="rightCover"></div>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-large-border-radius.html b/layout/reftests/box-shadow/boxshadow-large-border-radius.html
new file mode 100644
index 0000000000..90eee1db36
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-large-border-radius.html
@@ -0,0 +1,37 @@
+<html>
+<head>
+<style>
+  #boxShadow {
+    width: 152px;
+    height: 19.5px;
+    box-shadow: 0px 0px 1px #3b99FC inset,
+                0px 0px 4px 1px #3B99FC,
+                0px 0px 1.5px 1px #3B99FC;
+    border-radius: 10000px 0px 0px 10000px;
+    position: absolute;
+  }
+
+  #leftCover {
+    width: 30px;
+    height: 50px;
+    background-color: white;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+  }
+
+  #rightCover {
+    width: 20px;
+    height: 120px;
+    background-color: white;
+    position: absolute;
+    top: 0px;
+    left: 150px;
+  }
+</style>
+</head>
+<html>
+  <div id="boxShadow"></div>
+  <div id="leftCover"></div>
+  <div id="rightCover"></div>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-large-offset-ref.html b/layout/reftests/box-shadow/boxshadow-large-offset-ref.html
new file mode 100644
index 0000000000..2160b81479
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-large-offset-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<style>
+.top {
+  background-color: red;
+  width: 800px;
+  height: 400px;
+}
+
+.bottom {
+  background-color: #fec;
+  width: 800px;
+  height: 400px;
+}
+
+.leftCut {
+  position: absolute;
+  margin-left: 0px;
+  margin-top: 0px;
+  width: 10px;
+  height: 800px;
+  background-color: black;
+}
+
+.rightCut {
+  position: absolute;
+  margin-left: 790px;
+  margin-top: 0px;
+  width: 10px;
+  height: 800px;
+  background-color: black;
+}
+
+.centerCut {
+  position: absolute;
+  margin-top: 395px;
+  width: 800px;
+  height: 20px;
+  background-color: black;
+}
+</style>
+
+<body>
+<div class="leftCut"></div>
+<div class="rightCut"></div>
+<div class="centerCut"></div>
+<div class="top"></div>
+<div class="bottom"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-large-offset.html b/layout/reftests/box-shadow/boxshadow-large-offset.html
new file mode 100644
index 0000000000..5df87c368b
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-large-offset.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<style>
+.test {
+  background-color: #fec;
+  display: inline-block;
+  width: 800px;
+  height: 800px;
+}
+
+.second {
+  box-shadow: inset 0 400px 1px 0px red;
+}
+
+.leftCut {
+  position: absolute;
+  margin-left: 0px;
+  margin-top: 0px;
+  width: 10px;
+  height: 800px;
+  background-color: black;
+}
+
+.rightCut {
+  position: absolute;
+  margin-left: 790px;
+  margin-top: 0px;
+  width: 10px;
+  height: 800px;
+  background-color: black;
+}
+
+.centerCut {
+  position: absolute;
+  margin-top: 395px;
+  width: 800px;
+  height: 20px;
+  background-color: black;
+}
+
+</style>
+
+<body>
+<div class="leftCut"></div>
+<div class="rightCut"></div>
+<div class="centerCut"></div>
+<div class="test second"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html b/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html
new file mode 100644
index 0000000000..3b57608a23
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-mixed-2-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<title>Reference, bug 1402060</title>
+<style>
+
+.blackAtTop {
+  width: 100px;
+  height: 90px;
+  border-top: 10px solid black;
+}
+
+.blue {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  margin-left: 10px;
+}
+
+.white {
+  width: 90px;
+  height: 90px;
+  background: white;
+}
+
+</style>
+
+<div class="blackAtTop"><div class="blue"><div class="white"></div></div></div>
diff --git a/layout/reftests/box-shadow/boxshadow-mixed-2.html b/layout/reftests/box-shadow/boxshadow-mixed-2.html
new file mode 100644
index 0000000000..5e109524f1
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-mixed-2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1402060</title>
+<style>
+
+div {
+  width: 100px;
+  height: 100px;
+  box-shadow: inset 0 10px black, 10px 10px blue;
+}
+
+</style>
+
+<div></div>
diff --git a/layout/reftests/box-shadow/boxshadow-mixed-ref.html b/layout/reftests/box-shadow/boxshadow-mixed-ref.html
new file mode 100644
index 0000000000..3c71b12e20
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-mixed-ref.html
@@ -0,0 +1 @@
+<div style="background: blue padding-box; border: 2px solid red; border-radius: 10px; width: 300px; height: 300px; position: absolute; top: 10px; left: 10px;">inset and outset</div><div style="border-radius: 10px; background-color: green; width: 304px; height: 304px; position: absolute; top: 10px; left: 360px;">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-mixed.html b/layout/reftests/box-shadow/boxshadow-mixed.html
new file mode 100644
index 0000000000..796fd409e4
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-mixed.html
@@ -0,0 +1 @@
+<div style="border: 2px red solid; border-radius: 10px; width: 300px; height: 300px; box-shadow: 500px 500px 0px 20px blue inset, 350px 0px green; position: absolute; top: 10px; left: 10px;">inset and outset</div>
diff --git a/layout/reftests/box-shadow/boxshadow-multiple-ref.html b/layout/reftests/box-shadow/boxshadow-multiple-ref.html
new file mode 100644
index 0000000000..9eefe7e746
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-multiple-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  background-color: green;
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 4;
+}
+
+#theshadow {
+  background-color: black;
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 29px;
+  left: 29px;
+  z-index: 1;
+}
+
+#theshadow2 {
+  background-color: blue;
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 26px;
+  left: 26px;
+  z-index: 2;
+}
+
+#theshadow3 {
+  background-color: red;
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 23px;
+  left: 23px;
+  z-index: 3;
+}
+</style>
+
+<div id="theshadow">&nbsp;</div><div id="theshadow2">&nbsp;</div><div id="theshadow3">&nbsp;</div><div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-multiple.html b/layout/reftests/box-shadow/boxshadow-multiple.html
new file mode 100644
index 0000000000..6307c1020d
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-multiple.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  box-shadow: 3px 3px red, 6px 6px blue, 9px 9px black;
+}
+</style>
+
+<div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-onecorner-ref.html b/layout/reftests/box-shadow/boxshadow-onecorner-ref.html
new file mode 100644
index 0000000000..5a92e99517
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-onecorner-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-top-right-radius: 40px; background: red;">&nbsp;</div>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-top-right-radius: 10px; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-onecorner.html b/layout/reftests/box-shadow/boxshadow-onecorner.html
new file mode 100644
index 0000000000..1f0805b3bd
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-onecorner.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-opacity-ref.html b/layout/reftests/box-shadow/boxshadow-opacity-ref.html
new file mode 100644
index 0000000000..4ff7d22395
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-opacity-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  opacity: 0.6;
+  box-shadow: 3px 3px 2px rgb(255,0,0);
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-opacity.html b/layout/reftests/box-shadow/boxshadow-opacity.html
new file mode 100644
index 0000000000..585c3081fd
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-opacity.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  box-shadow: 3px 3px 2px rgba(255,0,0,0.6);
+}
+</style>
+
+<div id="thediv"></div>
diff --git a/layout/reftests/box-shadow/boxshadow-rotated-ref.html b/layout/reftests/box-shadow/boxshadow-rotated-ref.html
new file mode 100644
index 0000000000..9888d71f2b
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rotated-ref.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+<style>
+div.second {
+  margin: 35px auto 95px auto;
+  box-shadow: 0px 0px 15px 0px #808080;
+  width: 100;
+  height: 116.36px;
+}
+</style>
+</head>
+<body>
+<div class="second"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-rotated.html b/layout/reftests/box-shadow/boxshadow-rotated.html
new file mode 100644
index 0000000000..7cc8451f8a
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rotated.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+<style>
+div.first {
+  margin: 35px auto 95px auto;
+  box-shadow: 0px 0px 15px 0px #808080;
+  transform: rotate(-180deg);
+  width: 100;
+  height: 116.36px;
+}
+</style>
+</head>
+<body>
+<div class="first"></div>
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html b/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html
new file mode 100644
index 0000000000..3b2e5a949c
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rounded-spread-ref.html
@@ -0,0 +1 @@
+<div style="width: 300px; height: 300px; border-radius: 100%; position: absolute; top: 20px; left: 20px;">shadow div</div><div style="border-radius: 100%; width: 320px; height: 320px; background-color: grey; position: absolute; top: 330px; left: 30px;">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-rounded-spread.html b/layout/reftests/box-shadow/boxshadow-rounded-spread.html
new file mode 100644
index 0000000000..a43810bca1
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rounded-spread.html
@@ -0,0 +1 @@
+<div style="box-shadow: 20px 320px 0 10px grey; width: 300px; height: 300px; border-radius: 100%; position: absolute; top: 20px; left: 20px;">shadow div</div>
diff --git a/layout/reftests/box-shadow/boxshadow-rounding-ref.html b/layout/reftests/box-shadow/boxshadow-rounding-ref.html
new file mode 100644
index 0000000000..8f785547ad
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rounding-ref.html
@@ -0,0 +1 @@
+<div style="width: 100px; height: 200px; box-shadow: 3px 3px 2px black; background-color: green;">Hello</div>
diff --git a/layout/reftests/box-shadow/boxshadow-rounding.html b/layout/reftests/box-shadow/boxshadow-rounding.html
new file mode 100644
index 0000000000..29d812a2cb
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-rounding.html
@@ -0,0 +1 @@
+<div style="width: 100.2px; height: 200.2px; box-shadow: 3px 3px 2px black; background-color: green;">Hello</div>
diff --git a/layout/reftests/box-shadow/boxshadow-skiprect-ref.html b/layout/reftests/box-shadow/boxshadow-skiprect-ref.html
new file mode 100644
index 0000000000..ecebb4bd6f
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-skiprect-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<style>
+
+#thediv {
+  width: 400px;
+  height: 250px;
+  position: absolute;
+  top: -500px;
+  left: -500px;
+  box-shadow: 540px 540px 10.5px black;
+}
+
+#blankdiv {
+  width: 400px;
+  height: 250px;
+  background-color: white;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+</style>
+
+<div id="thediv">&nbsp;</div> 
+<div id="blankdiv">&nbsp;</div>
diff --git a/layout/reftests/box-shadow/boxshadow-skiprect.html b/layout/reftests/box-shadow/boxshadow-skiprect.html
new file mode 100644
index 0000000000..f888f9d098
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-skiprect.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<style>
+
+#thediv {
+  width: 400px;
+  height: 250px;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  box-shadow: 0px 0px 10.5px black;
+}
+</style>
+
+<div id="thediv">&nbsp;</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-spread-ref.html b/layout/reftests/box-shadow/boxshadow-spread-ref.html
new file mode 100644
index 0000000000..2636adc0b3
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-spread-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  background-color: green;
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 2;
+}
+
+#theshadow {
+  background-color: black;
+  width: 306px;
+  height: 106px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 1;
+}
+</style>
+
+<div id="theshadow">&nbsp;</div><div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-spread.html b/layout/reftests/box-shadow/boxshadow-spread.html
new file mode 100644
index 0000000000..a7c9a8c1df
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-spread.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+body {
+  background-color: green;
+}
+
+#thediv {
+  width: 300px;
+  height: 100px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  color: black;
+  box-shadow: 3px 3px 0px 3px;
+}
+</style>
+<div id="thediv">Foo</div> 
diff --git a/layout/reftests/box-shadow/boxshadow-threecorners-ref.html b/layout/reftests/box-shadow/boxshadow-threecorners-ref.html
new file mode 100644
index 0000000000..cd9f383e1f
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-threecorners-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-bottom-left-radius: 40px; border-top-left-radius: 40px; border-top-right-radius: 40px; background: red;">&nbsp;</div>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-threecorners.html b/layout/reftests/box-shadow/boxshadow-threecorners.html
new file mode 100644
index 0000000000..f00135f959
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-threecorners.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-twocorners-ref.html b/layout/reftests/box-shadow/boxshadow-twocorners-ref.html
new file mode 100644
index 0000000000..bc3263cdb1
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-twocorners-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 300px; left: 70px; width: 360px; height: 160px; border-bottom-left-radius: 40px; border-top-right-radius: 40px; background: red;">&nbsp;</div>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/boxshadow-twocorners.html b/layout/reftests/box-shadow/boxshadow-twocorners.html
new file mode 100644
index 0000000000..e62c316f2b
--- /dev/null
+++ b/layout/reftests/box-shadow/boxshadow-twocorners.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="position: absolute; top: 30px; left: 100px; width: 300px; height: 100px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 300px 0 30px red; background: yellow;">Test</div>
diff --git a/layout/reftests/box-shadow/fieldset-inset-ref.html b/layout/reftests/box-shadow/fieldset-inset-ref.html
new file mode 100644
index 0000000000..6d02c04c8b
--- /dev/null
+++ b/layout/reftests/box-shadow/fieldset-inset-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase #2 for bug 485149</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+
+body {padding:20px;}
+
+field {
+  display:block;
+  overflow:hidden;
+  background:yellow;
+
+  box-shadow: inset 0 0 5px 5px #cccccc; 
+  border:1px solid #000000;
+  border-radius:7px;
+  width:200px;
+  height:50px;
+  margin-left:5px;
+  margin-right:2px;
+  padding:10px;
+  border-box;
+}
+
+.with-legend {
+  margin-top:8px;
+  height:42px;
+}
+
+p { height:40px; margin:0; }
+
+#mask1 {
+ position:absolute;
+ left:0;
+ top:0;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:700px;
+}
+
+#mask2 {
+ position:absolute;
+ left:170px;
+ top:330px;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:300px;
+}
+
+#mask3 {
+ position:absolute;
+ left:0;
+ top:380px;
+ background:black;
+ z-index:1;
+ width:300px;
+ height:300px;
+}
+
+</style>
+</head>
+<body>
+
+<field class="with-legend">
+1
+</field>
+
+<p></p>
+<field class="with-legend" style="position:relative">
+2
+</field>
+
+<p></p>
+<field>
+3
+</field>
+
+<p></p>
+<field class="with-legend" style="border-color:transparent">
+4
+</field>
+
+<div id="mask1"></div>
+<div id="mask2"></div>
+<div id="mask3"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/fieldset-inset.html b/layout/reftests/box-shadow/fieldset-inset.html
new file mode 100644
index 0000000000..d49e2411f9
--- /dev/null
+++ b/layout/reftests/box-shadow/fieldset-inset.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase #2 for bug 485149</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+
+body {padding:20px;}
+
+fieldset {
+  overflow:hidden;
+  background:yellow;
+
+  box-shadow: inset 0 0 5px 5px #cccccc; 
+  border:1px solid #000000;
+  border-radius:7px;
+  width:200px;
+  height:50px;
+  margin-left:5px;
+  margin-right:2px;
+  padding:10px;
+}
+
+legend { height:16px; }
+
+p { height:40px; margin:0; }
+
+#mask1 {
+ position:absolute;
+ left:0;
+ top:0;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:700px;
+}
+
+#mask2 {
+ position:absolute;
+ left:170px;
+ top:330px;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:300px;
+}
+
+#mask3 {
+ position:absolute;
+ left:0;
+ top:380px;
+ background:black;
+ z-index:1;
+ width:300px;
+ height:300px;
+}
+
+</style>
+</head>
+<body>
+
+<fieldset><legend>Legend</legend>
+1
+</fieldset>
+
+<p></p>
+<fieldset style="position:relative;"><legend>Legend</legend>
+2
+</fieldset>
+
+<p></p>
+<fieldset>
+3
+</fieldset>
+
+<p></p>
+<fieldset><legend style="width:150px;"></legend>
+4
+</fieldset>
+
+<div id="mask1"></div>
+<div id="mask2"></div>
+<div id="mask3"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/fieldset-ref.html b/layout/reftests/box-shadow/fieldset-ref.html
new file mode 100644
index 0000000000..9196d50636
--- /dev/null
+++ b/layout/reftests/box-shadow/fieldset-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 485149</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+
+body {padding:20px;}
+
+field {
+  display:block;
+  overflow:hidden;
+  background:yellow;
+
+  box-shadow:0 0 5px 5px #cccccc; 
+  border:1px solid #000000;
+  border-radius:7px;
+  width:200px;
+  height:50px;
+  margin-left:5px;
+  margin-right:2px;
+  padding:10px;
+  border-box;
+}
+
+.with-legend {
+  margin-top:8px;
+  height:42px;
+}
+
+p { height:40px; margin:0; }
+
+#mask1 {
+ position:absolute;
+ left:0;
+ top:0;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:700px;
+}
+
+#mask2 {
+ position:absolute;
+ left:170px;
+ top:330px;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:300px;
+}
+
+#mask3 {
+ position:absolute;
+ left:0;
+ top:380px;
+ background:black;
+ z-index:1;
+ width:300px;
+ height:300px;
+}
+
+</style>
+</head>
+<body>
+
+<field class="with-legend">
+1
+</field>
+
+<p></p>
+<field class="with-legend" style="position:relative">
+2
+</field>
+
+<p></p>
+<field>
+3
+</field>
+
+<p></p>
+<field class="with-legend" style="border-color:transparent">
+4
+</field>
+
+<div id="mask1"></div>
+<div id="mask2"></div>
+<div id="mask3"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/fieldset.html b/layout/reftests/box-shadow/fieldset.html
new file mode 100644
index 0000000000..581633f54b
--- /dev/null
+++ b/layout/reftests/box-shadow/fieldset.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 485149</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+
+body {padding:20px;}
+
+fieldset {
+  overflow:hidden;
+  background:yellow;
+
+  box-shadow:0 0 5px 5px #cccccc; 
+  border:1px solid #000000;
+  border-radius:7px;
+  width:200px;
+  height:50px;
+  margin-left:5px;
+  margin-right:2px;
+  padding:10px;
+}
+
+legend { height:16px; }
+
+p { height:40px; margin:0; }
+
+#mask1 {
+ position:absolute;
+ left:0;
+ top:0;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:700px;
+}
+
+#mask2 {
+ position:absolute;
+ left:170px;
+ top:330px;
+ background:black;
+ z-index:1;
+ width:150px;
+ height:300px;
+}
+
+#mask3 {
+ position:absolute;
+ left:0;
+ top:380px;
+ background:black;
+ z-index:1;
+ width:300px;
+ height:300px;
+}
+
+</style>
+</head>
+<body>
+
+<fieldset><legend>Legend</legend>
+1
+</fieldset>
+
+<p></p>
+<fieldset style="position:relative;"><legend>Legend</legend>
+2
+</fieldset>
+
+<p></p>
+<fieldset>
+3
+</fieldset>
+
+<p></p>
+<fieldset><legend style="width:150px;"></legend>
+4
+</fieldset>
+
+<div id="mask1"></div>
+<div id="mask2"></div>
+<div id="mask3"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html
new file mode 100644
index 0000000000..89906bb1c0
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+  height: 200px; width: 200px; overflow: hidden;
+  font-size: 50px;
+}
+span {
+  box-shadow: 210px 210px 2px gray;
+
+  /* work around potential font overflow */
+  margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html
new file mode 100644
index 0000000000..03d34afd9f
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-1-ref2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+  height: 200px; width: 200px;
+  font-size: 50px;
+}
+
+span {
+  /* work around potential font overflow */
+  margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-1.html b/layout/reftests/box-shadow/overflow-not-scrollable-1.html
new file mode 100644
index 0000000000..94a4b7fe07
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+  height: 200px; width: 200px; overflow: auto;
+  font-size: 50px;
+}
+span {
+  box-shadow: 210px 210px 2px gray;
+
+  /* work around potential font overflow */
+  margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html b/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html
new file mode 100644
index 0000000000..8bac681910
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+  height: 200px; width: 200px; overflow: hidden;
+  font-size: 50px;
+  font-weight: bold;
+}
+span {
+  box-shadow: 100px 100px 30px black;
+
+  /* work around potential font overflow */
+  margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/overflow-not-scrollable-2.html b/layout/reftests/box-shadow/overflow-not-scrollable-2.html
new file mode 100644
index 0000000000..66dba48daf
--- /dev/null
+++ b/layout/reftests/box-shadow/overflow-not-scrollable-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+  height: 200px; width: 200px; overflow: auto;
+  font-size: 50px;
+  font-weight: bold;
+}
+span {
+  box-shadow: 100px 100px 30px black;
+
+  /* work around potential font overflow */
+  margin-left: 5px;
+}
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/layout/reftests/box-shadow/reftest.list b/layout/reftests/box-shadow/reftest.list
new file mode 100644
index 0000000000..f6e57a1591
--- /dev/null
+++ b/layout/reftests/box-shadow/reftest.list
@@ -0,0 +1,48 @@
+== boxshadow-basic.html boxshadow-basic-ref.html
+!= boxshadow-blur.html boxshadow-blur-notref.html
+!= boxshadow-blur.html boxshadow-blur-notref2.html
+random == boxshadow-blur-2.html boxshadow-blur-2-ref.html # fixedpoint division in blur code makes this fail
+random != boxshadow-blur-2.html boxshadow-blur-2-notref.html # fixedpoint division in blur code makes this fail
+== boxshadow-multiple.html boxshadow-multiple-ref.html
+== boxshadow-spread.html boxshadow-spread-ref.html
+== tableboxshadow-basic.html tableboxshadow-basic-ref.html
+== tableboxshadow-trshadow.html tableboxshadow-trshadow-ref.html
+== tableboxshadow-tdshadow.html tableboxshadow-tdshadow-ref.html
+== boxshadow-rounding.html boxshadow-rounding-ref.html
+# One uses old path, one uses WR box shadow.
+== boxshadow-button.html boxshadow-button-ref.html
+fuzzy-if(OSX==1010,0-1,0-24) fuzzy-if(d2d,0-16,0-999) fuzzy-if(skiaContent,0-14,0-179) fuzzy-if(webrender&&swgl,1-1,714-714) == boxshadow-large-border-radius.html boxshadow-large-border-radius-ref.html # Bug 1209649
+
+== boxshadow-fileupload.html boxshadow-fileupload-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-98,0-152) fuzzy-if(skiaContent,0-13,0-28) fuzzy-if(webrender,19-19,47-47) == boxshadow-inner-basic.html boxshadow-inner-basic-ref.svg
+fuzzy-if(skiaContent,0-1,0-18) random-if(layersGPUAccelerated) == boxshadow-mixed.html boxshadow-mixed-ref.html
+fuzzy-if(skiaContent,0-1,0-17) == boxshadow-mixed-2.html boxshadow-mixed-2-ref.html
+random-if(d2d) fuzzy-if(skiaContent,0-1,0-212) fuzzy-if(webrender,0-127,0-3528) == boxshadow-rounded-spread.html boxshadow-rounded-spread-ref.html
+fuzzy-if(skiaContent,0-1,0-50) == chrome://reftest/content/box-shadow/boxshadow-dynamic.xhtml chrome://reftest/content/box-shadow/boxshadow-dynamic-ref.xhtml
+random-if(d2d) fuzzy-if(skiaContent,0-1,0-14) == boxshadow-onecorner.html boxshadow-onecorner-ref.html
+random-if(d2d) fuzzy-if(skiaContent,0-1,0-22) == boxshadow-twocorners.html boxshadow-twocorners-ref.html
+random-if(d2d) fuzzy-if(skiaContent,0-1,0-36) == boxshadow-threecorners.html boxshadow-threecorners-ref.html
+fuzzy(0-2,0-440) == boxshadow-skiprect.html boxshadow-skiprect-ref.html
+== boxshadow-opacity.html boxshadow-opacity-ref.html
+== boxshadow-color-rounding.html boxshadow-color-rounding-ref.html
+== boxshadow-color-rounding-middle.html boxshadow-color-rounding-middle-ref.html
+fuzzy(0-3,0-500) fuzzy-if(d2d,0-2,0-1080) fuzzy-if(webrender&&swgl,1-1,1000-1000) == boxshadow-border-radius-int.html boxshadow-border-radius-int-ref.html
+== boxshadow-inset-neg-spread.html about:blank
+== boxshadow-inset-neg-spread2.html boxshadow-inset-neg-spread2-ref.html
+fuzzy(0-26,0-3610) fuzzy-if(d2d,0-26,0-5910) fuzzy-if(webrender,4-6,4172-4350) == boxshadow-rotated.html boxshadow-rotated-ref.html # Bug 1211264
+== boxshadow-inset-large-border-radius.html boxshadow-inset-large-border-radius-ref.html
+
+# fuzzy due to blur going inside, but as long as it's essentially black instead of a light gray its ok.
+fuzzy(0-13,0-9445) fuzzy-if(d2d,0-13,0-10926) fuzzy-if(webrender,14-15,10967-13267) == boxshadow-inset-large-offset.html boxshadow-inset-large-offset-ref.html
+
+== overflow-not-scrollable-1.html overflow-not-scrollable-1-ref.html
+== overflow-not-scrollable-1.html overflow-not-scrollable-1-ref2.html
+== overflow-not-scrollable-2.html overflow-not-scrollable-2-ref.html
+fuzzy-if(webrender,0-1,0-655) == 611574-1.html 611574-1-ref.html
+fuzzy-if(webrender,0-4,0-144) == 611574-2.html 611574-2-ref.html
+fuzzy-if(winWidget,0-5,0-30) fuzzy-if(skiaContent,0-16,0-10) == fieldset.html fieldset-ref.html # minor anti-aliasing problem on Windows
+fuzzy-if(winWidget,0-5,0-30) fuzzy-if(skiaContent,0-16,0-10) fails-if(webrender) == fieldset-inset.html fieldset-inset-ref.html # minor anti-aliasing problem on Windows
+== 1178575.html 1178575-ref.html
+== 1178575-2.html 1178575-2-ref.html
+fuzzy(0-159,0-2) fails-if(!dwrite) == 1212823-1.html 1212823-1-ref.html
+== boxshadow-large-offset.html boxshadow-large-offset-ref.html
diff --git a/layout/reftests/box-shadow/tableboxshadow-basic-ref.html b/layout/reftests/box-shadow/tableboxshadow-basic-ref.html
new file mode 100644
index 0000000000..6a797820a2
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-basic-ref.html
@@ -0,0 +1 @@
+<div style="position: absolute; top: 33px; left: 33px; height: 300px; width: 600px; background-color: black;">s</div><table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-basic.html b/layout/reftests/box-shadow/tableboxshadow-basic.html
new file mode 100644
index 0000000000..4601d636a8
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-basic.html
@@ -0,0 +1 @@
+<table border="0" cellpadding="0" cellspacing="0" style="box-shadow: 3px 3px black; position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html b/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html
new file mode 100644
index 0000000000..972d315ed5
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-tdshadow-ref.html
@@ -0,0 +1,5 @@
+<div style="width: 300px; height: 300px; position: absolute; top: 56px; left: 56px; background-color: rgba(0, 0, 0, 0.4);">s</div>
+
+<div style="width: 300px; height: 300px; position: absolute; top: 56px; left: 376px; background-color: rgba(0, 0, 0, 0.4);">s</div>
+
+<table border="0" cellpadding="0" cellspacing="20" style="position: absolute; top: 30px; left: 30px;"><tr><td style="background-color: green; width: 300px; height: 300px;">s</td><td style="background-color: green; width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-tdshadow.html b/layout/reftests/box-shadow/tableboxshadow-tdshadow.html
new file mode 100644
index 0000000000..bc7abb8f0a
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-tdshadow.html
@@ -0,0 +1 @@
+<table border="0" cellpadding="0" cellspacing="20" style="position: absolute; top: 30px; left: 30px;"><tr><td style="background-color: green; box-shadow: 6px 6px rgba(0, 0, 0, 0.4); width: 300px; height: 300px;">s</td><td style="background-color: green; box-shadow: 6px 6px rgba(0, 0, 0, 0.4); width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html b/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html
new file mode 100644
index 0000000000..d337519480
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-trshadow-ref.html
@@ -0,0 +1,5 @@
+<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 330px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table>
+
+<div style="position: absolute; top: 33px; left: 33px; height: 300px; width: 600px; background-color: black;">s</div>
+
+<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr></table>
diff --git a/layout/reftests/box-shadow/tableboxshadow-trshadow.html b/layout/reftests/box-shadow/tableboxshadow-trshadow.html
new file mode 100644
index 0000000000..c928402122
--- /dev/null
+++ b/layout/reftests/box-shadow/tableboxshadow-trshadow.html
@@ -0,0 +1 @@
+<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; top: 30px; left: 30px; background-color: green;"><tr style="box-shadow: 3px 3px black;"><td style="width: 300px; height: 300px;">s</td><td style="width: 300px; height: 300px;">s</td></tr><tr><td style="width: 300px; height: 300px;">s</td><td>s</td></tr></table>
diff --git a/layout/reftests/box-sizing/computed-size-reporting-ref.html b/layout/reftests/box-sizing/computed-size-reporting-ref.html
new file mode 100644
index 0000000000..f910417e59
--- /dev/null
+++ b/layout/reftests/box-sizing/computed-size-reporting-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Bug 520992</title>
+
+<style>
+  #borderBox {
+    background:gold;
+    height:100px;
+    box-sizing:border-box;
+  }
+
+</style>
+
+<div id="borderBox"></div>
+<p id="heightWidth1"></p>
+
+<script>
+  var divs = document.getElementsByTagName("div");
+  var textEle1 = document.getElementById("heightWidth1");
+  textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
+  textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
+</script>
diff --git a/layout/reftests/box-sizing/computed-size-reporting.html b/layout/reftests/box-sizing/computed-size-reporting.html
new file mode 100644
index 0000000000..227ea2cfbd
--- /dev/null
+++ b/layout/reftests/box-sizing/computed-size-reporting.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Bug 520992</title>
+
+<style>
+  #borderBox {
+    background:gold;
+    height:100px;
+    box-sizing:border-box;
+    border: 20px solid gold;
+  }
+
+</style>
+
+<div id="borderBox"></div>
+<p id="heightWidth1"></p>
+
+<script>
+  var divs = document.getElementsByTagName("div");
+  var textEle1 = document.getElementById("heightWidth1");
+  textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
+  textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
+</script>
diff --git a/layout/reftests/box-sizing/html-hr-1-ref.html b/layout/reftests/box-sizing/html-hr-1-ref.html
new file mode 100644
index 0000000000..4108e13172
--- /dev/null
+++ b/layout/reftests/box-sizing/html-hr-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <div style="border: 1px solid black; background-color: blue; height: 10px;"></div>
+</body>
diff --git a/layout/reftests/box-sizing/html-hr-1.html b/layout/reftests/box-sizing/html-hr-1.html
new file mode 100644
index 0000000000..774510735e
--- /dev/null
+++ b/layout/reftests/box-sizing/html-hr-1.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+  <hr style="border: 1px solid black; background-color: blue; height: 10px;">
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1-ref.html b/layout/reftests/box-sizing/intrinsic-1-ref.html
new file mode 100644
index 0000000000..d808239f2b
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue; width: 200px;
+              height: 200px">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1a.html b/layout/reftests/box-sizing/intrinsic-1a.html
new file mode 100644
index 0000000000..2a678176dd
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1a.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue">
+    <img src="lime100x100.png"
+         style="height: 200px; display: block; visibility: hidden;
+                padding: 30px;
+                box-sizing: border-box;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1b.html b/layout/reftests/box-sizing/intrinsic-1b.html
new file mode 100644
index 0000000000..0bb5af75f3
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1b.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue; height: 200px">
+    <img src="lime100x100.png"
+         style="height: 200px; display: block; visibility: hidden;
+                padding: 15% 30px;
+                box-sizing: border-box;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1c.html b/layout/reftests/box-sizing/intrinsic-1c.html
new file mode 100644
index 0000000000..43febc053e
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1c.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue">
+    <img src="lime100x100.png"
+         style="height: 200px; display: block; visibility: hidden;
+                padding: 30px; border: 20px solid;
+                box-sizing: border-box;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1d.html b/layout/reftests/box-sizing/intrinsic-1d.html
new file mode 100644
index 0000000000..08a982ff0c
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1d.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue; height: 200px">
+    <img src="lime100x100.png"
+         style="height: 200px; display: block; visibility: hidden;
+                padding: calc(15%) 30px;
+                box-sizing: border-box;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1e.html b/layout/reftests/box-sizing/intrinsic-1e.html
new file mode 100644
index 0000000000..c27cab66a1
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1e.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue; height: 200px">
+    <img src="lime100x100.png"
+         style="height: 200px; display: block; visibility: hidden;
+                padding: calc(10% + 10px) 30px;
+                box-sizing: border-box;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1f.html b/layout/reftests/box-sizing/intrinsic-1f.html
new file mode 100644
index 0000000000..a273761ab5
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1f.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue">
+    <img src="lime100x100.png"
+         style="height: 200px; display: block; visibility: hidden;
+                padding: calc(30px);
+                box-sizing: border-box;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1g.html b/layout/reftests/box-sizing/intrinsic-1g.html
new file mode 100644
index 0000000000..272d76720e
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1g.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              box-sizing: border-box; height: 200px;
+              border: 40px transparent solid">
+    <img src="lime100x100.png"
+         style="height: 100%; display: block; visibility: hidden;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1h.html b/layout/reftests/box-sizing/intrinsic-1h.html
new file mode 100644
index 0000000000..55663f1636
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1h.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              height: 120px;
+              border: 40px transparent solid">
+    <img src="lime100x100.png"
+         style="height: 100%; display: block; visibility: hidden;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1i.html b/layout/reftests/box-sizing/intrinsic-1i.html
new file mode 100644
index 0000000000..6d46b3d488
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1i.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              box-sizing: border-box; height: 200px;
+              border: 25px transparent solid">
+    <div style="height: 100%; box-sizing: border-box;
+                border: 15px transparent solid;">
+         <img src="lime100x100.png"
+              style="height: 100%; display: block; visibility: hidden;">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1j.html b/layout/reftests/box-sizing/intrinsic-1j.html
new file mode 100644
index 0000000000..ca398338ab
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1j.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              box-sizing: border-box; height: 200px;
+              border: 40px transparent solid">
+    <!-- We need to be taller than intrinsic height, so use a min-height -->
+    <img src="lime100x100.png"
+         style="min-height: 100%; display: block; visibility: hidden;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1k.html b/layout/reftests/box-sizing/intrinsic-1k.html
new file mode 100644
index 0000000000..8ebaa24b91
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1k.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              height: 120px;
+              border: 40px transparent solid">
+    <!-- We need to be taller than intrinsic height, so use a min-height -->
+    <img src="lime100x100.png"
+         style="min-height: 100%; display: block; visibility: hidden;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1l.html b/layout/reftests/box-sizing/intrinsic-1l.html
new file mode 100644
index 0000000000..38f4cef8b7
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1l.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              box-sizing: border-box; height: 200px;
+              border: 25px transparent solid">
+    <div style="height: 100%; box-sizing: border-box;
+                border: 15px transparent solid;">
+      <!-- We need to be taller than intrinsic height, so use a min-height -->
+      <img src="lime100x100.png"
+           style="min-height: 100%; display: block; visibility: hidden;">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1m.html b/layout/reftests/box-sizing/intrinsic-1m.html
new file mode 100644
index 0000000000..09dbc75bb9
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1m.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              box-sizing: border-box; height: 200px;
+              border: 80px transparent solid">
+    <!-- We need to be shorter than intrinsic height, so use a max-height -->
+    <img src="lime100x100.png"
+         style="max-height: 100%; display: block; visibility: hidden;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1n.html b/layout/reftests/box-sizing/intrinsic-1n.html
new file mode 100644
index 0000000000..5328e03ab6
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1n.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              height: 40px;
+              border: 80px transparent solid">
+    <!-- We need to be shorter than intrinsic height, so use a max-height -->
+    <img src="lime100x100.png"
+         style="max-height: 100%; display: block; visibility: hidden;">
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/intrinsic-1o.html b/layout/reftests/box-sizing/intrinsic-1o.html
new file mode 100644
index 0000000000..a463307057
--- /dev/null
+++ b/layout/reftests/box-sizing/intrinsic-1o.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<body>
+  <div style="display: inline-block; background: blue;
+              box-sizing: border-box; height: 200px;
+              border: 50px transparent solid">
+    <div style="height: 100%; box-sizing: border-box;
+                border: 30px transparent solid;">
+      <!-- We need to be shorter than intrinsic height, so use a max-height -->
+      <img src="lime100x100.png"
+           style="max-height: 100%; display: block; visibility: hidden;">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/box-sizing/lime100x100.png b/layout/reftests/box-sizing/lime100x100.png
new file mode 100644
index 0000000000..c9bb375943
--- /dev/null
+++ b/layout/reftests/box-sizing/lime100x100.png
diff --git a/layout/reftests/box-sizing/reftest.list b/layout/reftests/box-sizing/reftest.list
new file mode 100644
index 0000000000..ca4b191018
--- /dev/null
+++ b/layout/reftests/box-sizing/reftest.list
@@ -0,0 +1,19 @@
+== intrinsic-1a.html intrinsic-1-ref.html
+== intrinsic-1b.html intrinsic-1-ref.html
+== intrinsic-1c.html intrinsic-1-ref.html
+== intrinsic-1d.html intrinsic-1-ref.html
+== intrinsic-1e.html intrinsic-1-ref.html
+== intrinsic-1f.html intrinsic-1-ref.html
+== intrinsic-1g.html intrinsic-1-ref.html
+== intrinsic-1h.html intrinsic-1-ref.html
+== intrinsic-1i.html intrinsic-1-ref.html
+== intrinsic-1j.html intrinsic-1-ref.html
+== intrinsic-1k.html intrinsic-1-ref.html
+== intrinsic-1l.html intrinsic-1-ref.html
+== intrinsic-1m.html intrinsic-1-ref.html
+== intrinsic-1n.html intrinsic-1-ref.html
+== intrinsic-1o.html intrinsic-1-ref.html
+== computed-size-reporting.html computed-size-reporting-ref.html
+
+== html-hr-1.html html-hr-1-ref.html
+
diff --git a/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html b/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html
new file mode 100644
index 0000000000..d6b51e60bf
--- /dev/null
+++ b/layout/reftests/box/box-as-grid-or-flex-item-1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>Reference for bug 1580302</title>
+<style>
+  .grid, .flex {
+    width: 60px;
+    height: 60px;
+    border: 1px solid black;
+  }
+  .grid { display: grid; }
+  .flex { display: flex; }
+  .fCol { flex-direction: column; }
+
+  .item {
+    background: lightblue;
+  }
+  .flexible {
+    flex: 1;
+  }
+</style>
+<body>
+  <!-- The item should fill the grid here (by virtue of the default-stretchy
+       behavior of justify-items and align-items): -->
+  <div class="grid">
+    <div class="item">e</div>
+  </div>
+
+  <!-- For the rest, the item should fill the flex container in the cross axis,
+       and if it's flexible, also fill the container in the main axis. -->
+  <div class="flex">
+    <div class="item">e</div>
+  </div>
+  <div class="flex">
+    <div class="item flexible">e</div>
+  </div>
+  <div class="flex fCol">
+    <div class="item">e</div>
+  </div>
+  <div class="flex fCol">
+    <div class="item flexible">e</div>
+  </div>
+</body>
diff --git a/layout/reftests/box/box-as-grid-or-flex-item-1.html b/layout/reftests/box/box-as-grid-or-flex-item-1.html
new file mode 100644
index 0000000000..6eacbd94a3
--- /dev/null
+++ b/layout/reftests/box/box-as-grid-or-flex-item-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>Test for bug 1580302</title>
+<style>
+  .grid, .flex {
+    width: 60px;
+    height: 60px;
+    border: 1px solid black;
+  }
+  .grid { display: grid; }
+  .flex { display: flex; }
+  .fCol { flex-direction: column; }
+
+  .item {
+    display: -moz-box;
+    background: lightblue;
+  }
+  .flexible {
+    flex: 1;
+  }
+</style>
+<body>
+  <!-- The item should fill the grid here (by virtue of justify-items/align-items
+       default behavior): -->
+  <div class="grid">
+    <div class="item">e</div>
+  </div>
+
+  <!-- For the rest, the item should fill the flex container in the cross axis,
+       and if it's flexible, also fill the container in the main axis. -->
+  <div class="flex">
+    <div class="item">e</div>
+  </div>
+  <div class="flex">
+    <div class="item flexible">e</div>
+  </div>
+  <div class="flex fCol">
+    <div class="item">e</div>
+  </div>
+  <div class="flex fCol">
+    <div class="item flexible">e</div>
+  </div>
+</body>
diff --git a/layout/reftests/box/flexbox-abspos-container-1-ref.html b/layout/reftests/box/flexbox-abspos-container-1-ref.html
new file mode 100644
index 0000000000..fbeaabf32a
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1-ref.html
@@ -0,0 +1,27 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 20px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="relpos_parent">
+      <div class="abspos_child"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-1a.html b/layout/reftests/box/flexbox-abspos-container-1a.html
new file mode 100644
index 0000000000..1f6ee21a70
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1a.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase has a relatively-positioned -moz-box element, which should
+     form a containing block for its absolutely positioned child. -->
+<html>
+  <head>
+    <style>
+      .box { display: -moz-box }
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 20px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box relpos_parent">
+      <div class="abspos_child"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-1b.html b/layout/reftests/box/flexbox-abspos-container-1b.html
new file mode 100644
index 0000000000..b19072382a
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1b.html
@@ -0,0 +1,29 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase is the same as the -1a version, but with -moz-inline-box. -->
+<html>
+  <head>
+    <style>
+      .box { display: -moz-inline-box }
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 20px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box relpos_parent">
+      <div class="abspos_child"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-1c.html b/layout/reftests/box/flexbox-abspos-container-1c.html
new file mode 100644
index 0000000000..553c9fc1b7
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1c.html
@@ -0,0 +1,33 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase is the same as the -1a version, but with an additional
+     -moz-box wrapper, so that our relatively positioned box will never get a
+     call to Reflow. -->
+<html>
+  <head>
+    <style>
+      .box { display: -moz-box }
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 20px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <div class="box relpos_parent">
+        <div class="abspos_child"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-1d.html b/layout/reftests/box/flexbox-abspos-container-1d.html
new file mode 100644
index 0000000000..78bb84fa75
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-1d.html
@@ -0,0 +1,31 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase is the same as the -1c version, but with -moz-inline-box. -->
+<html>
+  <head>
+    <style>
+      .box { display: -moz-inline-box }
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 20px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <div class="box relpos_parent">
+        <div class="abspos_child"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-2-ref.html b/layout/reftests/box/flexbox-abspos-container-2-ref.html
new file mode 100644
index 0000000000..d3ef611887
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-2-ref.html
@@ -0,0 +1,27 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        top: 10px;
+        width: 20px;
+        height: 150px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="relpos_parent">
+      <div class="abspos_child"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-abspos-container-2.html b/layout/reftests/box/flexbox-abspos-container-2.html
new file mode 100644
index 0000000000..aa3013f534
--- /dev/null
+++ b/layout/reftests/box/flexbox-abspos-container-2.html
@@ -0,0 +1,31 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase has a relatively-positioned -moz-box element, which should
+     form a containing block for its absolutely positioned child. Also: in
+     this case, the child is taller than its container. -->
+<html>
+  <head>
+    <style>
+      .box { display: -moz-box }
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        top: 10px;
+        width: 20px;
+        height: 150px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box relpos_parent">
+      <div class="abspos_child"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml
new file mode 100644
index 0000000000..31c6535877
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-box-horizontal-ref.xhtml
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+  display: -moz-box;
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+}
+
+body > div {
+  display: -moz-box;
+  background: yellow;
+  -moz-box-flex: 1;
+  -moz-box-orient: horizontal;
+}
+
+div > div {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  border: 1px solid blue;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+  <div>width</div>
+  <div>height</div>
+  <div>minwidth</div>
+  <div>minheight</div>
+  <div>maxwidth</div>
+  <div>maxheight</div>
+  <div>flex</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml b/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml
new file mode 100644
index 0000000000..3a4badf609
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-box-horizontal.xhtml
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+  display: -moz-box;
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+}
+
+body > div {
+  display: -moz-box;
+  background: yellow;
+  -moz-box-flex: 1;
+  -moz-box-orient: horizontal;
+}
+
+div > div {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  border: 1px solid blue;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+  <div width="100">width</div>
+  <div height="100">height</div>
+  <div minwidth="100">minwidth</div>
+  <div minheight="100">minheight</div>
+  <div maxwidth="50">maxwidth</div>
+  <div maxheight="15">maxheight</div>
+  <div flex="100">flex</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml
new file mode 100644
index 0000000000..efd3620f4b
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-box-vertical-ref.xhtml
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+  display: -moz-box;
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+}
+
+body > div {
+  display: -moz-box;
+  background: yellow;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
+}
+
+div > div {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  border: 1px solid blue;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+  <div>width</div>
+  <div>height</div>
+  <div>minwidth</div>
+  <div>minheight</div>
+  <div>maxwidth</div>
+  <div>maxheight</div>
+  <div>flex</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml b/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml
new file mode 100644
index 0000000000..4f12b9a619
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-box-vertical.xhtml
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+  display: -moz-box;
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+}
+
+body > div {
+  display: -moz-box;
+  background: yellow;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
+}
+
+div > div {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  border: 1px solid blue;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+  <div width="100">width</div>
+  <div height="100">height</div>
+  <div minwidth="100">minwidth</div>
+  <div minheight="100">minheight</div>
+  <div maxwidth="50">maxwidth</div>
+  <div maxheight="15">maxheight</div>
+  <div flex="100">flex</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml
new file mode 100644
index 0000000000..df80af2652
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-input-horizontal-ref.xhtml
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+  display: -moz-box;
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+  pointer-events: none;
+}
+
+body > div {
+  display: -moz-box;
+  background: yellow;
+  -moz-box-flex: 1;
+  -moz-box-orient: horizontal;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+  <input type="text" value="width" />
+  <input type="text" value="height" />
+  <input type="text" value="minwidth" />
+  <input type="text" value="minheight" />
+  <input type="text" value="maxwidth" />
+  <input type="text" value="maxheight" />
+  <input type="text" value="flex" />
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml b/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml
new file mode 100644
index 0000000000..f0dcc5f386
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-input-horizontal.xhtml
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+  display: -moz-box;
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+  /* Disable pointer-events so we don't get weird hover artifacts */
+  pointer-events: none;
+}
+
+body > div {
+  display: -moz-box;
+  background: yellow;
+  -moz-box-flex: 1;
+  -moz-box-orient: horizontal;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+  <input type="text" width="100" value="width" />
+  <input type="text" height="100" value="height" />
+  <input type="text" minwidth="100" value="minwidth" />
+  <input type="text" minheight="100" value="minheight" />
+  <input type="text" maxwidth="50" value="maxwidth" />
+  <input type="text" maxheight="15" value="maxheight" />
+  <input type="text" flex="100" value="flex" />
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml b/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml
new file mode 100644
index 0000000000..f2192922ed
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-input-vertical-ref.xhtml
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+  display: -moz-box;
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+}
+
+body > div {
+  display: -moz-box;
+  background: yellow;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+  <input type="text" value="width" />
+  <input type="text" value="height" />
+  <input type="text" value="minwidth" />
+  <input type="text" value="minheight" />
+  <input type="text" value="maxwidth" />
+  <input type="text" value="maxheight" />
+  <input type="text" value="flex" />
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml b/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml
new file mode 100644
index 0000000000..a2a5d3805d
--- /dev/null
+++ b/layout/reftests/box/flexbox-attributes-no-input-vertical.xhtml
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Test that XUL attributes are not supported on non-XUL elements</title>
+<style type="text/css">
+<![CDATA[
+
+html, body {
+  display: -moz-box;
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+}
+
+body > div {
+  display: -moz-box;
+  background: yellow;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
+}
+
+]]>
+</style>
+</head>
+<body>
+<div>
+  <input type="text" width="100" value="width" />
+  <input type="text" height="100" value="height" />
+  <input type="text" minwidth="100" value="minwidth" />
+  <input type="text" minheight="100" value="minheight" />
+  <input type="text" maxwidth="50" value="maxwidth" />
+  <input type="text" maxheight="5" value="maxheight" />
+  <input type="text" flex="100" value="flex" />
+</div>
+</body>
+</html>
diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html b/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html
new file mode 100644
index 0000000000..8e62ec1815
--- /dev/null
+++ b/layout/reftests/box/flexbox-child-is-abspos-container-1-ref.html
@@ -0,0 +1,29 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 20px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div class="relpos_parent">
+        <div class="abspos_child"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-1.html b/layout/reftests/box/flexbox-child-is-abspos-container-1.html
new file mode 100644
index 0000000000..c5892758dc
--- /dev/null
+++ b/layout/reftests/box/flexbox-child-is-abspos-container-1.html
@@ -0,0 +1,32 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase has a -moz-box element with a block as its only child, which
+     forms a containing block for an absolutely positioned grandchild. -->
+<html>
+  <head>
+    <style>
+      .box { display: -moz-box }
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 20px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <div class="relpos_parent">
+        <div class="abspos_child"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html b/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html
new file mode 100644
index 0000000000..de5abf137d
--- /dev/null
+++ b/layout/reftests/box/flexbox-child-is-abspos-container-2-ref.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      body { margin-top: 50px }
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 130px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div class="relpos_parent">
+        <div class="abspos_child"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/flexbox-child-is-abspos-container-2.html b/layout/reftests/box/flexbox-child-is-abspos-container-2.html
new file mode 100644
index 0000000000..dad64a1579
--- /dev/null
+++ b/layout/reftests/box/flexbox-child-is-abspos-container-2.html
@@ -0,0 +1,34 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!-- This testcase has a -moz-box element with a block as its only child, which
+     forms a containing block for an absolutely positioned grandchild. Also, in
+     this case, the grandchild is taller than its parent and grandparent. -->
+<html>
+  <head>
+    <style>
+      body { margin-top: 50px }
+      .box { display: -moz-box }
+      .relpos_parent {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        background: lightblue;
+      }
+      .abspos_child {
+        position: absolute;
+        left: 30px;
+        bottom: 10px;
+        width: 20px;
+        height: 130px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <div class="relpos_parent">
+        <div class="abspos_child"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/box/reftest.list b/layout/reftests/box/reftest.list
new file mode 100644
index 0000000000..2e710e9ab5
--- /dev/null
+++ b/layout/reftests/box/reftest.list
@@ -0,0 +1,13 @@
+test-pref(layout.css.xul-box-display-values.content.enabled,true) == box-as-grid-or-flex-item-1.html box-as-grid-or-flex-item-1-ref.html
+
+== flexbox-abspos-container-1a.html flexbox-abspos-container-1-ref.html
+== flexbox-abspos-container-1b.html flexbox-abspos-container-1-ref.html
+== flexbox-abspos-container-1c.html flexbox-abspos-container-1-ref.html
+== flexbox-abspos-container-1d.html flexbox-abspos-container-1-ref.html
+== flexbox-abspos-container-2.html  flexbox-abspos-container-2-ref.html
+== flexbox-attributes-no-box-horizontal.xhtml flexbox-attributes-no-box-horizontal-ref.xhtml
+== flexbox-attributes-no-box-vertical.xhtml flexbox-attributes-no-box-vertical-ref.xhtml
+== flexbox-attributes-no-input-horizontal.xhtml flexbox-attributes-no-input-horizontal-ref.xhtml
+== flexbox-attributes-no-input-vertical.xhtml flexbox-attributes-no-input-vertical-ref.xhtml
+== flexbox-child-is-abspos-container-1.html flexbox-child-is-abspos-container-1-ref.html
+== flexbox-child-is-abspos-container-2.html flexbox-child-is-abspos-container-2-ref.html
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-28 14:29:10 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-28 14:29:10 +0000
commit	2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
tree	b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/box
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip