summaryrefslogtreecommitdiffstats
path: root/layout/reftests/position-dynamic-changes
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/position-dynamic-changes
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/position-dynamic-changes')
-rw-r--r--layout/reftests/position-dynamic-changes/handleprop.js10
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/animate.js60
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthA-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthN-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthN-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightA-2.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightN-2.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthN-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftA-widthA-rightN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftA-widthA-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-2-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-2.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-2-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-2.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthN-rightA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/leftN-widthN-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/reftest.list18
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/reftest_border_abspos.list25
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/reftest_border_parent.list26
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/reftest_margin_abspos.list26
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/reftest_margin_parent.list26
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/reftest_padding_abspos.list26
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/reftest_padding_parent.list26
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/reftest_plain.list26
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/style.css20
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthA-rightN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthA-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-2-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-2.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-2-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-2.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthN-rightA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthN-rightA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/max-width-ref.html10
-rw-r--r--layout/reftests/position-dynamic-changes/max-width.html17
-rw-r--r--layout/reftests/position-dynamic-changes/min-width-ref.html13
-rw-r--r--layout/reftests/position-dynamic-changes/min-width.html20
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionA-ref.html21
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionA.html38
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionN-ref.html21
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionN.html38
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest.list18
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_border_abspos.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_border_parent.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_margin_abspos.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_margin_parent.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_padding_abspos.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_padding_parent.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_plain.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed-abspos-root/style.css22
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/mixed-dimentionA-ref.html23
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/mixed-dimentionA.html40
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/mixed-dimentionN-ref.html23
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/mixed-dimentionN.html40
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/reftest.list18
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/reftest_border_abspos.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/reftest_border_parent.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/reftest_margin_abspos.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/reftest_margin_parent.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/reftest_padding_abspos.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/reftest_padding_parent.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/reftest_plain.list4
-rw-r--r--layout/reftests/position-dynamic-changes/mixed/style.css22
-rw-r--r--layout/reftests/position-dynamic-changes/multiple-changes-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/multiple-changes.html23
-rw-r--r--layout/reftests/position-dynamic-changes/reftest.list10
-rw-r--r--layout/reftests/position-dynamic-changes/relative/animate.js30
-rw-r--r--layout/reftests/position-dynamic-changes/relative/move-right-bottom-ref.html12
-rw-r--r--layout/reftests/position-dynamic-changes/relative/move-right-bottom-table-ref.html13
-rw-r--r--layout/reftests/position-dynamic-changes/relative/move-right-bottom-table.html17
-rw-r--r--layout/reftests/position-dynamic-changes/relative/move-right-bottom.html16
-rw-r--r--layout/reftests/position-dynamic-changes/relative/move-top-left-ref.html12
-rw-r--r--layout/reftests/position-dynamic-changes/relative/move-top-left-table-ref.html13
-rw-r--r--layout/reftests/position-dynamic-changes/relative/move-top-left-table.html17
-rw-r--r--layout/reftests/position-dynamic-changes/relative/move-top-left.html16
-rw-r--r--layout/reftests/position-dynamic-changes/relative/percent-ref.html12
-rw-r--r--layout/reftests/position-dynamic-changes/relative/percent.html20
-rw-r--r--layout/reftests/position-dynamic-changes/relative/reftest.list5
-rw-r--r--layout/reftests/position-dynamic-changes/relative/style.css9
-rw-r--r--layout/reftests/position-dynamic-changes/shrink-wrap-ref.html24
-rw-r--r--layout/reftests/position-dynamic-changes/shrink-wrap.html17
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/animate.js59
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightA-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightN-bottomA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightN-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomA-2.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomN-2.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightN-bottomA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest.list18
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest.listbackup12
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest_border_abspos.list20
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest_border_parent.list20
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest_margin_abspos.list20
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest_margin_parent.list20
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest_padding_abspos.list20
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest_padding_parent.list20
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/reftest_plain.list20
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/style.css19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightA-bottomN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightA-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightN-bottomA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightN-bottomA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topA-heightA-bottomN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topA-heightA-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomA.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomN-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomN.html19
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topN-heightN-bottomA-ref.html15
-rw-r--r--layout/reftests/position-dynamic-changes/vertical/topN-heightN-bottomA.html19
142 files changed, 2514 insertions, 0 deletions
diff --git a/layout/reftests/position-dynamic-changes/handleprop.js b/layout/reftests/position-dynamic-changes/handleprop.js
new file mode 100644
index 0000000000..476961defd
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/handleprop.js
@@ -0,0 +1,10 @@
+// Add the correct border/margin/padding style
+if (window.location.search.length > 0) {
+ var params = window.location.search.substr(1).split("_");
+ if (params[0] == "border") {
+ params[0] = "border-width";
+ }
+ document.write("<style>");
+ document.write((params[1] == "parent") ? "#parent" : "#child");
+ document.write("{ " + params[0] + ": 1px 2px 3px 4px; }</style>");
+}
diff --git a/layout/reftests/position-dynamic-changes/horizontal/animate.js b/layout/reftests/position-dynamic-changes/horizontal/animate.js
new file mode 100644
index 0000000000..142004743f
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/animate.js
@@ -0,0 +1,60 @@
+var currentOffset = null;
+var maxOffset = null;
+var property = "left";
+
+var rfa = null;
+if (window.requestAnimationFrame) {
+ rfa = requestAnimationFrame;
+} else if (window.webkitRequestAnimationFrame) {
+ rfa = webkitRequestAnimationFrame;
+} else if (window.msRequestAnimationFrame) {
+ rfa = msRequestAnimationFrame;
+} else if (window.oRequestAnimationFrame) {
+ rfa = oRequestAnimationFrame;
+}
+
+function animate(from, to, prop) {
+ currentOffset = from;
+ maxOffset = to;
+ if (prop) {
+ property = prop;
+ }
+ rfa(animateStep);
+}
+
+function animateStep() {
+ if (currentOffset <= maxOffset) {
+ document.getElementById("child").style[property] = currentOffset + "px";
+ currentOffset += 10;
+ rfa(animateStep);
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
+}
+
+function toAuto(prop) {
+ if (prop) {
+ property = prop;
+ }
+ rfa(setToAuto);
+}
+
+function setToAuto() {
+ document.getElementById("child").style[property] = "auto";
+ document.documentElement.removeAttribute("class");
+}
+
+function fromAuto(to, prop) {
+ maxOffset = to;
+ if (prop) {
+ property = prop;
+ }
+ rfa(setFromAuto);
+}
+
+function setFromAuto() {
+ document.getElementById("child").style[property] = maxOffset + "px";
+ document.documentElement.removeAttribute("class");
+}
+
+
diff --git a/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthA-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthA-rightN.html
new file mode 100644
index 0000000000..95f01aff41
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthA-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200, "right");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthN-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthN-rightA.html
new file mode 100644
index 0000000000..49bb65de3a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthN-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200, "width");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthN-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthN-rightN.html
new file mode 100644
index 0000000000..c63a914f35
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftA-widthN-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200, "right");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightA-2.html b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightA-2.html
new file mode 100644
index 0000000000..5c7eed756b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightA-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(360);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightA.html
new file mode 100644
index 0000000000..bb48f92bcc
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightN-2.html b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightN-2.html
new file mode 100644
index 0000000000..b7e3e45a51
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightN-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(340);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightN.html
new file mode 100644
index 0000000000..29caa7bbf4
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthA-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthN-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthN-rightA.html
new file mode 100644
index 0000000000..8a9b6a9d47
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/fromauto-leftN-widthN-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftA-widthA-rightN-ref.html b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthA-rightN-ref.html
new file mode 100644
index 0000000000..88780e4778
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthA-rightN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="right: 200px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftA-widthA-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthA-rightN.html
new file mode 100644
index 0000000000..14014d03e8
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthA-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="right: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200, "right");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightA-ref.html b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightA-ref.html
new file mode 100644
index 0000000000..f35b1119b9
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 200px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightA.html
new file mode 100644
index 0000000000..c73e85c335
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200, "width");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightN-ref.html b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightN-ref.html
new file mode 100644
index 0000000000..4db64f3746
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px; right: 200px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightN.html
new file mode 100644
index 0000000000..4dcea54842
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftA-widthN-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px; right: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200, "right");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-2-ref.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-2-ref.html
new file mode 100644
index 0000000000..33b21d8f12
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 360px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-2.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-2.html
new file mode 100644
index 0000000000..5476f217b9
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 200px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ animate(200, 360);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-ref.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-ref.html
new file mode 100644
index 0000000000..7e8cc0fdef
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 200px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA.html
new file mode 100644
index 0000000000..60d01178fb
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-2-ref.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-2-ref.html
new file mode 100644
index 0000000000..5080662fb0
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 340px; right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-2.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-2.html
new file mode 100644
index 0000000000..d12d7a917a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 100px; right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 340);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-ref.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-ref.html
new file mode 100644
index 0000000000..a0847ba87b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 200px; right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN.html
new file mode 100644
index 0000000000..bedd5e21df
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthA-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 100px; right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthN-rightA-ref.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthN-rightA-ref.html
new file mode 100644
index 0000000000..4f885402dd
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthN-rightA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px; left: 200px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/leftN-widthN-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthN-rightA.html
new file mode 100644
index 0000000000..5928cd7b68
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/leftN-widthN-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px; left: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/reftest.list b/layout/reftests/position-dynamic-changes/horizontal/reftest.list
new file mode 100644
index 0000000000..5f888a3ad8
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/reftest.list
@@ -0,0 +1,18 @@
+# This directory includes 7 different permutations of the same tests.
+# reftest_plain.list is the manifest file for tests without any border, margin
+# or padding applied to either the abs-pos element or the parent.
+# reftest_{prop}_{element}.list files are the manifest files for tests with the
+# CSS property {prop} applied to {element}. These files use the query string
+# on the test file and the reference file to ask the code in ../handleprop.js add
+# the corresponding CSS style.
+
+# Any changes to the contents of the following files needs to be reflected on
+# all of them.
+
+include reftest_plain.list
+include reftest_border_abspos.list
+include reftest_border_parent.list
+include reftest_margin_abspos.list
+include reftest_margin_parent.list
+include reftest_padding_abspos.list
+include reftest_padding_parent.list
diff --git a/layout/reftests/position-dynamic-changes/horizontal/reftest_border_abspos.list b/layout/reftests/position-dynamic-changes/horizontal/reftest_border_abspos.list
new file mode 100644
index 0000000000..6555d3275b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/reftest_border_abspos.list
@@ -0,0 +1,25 @@
+# Please see the comment at the beginning of reftest.list
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA.html?border_abspos leftN-widthA-rightA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA-2.html?border_abspos leftN-widthA-rightA-2-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN.html?border_abspos leftN-widthA-rightN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN-2.html?border_abspos leftN-widthA-rightN-2-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightA.html?border_abspos leftA-widthN-rightA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthN-rightA.html?border_abspos leftN-widthN-rightA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightN.html?border_abspos leftA-widthN-rightN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthA-rightN.html?border_abspos leftA-widthA-rightN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA.html?border_abspos toauto-leftN-widthA-rightA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA-2.html?border_abspos toauto-leftN-widthA-rightA-2-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN.html?border_abspos toauto-leftN-widthA-rightN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN-2.html?border_abspos toauto-leftN-widthA-rightN-2-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightA.html?border_abspos toauto-leftA-widthN-rightA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthN-rightA.html?border_abspos toauto-leftN-widthN-rightA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightN.html?border_abspos toauto-leftA-widthN-rightN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthA-rightN.html?border_abspos toauto-leftA-widthA-rightN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA.html?border_abspos leftN-widthA-rightA-ref.html?border_abspos
+random-if(cocoaWidget) fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA-2.html?border_abspos leftN-widthA-rightA-2-ref.html?border_abspos # Bug 688545
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN.html?border_abspos leftN-widthA-rightN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN-2.html?border_abspos leftN-widthA-rightN-2-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightA.html?border_abspos leftA-widthN-rightA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthN-rightA.html?border_abspos leftN-widthN-rightA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightN.html?border_abspos leftA-widthN-rightN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthA-rightN.html?border_abspos leftA-widthA-rightN-ref.html?border_abspos
diff --git a/layout/reftests/position-dynamic-changes/horizontal/reftest_border_parent.list b/layout/reftests/position-dynamic-changes/horizontal/reftest_border_parent.list
new file mode 100644
index 0000000000..d7be02f1f1
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/reftest_border_parent.list
@@ -0,0 +1,26 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA.html?border_parent leftN-widthA-rightA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA-2.html?border_parent leftN-widthA-rightA-2-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN.html?border_parent leftN-widthA-rightN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN-2.html?border_parent leftN-widthA-rightN-2-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightA.html?border_parent leftA-widthN-rightA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthN-rightA.html?border_parent leftN-widthN-rightA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightN.html?border_parent leftA-widthN-rightN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthA-rightN.html?border_parent leftA-widthA-rightN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA.html?border_parent toauto-leftN-widthA-rightA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA-2.html?border_parent toauto-leftN-widthA-rightA-2-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN.html?border_parent toauto-leftN-widthA-rightN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN-2.html?border_parent toauto-leftN-widthA-rightN-2-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightA.html?border_parent toauto-leftA-widthN-rightA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthN-rightA.html?border_parent toauto-leftN-widthN-rightA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightN.html?border_parent toauto-leftA-widthN-rightN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthA-rightN.html?border_parent toauto-leftA-widthA-rightN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA.html?border_parent leftN-widthA-rightA-ref.html?border_parent
+random-if(cocoaWidget) fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA-2.html?border_parent leftN-widthA-rightA-2-ref.html?border_parent # Bug 688545
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN.html?border_parent leftN-widthA-rightN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN-2.html?border_parent leftN-widthA-rightN-2-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightA.html?border_parent leftA-widthN-rightA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthN-rightA.html?border_parent leftN-widthN-rightA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightN.html?border_parent leftA-widthN-rightN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthA-rightN.html?border_parent leftA-widthA-rightN-ref.html?border_parent
diff --git a/layout/reftests/position-dynamic-changes/horizontal/reftest_margin_abspos.list b/layout/reftests/position-dynamic-changes/horizontal/reftest_margin_abspos.list
new file mode 100644
index 0000000000..4e9d1051d5
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/reftest_margin_abspos.list
@@ -0,0 +1,26 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA.html?margin_abspos leftN-widthA-rightA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA-2.html?margin_abspos leftN-widthA-rightA-2-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN.html?margin_abspos leftN-widthA-rightN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN-2.html?margin_abspos leftN-widthA-rightN-2-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightA.html?margin_abspos leftA-widthN-rightA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthN-rightA.html?margin_abspos leftN-widthN-rightA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightN.html?margin_abspos leftA-widthN-rightN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthA-rightN.html?margin_abspos leftA-widthA-rightN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA.html?margin_abspos toauto-leftN-widthA-rightA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA-2.html?margin_abspos toauto-leftN-widthA-rightA-2-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN.html?margin_abspos toauto-leftN-widthA-rightN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN-2.html?margin_abspos toauto-leftN-widthA-rightN-2-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightA.html?margin_abspos toauto-leftA-widthN-rightA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthN-rightA.html?margin_abspos toauto-leftN-widthN-rightA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightN.html?margin_abspos toauto-leftA-widthN-rightN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthA-rightN.html?margin_abspos toauto-leftA-widthA-rightN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA.html?margin_abspos leftN-widthA-rightA-ref.html?margin_abspos
+random-if(cocoaWidget) fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA-2.html?margin_abspos leftN-widthA-rightA-2-ref.html?margin_abspos # Bug 688545
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN.html?margin_abspos leftN-widthA-rightN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN-2.html?margin_abspos leftN-widthA-rightN-2-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightA.html?margin_abspos leftA-widthN-rightA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthN-rightA.html?margin_abspos leftN-widthN-rightA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightN.html?margin_abspos leftA-widthN-rightN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthA-rightN.html?margin_abspos leftA-widthA-rightN-ref.html?margin_abspos
diff --git a/layout/reftests/position-dynamic-changes/horizontal/reftest_margin_parent.list b/layout/reftests/position-dynamic-changes/horizontal/reftest_margin_parent.list
new file mode 100644
index 0000000000..07320fa04b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/reftest_margin_parent.list
@@ -0,0 +1,26 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA.html?margin_parent leftN-widthA-rightA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA-2.html?margin_parent leftN-widthA-rightA-2-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN.html?margin_parent leftN-widthA-rightN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN-2.html?margin_parent leftN-widthA-rightN-2-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightA.html?margin_parent leftA-widthN-rightA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthN-rightA.html?margin_parent leftN-widthN-rightA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightN.html?margin_parent leftA-widthN-rightN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthA-rightN.html?margin_parent leftA-widthA-rightN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA.html?margin_parent toauto-leftN-widthA-rightA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA-2.html?margin_parent toauto-leftN-widthA-rightA-2-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN.html?margin_parent toauto-leftN-widthA-rightN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN-2.html?margin_parent toauto-leftN-widthA-rightN-2-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightA.html?margin_parent toauto-leftA-widthN-rightA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthN-rightA.html?margin_parent toauto-leftN-widthN-rightA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightN.html?margin_parent toauto-leftA-widthN-rightN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthA-rightN.html?margin_parent toauto-leftA-widthA-rightN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA.html?margin_parent leftN-widthA-rightA-ref.html?margin_parent
+random-if(cocoaWidget) fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA-2.html?margin_parent leftN-widthA-rightA-2-ref.html?margin_parent # Bug 688545
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN.html?margin_parent leftN-widthA-rightN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN-2.html?margin_parent leftN-widthA-rightN-2-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightA.html?margin_parent leftA-widthN-rightA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthN-rightA.html?margin_parent leftN-widthN-rightA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightN.html?margin_parent leftA-widthN-rightN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthA-rightN.html?margin_parent leftA-widthA-rightN-ref.html?margin_parent
diff --git a/layout/reftests/position-dynamic-changes/horizontal/reftest_padding_abspos.list b/layout/reftests/position-dynamic-changes/horizontal/reftest_padding_abspos.list
new file mode 100644
index 0000000000..9e7173fc77
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/reftest_padding_abspos.list
@@ -0,0 +1,26 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA.html?padding_abspos leftN-widthA-rightA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA-2.html?padding_abspos leftN-widthA-rightA-2-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN.html?padding_abspos leftN-widthA-rightN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN-2.html?padding_abspos leftN-widthA-rightN-2-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightA.html?padding_abspos leftA-widthN-rightA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthN-rightA.html?padding_abspos leftN-widthN-rightA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightN.html?padding_abspos leftA-widthN-rightN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthA-rightN.html?padding_abspos leftA-widthA-rightN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA.html?padding_abspos toauto-leftN-widthA-rightA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA-2.html?padding_abspos toauto-leftN-widthA-rightA-2-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN.html?padding_abspos toauto-leftN-widthA-rightN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN-2.html?padding_abspos toauto-leftN-widthA-rightN-2-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightA.html?padding_abspos toauto-leftA-widthN-rightA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthN-rightA.html?padding_abspos toauto-leftN-widthN-rightA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightN.html?padding_abspos toauto-leftA-widthN-rightN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthA-rightN.html?padding_abspos toauto-leftA-widthA-rightN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA.html?padding_abspos leftN-widthA-rightA-ref.html?padding_abspos
+random-if(cocoaWidget) fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA-2.html?padding_abspos leftN-widthA-rightA-2-ref.html?padding_abspos # Bug 688545
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN.html?padding_abspos leftN-widthA-rightN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN-2.html?padding_abspos leftN-widthA-rightN-2-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightA.html?padding_abspos leftA-widthN-rightA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthN-rightA.html?padding_abspos leftN-widthN-rightA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightN.html?padding_abspos leftA-widthN-rightN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthA-rightN.html?padding_abspos leftA-widthA-rightN-ref.html?padding_abspos
diff --git a/layout/reftests/position-dynamic-changes/horizontal/reftest_padding_parent.list b/layout/reftests/position-dynamic-changes/horizontal/reftest_padding_parent.list
new file mode 100644
index 0000000000..b1f81a8da1
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/reftest_padding_parent.list
@@ -0,0 +1,26 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA.html?padding_parent leftN-widthA-rightA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA-2.html?padding_parent leftN-widthA-rightA-2-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN.html?padding_parent leftN-widthA-rightN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN-2.html?padding_parent leftN-widthA-rightN-2-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightA.html?padding_parent leftA-widthN-rightA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthN-rightA.html?padding_parent leftN-widthN-rightA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightN.html?padding_parent leftA-widthN-rightN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthA-rightN.html?padding_parent leftA-widthA-rightN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA.html?padding_parent toauto-leftN-widthA-rightA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA-2.html?padding_parent toauto-leftN-widthA-rightA-2-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN.html?padding_parent toauto-leftN-widthA-rightN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN-2.html?padding_parent toauto-leftN-widthA-rightN-2-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightA.html?padding_parent toauto-leftA-widthN-rightA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthN-rightA.html?padding_parent toauto-leftN-widthN-rightA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightN.html?padding_parent toauto-leftA-widthN-rightN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthA-rightN.html?padding_parent toauto-leftA-widthA-rightN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA.html?padding_parent leftN-widthA-rightA-ref.html?padding_parent
+random-if(cocoaWidget) fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA-2.html?padding_parent leftN-widthA-rightA-2-ref.html?padding_parent # Bug 688545
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN.html?padding_parent leftN-widthA-rightN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN-2.html?padding_parent leftN-widthA-rightN-2-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightA.html?padding_parent leftA-widthN-rightA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthN-rightA.html?padding_parent leftN-widthN-rightA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightN.html?padding_parent leftA-widthN-rightN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthA-rightN.html?padding_parent leftA-widthA-rightN-ref.html?padding_parent
diff --git a/layout/reftests/position-dynamic-changes/horizontal/reftest_plain.list b/layout/reftests/position-dynamic-changes/horizontal/reftest_plain.list
new file mode 100644
index 0000000000..2d9e5ba3e3
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/reftest_plain.list
@@ -0,0 +1,26 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA.html leftN-widthA-rightA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightA-2.html leftN-widthA-rightA-2-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN.html leftN-widthA-rightN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthA-rightN-2.html leftN-widthA-rightN-2-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightA.html leftA-widthN-rightA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == leftN-widthN-rightA.html leftN-widthN-rightA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthN-rightN.html leftA-widthN-rightN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == leftA-widthA-rightN.html leftA-widthA-rightN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA.html toauto-leftN-widthA-rightA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightA-2.html toauto-leftN-widthA-rightA-2-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN.html toauto-leftN-widthA-rightN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthA-rightN-2.html toauto-leftN-widthA-rightN-2-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightA.html toauto-leftA-widthN-rightA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftN-widthN-rightA.html toauto-leftN-widthN-rightA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthN-rightN.html toauto-leftA-widthN-rightN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-leftA-widthA-rightN.html toauto-leftA-widthA-rightN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA.html leftN-widthA-rightA-ref.html
+random-if(cocoaWidget) fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightA-2.html leftN-widthA-rightA-2-ref.html # Bug 688545
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN.html leftN-widthA-rightN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthA-rightN-2.html leftN-widthA-rightN-2-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightA.html leftA-widthN-rightA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftN-widthN-rightA.html leftN-widthN-rightA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthN-rightN.html leftA-widthN-rightN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-leftA-widthA-rightN.html leftA-widthA-rightN-ref.html
diff --git a/layout/reftests/position-dynamic-changes/horizontal/style.css b/layout/reftests/position-dynamic-changes/horizontal/style.css
new file mode 100644
index 0000000000..7486e56d4a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/style.css
@@ -0,0 +1,20 @@
+#parent {
+ position: relative;
+ width: 400px;
+ height: 400px;
+ background: red;
+ border: 0 solid black;
+}
+#child {
+ position: absolute;
+ height: 100px;
+ top: 100px;
+ background: blue;
+ border: 0 solid black;
+}
+.floatLeft {
+ width: 50px;
+ height: 10px;
+ background: green;
+ float: left;
+}
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthA-rightN-ref.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthA-rightN-ref.html
new file mode 100644
index 0000000000..0cedbea5dc
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthA-rightN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthA-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthA-rightN.html
new file mode 100644
index 0000000000..d8b4de0f17
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthA-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="right: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("right");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightA-ref.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightA-ref.html
new file mode 100644
index 0000000000..0cedbea5dc
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightA.html
new file mode 100644
index 0000000000..f4e181b26a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("width");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightN-ref.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightN-ref.html
new file mode 100644
index 0000000000..92c8e40615
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightN.html
new file mode 100644
index 0000000000..dd5f32224d
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftA-widthN-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px; right: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("right");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-2-ref.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-2-ref.html
new file mode 100644
index 0000000000..0cedbea5dc
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-2.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-2.html
new file mode 100644
index 0000000000..b1d36043f6
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 200px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("left");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-ref.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-ref.html
new file mode 100644
index 0000000000..0cedbea5dc
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA.html
new file mode 100644
index 0000000000..d31aac067e
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("left");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-2-ref.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-2-ref.html
new file mode 100644
index 0000000000..e8e205719d
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-2-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-2.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-2.html
new file mode 100644
index 0000000000..7aeb23f6a1
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 100px; right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("left");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-ref.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-ref.html
new file mode 100644
index 0000000000..e8e205719d
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN.html
new file mode 100644
index 0000000000..7aeb23f6a1
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthA-rightN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="left: 100px; right: 20px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("left");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthN-rightA-ref.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthN-rightA-ref.html
new file mode 100644
index 0000000000..92c8e40615
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthN-rightA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthN-rightA.html b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthN-rightA.html
new file mode 100644
index 0000000000..30403a07b1
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/horizontal/toauto-leftN-widthN-rightA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="width: 100px; left: 100px;">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("left");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/max-width-ref.html b/layout/reftests/position-dynamic-changes/max-width-ref.html
new file mode 100644
index 0000000000..d1f2edba7b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/max-width-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <style>
+ #a { border: 1px solid black; max-width: 200px; height: 100px; }
+ </style>
+ <div id="a">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/max-width.html b/layout/reftests/position-dynamic-changes/max-width.html
new file mode 100644
index 0000000000..95e51157e0
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/max-width.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <body>
+ <style>
+ #a { border: 1px solid black; max-width: 100px; height: 100px; }
+ </style>
+ <script>
+ document.addEventListener("MozReftestInvalidate", function() {
+ var a = document.querySelector("#a");
+ a.style.maxWidth = "200px";
+ document.documentElement.removeAttribute("class");
+ });
+ </script>
+ <div id="a">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/min-width-ref.html b/layout/reftests/position-dynamic-changes/min-width-ref.html
new file mode 100644
index 0000000000..7131d977c2
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/min-width-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <style>
+ #a { border: 1px solid green; width: 150px; height: 200px; }
+ #b { border: 1px solid black; min-width: 200px; height: 100px; }
+ </style>
+ <div id="a">
+ <div id="b">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/min-width.html b/layout/reftests/position-dynamic-changes/min-width.html
new file mode 100644
index 0000000000..49613a7ea5
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/min-width.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <body>
+ <style>
+ #a { border: 1px solid green; width: 150px; height: 200px; }
+ #b { border: 1px solid black; min-width: 100px; height: 100px; }
+ </style>
+ <script>
+ document.addEventListener("MozReftestInvalidate", function() {
+ var b = document.querySelector("#b");
+ b.style.minWidth = "200px";
+ document.documentElement.removeAttribute("class");
+ });
+ </script>
+ <div id="a">
+ <div id="b">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionA-ref.html b/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionA-ref.html
new file mode 100644
index 0000000000..157118c979
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionA-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html id="parent">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ <style>
+ #child {
+ left: 300px;
+ top: 200px;
+ right: 20px;
+ bottom: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionA.html b/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionA.html
new file mode 100644
index 0000000000..9427edadd7
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionA.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html id="parent" class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ <style>
+ #child {
+ left: 100px;
+ top: 100px;
+ right: 20px;
+ bottom: 20px;
+ }
+ </style>
+ <script src="../horizontal/animate.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ var counter = 0;
+ function play() {
+ if (counter < 100) {
+ var child = document.getElementById("child");
+ child.style.left = (parseInt(getComputedStyle(child, null).left.replace("px", "")) + 20) + "px";
+ child.style.top = (parseInt(getComputedStyle(child, null).top.replace("px", "")) + 10) + "px";
+ rfa(play);
+ counter += 10;
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
+ }
+
+ window.onload = function() { rfa(play) };
+ </script>
+ </head>
+ <body>
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionN-ref.html b/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionN-ref.html
new file mode 100644
index 0000000000..d47317996b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionN-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html id="parent">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ <style>
+ #child {
+ width: 100px;
+ height: 100px;
+ left: 300px;
+ top: 200px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionN.html b/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionN.html
new file mode 100644
index 0000000000..ec89af2f8c
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/mixed-dimentionN.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html id="parent" class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ <style>
+ #child {
+ width: 100px;
+ height: 100px;
+ left: 100px;
+ top: 100px;
+ }
+ </style>
+ <script src="../horizontal/animate.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ var counter = 0;
+ function play() {
+ if (counter < 100) {
+ var child = document.getElementById("child");
+ child.style.left = (parseInt(getComputedStyle(child, null).left.replace("px", "")) + 20) + "px";
+ child.style.top = (parseInt(getComputedStyle(child, null).top.replace("px", "")) + 10) + "px";
+ rfa(play);
+ counter += 10;
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
+ }
+
+ window.onload = function() { rfa(play) };
+ </script>
+ </head>
+ <body>
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest.list b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest.list
new file mode 100644
index 0000000000..5f888a3ad8
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest.list
@@ -0,0 +1,18 @@
+# This directory includes 7 different permutations of the same tests.
+# reftest_plain.list is the manifest file for tests without any border, margin
+# or padding applied to either the abs-pos element or the parent.
+# reftest_{prop}_{element}.list files are the manifest files for tests with the
+# CSS property {prop} applied to {element}. These files use the query string
+# on the test file and the reference file to ask the code in ../handleprop.js add
+# the corresponding CSS style.
+
+# Any changes to the contents of the following files needs to be reflected on
+# all of them.
+
+include reftest_plain.list
+include reftest_border_abspos.list
+include reftest_border_parent.list
+include reftest_margin_abspos.list
+include reftest_margin_parent.list
+include reftest_padding_abspos.list
+include reftest_padding_parent.list
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_border_abspos.list b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_border_abspos.list
new file mode 100644
index 0000000000..d564fa2bb7
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_border_abspos.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?border_abspos mixed-dimentionN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?border_abspos mixed-dimentionA-ref.html?border_abspos
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_border_parent.list b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_border_parent.list
new file mode 100644
index 0000000000..60a1a3b4ec
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_border_parent.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?border_parent mixed-dimentionN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?border_parent mixed-dimentionA-ref.html?border_parent
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_margin_abspos.list b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_margin_abspos.list
new file mode 100644
index 0000000000..f3c3647cde
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_margin_abspos.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?margin_abspos mixed-dimentionN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?margin_abspos mixed-dimentionA-ref.html?margin_abspos
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_margin_parent.list b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_margin_parent.list
new file mode 100644
index 0000000000..23cc7121a9
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_margin_parent.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?margin_parent mixed-dimentionN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?margin_parent mixed-dimentionA-ref.html?margin_parent
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_padding_abspos.list b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_padding_abspos.list
new file mode 100644
index 0000000000..2283b6caa0
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_padding_abspos.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?padding_abspos mixed-dimentionN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?padding_abspos mixed-dimentionA-ref.html?padding_abspos
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_padding_parent.list b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_padding_parent.list
new file mode 100644
index 0000000000..72d11338cb
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_padding_parent.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?padding_parent mixed-dimentionN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?padding_parent mixed-dimentionA-ref.html?padding_parent
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_plain.list b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_plain.list
new file mode 100644
index 0000000000..68d02c6982
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/reftest_plain.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html mixed-dimentionN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html mixed-dimentionA-ref.html
diff --git a/layout/reftests/position-dynamic-changes/mixed-abspos-root/style.css b/layout/reftests/position-dynamic-changes/mixed-abspos-root/style.css
new file mode 100644
index 0000000000..3b2c973206
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed-abspos-root/style.css
@@ -0,0 +1,22 @@
+#parent {
+ position: relative;
+ width: 400px;
+ height: 400px;
+ background: red;
+ border: 0 solid black;
+}
+#child {
+ position: absolute;
+ left: 300px;
+ top: 200px;
+ right: 20px;
+ bottom: 20px;
+ background: blue;
+ border: 0 solid black;
+}
+.floatLeft {
+ width: 50px;
+ height: 10px;
+ background: green;
+ float: left;
+}
diff --git a/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionA-ref.html b/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionA-ref.html
new file mode 100644
index 0000000000..7c197ebd15
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionA-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ <style>
+ #child {
+ left: 300px;
+ top: 200px;
+ right: 20px;
+ bottom: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionA.html b/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionA.html
new file mode 100644
index 0000000000..8aac447d5b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionA.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ <style>
+ #child {
+ left: 100px;
+ top: 100px;
+ right: 20px;
+ bottom: 20px;
+ }
+ </style>
+ <script src="../horizontal/animate.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ var counter = 0;
+ function play() {
+ if (counter < 100) {
+ var child = document.getElementById("child");
+ child.style.left = (parseInt(getComputedStyle(child, null).left.replace("px", "")) + 20) + "px";
+ child.style.top = (parseInt(getComputedStyle(child, null).top.replace("px", "")) + 10) + "px";
+ rfa(play);
+ counter += 10;
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
+ }
+
+ window.onload = function() { rfa(play) };
+ </script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionN-ref.html b/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionN-ref.html
new file mode 100644
index 0000000000..5d9dd3b42a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionN-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ <style>
+ #child {
+ width: 100px;
+ height: 100px;
+ left: 300px;
+ top: 200px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionN.html b/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionN.html
new file mode 100644
index 0000000000..66251d79c8
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/mixed-dimentionN.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ <style>
+ #child {
+ width: 100px;
+ height: 100px;
+ left: 100px;
+ top: 100px;
+ }
+ </style>
+ <script src="../horizontal/animate.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ var counter = 0;
+ function play() {
+ if (counter < 100) {
+ var child = document.getElementById("child");
+ child.style.left = (parseInt(getComputedStyle(child, null).left.replace("px", "")) + 20) + "px";
+ child.style.top = (parseInt(getComputedStyle(child, null).top.replace("px", "")) + 10) + "px";
+ rfa(play);
+ counter += 10;
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
+ }
+
+ window.onload = function() { rfa(play) };
+ </script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatLeft"></div>
+ <div class="floatLeft"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/mixed/reftest.list b/layout/reftests/position-dynamic-changes/mixed/reftest.list
new file mode 100644
index 0000000000..5f888a3ad8
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/reftest.list
@@ -0,0 +1,18 @@
+# This directory includes 7 different permutations of the same tests.
+# reftest_plain.list is the manifest file for tests without any border, margin
+# or padding applied to either the abs-pos element or the parent.
+# reftest_{prop}_{element}.list files are the manifest files for tests with the
+# CSS property {prop} applied to {element}. These files use the query string
+# on the test file and the reference file to ask the code in ../handleprop.js add
+# the corresponding CSS style.
+
+# Any changes to the contents of the following files needs to be reflected on
+# all of them.
+
+include reftest_plain.list
+include reftest_border_abspos.list
+include reftest_border_parent.list
+include reftest_margin_abspos.list
+include reftest_margin_parent.list
+include reftest_padding_abspos.list
+include reftest_padding_parent.list
diff --git a/layout/reftests/position-dynamic-changes/mixed/reftest_border_abspos.list b/layout/reftests/position-dynamic-changes/mixed/reftest_border_abspos.list
new file mode 100644
index 0000000000..d564fa2bb7
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/reftest_border_abspos.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?border_abspos mixed-dimentionN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?border_abspos mixed-dimentionA-ref.html?border_abspos
diff --git a/layout/reftests/position-dynamic-changes/mixed/reftest_border_parent.list b/layout/reftests/position-dynamic-changes/mixed/reftest_border_parent.list
new file mode 100644
index 0000000000..60a1a3b4ec
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/reftest_border_parent.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?border_parent mixed-dimentionN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?border_parent mixed-dimentionA-ref.html?border_parent
diff --git a/layout/reftests/position-dynamic-changes/mixed/reftest_margin_abspos.list b/layout/reftests/position-dynamic-changes/mixed/reftest_margin_abspos.list
new file mode 100644
index 0000000000..f3c3647cde
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/reftest_margin_abspos.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?margin_abspos mixed-dimentionN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?margin_abspos mixed-dimentionA-ref.html?margin_abspos
diff --git a/layout/reftests/position-dynamic-changes/mixed/reftest_margin_parent.list b/layout/reftests/position-dynamic-changes/mixed/reftest_margin_parent.list
new file mode 100644
index 0000000000..23cc7121a9
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/reftest_margin_parent.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?margin_parent mixed-dimentionN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?margin_parent mixed-dimentionA-ref.html?margin_parent
diff --git a/layout/reftests/position-dynamic-changes/mixed/reftest_padding_abspos.list b/layout/reftests/position-dynamic-changes/mixed/reftest_padding_abspos.list
new file mode 100644
index 0000000000..2283b6caa0
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/reftest_padding_abspos.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?padding_abspos mixed-dimentionN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?padding_abspos mixed-dimentionA-ref.html?padding_abspos
diff --git a/layout/reftests/position-dynamic-changes/mixed/reftest_padding_parent.list b/layout/reftests/position-dynamic-changes/mixed/reftest_padding_parent.list
new file mode 100644
index 0000000000..72d11338cb
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/reftest_padding_parent.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html?padding_parent mixed-dimentionN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html?padding_parent mixed-dimentionA-ref.html?padding_parent
diff --git a/layout/reftests/position-dynamic-changes/mixed/reftest_plain.list b/layout/reftests/position-dynamic-changes/mixed/reftest_plain.list
new file mode 100644
index 0000000000..68d02c6982
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/reftest_plain.list
@@ -0,0 +1,4 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionN.html mixed-dimentionN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == mixed-dimentionA.html mixed-dimentionA-ref.html
diff --git a/layout/reftests/position-dynamic-changes/mixed/style.css b/layout/reftests/position-dynamic-changes/mixed/style.css
new file mode 100644
index 0000000000..3b2c973206
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/mixed/style.css
@@ -0,0 +1,22 @@
+#parent {
+ position: relative;
+ width: 400px;
+ height: 400px;
+ background: red;
+ border: 0 solid black;
+}
+#child {
+ position: absolute;
+ left: 300px;
+ top: 200px;
+ right: 20px;
+ bottom: 20px;
+ background: blue;
+ border: 0 solid black;
+}
+.floatLeft {
+ width: 50px;
+ height: 10px;
+ background: green;
+ float: left;
+}
diff --git a/layout/reftests/position-dynamic-changes/multiple-changes-ref.html b/layout/reftests/position-dynamic-changes/multiple-changes-ref.html
new file mode 100644
index 0000000000..92a00daa23
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/multiple-changes-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <style>
+ #a { border: 1px solid black; width: 100px; height: 100px; left: 10px; }
+ #b { border: 1px solid blue; width: 50px; height: 50px; left: 20px; }
+ div { position: absolute; }
+ </style>
+ <div id="a">
+ <div id="b">
+ </div>
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/position-dynamic-changes/multiple-changes.html b/layout/reftests/position-dynamic-changes/multiple-changes.html
new file mode 100644
index 0000000000..e76e09e5eb
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/multiple-changes.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <body>
+ <style>
+ #a { border: 1px solid black; width: 100px; height: 100px; }
+ #b { border: 1px solid blue; width: 50px; height: 50px; }
+ div { position: absolute; }
+ </style>
+ <script>
+ document.addEventListener("MozReftestInvalidate", function() {
+ var a = document.querySelector("#a");
+ var b = document.querySelector("#b");
+ a.style.left = "10px";
+ b.style.left = "20px";
+ document.documentElement.removeAttribute("class");
+ });
+ </script>
+ <div id="a">
+ <div id="b">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/reftest.list b/layout/reftests/position-dynamic-changes/reftest.list
new file mode 100644
index 0000000000..8392f8cff2
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/reftest.list
@@ -0,0 +1,10 @@
+include horizontal/reftest.list
+include vertical/reftest.list
+include mixed/reftest.list
+include mixed-abspos-root/reftest.list
+include relative/reftest.list
+
+== multiple-changes.html multiple-changes-ref.html
+== shrink-wrap.html shrink-wrap-ref.html
+== max-width.html max-width-ref.html
+fuzzy-if(cocoaWidget&&layersGPUAccelerated,0-1,0-2) == min-width.html min-width-ref.html # Bug 761770
diff --git a/layout/reftests/position-dynamic-changes/relative/animate.js b/layout/reftests/position-dynamic-changes/relative/animate.js
new file mode 100644
index 0000000000..38598e1d34
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/animate.js
@@ -0,0 +1,30 @@
+var rfa = null;
+if (window.requestAnimationFrame) {
+ rfa = requestAnimationFrame;
+} else if (window.webkitRequestAnimationFrame) {
+ rfa = webkitRequestAnimationFrame;
+} else if (window.msRequestAnimationFrame) {
+ rfa = msRequestAnimationFrame;
+} else if (window.oRequestAnimationFrame) {
+ rfa = oRequestAnimationFrame;
+}
+
+function animate(params, count) {
+ rfa(function() {
+ animateStep(params, count);
+ });
+}
+
+function animateStep(params, count) {
+ if (!count) {
+ document.documentElement.removeAttribute("class");
+ return;
+ }
+ var rel = document.getElementById("rel");
+ for (prop in params) {
+ rel.style[prop] = (parseInt(rel.style[prop]) + params[prop]) + "px";
+ }
+ rfa(function() {
+ animateStep(params, count - 10);
+ });
+}
diff --git a/layout/reftests/position-dynamic-changes/relative/move-right-bottom-ref.html b/layout/reftests/position-dynamic-changes/relative/move-right-bottom-ref.html
new file mode 100644
index 0000000000..8e364b3679
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/move-right-bottom-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div id="container"
+ >surrounding <span id="rel"
+ style="left: 200px; top: 100px;"
+ >position&#10;relative</span> text</div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/move-right-bottom-table-ref.html b/layout/reftests/position-dynamic-changes/relative/move-right-bottom-table-ref.html
new file mode 100644
index 0000000000..82f5225969
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/move-right-bottom-table-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div id="container">
+ <table id="rel" style="left: 200px; top: 100px;">
+ <tr><td>position&#10;relative</td></tr>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/move-right-bottom-table.html b/layout/reftests/position-dynamic-changes/relative/move-right-bottom-table.html
new file mode 100644
index 0000000000..a2df018d41
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/move-right-bottom-table.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="container">
+ <table id="rel" style="left: 0; top: 0;">
+ <tr><td>position&#10;relative</td></tr>
+ </table>
+ </div>
+ <script>
+ animate({top: 10, left: 20}, 100);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/move-right-bottom.html b/layout/reftests/position-dynamic-changes/relative/move-right-bottom.html
new file mode 100644
index 0000000000..f283f3ace6
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/move-right-bottom.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="container"
+ >surrounding <span id="rel"
+ style="left: 0; top: 0;"
+ >position&#10;relative</span> text</div>
+ <script>
+ animate({top: 10, left: 20}, 100);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/move-top-left-ref.html b/layout/reftests/position-dynamic-changes/relative/move-top-left-ref.html
new file mode 100644
index 0000000000..48f0a8d1d6
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/move-top-left-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div id="container"
+ >surrounding <span id="rel"
+ style="right: -200px; bottom: -300px;"
+ >position&#10;relative</span> text</div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/move-top-left-table-ref.html b/layout/reftests/position-dynamic-changes/relative/move-top-left-table-ref.html
new file mode 100644
index 0000000000..748e1d7eec
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/move-top-left-table-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div id="container">
+ <table id="rel" style="right: -200px; bottom: -300px;">
+ <tr><td>position&#10;relative</td></tr>
+ </table>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/move-top-left-table.html b/layout/reftests/position-dynamic-changes/relative/move-top-left-table.html
new file mode 100644
index 0000000000..e9eb3a981f
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/move-top-left-table.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="container">
+ <table id="rel" style="right: -400px; bottom: -400px;">
+ <tr><td>position&#10;relative</td></tr>
+ </table>
+ </div>
+ <script>
+ animate({bottom: 10, right: 20}, 100);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/move-top-left.html b/layout/reftests/position-dynamic-changes/relative/move-top-left.html
new file mode 100644
index 0000000000..ec92ea4392
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/move-top-left.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="container"
+ >surrounding <span id="rel"
+ style="right: -400px; bottom: -400px;"
+ >position&#10;relative</span> text</div>
+ <script>
+ animate({bottom: 10, right: 20}, 100);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/percent-ref.html b/layout/reftests/position-dynamic-changes/relative/percent-ref.html
new file mode 100644
index 0000000000..cb496b0b52
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/percent-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div id="container" style="border-width: 10px; padding: 50px"
+ >surrounding <span id="rel"
+ style="left: 50%; top: 50%;"
+ >position&#10;relative</span> text</div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/percent.html b/layout/reftests/position-dynamic-changes/relative/percent.html
new file mode 100644
index 0000000000..18513256b7
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/percent.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ </head>
+ <body>
+ <div id="container" style="border-width: 10px; padding: 50px"
+ >surrounding <span id="rel"
+ style="left: 0; top: 0;"
+ >position&#10;relative</span> text</div>
+ <script>
+ document.addEventListener("MozReftestInvalidate", function() {
+ var rel = document.getElementById("rel");
+ rel.style.top = "50%";
+ rel.style.left = "50%";
+ document.documentElement.removeAttribute("class");
+ });
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/relative/reftest.list b/layout/reftests/position-dynamic-changes/relative/reftest.list
new file mode 100644
index 0000000000..320fad98b2
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/reftest.list
@@ -0,0 +1,5 @@
+fuzzy-if(cocoaWidget,0-1,0-2) fuzzy-if(d2d,0-47,0-26) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-169,0-970) == move-right-bottom.html move-right-bottom-ref.html
+fuzzy-if(cocoaWidget,0-1,0-2) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-169,0-970) == move-top-left.html move-top-left-ref.html # Bug 688545
+fuzzy-if(cocoaWidget,0-1,0-3) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-144,0-580) == move-right-bottom-table.html move-right-bottom-table-ref.html
+fuzzy-if(cocoaWidget,0-1,0-3) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-144,0-580) == move-top-left-table.html move-top-left-table-ref.html # Bug 688545
+== percent.html percent-ref.html
diff --git a/layout/reftests/position-dynamic-changes/relative/style.css b/layout/reftests/position-dynamic-changes/relative/style.css
new file mode 100644
index 0000000000..92a977bff7
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/relative/style.css
@@ -0,0 +1,9 @@
+#container {
+ width: 400px;
+ height: 400px;
+ border: 1px solid red;
+}
+#rel {
+ white-space: pre;
+ position: relative;
+}
diff --git a/layout/reftests/position-dynamic-changes/shrink-wrap-ref.html b/layout/reftests/position-dynamic-changes/shrink-wrap-ref.html
new file mode 100644
index 0000000000..c3ce346b90
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/shrink-wrap-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <body>
+ <style>
+ #a { position: absolute; border: 1px solid black; left: 300px; }
+ </style>
+ <script>
+ document.addEventListener("MozReftestInvalidate", function() {
+ var a = document.querySelector("#a");
+ a.style.left = "auto";
+ document.documentElement.removeAttribute("class");
+ });
+ </script>
+ <div id="a">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/shrink-wrap.html b/layout/reftests/position-dynamic-changes/shrink-wrap.html
new file mode 100644
index 0000000000..41387b9b98
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/shrink-wrap.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <style>
+ #a { border: 1px solid black; position: absolute; }
+ </style>
+ <div id="a">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/animate.js b/layout/reftests/position-dynamic-changes/vertical/animate.js
new file mode 100644
index 0000000000..a53d6a1800
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/animate.js
@@ -0,0 +1,59 @@
+var currentOffset = null;
+var maxOffset = null;
+var property = "top";
+
+var rfa = null;
+if (window.requestAnimationFrame) {
+ rfa = requestAnimationFrame;
+} else if (window.webkitRequestAnimationFrame) {
+ rfa = webkitRequestAnimationFrame;
+} else if (window.msRequestAnimationFrame) {
+ rfa = msRequestAnimationFrame;
+} else if (window.oRequestAnimationFrame) {
+ rfa = oRequestAnimationFrame;
+}
+
+function animate(from, to, prop) {
+ currentOffset = from;
+ maxOffset = to;
+ if (prop) {
+ property = prop;
+ }
+ rfa(animateStep);
+}
+
+function animateStep() {
+ if (currentOffset <= maxOffset) {
+ document.getElementById("child").style[property] = currentOffset + "px";
+ currentOffset += 10;
+ rfa(animateStep);
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
+}
+
+function toAuto(prop) {
+ if (prop) {
+ property = prop;
+ }
+ rfa(setToAuto);
+}
+
+function setToAuto() {
+ document.getElementById("child").style[property] = "auto";
+ document.documentElement.removeAttribute("class");
+}
+
+function fromAuto(to, prop) {
+ maxOffset = to;
+ if (prop) {
+ property = prop;
+ }
+ rfa(setFromAuto);
+}
+
+function setFromAuto() {
+ document.getElementById("child").style[property] = maxOffset + "px";
+ document.documentElement.removeAttribute("class");
+}
+
diff --git a/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightA-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightA-bottomN.html
new file mode 100644
index 0000000000..d8c500293d
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightA-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200, "bottom");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightN-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightN-bottomA.html
new file mode 100644
index 0000000000..ba270ce844
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightN-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200, "height");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightN-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightN-bottomN.html
new file mode 100644
index 0000000000..c8355d8541
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/fromauto-topA-heightN-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200, "bottom");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomA-2.html b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomA-2.html
new file mode 100644
index 0000000000..0979742676
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomA-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(360);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomA.html
new file mode 100644
index 0000000000..d4f5cd7d0b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomN-2.html b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomN-2.html
new file mode 100644
index 0000000000..c6090e7f4d
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomN-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="bottom: 20px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(340);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomN.html
new file mode 100644
index 0000000000..daf37a46bd
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightA-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="bottom: 20px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightN-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightN-bottomA.html
new file mode 100644
index 0000000000..a417786c5f
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/fromauto-topN-heightN-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ fromAuto(200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest.list b/layout/reftests/position-dynamic-changes/vertical/reftest.list
new file mode 100644
index 0000000000..5f888a3ad8
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest.list
@@ -0,0 +1,18 @@
+# This directory includes 7 different permutations of the same tests.
+# reftest_plain.list is the manifest file for tests without any border, margin
+# or padding applied to either the abs-pos element or the parent.
+# reftest_{prop}_{element}.list files are the manifest files for tests with the
+# CSS property {prop} applied to {element}. These files use the query string
+# on the test file and the reference file to ask the code in ../handleprop.js add
+# the corresponding CSS style.
+
+# Any changes to the contents of the following files needs to be reflected on
+# all of them.
+
+include reftest_plain.list
+include reftest_border_abspos.list
+include reftest_border_parent.list
+include reftest_margin_abspos.list
+include reftest_margin_parent.list
+include reftest_padding_abspos.list
+include reftest_padding_parent.list
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest.listbackup b/layout/reftests/position-dynamic-changes/vertical/reftest.listbackup
new file mode 100644
index 0000000000..86a90a0cdf
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest.listbackup
@@ -0,0 +1,12 @@
+== topN-heightA-bottomA.html topN-heightA-bottomA-ref.html
+== topN-heightA-bottomN.html topN-heightA-bottomN-ref.html
+== topA-heightN-bottomA.html topA-heightN-bottomA-ref.html
+== topN-heightN-bottomA.html topN-heightN-bottomA-ref.html
+== topA-heightN-bottomN.html topA-heightN-bottomN-ref.html
+== topA-heightA-bottomN.html topA-heightA-bottomN-ref.html
+== toauto-topN-heightA-bottomA.html toauto-topN-heightA-bottomA-ref.html
+== toauto-topN-heightA-bottomN.html toauto-topN-heightA-bottomN-ref.html
+== toauto-topA-heightN-bottomA.html toauto-topA-heightN-bottomA-ref.html
+== toauto-topN-heightN-bottomA.html toauto-topN-heightN-bottomA-ref.html
+== toauto-topA-heightN-bottomN.html toauto-topA-heightN-bottomN-ref.html
+== toauto-topA-heightA-bottomN.html toauto-topA-heightA-bottomN-ref.html
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest_border_abspos.list b/layout/reftests/position-dynamic-changes/vertical/reftest_border_abspos.list
new file mode 100644
index 0000000000..cbd174f051
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest_border_abspos.list
@@ -0,0 +1,20 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomA.html?border_abspos topN-heightA-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomN.html?border_abspos topN-heightA-bottomN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomA.html?border_abspos topA-heightN-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightN-bottomA.html?border_abspos topN-heightN-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomN.html?border_abspos topA-heightN-bottomN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightA-bottomN.html?border_abspos topA-heightA-bottomN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomA.html?border_abspos toauto-topN-heightA-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomN.html?border_abspos toauto-topN-heightA-bottomN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomA.html?border_abspos toauto-topA-heightN-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightN-bottomA.html?border_abspos toauto-topN-heightN-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomN.html?border_abspos toauto-topA-heightN-bottomN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightA-bottomN.html?border_abspos toauto-topA-heightA-bottomN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomA.html?border_abspos topN-heightA-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomN.html?border_abspos topN-heightA-bottomN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomA.html?border_abspos topA-heightN-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightN-bottomA.html?border_abspos topN-heightN-bottomA-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomN.html?border_abspos topA-heightN-bottomN-ref.html?border_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightA-bottomN.html?border_abspos topA-heightA-bottomN-ref.html?border_abspos
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest_border_parent.list b/layout/reftests/position-dynamic-changes/vertical/reftest_border_parent.list
new file mode 100644
index 0000000000..b4a74a16ef
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest_border_parent.list
@@ -0,0 +1,20 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomA.html?border_parent topN-heightA-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomN.html?border_parent topN-heightA-bottomN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomA.html?border_parent topA-heightN-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightN-bottomA.html?border_parent topN-heightN-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomN.html?border_parent topA-heightN-bottomN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightA-bottomN.html?border_parent topA-heightA-bottomN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomA.html?border_parent toauto-topN-heightA-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomN.html?border_parent toauto-topN-heightA-bottomN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomA.html?border_parent toauto-topA-heightN-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightN-bottomA.html?border_parent toauto-topN-heightN-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomN.html?border_parent toauto-topA-heightN-bottomN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightA-bottomN.html?border_parent toauto-topA-heightA-bottomN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomA.html?border_parent topN-heightA-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomN.html?border_parent topN-heightA-bottomN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomA.html?border_parent topA-heightN-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightN-bottomA.html?border_parent topN-heightN-bottomA-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomN.html?border_parent topA-heightN-bottomN-ref.html?border_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightA-bottomN.html?border_parent topA-heightA-bottomN-ref.html?border_parent
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest_margin_abspos.list b/layout/reftests/position-dynamic-changes/vertical/reftest_margin_abspos.list
new file mode 100644
index 0000000000..139bf3f9ab
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest_margin_abspos.list
@@ -0,0 +1,20 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomA.html?margin_abspos topN-heightA-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomN.html?margin_abspos topN-heightA-bottomN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomA.html?margin_abspos topA-heightN-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightN-bottomA.html?margin_abspos topN-heightN-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomN.html?margin_abspos topA-heightN-bottomN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightA-bottomN.html?margin_abspos topA-heightA-bottomN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomA.html?margin_abspos toauto-topN-heightA-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomN.html?margin_abspos toauto-topN-heightA-bottomN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomA.html?margin_abspos toauto-topA-heightN-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightN-bottomA.html?margin_abspos toauto-topN-heightN-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomN.html?margin_abspos toauto-topA-heightN-bottomN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightA-bottomN.html?margin_abspos toauto-topA-heightA-bottomN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomA.html?margin_abspos topN-heightA-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomN.html?margin_abspos topN-heightA-bottomN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomA.html?margin_abspos topA-heightN-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightN-bottomA.html?margin_abspos topN-heightN-bottomA-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomN.html?margin_abspos topA-heightN-bottomN-ref.html?margin_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightA-bottomN.html?margin_abspos topA-heightA-bottomN-ref.html?margin_abspos
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest_margin_parent.list b/layout/reftests/position-dynamic-changes/vertical/reftest_margin_parent.list
new file mode 100644
index 0000000000..0ac1395c43
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest_margin_parent.list
@@ -0,0 +1,20 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomA.html?margin_parent topN-heightA-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomN.html?margin_parent topN-heightA-bottomN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomA.html?margin_parent topA-heightN-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightN-bottomA.html?margin_parent topN-heightN-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomN.html?margin_parent topA-heightN-bottomN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightA-bottomN.html?margin_parent topA-heightA-bottomN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomA.html?margin_parent toauto-topN-heightA-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomN.html?margin_parent toauto-topN-heightA-bottomN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomA.html?margin_parent toauto-topA-heightN-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightN-bottomA.html?margin_parent toauto-topN-heightN-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomN.html?margin_parent toauto-topA-heightN-bottomN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightA-bottomN.html?margin_parent toauto-topA-heightA-bottomN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomA.html?margin_parent topN-heightA-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomN.html?margin_parent topN-heightA-bottomN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomA.html?margin_parent topA-heightN-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightN-bottomA.html?margin_parent topN-heightN-bottomA-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomN.html?margin_parent topA-heightN-bottomN-ref.html?margin_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightA-bottomN.html?margin_parent topA-heightA-bottomN-ref.html?margin_parent
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest_padding_abspos.list b/layout/reftests/position-dynamic-changes/vertical/reftest_padding_abspos.list
new file mode 100644
index 0000000000..133d952931
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest_padding_abspos.list
@@ -0,0 +1,20 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomA.html?padding_abspos topN-heightA-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomN.html?padding_abspos topN-heightA-bottomN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomA.html?padding_abspos topA-heightN-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightN-bottomA.html?padding_abspos topN-heightN-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomN.html?padding_abspos topA-heightN-bottomN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightA-bottomN.html?padding_abspos topA-heightA-bottomN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomA.html?padding_abspos toauto-topN-heightA-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomN.html?padding_abspos toauto-topN-heightA-bottomN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomA.html?padding_abspos toauto-topA-heightN-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightN-bottomA.html?padding_abspos toauto-topN-heightN-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomN.html?padding_abspos toauto-topA-heightN-bottomN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightA-bottomN.html?padding_abspos toauto-topA-heightA-bottomN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomA.html?padding_abspos topN-heightA-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomN.html?padding_abspos topN-heightA-bottomN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomA.html?padding_abspos topA-heightN-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightN-bottomA.html?padding_abspos topN-heightN-bottomA-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomN.html?padding_abspos topA-heightN-bottomN-ref.html?padding_abspos
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightA-bottomN.html?padding_abspos topA-heightA-bottomN-ref.html?padding_abspos
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest_padding_parent.list b/layout/reftests/position-dynamic-changes/vertical/reftest_padding_parent.list
new file mode 100644
index 0000000000..d62ec4e39b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest_padding_parent.list
@@ -0,0 +1,20 @@
+# Please see the comment at the beginning of reftest.list
+
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomA.html?padding_parent topN-heightA-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomN.html?padding_parent topN-heightA-bottomN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomA.html?padding_parent topA-heightN-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightN-bottomA.html?padding_parent topN-heightN-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomN.html?padding_parent topA-heightN-bottomN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightA-bottomN.html?padding_parent topA-heightA-bottomN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomA.html?padding_parent toauto-topN-heightA-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomN.html?padding_parent toauto-topN-heightA-bottomN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomA.html?padding_parent toauto-topA-heightN-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightN-bottomA.html?padding_parent toauto-topN-heightN-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomN.html?padding_parent toauto-topA-heightN-bottomN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightA-bottomN.html?padding_parent toauto-topA-heightA-bottomN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomA.html?padding_parent topN-heightA-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomN.html?padding_parent topN-heightA-bottomN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomA.html?padding_parent topA-heightN-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightN-bottomA.html?padding_parent topN-heightN-bottomA-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomN.html?padding_parent topA-heightN-bottomN-ref.html?padding_parent
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightA-bottomN.html?padding_parent topA-heightA-bottomN-ref.html?padding_parent
diff --git a/layout/reftests/position-dynamic-changes/vertical/reftest_plain.list b/layout/reftests/position-dynamic-changes/vertical/reftest_plain.list
new file mode 100644
index 0000000000..d7aaff396e
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/reftest_plain.list
@@ -0,0 +1,20 @@
+# Please see the comment at the beginning of reftest.list
+
+skip-if(ThreadSanitizer) fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomA.html topN-heightA-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightA-bottomN.html topN-heightA-bottomN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomA.html topA-heightN-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == topN-heightN-bottomA.html topN-heightN-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightN-bottomN.html topA-heightN-bottomN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == topA-heightA-bottomN.html topA-heightA-bottomN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomA.html toauto-topN-heightA-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightA-bottomN.html toauto-topN-heightA-bottomN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomA.html toauto-topA-heightN-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topN-heightN-bottomA.html toauto-topN-heightN-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightN-bottomN.html toauto-topA-heightN-bottomN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == toauto-topA-heightA-bottomN.html toauto-topA-heightA-bottomN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomA.html topN-heightA-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightA-bottomN.html topN-heightA-bottomN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomA.html topA-heightN-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topN-heightN-bottomA.html topN-heightN-bottomA-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightN-bottomN.html topA-heightN-bottomN-ref.html
+fuzzy-if(geckoview,0-2,0-1382) == fromauto-topA-heightA-bottomN.html topA-heightA-bottomN-ref.html
diff --git a/layout/reftests/position-dynamic-changes/vertical/style.css b/layout/reftests/position-dynamic-changes/vertical/style.css
new file mode 100644
index 0000000000..f546e6063b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/style.css
@@ -0,0 +1,19 @@
+#parent {
+ position: relative;
+ width: 400px;
+ height: 400px;
+ background: red;
+ border: 0 solid black;
+}
+#child {
+ position: absolute;
+ width: 100px;
+ left: 100px;
+ background: blue;
+ border: 0 solid black;
+}
+.floatTop {
+ width: 10px;
+ height: 10px;
+ background: green;
+}
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightA-bottomN-ref.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightA-bottomN-ref.html
new file mode 100644
index 0000000000..77f3a35d6a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightA-bottomN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightA-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightA-bottomN.html
new file mode 100644
index 0000000000..defcaaf36c
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightA-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="bottom: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("bottom");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomA-ref.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomA-ref.html
new file mode 100644
index 0000000000..77f3a35d6a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomA.html
new file mode 100644
index 0000000000..713103f622
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("height");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomN-ref.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomN-ref.html
new file mode 100644
index 0000000000..3ac9c1bbcf
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomN.html
new file mode 100644
index 0000000000..6a7dfd263a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topA-heightN-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px; bottom: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("bottom");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomA-ref.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomA-ref.html
new file mode 100644
index 0000000000..77f3a35d6a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomA.html
new file mode 100644
index 0000000000..e590f8656a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="top: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("top");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomN-ref.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomN-ref.html
new file mode 100644
index 0000000000..dcd0e371de
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="bottom: 20px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomN.html
new file mode 100644
index 0000000000..ad4e3e8473
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightA-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="top: 100px; bottom: 20px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("top");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightN-bottomA-ref.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightN-bottomA-ref.html
new file mode 100644
index 0000000000..3ac9c1bbcf
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightN-bottomA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightN-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightN-bottomA.html
new file mode 100644
index 0000000000..56f16219e7
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/toauto-topN-heightN-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px; top: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ toAuto("top");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topA-heightA-bottomN-ref.html b/layout/reftests/position-dynamic-changes/vertical/topA-heightA-bottomN-ref.html
new file mode 100644
index 0000000000..75f7f20153
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topA-heightA-bottomN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="bottom: 200px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topA-heightA-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/topA-heightA-bottomN.html
new file mode 100644
index 0000000000..d7e854a88a
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topA-heightA-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="bottom: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200, "bottom");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomA-ref.html b/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomA-ref.html
new file mode 100644
index 0000000000..1513ea8e6e
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 200px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomA.html
new file mode 100644
index 0000000000..38a506372b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200, "height");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomN-ref.html b/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomN-ref.html
new file mode 100644
index 0000000000..054f968bc4
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px; bottom: 200px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomN.html
new file mode 100644
index 0000000000..832d77a2a6
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topA-heightN-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px; bottom: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200, "bottom");
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomA-ref.html b/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomA-ref.html
new file mode 100644
index 0000000000..bcec5c9d6e
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="top: 200px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomA.html
new file mode 100644
index 0000000000..ca943c2451
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="top: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomN-ref.html b/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomN-ref.html
new file mode 100644
index 0000000000..13417a737b
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomN-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="top: 200px; bottom: 20px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomN.html b/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomN.html
new file mode 100644
index 0000000000..2200c46183
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topN-heightA-bottomN.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="top: 100px; bottom: 20px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topN-heightN-bottomA-ref.html b/layout/reftests/position-dynamic-changes/vertical/topN-heightN-bottomA-ref.html
new file mode 100644
index 0000000000..8e2ef7b2e0
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topN-heightN-bottomA-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px; top: 200px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/position-dynamic-changes/vertical/topN-heightN-bottomA.html b/layout/reftests/position-dynamic-changes/vertical/topN-heightN-bottomA.html
new file mode 100644
index 0000000000..73ae72d582
--- /dev/null
+++ b/layout/reftests/position-dynamic-changes/vertical/topN-heightN-bottomA.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="animate.js" type="text/javascript"></script>
+ <script src="../handleprop.js" type="text/javascript"></script>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child" style="height: 100px; top: 100px;">
+ <div class="floatTop"></div>
+ <div class="floatTop"></div>
+ </div>
+ </div>
+ <script>
+ animate(100, 200);
+ </script>
+ </body>
+</html>