Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/floats
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
160 files changed, 4310 insertions, 0 deletions
diff --git a/layout/reftests/floats/1114329-ref.html b/layout/reftests/floats/1114329-ref.html
new file mode 100644
index 000000000..84e7b49ea
--- /dev/null
+++ b/layout/reftests/floats/1114329-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <style type="text/css">
+    p {  border: 1px solid black; }
+        .layout-main-page-content { width: 75%; float: right; text-align:right; }
+        .layout-right-column { width: 25%; float: left; }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div class="layout-main-page-content">
+        <img src="foo">
+        <p dir="rtl" id="p_10">0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789</p>
+        <p dir="rtl" id="p_20">0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789</p>
+      </div>
+    </div>
+    <div class="layout-right-column" dir="rtl">
+      hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge
+      <img id="image" style="height: 280px; overflow: hidden;" src="foo" width="100%">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/floats/1114329.html b/layout/reftests/floats/1114329.html
new file mode 100644
index 000000000..ad202f8f9
--- /dev/null
+++ b/layout/reftests/floats/1114329.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <style type="text/css">
+    p {  border: 1px solid black; }
+        .layout-main-page-content { width: 75%; float: right;}
+        .layout-right-column { width: 25%; float: left; }
+    </style>
+    <script type="text/javascript">
+      function do_test() {
+        document.getElementById("image").removeAttribute("hidden");
+        document.documentElement.removeAttribute("class");
+      };
+    </script>
+  </head>
+  <body dir="rtl" onload="do_test()">
+    <div>
+      <div class="layout-main-page-content">
+        <img src="foo">
+        <p dir="rtl" id="p_10">0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789</p>
+        <p dir="rtl" id="p_20">0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789 0123456789</p>
+      </div>
+    </div>
+    <div class="layout-right-column">
+      hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge
+      <img id="image" hidden="true" style="height: 280px; overflow: hidden;" src="foo" width="100%">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/floats/1236745-1-ref.html b/layout/reftests/floats/1236745-1-ref.html
new file mode 100644
index 000000000..79da18485
--- /dev/null
+++ b/layout/reftests/floats/1236745-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<title>Reftest, bug 1236745</title>
+<style>
+
+div.contain {
+  border: medium solid blue;
+  width: 100px;
+  height: 200px;
+}
+
+.float1 {
+  float: left;
+  background: yellow;
+  width: 10px;
+  height: 60px;
+}
+
+.float2 {
+  float: left; clear: left;
+  background: aqua;
+  width: 50px;
+  height: 50px;
+}
+
+.bfc {
+  float: right;
+  background: #00137f;
+  width: 50px;
+  height: 50px;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float1"></div>
+  <div class="bfc"></div>
+  <div class="float2"></div>
+</div>
diff --git a/layout/reftests/floats/1236745-1.html b/layout/reftests/floats/1236745-1.html
new file mode 100644
index 000000000..e1264fb9a
--- /dev/null
+++ b/layout/reftests/floats/1236745-1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<title>Reftest, bug 1236745</title>
+<style>
+
+div.contain {
+  border: medium solid blue;
+  width: 100px;
+  height: 200px;
+}
+
+.float1 {
+  float: left;
+  background: yellow;
+  width: 10px;
+  height: 60px;
+}
+
+.float2 {
+  float: left; clear: left;
+  background: aqua;
+  width: 50px;
+  height: 50px;
+}
+
+.bfc {
+  overflow: hidden;
+  background: fuchsia;
+  /*
+   * Will be 90px wide (and thus 90px high) if placed based on only its
+   * top or based on a 50px height, but 50px wide (and thus 50px high)
+   * if placed based on a 90px height.
+   */
+}
+
+img {
+  width: 100%;
+  display: block;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float1"></div>
+  <div class="float2"></div>
+  <div class="bfc">
+    <img src="../bugs/solidblue.png"> <!-- 16x16 blue image -->
+  </div>
+</div>
diff --git a/layout/reftests/floats/1291110-1-ref.html b/layout/reftests/floats/1291110-1-ref.html
new file mode 100644
index 000000000..5655fa212
--- /dev/null
+++ b/layout/reftests/floats/1291110-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<style>
+.container {
+  position: relative;
+  width: 250px;
+  height: 300px;
+  border: 1px solid blue;
+}
+
+.float1 {
+  position: absolute;
+  width: 100px;
+  height: 50px;
+  background-color: green;
+}
+
+.float2 {
+  position: absolute;
+  top: 50px;
+  width: 180px;
+  height: 50px;
+  background-color: lightgreen;
+}
+
+.box {
+  position: absolute;
+  left: 180px;
+  width: 30px;
+  height: 80px;
+  background-color: blue;
+}
+</style>
+
+<div class="container">
+  <div class="float1"></div>
+  <div class="float2"></div>
+  <div class="box"></div>
+</div>
+<p>The test pass if the inline blue box does not overlap any of the green float boxes.</p>
diff --git a/layout/reftests/floats/1291110-1.html b/layout/reftests/floats/1291110-1.html
new file mode 100644
index 000000000..dd1645744
--- /dev/null
+++ b/layout/reftests/floats/1291110-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<style>
+.container {
+  width: 250px;
+  height: 300px;
+  border: 1px solid blue;
+}
+
+.float1 {
+  float: left;
+  width: 100px;
+  height: 50px;
+  background-color: green;
+}
+
+.float2 {
+  float: left;
+  width: 180px;
+  height: 50px;
+  background-color: lightgreen;
+}
+
+.box {
+  display: inline-block;
+  width: 30px;
+  height: 80px;
+  background-color: blue;
+}
+</style>
+
+<div class="container">
+  <div class="float1"></div>
+  <div class="float2"></div>
+  <div class="box"></div>
+</div>
+<p>The test pass if the inline blue box does not overlap any of the green float boxes.</p>
+
diff --git a/layout/reftests/floats/1291110-2-ref.html b/layout/reftests/floats/1291110-2-ref.html
new file mode 100644
index 000000000..3fde1c3ac
--- /dev/null
+++ b/layout/reftests/floats/1291110-2-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<style>
+.container {
+  position: relative;
+  width: 250px;
+  height: 300px;
+  border: 1px solid blue;
+}
+
+.float1 {
+  position: absolute;
+  width: 100px;
+  height: 50px;
+  background-color: green;
+}
+
+.float2 {
+  position: absolute;
+  top: 50px;
+  left: 70px;
+  width: 180px;
+  height: 50px;
+  background-color: lightgreen;
+}
+
+.box {
+  position: absolute;
+  top: 50px;
+  width: 30px;
+  height: 80px;
+  background-color: blue;
+}
+</style>
+
+<div class="container">
+  <div class="float1"></div>
+  <div class="float2"></div>
+  <div class="box"></div>
+</div>
+<p>The test pass if the inline blue box does not overlap any of the green float boxes.</p>
diff --git a/layout/reftests/floats/1291110-2.html b/layout/reftests/floats/1291110-2.html
new file mode 100644
index 000000000..57b502ab7
--- /dev/null
+++ b/layout/reftests/floats/1291110-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+.container {
+  width: 250px;
+  height: 300px;
+  border: 1px solid blue;
+}
+
+.float1 {
+  float: left;
+  width: 100px;
+  height: 50px;
+  background-color: green;
+}
+
+.float2 {
+  float: right;
+  width: 180px;
+  height: 50px;
+  background-color: lightgreen;
+}
+
+.box {
+  display: inline-block;
+  width: 30px;
+  height: 80px;
+  background-color: blue;
+}
+</style>
+
+<div class="container">
+  <div class="float1"></div>
+  <div class="float2"></div>
+  <div class="box"></div>
+</div>
+<p>The test pass if the inline blue box does not overlap any of the green float boxes.</p>
diff --git a/layout/reftests/floats/345369-1-ref.html b/layout/reftests/floats/345369-1-ref.html
new file mode 100644
index 000000000..9febdf382
--- /dev/null
+++ b/layout/reftests/floats/345369-1-ref.html
@@ -0,0 +1,9 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; position: absolute">
+  <div style="position: absolute; top: 0; left: 0; height: 0.5em; width: 1em; background: blue"></div>
+  <div style="position: absolute; top: 0.5em; left: 0; height: 2em; width: 10em; background: aqua"></div>
+
+  <span style="position: absolute; top: 2.5em; left: 0; height: 1em; width: 4em; background: maroon;"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-1.html b/layout/reftests/floats/345369-1.html
new file mode 100644
index 000000000..714899a47
--- /dev/null
+++ b/layout/reftests/floats/345369-1.html
@@ -0,0 +1,9 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; line-height: 1; font-family: sans-serif;">
+  <div style="float: left; height: 0.5em; width: 1em; background: blue"></div>
+  <div style="float: left; height: 2em; width: 10em; background: aqua"></div>
+
+  <span style="display:inline-block; height: 1em; width: 4em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-2-ref.html b/layout/reftests/floats/345369-2-ref.html
new file mode 100644
index 000000000..76d999dcf
--- /dev/null
+++ b/layout/reftests/floats/345369-2-ref.html
@@ -0,0 +1,10 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; position: relative">
+  <div style="position: absolute; top: 0; left: 0; height: 2em; width: 1em; background: blue"></div>
+  <div style="position: absolute; top: 2em; left: 0; height: 2em; width: 5em; background: aqua"></div>
+
+  <span style="position: absolute; top: 0; left: 1em; height: 1em; width: 4em; background: maroon; vertical-align: bottom"></span>
+  <span style="position: absolute; top: 1em; left: 5em; height: 3em; width: 4em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-2.html b/layout/reftests/floats/345369-2.html
new file mode 100644
index 000000000..ccd4696a0
--- /dev/null
+++ b/layout/reftests/floats/345369-2.html
@@ -0,0 +1,12 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; line-height: 1; font-family: sans-serif;">
+  <div style="float: left; height: 2em; width: 1em; background: blue"></div>
+  <div style="float: left; clear: left; height: 2em; width: 5em; background: aqua"></div>
+
+  <!-- small <span style="font-size: 3em">big</span> -->
+
+  <span style="display:inline-block; height: 1em; width: 4em; background: maroon; vertical-align: bottom"></span>
+  <span style="display:inline-block; height: 3em; width: 4em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-3-ref.html b/layout/reftests/floats/345369-3-ref.html
new file mode 100644
index 000000000..166f5e475
--- /dev/null
+++ b/layout/reftests/floats/345369-3-ref.html
@@ -0,0 +1,10 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; position: relative">
+  <div style="position: absolute; top: 0; left: 0; height: 2em; width: 1em; background: blue"></div>
+  <div style="position: absolute; top: 2em; left: 0; height: 2em; width: 5em; background: aqua"></div>
+
+  <span style="position: absolute; top: 0; left: 1em; height: 1em; width: 4em; background: maroon; vertical-align: bottom"></span>
+  <span style="position: absolute; top: 4em; left: 0; height: 3em; width: 6em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-3.html b/layout/reftests/floats/345369-3.html
new file mode 100644
index 000000000..f758302d9
--- /dev/null
+++ b/layout/reftests/floats/345369-3.html
@@ -0,0 +1,10 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; line-height: 1; font-family: sans-serif;">
+  <div style="float: left; height: 2em; width: 1em; background: blue"></div>
+  <div style="float: left; clear: left; height: 2em; width: 5em; background: aqua"></div>
+
+  <span style="display:inline-block; height: 1em; width: 4em; background: maroon; vertical-align: bottom"></span>
+  <span style="display:inline-block; height: 3em; width: 6em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-4-ref.html b/layout/reftests/floats/345369-4-ref.html
new file mode 100644
index 000000000..79d32213e
--- /dev/null
+++ b/layout/reftests/floats/345369-4-ref.html
@@ -0,0 +1,10 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; position: relative">
+  <div style="position: absolute; top: 0; left: 0; height: 2em; width: 2em; background: blue"></div>
+  <div style="position: absolute; top: 2em; left: 0; height: 2em; width: 5em; background: aqua"></div>
+
+  <span style="position: absolute; top: 0; left: 2em; height: 1em; width: 3em; background: maroon; vertical-align: bottom"></span>
+  <span style="position: absolute; top: 1em; left: 5em; height: 3em; width: 5em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-4.html b/layout/reftests/floats/345369-4.html
new file mode 100644
index 000000000..a5c53e254
--- /dev/null
+++ b/layout/reftests/floats/345369-4.html
@@ -0,0 +1,10 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; line-height: 1; font-family: sans-serif;">
+  <div style="float: left; height: 2em; width: 2em; background: blue"></div>
+  <div style="float: left; clear: left; height: 2em; width: 5em; background: aqua"></div>
+
+  <span style="display:inline-block; height: 1em; width: 3em; background: maroon; vertical-align: bottom"></span>
+  <span style="display:inline-block; height: 3em; width: 5em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-5-ref.html b/layout/reftests/floats/345369-5-ref.html
new file mode 100644
index 000000000..a38cc580a
--- /dev/null
+++ b/layout/reftests/floats/345369-5-ref.html
@@ -0,0 +1,10 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; position: relative">
+  <div style="position: absolute; top: 0; left: 0; height: 2em; width: 2em; background: blue"></div>
+  <div style="position: absolute; top: 2em; left: 0; height: 2em; width: 5em; background: aqua"></div>
+
+  <span style="position: absolute; top: 0; left: 2em; height: 1em; width: 2em; background: maroon; vertical-align: bottom"></span>
+  <span style="position: absolute; top: 4em; left: 0; height: 3em; width: 6em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/345369-5.html b/layout/reftests/floats/345369-5.html
new file mode 100644
index 000000000..0ed4014c1
--- /dev/null
+++ b/layout/reftests/floats/345369-5.html
@@ -0,0 +1,10 @@
+<title>Ambiguous line width</title>
+
+<div style="background: yellow; width: 10em; height: 10em; line-height: 1; font-family: sans-serif;">
+  <div style="float: left; height: 2em; width: 2em; background: blue"></div>
+  <div style="float: left; clear: left; height: 2em; width: 5em; background: aqua"></div>
+
+  <span style="display:inline-block; height: 1em; width: 2em; background: maroon; vertical-align: bottom"></span>
+  <span style="display:inline-block; height: 3em; width: 6em; background: maroon; vertical-align: bottom"></span>
+
+</div>
diff --git a/layout/reftests/floats/429974-1-ref.html b/layout/reftests/floats/429974-1-ref.html
new file mode 100644
index 000000000..d2d2e6aac
--- /dev/null
+++ b/layout/reftests/floats/429974-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<style type="text/css">
+
+.contain {
+  background: aqua; color: black;
+  height: 10px; margin: 2px 50px;
+}
+
+.fl, .fr { height: 5px; }
+.fl { float: left; width: 56px; }
+.fr { float: right; width: 73px; }
+
+.t { overflow: hidden; background: blue; height: 5px; width: 85px;
+     border-left: 1px solid blue; padding-left: 2px;
+     padding-right: 4px; border-right: 8px solid blue; }
+
+</style>
+
+</head>
+
+<body style="width: 400px">
+
+<div class="contain">
+	<div class="fl" id="p"></div>
+	<div class="fr"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="t"></div>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/floats/429974-1.html b/layout/reftests/floats/429974-1.html
new file mode 100644
index 000000000..56693a937
--- /dev/null
+++ b/layout/reftests/floats/429974-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<style type="text/css">
+
+.contain {
+  background: aqua; color: black;
+  height: 10px; margin: 2px 50px;
+}
+
+.fl, .fr { height: 5px; }
+.fl { float: left; width: 56px; }
+.fr { float: right; width: 73px; }
+
+.t { overflow: hidden; background: blue; height: 5px; width: 85px;
+     border-left: 1px solid blue; padding-left: 2px;
+     padding-right: 4px; border-right: 8px solid blue; }
+
+</style>
+
+</head>
+
+<body style="width: 400px" onload="document.getElementById('p').nextSibling.data = ' ';">
+
+<div class="contain">
+	<div class="fl" id="p"></div>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+	<div class="fr"></div>
+</div>
+
+<div class="contain">
+	<div class="fl"></div>
+	<div class="t"></div>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/floats/478834-1-ref.html b/layout/reftests/floats/478834-1-ref.html
new file mode 100644
index 000000000..22cc4548e
--- /dev/null
+++ b/layout/reftests/floats/478834-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Bug 478834 Testcase</title>
+  <style>
+  html { overflow: hidden }
+  </style>
+</head>
+<body>
+<div style="background:teal; width: 500px">
+  <div style="background:yellow; width: 100px; height: 50px;"></div>
+  <div style="margin-right: 150px">
+    <table width="100%" style="background: fuchsia">
+      <tr><td>
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+      </td></tr>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/478834-1.html b/layout/reftests/floats/478834-1.html
new file mode 100644
index 000000000..c38663ec2
--- /dev/null
+++ b/layout/reftests/floats/478834-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Bug 478834 Testcase</title>
+  <style>
+  html { overflow: hidden }
+  </style>
+</head>
+<body>
+<div style="background:teal; width: 500px">
+  <div style="background:yellow; float:left; width: 100px; height: 50px;"></div>
+  <div style="margin-right: 150px">
+    <table width="100%" style="background: fuchsia">
+      <tr><td>
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+        x x x x x x x x x x x x x x x x x x x x x x
+      </td></tr>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/546048-1-ref.html b/layout/reftests/floats/546048-1-ref.html
new file mode 100644
index 000000000..b12cfee4c
--- /dev/null
+++ b/layout/reftests/floats/546048-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testcase, bug 546048</title>
+<style type="text/css">
+
+body { font-size: 10px }
+dl { min-height: 35px; }
+dt { float: left; width: 50%; padding-left: 45px; }
+span { float: left; }
+
+</style>
+
+</head>
+
+<body>
+	<dl>
+		<dt>
+			<span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUENAAAIBKDT/p01hQ83KEDN5FQnAoFAIBAIBAKB4EewtloCPhS2RvMAAAAASUVORK5CYII="></span>					Heading<br />
+			This is the line that overlaps the float.
+	</dl>
+	<dl>
+		<dt>
+			<span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUENAAAIBKDT/p01hQ83KEDN5FQnAoFAIBAIBAKB4EewtloCPhS2RvMAAAAASUVORK5CYII="></span>					Heading<br />
+			Here's an equivalent line where we don't simulate the image loading after the page.
+	</dl>
+
+</body>
+</html>
diff --git a/layout/reftests/floats/546048-1.html b/layout/reftests/floats/546048-1.html
new file mode 100644
index 000000000..502bd0bf6
--- /dev/null
+++ b/layout/reftests/floats/546048-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testcase, bug 546048</title>
+<script type="text/javascript">
+
+// Simulate the image loading after the page loads.
+function move_image()
+{
+    var img = document.querySelector("img");
+    var root = document.documentElement;
+    img.style.width='5px';
+    root.style.display='none';
+    img.offsetHeight;
+    root.style.display='';
+    img.offsetHeight;
+    img.style.width='';
+}
+
+window.addEventListener("load", move_image, false);
+
+</script>
+
+<style type="text/css">
+
+body { font-size: 10px }
+dl { min-height: 35px; }
+dt { float: left; width: 50%; padding-left: 45px; }
+span { float: left; }
+
+</style>
+
+</head>
+
+<body>
+	<dl>
+		<dt>
+			<span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUENAAAIBKDT/p01hQ83KEDN5FQnAoFAIBAIBAKB4EewtloCPhS2RvMAAAAASUVORK5CYII="></span>					Heading<br />
+			This is the line that overlaps the float.
+	</dl>
+	<dl>
+		<dt>
+			<span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUENAAAIBKDT/p01hQ83KEDN5FQnAoFAIBAIBAKB4EewtloCPhS2RvMAAAAASUVORK5CYII="></span>					Heading<br />
+			Here's an equivalent line where we don't simulate the image loading after the page.
+	</dl>
+
+</body>
+</html>
diff --git a/layout/reftests/floats/775350-1-ref.html b/layout/reftests/floats/775350-1-ref.html
new file mode 100644
index 000000000..db8d6c271
--- /dev/null
+++ b/layout/reftests/floats/775350-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body>
+  <div id="top"></div>
+  <div>
+    <div style="float: left; position: relative;">
+      <div id="inner" style="display: block; top: 100px; width: 100px; height: 100px; background: pink; position:absolute;"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/775350-1.html b/layout/reftests/floats/775350-1.html
new file mode 100644
index 000000000..8d5ffddb9
--- /dev/null
+++ b/layout/reftests/floats/775350-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<head>
+  <script>
+
+function handleLoad() {
+  setTimeout(f1, 0);
+}
+
+function f1() {
+  document.getElementById("inner").style.top = "100px";
+  setTimeout(f2, 0);
+}
+
+function f2() {
+  document.getElementById("top").style.display = "block";
+  document.documentElement.removeAttribute("class");
+}
+
+  </script>
+</head>
+<body onload="handleLoad()">
+  <div id="top" style="display: none;"></div>
+  <div>
+    <div style="float: left; position: relative;">
+      <div id="inner" style="display: block; top: 110px; width: 100px; height: 100px; background: pink; position:absolute;"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/bfc-displace-1a-ref.html b/layout/reftests/floats/bfc-displace-1a-ref.html
new file mode 100644
index 000000000..3171bdc03
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-1a-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  float: left;
+  width: 250px;
+  margin-top: 7px;
+  height: 13px; /* fits exactly */
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float" style="width: 100px"></div>
+  <div class="bfc"></div>
+  <div class="float" style="width: 200px"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-1a.html b/layout/reftests/floats/bfc-displace-1a.html
new file mode 100644
index 000000000..618951040
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-1a.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  overflow: hidden;
+  width: 250px;
+  margin-top: 7px;
+  height: 13px; /* fits exactly */
+  margin-bottom: 20px;
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float" style="width: 100px"></div>
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-1b-ref.html b/layout/reftests/floats/bfc-displace-1b-ref.html
new file mode 100644
index 000000000..1eddcbdf6
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-1b-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  float: left;
+  clear: left;
+  width: 250px;
+  height: 14px; /* one pixel too tall to fit next to first float */
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float" style="width: 100px"></div>
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-1b.html b/layout/reftests/floats/bfc-displace-1b.html
new file mode 100644
index 000000000..b7d4ec483
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-1b.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  overflow: hidden;
+  width: 250px;
+  margin-top: 7px;
+  height: 14px; /* one pixel too tall to fit next to first float */
+  margin-bottom: 20px;
+  background: fuchsia;
+}
+
+</style>
+
+<div class="contain">
+  <div class="float" style="width: 100px"></div>
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-2a-ref.html b/layout/reftests/floats/bfc-displace-2a-ref.html
new file mode 100644
index 000000000..0855ce8de
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-2a-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.block {
+  height: 10px;
+  background: aqua;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  float: left;
+  width: 250px;
+  margin-top: 7px;
+  height: 13px; /* fits exactly */
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="block"></div>
+  <div class="float" style="width: 100px"></div>
+  <div class="bfc"></div>
+  <div class="float" style="width: 200px"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-2a.html b/layout/reftests/floats/bfc-displace-2a.html
new file mode 100644
index 000000000..615b4a759
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-2a.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.block {
+  height: 10px;
+  background: aqua;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  overflow: hidden;
+  width: 250px;
+  margin-top: 7px;
+  height: 13px; /* fits exactly */
+  margin-bottom: 20px;
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="block"></div>
+  <div class="float" style="width: 100px"></div>
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-2b-ref.html b/layout/reftests/floats/bfc-displace-2b-ref.html
new file mode 100644
index 000000000..bb6ede1ce
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-2b-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.block {
+  height: 10px;
+  background: aqua;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  float: left;
+  clear: left;
+  width: 250px;
+  height: 14px; /* one pixel too tall to fit next to first float */
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="block"></div>
+  <div class="float" style="width: 100px"></div>
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-2b.html b/layout/reftests/floats/bfc-displace-2b.html
new file mode 100644
index 000000000..2e9577724
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-2b.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.block {
+  height: 10px;
+  background: aqua;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  overflow: hidden;
+  width: 250px;
+  margin-top: 7px;
+  height: 14px; /* one pixel too tall to fit next to first float */
+  margin-bottom: 20px;
+  background: fuchsia;
+}
+
+</style>
+
+<div class="contain">
+  <div class="block"></div>
+  <div class="float" style="width: 100px"></div>
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-3a-ref.html b/layout/reftests/floats/bfc-displace-3a-ref.html
new file mode 100644
index 000000000..b0744d320
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-3a-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  float: left;
+  width: 250px;
+  height: 20px; /* fits exactly */
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float" style="width: 100px; margin-top: 7px;"></div>
+  <div class="bfc" style="margin-top: 7px"></div>
+  <div class="float" style="width: 200px"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-3a.html b/layout/reftests/floats/bfc-displace-3a.html
new file mode 100644
index 000000000..6622fa723
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-3a.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.margin {
+  margin-top: 3px;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  overflow: hidden;
+  width: 250px;
+  margin-top: 7px; /* collapses */
+  height: 20px; /* fits exactly */
+  margin-bottom: 20px;
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="margin">
+    <div class="float" style="width: 100px"></div>
+    <div class="float" style="width: 200px"></div>
+    <div class="bfc"></div>
+  </div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-3b-ref.html b/layout/reftests/floats/bfc-displace-3b-ref.html
new file mode 100644
index 000000000..284301c1f
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-3b-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  float: left;
+  clear: left;
+  width: 250px;
+  height: 21px; /* one pixel too tall to fit next to first float */
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float" style="width: 100px; margin-top: 3px"></div>
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-3b.html b/layout/reftests/floats/bfc-displace-3b.html
new file mode 100644
index 000000000..d4dc7f9b3
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-3b.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.margin {
+  margin-top: 3px;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  overflow: hidden;
+  width: 250px;
+  margin-top: 7px; /* does not collapse, due to clearance */
+  height: 21px; /* fits exactly */
+  margin-bottom: 20px;
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="margin">
+    <div class="float" style="width: 100px"></div>
+    <div class="float" style="width: 200px"></div>
+    <div class="bfc"></div>
+  </div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-4-ref.html b/layout/reftests/floats/bfc-displace-4-ref.html
new file mode 100644
index 000000000..959f4bbef
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-4-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  float: left;
+  width: 200px;
+  height: 15px;
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-displace-4.html b/layout/reftests/floats/bfc-displace-4.html
new file mode 100644
index 000000000..2ff18c691
--- /dev/null
+++ b/layout/reftests/floats/bfc-displace-4.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  overflow: hidden;
+  width: 200px;
+  margin-right: 100px; /* ignored */
+  height: 15px;
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-shrink-1-ref.html b/layout/reftests/floats/bfc-shrink-1-ref.html
new file mode 100644
index 000000000..071b66300
--- /dev/null
+++ b/layout/reftests/floats/bfc-shrink-1-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  float: right;
+  width: 200px;
+  height: 50px;
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="bfc"></div>
+  <div class="float" style="width: 100px"></div>
+  <div class="float" style="width: 200px"></div>
+</div>
diff --git a/layout/reftests/floats/bfc-shrink-1.html b/layout/reftests/floats/bfc-shrink-1.html
new file mode 100644
index 000000000..6f89a90a5
--- /dev/null
+++ b/layout/reftests/floats/bfc-shrink-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<title>Test of block formatting context displacement by floats</title>
+<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
+<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
+<style>
+
+.contain {
+  border: medium solid;
+  width: 400px;
+  height: 400px;
+  background: yellow;
+}
+
+.float {
+  float: left;
+  clear: left;
+  height: 20px;
+  background: blue;
+}
+
+.bfc {
+  overflow: hidden;
+  height: 50px;
+  background: fuchsia;
+}
+
+</style>
+
+
+<div class="contain">
+  <div class="float" style="width: 100px"></div>
+  <div class="float" style="width: 200px"></div>
+  <div class="bfc"></div>
+</div>
diff --git a/layout/reftests/floats/border-box-wrap-around-float-ref.html b/layout/reftests/floats/border-box-wrap-around-float-ref.html
new file mode 100644
index 000000000..d688e3548
--- /dev/null
+++ b/layout/reftests/floats/border-box-wrap-around-float-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      img { display: block; margin-left: 200px; height: 100px; width: 100px; }
+    </style>
+  </head>
+  <body>
+    <img src="../bugs/solidblue.png">
+  </body>
+</html>
diff --git a/layout/reftests/floats/border-box-wrap-around-float.html b/layout/reftests/floats/border-box-wrap-around-float.html
new file mode 100644
index 000000000..dd5021352
--- /dev/null
+++ b/layout/reftests/floats/border-box-wrap-around-float.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      div { float: left; width: 200px; height: 200px; }
+      img { display: block; margin-left: 100px; height: 100px; width: 100px; }
+    </style>
+  </head>
+  <body>
+    <div></div>
+    <img src="../bugs/solidblue.png">
+  </body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-1-ref.html b/layout/reftests/floats/float-in-rtl-1-ref.html
new file mode 100644
index 000000000..597bc68d0
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div style="width:0px;height:0px;overflow:visible">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-left:200px;"></div>
+</div>
+<div style="width:0px;height:0px;overflow:visible">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-left:100px;"></div>
+</div>
+<div style="background:silver;">
+  <div style="width:100px">This text should appear to the LEFT of the red and green blocks.</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-1a.html b/layout/reftests/floats/float-in-rtl-1a.html
new file mode 100644
index 000000000..a20c1e371
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-1a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div style="width:300px" dir="rtl">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+</div>
+<div style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the LEFT of the red and green blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-1b.html b/layout/reftests/floats/float-in-rtl-1b.html
new file mode 100644
index 000000000..0d669dd15
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-1b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+</div>
+<div style="width:200px" dir="rtl">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the LEFT of the red and green blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-1c.html b/layout/reftests/floats/float-in-rtl-1c.html
new file mode 100644
index 000000000..95f03f289
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-1c.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div style="width:300px" dir="rtl">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+</div>
+<div style="width:200px" dir="rtl">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the LEFT of the red and green blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-1d.html b/layout/reftests/floats/float-in-rtl-1d.html
new file mode 100644
index 000000000..2b9c91943
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-1d.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div dir="rtl" style="width:300px">
+  <div style="width:300px">
+    <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="width:200px">
+    <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+</div>
+<div style="background:silver">
+This text should appear to the LEFT of the red and green blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-2-ref.html b/layout/reftests/floats/float-in-rtl-2-ref.html
new file mode 100644
index 000000000..385bb669b
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div style="width:0px;height:0px;overflow:visible">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);display:inline-block;"></div>
+</div>
+<div style="width:0px;height:0px;overflow:visible">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-left:100px;"></div>
+</div>
+<div style="background:silver;">
+  <div style="margin-left:200px;">This text should appear to the RIGHT of the green and red blocks.</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-2a.html b/layout/reftests/floats/float-in-rtl-2a.html
new file mode 100644
index 000000000..6e3a6968d
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-2a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div dir="rtl" style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+</div>
+<div style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the RIGHT of the green and red blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-2b.html b/layout/reftests/floats/float-in-rtl-2b.html
new file mode 100644
index 000000000..abe03dbef
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-2b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+</div>
+<div dir="rtl" style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the RIGHT of the green and red blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-2c.html b/layout/reftests/floats/float-in-rtl-2c.html
new file mode 100644
index 000000000..8bfa83843
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-2c.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div dir="rtl" style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+</div>
+<div dir="rtl" style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the RIGHT of the green and red blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-2d.html b/layout/reftests/floats/float-in-rtl-2d.html
new file mode 100644
index 000000000..c17b493e3
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-2d.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body>
+<div dir="rtl" style="width:-moz-fit-content">
+  <div style="width:300px">
+    <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div style="width:200px">
+    <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+</div>
+<div style="background:silver">
+This text should appear to the RIGHT of the green and red blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-3-ref.html b/layout/reftests/floats/float-in-rtl-3-ref.html
new file mode 100644
index 000000000..0a6199b93
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-3-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div style="width:0px;height:0px;overflow:visible">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-right:200px;"></div>
+</div>
+<div style="width:0px;height:0px;overflow:visible">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-right:100px;"></div>
+</div>
+<div style="background:silver;">
+  <div style="width:100px;">This text should appear to the RIGHT of the green and red blocks.</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-3a.html b/layout/reftests/floats/float-in-rtl-3a.html
new file mode 100644
index 000000000..33f905aed
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-3a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div dir="ltr" style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+</div>
+<div style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the RIGHT of the green and red blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-3b.html b/layout/reftests/floats/float-in-rtl-3b.html
new file mode 100644
index 000000000..8e2ad66ba
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-3b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+</div>
+<div dir="ltr" style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the RIGHT of the green and red blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-3c.html b/layout/reftests/floats/float-in-rtl-3c.html
new file mode 100644
index 000000000..9e6b6f999
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-3c.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div dir="ltr" style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+</div>
+<div dir="ltr" style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:left"></div>
+</div>
+<div style="background:silver">
+This text should appear to the RIGHT of the green and red blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-3d.html b/layout/reftests/floats/float-in-rtl-3d.html
new file mode 100644
index 000000000..cc784f744
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-3d.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div dir="ltr" style="width:-moz-fit-content">
+  <div style="width:300px">
+    <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div style="width:200px">
+    <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+</div>
+<div style="background:silver">
+This text should appear to the RIGHT of the green and red blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-4-ref.html b/layout/reftests/floats/float-in-rtl-4-ref.html
new file mode 100644
index 000000000..fc726af4d
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-4-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div style="width:0px;height:0px;overflow:visible">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);display:inline-block;"></div>
+</div>
+<div style="width:0px;height:0px;overflow:visible">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-right:100px;"></div>
+</div>
+<div style="background:silver;">
+  <div style="margin-right:200px;">This text should appear to the LEFT of the red and green blocks.</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-4a.html b/layout/reftests/floats/float-in-rtl-4a.html
new file mode 100644
index 000000000..04d416d40
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-4a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div dir="ltr" style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+</div>
+<div style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the LEFT of the red and green blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-4b.html b/layout/reftests/floats/float-in-rtl-4b.html
new file mode 100644
index 000000000..380ee3307
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-4b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+</div>
+<div dir="ltr" style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the LEFT of the red and green blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-4c.html b/layout/reftests/floats/float-in-rtl-4c.html
new file mode 100644
index 000000000..e4a9cfcd0
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-4c.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div dir="ltr" style="width:300px">
+  <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+</div>
+<div dir="ltr" style="width:200px">
+  <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+</div>
+<div style="background:silver">
+This text should appear to the LEFT of the red and green blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-4d.html b/layout/reftests/floats/float-in-rtl-4d.html
new file mode 100644
index 000000000..b7af65b19
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-4d.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+</head>
+<body dir="rtl">
+<div dir="ltr" style="width:-moz-fit-content">
+  <div style="width:300px">
+    <div style="width:100px;height:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="width:200px">
+    <div style="width:100px;height:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+</div>
+<div style="background:silver">
+This text should appear to the LEFT of the red and green blocks.
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-1-ref.html b/layout/reftests/floats/float-in-rtl-slr-1-ref.html
new file mode 100644
index 000000000..f5af2bc19
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.slr {
+   writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:calc(100vh - 316px);"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:calc(100vh - 216px);"></div>
+  </div>
+  <div class="slr" style="background:silver; height: calc(100vh - 16px);">
+    <div style="height:100px;">This text should appear BELOW the red and green blocks.</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-1a.html b/layout/reftests/floats/float-in-rtl-slr-1a.html
new file mode 100644
index 000000000..04e05bf2c
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-1a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+   writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px" dir="rtl">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-1b.html b/layout/reftests/floats/float-in-rtl-slr-1b.html
new file mode 100644
index 000000000..0d6744919
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-1b.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+   writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px" dir="rtl">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-1c.html b/layout/reftests/floats/float-in-rtl-slr-1c.html
new file mode 100644
index 000000000..41e3be793
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-1c.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+   writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px" dir="rtl">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px" dir="rtl">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-1d.html b/layout/reftests/floats/float-in-rtl-slr-1d.html
new file mode 100644
index 000000000..8813c2a63
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-1d.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-2-ref.html b/layout/reftests/floats/float-in-rtl-slr-2-ref.html
new file mode 100644
index 000000000..b3cd61f6c
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:calc(100vh - 116px);"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:calc(100vh - 216px);"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div class="slr" style="background:silver; height: calc(100vh - 16px);">
+      <div style="margin-bottom:200px;">This text should appear ABOVE the green and red blocks.</div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-2a.html b/layout/reftests/floats/float-in-rtl-slr-2a.html
new file mode 100644
index 000000000..31c4fe178
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-2a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-2b.html b/layout/reftests/floats/float-in-rtl-slr-2b.html
new file mode 100644
index 000000000..dd2558766
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-2b.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="rtl" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-2c.html b/layout/reftests/floats/float-in-rtl-slr-2c.html
new file mode 100644
index 000000000..4ee217ce1
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-2c.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="rtl" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-2d.html b/layout/reftests/floats/float-in-rtl-slr-2d.html
new file mode 100644
index 000000000..b3b9623ee
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-2d.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-3-ref.html b/layout/reftests/floats/float-in-rtl-slr-3-ref.html
new file mode 100644
index 000000000..4c99aa543
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-3-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+ <div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:200px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:100px;"></div>
+  </div>
+  <div class="slr" style="background:silver; height:calc(100vh - 16px);">
+    <div style="margin-bottom:calc(100vh - 116px); direction:rtl">This text should appear ABOVE the green and red blocks.</div>
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-3a.html b/layout/reftests/floats/float-in-rtl-slr-3a.html
new file mode 100644
index 000000000..641a6aa79
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-3a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+ <div style="direction: rtl;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-3b.html b/layout/reftests/floats/float-in-rtl-slr-3b.html
new file mode 100644
index 000000000..613ffac32
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-3b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+ <div style="direction: rtl;">
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-3c.html b/layout/reftests/floats/float-in-rtl-slr-3c.html
new file mode 100644
index 000000000..5c4669bb4
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-3c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+ <div style="direction: rtl;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-3d.html b/layout/reftests/floats/float-in-rtl-slr-3d.html
new file mode 100644
index 000000000..ef7b1886f
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-3d.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+}
+</style>
+</head>
+<body>
+ <div style="direction: rtl;">
+  <div dir="ltr" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+ This text should appear ABOVE the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-4-ref.html b/layout/reftests/floats/float-in-rtl-slr-4-ref.html
new file mode 100644
index 000000000..1696cdd4d
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-4-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+  direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:0"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:100px"></div>
+  </div>
+  <div class="slr" style="background:silver; height: calc(100vh - 16px);">
+    <div style="height: calc(100vh - 216px); margin-top: 200px">This text should appear BELOW the red and green blocks.</div>
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-4a.html b/layout/reftests/floats/float-in-rtl-slr-4a.html
new file mode 100644
index 000000000..f94ed5098
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-4a.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+  direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div>
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-4b.html b/layout/reftests/floats/float-in-rtl-slr-4b.html
new file mode 100644
index 000000000..7520ea6dd
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-4b.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+  direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div>
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-4c.html b/layout/reftests/floats/float-in-rtl-slr-4c.html
new file mode 100644
index 000000000..000938f91
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-4c.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+  direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div>
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-slr-4d.html b/layout/reftests/floats/float-in-rtl-slr-4d.html
new file mode 100644
index 000000000..6fb5e8509
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-slr-4d.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="slr">
+<head>
+<style>
+.slr {
+  writing-mode: sideways-lr;
+  direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div>
+  <div dir="ltr" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-1-ref.html b/layout/reftests/floats/float-in-rtl-vlr-1-ref.html
new file mode 100644
index 000000000..ec15eff4f
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:200px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:100px;"></div>
+  </div>
+  <div class="vlr" style="background:silver; height: calc(100vh - 16px);">
+    <div style="height:100px;">This text should appear ABOVE the red and green blocks.</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-1a.html b/layout/reftests/floats/float-in-rtl-vlr-1a.html
new file mode 100644
index 000000000..475188c40
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-1a.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px" dir="rtl">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-1b.html b/layout/reftests/floats/float-in-rtl-vlr-1b.html
new file mode 100644
index 000000000..30fcf9e1a
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-1b.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px" dir="rtl">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-1c.html b/layout/reftests/floats/float-in-rtl-vlr-1c.html
new file mode 100644
index 000000000..5f92680d7
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-1c.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px" dir="rtl">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px" dir="rtl">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-1d.html b/layout/reftests/floats/float-in-rtl-vlr-1d.html
new file mode 100644
index 000000000..b6ce505b8
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-1d.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-2-ref.html b/layout/reftests/floats/float-in-rtl-vlr-2-ref.html
new file mode 100644
index 000000000..570067b3d
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-2-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:100px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div class="vlr" style="background:silver; height: calc(100vh - 16px);">
+      <div style="margin-top:200px;">This text should appear BELOW the green and red blocks.</div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-2a.html b/layout/reftests/floats/float-in-rtl-vlr-2a.html
new file mode 100644
index 000000000..efb5b68f8
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-2a.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-2b.html b/layout/reftests/floats/float-in-rtl-vlr-2b.html
new file mode 100644
index 000000000..976fcd4c7
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-2b.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="rtl" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-2c.html b/layout/reftests/floats/float-in-rtl-vlr-2c.html
new file mode 100644
index 000000000..e130df96f
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-2c.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="rtl" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-2d.html b/layout/reftests/floats/float-in-rtl-vlr-2d.html
new file mode 100644
index 000000000..fafaa1e91
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-2d.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-3-ref.html b/layout/reftests/floats/float-in-rtl-vlr-3-ref.html
new file mode 100644
index 000000000..64182b14f
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-3-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px;">
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:300px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:400px;"></div>
+  </div>
+  <div class="vlr" style="background:silver; height: 100%;">
+    <div style="padding-top:500px; direction:rtl">This text should appear BELOW the green and red blocks.</div>
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-3a.html b/layout/reftests/floats/float-in-rtl-vlr-3a.html
new file mode 100644
index 000000000..979beded3
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-3a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; direction: rtl;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-3b.html b/layout/reftests/floats/float-in-rtl-vlr-3b.html
new file mode 100644
index 000000000..d66585e95
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-3b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; direction: rtl;">
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-3c.html b/layout/reftests/floats/float-in-rtl-vlr-3c.html
new file mode 100644
index 000000000..230917365
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-3c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; direction: rtl;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-3d.html b/layout/reftests/floats/float-in-rtl-vlr-3d.html
new file mode 100644
index 000000000..341aa7aea
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-3d.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; direction: rtl;">
+  <div dir="ltr" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-4-ref.html b/layout/reftests/floats/float-in-rtl-vlr-4-ref.html
new file mode 100644
index 000000000..1249cd351
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-4-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px;">
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:500px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:400px;"></div>
+  </div>
+  <div class="vlr" style="background:silver; height: 100%;">
+    <div style="padding-bottom: 200px; direction:rtl">This text should appear ABOVE the red and green blocks.</div>
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-4a.html b/layout/reftests/floats/float-in-rtl-vlr-4a.html
new file mode 100644
index 000000000..75ccc89d4
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-4a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+   direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; margin-top:0; margin-bottom:auto;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-4b.html b/layout/reftests/floats/float-in-rtl-vlr-4b.html
new file mode 100644
index 000000000..f56d7a354
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-4b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+   direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; margin-top:0; margin-bottom:auto;">
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-4c.html b/layout/reftests/floats/float-in-rtl-vlr-4c.html
new file mode 100644
index 000000000..33543aeb3
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-4c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+   direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; margin-top:0; margin-bottom:auto;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vlr-4d.html b/layout/reftests/floats/float-in-rtl-vlr-4d.html
new file mode 100644
index 000000000..631d196ca
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vlr-4d.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="vlr">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vlr {
+   writing-mode: vertical-lr;
+   -webkit-writing-mode: vertical-lr;
+   writing-mode: tb-lr;
+   direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; margin-top:0; margin-bottom:auto;">
+  <div dir="ltr" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-1-ref.html b/layout/reftests/floats/float-in-rtl-vrl-1-ref.html
new file mode 100644
index 000000000..7931c3c4f
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+}
+</style>
+</head>
+<body dir=rtl>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:200px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:100px;"></div>
+  </div>
+  <div dir=ltr class="vrl" style="background:silver; height: calc(100vh - 16px);">
+    <div style="height:100px;">This text should appear ABOVE the red and green blocks.</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-1a.html b/layout/reftests/floats/float-in-rtl-vrl-1a.html
new file mode 100644
index 000000000..7996d670e
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-1a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: ltr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px" dir="rtl">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-1b.html b/layout/reftests/floats/float-in-rtl-vrl-1b.html
new file mode 100644
index 000000000..1171a1168
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-1b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: ltr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px" dir="rtl">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-1c.html b/layout/reftests/floats/float-in-rtl-vrl-1c.html
new file mode 100644
index 000000000..d7e42c2b8
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-1c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: ltr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px" dir="rtl">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px" dir="rtl">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-1d.html b/layout/reftests/floats/float-in-rtl-vrl-1d.html
new file mode 100644
index 000000000..b181e4491
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-1d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: ltr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-2-ref.html b/layout/reftests/floats/float-in-rtl-vrl-2-ref.html
new file mode 100644
index 000000000..a4dda9eb6
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-2-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+}
+</style>
+</head>
+<body dir=rtl>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:100px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div dir=ltr class="vrl" style="background:silver; height: calc(100vh - 16px);">
+      <div style="margin-top:200px;">This text should appear BELOW the green and red blocks.</div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-2a.html b/layout/reftests/floats/float-in-rtl-vrl-2a.html
new file mode 100644
index 000000000..e920706ed
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-2a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: ltr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-2b.html b/layout/reftests/floats/float-in-rtl-vrl-2b.html
new file mode 100644
index 000000000..951270f4e
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-2b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: ltr;
+}
+</style>
+</head>
+<body>
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="rtl" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-2c.html b/layout/reftests/floats/float-in-rtl-vrl-2c.html
new file mode 100644
index 000000000..5108dbdcb
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-2c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: ltr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="rtl" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-2d.html b/layout/reftests/floats/float-in-rtl-vrl-2d.html
new file mode 100644
index 000000000..7f53dbe9a
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-2d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: ltr;
+}
+</style>
+</head>
+<body>
+  <div dir="rtl" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-3-ref.html b/layout/reftests/floats/float-in-rtl-vrl-3-ref.html
new file mode 100644
index 000000000..b16ea15fb
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-3-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+}
+</style>
+</head>
+<body dir=rtl>
+ <div style="height:600px;">
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:300px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:400px;"></div>
+  </div>
+  <div dir=ltr class="vrl" style="background:silver; height: 100%;">
+    <div style="padding-top:500px; direction:rtl">This text should appear BELOW the green and red blocks.</div>
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-3a.html b/layout/reftests/floats/float-in-rtl-vrl-3a.html
new file mode 100644
index 000000000..1ffb583f5
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-3a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; direction: rtl;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-3b.html b/layout/reftests/floats/float-in-rtl-vrl-3b.html
new file mode 100644
index 000000000..a5b1db4bc
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-3b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; direction: rtl;">
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-3c.html b/layout/reftests/floats/float-in-rtl-vrl-3c.html
new file mode 100644
index 000000000..aaef02916
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-3c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; direction: rtl;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left"></div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-3d.html b/layout/reftests/floats/float-in-rtl-vrl-3d.html
new file mode 100644
index 000000000..142c433a0
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-3d.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; direction: rtl;">
+  <div dir="ltr" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:left;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:left;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear BELOW the green and red blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-4-ref.html b/layout/reftests/floats/float-in-rtl-vrl-4-ref.html
new file mode 100644
index 000000000..9758a3991
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-4-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+}
+</style>
+</head>
+<body dir=rtl>
+ <div style="height:600px;">
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);display:inline-block;margin-top:500px;"></div>
+  </div>
+  <div style="height:0px;width:0px;overflow:visible">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);display:inline-block;margin-top:400px;"></div>
+  </div>
+  <div dir=ltr class="vrl" style="background:silver; height: 100%;">
+    <div style="padding-bottom: 200px; direction:rtl">This text should appear ABOVE the red and green blocks.</div>
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-4a.html b/layout/reftests/floats/float-in-rtl-vrl-4a.html
new file mode 100644
index 000000000..4daa9e2d2
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-4a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; margin-top:0; margin-bottom:auto;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-4b.html b/layout/reftests/floats/float-in-rtl-vrl-4b.html
new file mode 100644
index 000000000..5b238a42f
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-4b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; margin-top:0; margin-bottom:auto;">
+  <div style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-4c.html b/layout/reftests/floats/float-in-rtl-vrl-4c.html
new file mode 100644
index 000000000..08a34370f
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-4c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; margin-top:0; margin-bottom:auto;">
+  <div dir="ltr" style="height:300px">
+    <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+  </div>
+  <div dir="ltr" style="height:200px">
+    <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-in-rtl-vrl-4d.html b/layout/reftests/floats/float-in-rtl-vrl-4d.html
new file mode 100644
index 000000000..c45670810
--- /dev/null
+++ b/layout/reftests/floats/float-in-rtl-vrl-4d.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="vrl">
+<head>
+<title>Bug 1114329 testcase</title>
+<style>
+ .vrl {
+   writing-mode: vertical-rl;
+   -webkit-writing-mode: vertical-rl;
+   writing-mode: tb-rl;
+   direction: rtl;
+}
+</style>
+</head>
+<body>
+ <div style="height:600px; margin-top:0; margin-bottom:auto;">
+  <div dir="ltr" style="inline-size:-moz-fit-content">
+    <div style="height:300px">
+      <div style="height:100px;width:120px;background:rgba(0,255,0,0.8);float:right;"></div>
+    </div>
+    <div style="height:200px">
+      <div style="height:100px;width:150px;background:rgba(255,0,0,0.8);float:right;"></div>
+    </div>
+  </div>
+  <div style="background:silver">
+This text should appear ABOVE the red and green blocks.
+  </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-outside-block-push-ref.html b/layout/reftests/floats/float-outside-block-push-ref.html
new file mode 100644
index 000000000..6403e1ba7
--- /dev/null
+++ b/layout/reftests/floats/float-outside-block-push-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+<title>Testcase, bug 472252</title>
+
+<style type="text/css">
+#wrap {width:600px; border:1px solid;position:relative}
+.a {background:lime; color:#fff; width:80%;}
+.b {position:absolute; right:0; width:18%; background: cyan; color: #000; height:10em;}
+textarea {width: 100%; height:10em;}
+</style> 
+
+<title>test</title>
+</head>
+<body>
+<div id="wrap">
+	<div class="b"></div>
+	<div class="a"><textarea></textarea></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/float-outside-block-push.html b/layout/reftests/floats/float-outside-block-push.html
new file mode 100644
index 000000000..9d6b514a2
--- /dev/null
+++ b/layout/reftests/floats/float-outside-block-push.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+    <title>CSS 2.1 Test Suite: float</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+
+<style type="text/css">
+#wrap {width:600px; border:1px solid;}
+.a {background:lime; color:#fff; width:80%;}
+.b {float:right; width:18%; background: cyan; color: #000; height:10em;}
+textarea {width: 100%; height:10em;}
+</style> 
+
+<title>test</title>
+</head>
+<body>
+<div id="wrap">
+	<div class="b"></div>
+	<div class="a"><textarea></textarea></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/floats/logical-float-side-1-ref.html b/layout/reftests/floats/logical-float-side-1-ref.html
new file mode 100644
index 000000000..0dac4c29b
--- /dev/null
+++ b/layout/reftests/floats/logical-float-side-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+body > div { width: 20em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.left { float: left; }
+.right { float: right; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="left">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="right">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
+
+<div class="rtl">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="right">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="left">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
diff --git a/layout/reftests/floats/logical-float-side-1.html b/layout/reftests/floats/logical-float-side-1.html
new file mode 100644
index 000000000..0ecc4c0e1
--- /dev/null
+++ b/layout/reftests/floats/logical-float-side-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+body > div { width: 20em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.is { float: inline-start; }
+.ie { float: inline-end; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="is">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="ie">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
+
+<div class="rtl">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="is">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="ie">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
diff --git a/layout/reftests/floats/logical-float-side-2-ref.html b/layout/reftests/floats/logical-float-side-2-ref.html
new file mode 100644
index 000000000..82bfcd2d3
--- /dev/null
+++ b/layout/reftests/floats/logical-float-side-2-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<style>
+html { writing-mode: vertical-rl; }
+body > div { height: 20em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.left { float: left; }
+.right { float: right; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="left">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="right">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
+
+<div class="rtl">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="right">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="left">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
diff --git a/layout/reftests/floats/logical-float-side-2.html b/layout/reftests/floats/logical-float-side-2.html
new file mode 100644
index 000000000..8fe75a3db
--- /dev/null
+++ b/layout/reftests/floats/logical-float-side-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<style>
+html { writing-mode: vertical-rl; }
+body > div { height: 20em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.is { float: inline-start; }
+.ie { float: inline-end; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="is">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="ie">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
+
+<div class="rtl">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="is">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="ie">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
diff --git a/layout/reftests/floats/logical-float-side-3-ref.html b/layout/reftests/floats/logical-float-side-3-ref.html
new file mode 100644
index 000000000..654afd856
--- /dev/null
+++ b/layout/reftests/floats/logical-float-side-3-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<style>
+body > div { width: 15em; height: 10em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.a { clear: left; }
+.b { clear: right; }
+.fl { float: left; height: 4em; }
+.fr { float: right; height: 2em; }
+.fl2 { float: left; height: 2em; }
+.fr4 { float: right; height: 4em; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ <div class="fl">Start</div>
+ <div class="fr">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p>
+</div>
+
+<div class="ltr">
+ <div class="fl">Start</div>
+ <div class="fr">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p>
+</div>
+
+<div class="rtl">
+ <div class="fl2">End</div>
+ <div class="fr4">Start</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p>
+</div>
+
+<div class="rtl">
+ <div class="fl2">End</div>
+ <div class="fr4">Start</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p>
+</div>
diff --git a/layout/reftests/floats/logical-float-side-3.html b/layout/reftests/floats/logical-float-side-3.html
new file mode 100644
index 000000000..562ebecf0
--- /dev/null
+++ b/layout/reftests/floats/logical-float-side-3.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+body > div { width: 15em; height: 10em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.a { clear: inline-start; }
+.b { clear: inline-end; }
+.is { float: inline-start; height: 4em; }
+.ie { float: inline-end; height: 2em; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p>
+</div>
+
+<div class="ltr">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p>
+</div>
+
+<div class="rtl">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p>
+</div>
+
+<div class="rtl">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p>
+</div>
diff --git a/layout/reftests/floats/logical-float-side-4-ref.html b/layout/reftests/floats/logical-float-side-4-ref.html
new file mode 100644
index 000000000..0c2065b3e
--- /dev/null
+++ b/layout/reftests/floats/logical-float-side-4-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<style>
+html { writing-mode: vertical-rl; }
+body > div { height: 15em; width: 10em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.a { clear: left; }
+.b { clear: right; }
+.fl { float: left; width: 4em; }
+.fr { float: right; width: 2em; }
+.fl2 { float: left; width: 2em; }
+.fr4 { float: right; width: 4em; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ <div class="fl">Start</div>
+ <div class="fr">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p>
+</div>
+
+<div class="ltr">
+ <div class="fl">Start</div>
+ <div class="fr">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p>
+</div>
+
+<div class="rtl">
+ <div class="fl2">End</div>
+ <div class="fr4">Start</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p>
+</div>
+
+<div class="rtl">
+ <div class="fl2">End</div>
+ <div class="fr4">Start</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p>
+</div>
diff --git a/layout/reftests/floats/logical-float-side-4.html b/layout/reftests/floats/logical-float-side-4.html
new file mode 100644
index 000000000..cb59be4da
--- /dev/null
+++ b/layout/reftests/floats/logical-float-side-4.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<style>
+html { writing-mode: vertical-rl; }
+body > div { height: 15em; width: 10em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.a { clear: inline-start; }
+.b { clear: inline-end; }
+.is { float: inline-start; width: 4em; }
+.ie { float: inline-end; width: 2em; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p>
+</div>
+
+<div class="ltr">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p>
+</div>
+
+<div class="rtl">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p>
+</div>
+
+<div class="rtl">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p>
+</div>
diff --git a/layout/reftests/floats/orthogonal-floats-1-ref.html b/layout/reftests/floats/orthogonal-floats-1-ref.html
new file mode 100644
index 000000000..a5ccc8a3c
--- /dev/null
+++ b/layout/reftests/floats/orthogonal-floats-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Bug 1141867 - Contiguous right-floating boxes with vertical writing mode</title>
+  <!-- based on testcases from Gérard Talbot, see https://bugzilla.mozilla.org/show_bug.cgi?id=1141867 -->
+  <meta charset="utf-8">
+  <style type="text/css">
+  body {
+    margin: 8px;
+  }
+  p {
+    clear: both;
+  }
+  div#dummy {
+    height: 100px;
+    float: right;
+  }
+  div#reference {
+    background-color: green;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    z-index: -1;
+  }
+  </style>
+ </head>
+
+ <body>
+
+  <div id="dummy"></div>
+
+  <div id="reference"></div>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/floats/orthogonal-floats-1a.html b/layout/reftests/floats/orthogonal-floats-1a.html
new file mode 100644
index 000000000..87aa34da5
--- /dev/null
+++ b/layout/reftests/floats/orthogonal-floats-1a.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Bug 1141867 - Contiguous right-floating boxes with vertical writing mode</title>
+  <!-- based on testcases from Gérard Talbot, see https://bugzilla.mozilla.org/show_bug.cgi?id=1141867 -->
+  <meta charset="utf-8">
+  <style type="text/css">
+  body {
+    margin: 8px;
+  }
+  p {
+    clear: both;
+  }
+  div.floated-right {
+    background: green;
+    color: green;
+    inline-size: 100px;
+    block-size: 20px;
+    float: right;
+    -ah-writing-mode: vertical-rl;
+    -webkit-writing-mode: vertical-rl;
+    writing-mode: tb-rl; /* IE 11 */
+    writing-mode: vertical-rl;
+  }
+  div#reference-overlapped-red {
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    z-index: -1;
+  }
+  </style>
+ </head>
+
+ <body>
+
+  <div class="floated-right">abcde</div>
+
+  <div class="floated-right">fghijk</div>
+
+  <div class="floated-right">lmnopq</div>
+
+  <div class="floated-right">rstuv</div>
+
+  <div class="floated-right">wxyz!</div>
+
+  <div id="reference-overlapped-red"></div>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/floats/orthogonal-floats-1b.html b/layout/reftests/floats/orthogonal-floats-1b.html
new file mode 100644
index 000000000..f4890f32d
--- /dev/null
+++ b/layout/reftests/floats/orthogonal-floats-1b.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Bug 1141867 - Contiguous right-floating boxes with vertical writing mode</title>
+  <!-- based on testcases from Gérard Talbot, see https://bugzilla.mozilla.org/show_bug.cgi?id=1141867 -->
+  <meta charset="utf-8">
+  <style type="text/css">
+  body {
+    margin: 8px;
+  }
+  p {
+    clear: both;
+  }
+  div.floated-right {
+    background: green;
+    color: green;
+    inline-size: 100px;
+    block-size: 20px;
+    float: right;
+    -ah-writing-mode: vertical-lr;
+    -webkit-writing-mode: vertical-lr;
+    writing-mode: tb-lr; /* IE 11 */
+    writing-mode: vertical-lr;
+  }
+  div#reference-overlapped-red {
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    z-index: -1;
+  }
+  </style>
+ </head>
+
+ <body>
+
+  <div class="floated-right">abcde</div>
+
+  <div class="floated-right">fghijk</div>
+
+  <div class="floated-right">lmnopq</div>
+
+  <div class="floated-right">rstuv</div>
+
+  <div class="floated-right">wxyz!</div>
+
+  <div id="reference-overlapped-red"></div>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/floats/orthogonal-floats-1c.html b/layout/reftests/floats/orthogonal-floats-1c.html
new file mode 100644
index 000000000..3c447b0ce
--- /dev/null
+++ b/layout/reftests/floats/orthogonal-floats-1c.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Bug 1141867 - Contiguous right-floating boxes with vertical writing mode</title>
+  <!-- based on testcases from Gérard Talbot, see https://bugzilla.mozilla.org/show_bug.cgi?id=1141867 -->
+  <meta charset="utf-8">
+  <style type="text/css">
+  @font-face {
+    font-family: Ahem;
+    src: url(../fonts/Ahem.ttf);
+  }
+  body {
+    margin: 8px;
+  }
+  p {
+    clear: both;
+  }
+  div.floated-right {
+    color: green;
+    float: right;
+    -ah-writing-mode: vertical-rl;
+    -webkit-writing-mode: vertical-rl;
+    writing-mode: tb-rl; /* IE 11 */
+    writing-mode: vertical-rl;
+    font: 20px/20px Ahem;
+  }
+  div#reference-overlapped-red {
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    z-index: -1;
+  }
+  </style>
+ </head>
+
+ <body>
+
+  <div class="floated-right">abcde</div>
+
+  <div class="floated-right">fghij</div>
+
+  <div class="floated-right">klmno</div>
+
+  <div class="floated-right">qrstu</div>
+
+  <div class="floated-right">vwxyz</div>
+
+  <div id="reference-overlapped-red"></div>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/floats/orthogonal-floats-1d.html b/layout/reftests/floats/orthogonal-floats-1d.html
new file mode 100644
index 000000000..97a22e1a6
--- /dev/null
+++ b/layout/reftests/floats/orthogonal-floats-1d.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Bug 1141867 - Contiguous right-floating boxes with vertical writing mode</title>
+  <!-- based on testcases from Gérard Talbot, see https://bugzilla.mozilla.org/show_bug.cgi?id=1141867 -->
+  <meta charset="utf-8">
+  <style type="text/css">
+  @font-face {
+    font-family: Ahem;
+    src: url(../fonts/Ahem.ttf);
+  }
+  body {
+    margin: 8px;
+  }
+  p {
+    clear: both;
+  }
+  div.floated-right {
+    color: green;
+    float: right;
+    -ah-writing-mode: vertical-lr;
+    -webkit-writing-mode: vertical-lr;
+    writing-mode: tb-lr; /* IE 11 */
+    writing-mode: vertical-lr;
+    font: 20px/20px Ahem;
+  }
+  div#reference-overlapped-red {
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    z-index: -1;
+  }
+  </style>
+ </head>
+
+ <body>
+
+  <div class="floated-right">abcde</div>
+
+  <div class="floated-right">fghij</div>
+
+  <div class="floated-right">klmno</div>
+
+  <div class="floated-right">qrstu</div>
+
+  <div class="floated-right">vwxyz</div>
+
+  <div id="reference-overlapped-red"></div>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+ </body>
+</html>
diff --git a/layout/reftests/floats/other-float-outside-rule-3-left-2-ref.html b/layout/reftests/floats/other-float-outside-rule-3-left-2-ref.html
new file mode 100644
index 000000000..508b4741b
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-3-left-2-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<title>Test for float placement around other float in BFC but outside containing block</title>
+<div style="float: left; width: 500px; height: 500px">
+    <div style="margin-top: 300px; width: 475px; height: 10px; background: blue"></div>
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-3-left-2.html b/layout/reftests/floats/other-float-outside-rule-3-left-2.html
new file mode 100644
index 000000000..b7ef87cbb
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-3-left-2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+    <title>CSS 2.1 Test Suite: float placement around other float in BFC but outside containing block</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+    <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" />
+
+<!--
+  CSS2.1 9.5.1 rule 3 says:
+
+    The right outer edge of a left-floating box may not be to the right
+    of the left outer edge of any right-floating box that is to the
+    right of it. Analogous rules hold for right-floating elements. 
+
+ -->
+
+<!-- the block formatting context inside which we're testing -->
+<div style="float: left; width: 500px; height: 500px">
+
+  <div style="float: right; width: 50px; height: 300px"></div>
+
+  <div style="margin-right: 100px"> <!-- 400px wide -->
+
+    <!-- we're testing the position of this float -->
+    <div style="float: left; width: 475px; height: 10px; background: blue"></div>
+
+  </div>
+
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-3-left-ref.html b/layout/reftests/floats/other-float-outside-rule-3-left-ref.html
new file mode 100644
index 000000000..68b9f6adf
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-3-left-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<title>Test for float placement around other float in BFC but outside containing block</title>
+
+<div style="float: left; width: 500px; height: 500px">
+  <div style="width: 425px; height: 10px; background: blue"></div>
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-3-left.html b/layout/reftests/floats/other-float-outside-rule-3-left.html
new file mode 100644
index 000000000..42ae12bae
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-3-left.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+    <title>CSS 2.1 Test Suite: float placement around other float in BFC but outside containing block</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+    <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" />
+
+<!--
+  CSS2.1 9.5.1 rule 3 says:
+
+    The right outer edge of a left-floating box may not be to the right
+    of the left outer edge of any right-floating box that is to the
+    right of it. Analogous rules hold for right-floating elements. 
+
+ -->
+
+<!-- the block formatting context inside which we're testing -->
+<div style="float: left; width: 500px; height: 500px">
+
+  <div style="float: right; width: 50px; height: 300px"></div>
+
+  <div style="margin-right: 100px"> <!-- 400px wide -->
+
+    <!-- we're testing the position of this float -->
+    <div style="float: left; width: 425px; height: 10px; background: blue"></div>
+
+  </div>
+
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-3-right-2-ref.html b/layout/reftests/floats/other-float-outside-rule-3-right-2-ref.html
new file mode 100644
index 000000000..711010112
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-3-right-2-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<title>Test for float placement around other float in BFC but outside containing block</title>
+<div style="float: left; width: 500px; height: 500px">
+    <div style="margin-top: 300px; margin-left: 25px; width: 475px; height: 10px; background: blue"></div>
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-3-right-2.html b/layout/reftests/floats/other-float-outside-rule-3-right-2.html
new file mode 100644
index 000000000..e2a0673ba
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-3-right-2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+    <title>CSS 2.1 Test Suite: float placement around other float in BFC but outside containing block</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+    <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" />
+
+<!--
+  CSS2.1 9.5.1 rule 3 says:
+
+    The right outer edge of a left-floating box may not be to the right
+    of the left outer edge of any right-floating box that is to the
+    right of it. Analogous rules hold for right-floating elements. 
+
+ -->
+
+<!-- the block formatting context inside which we're testing -->
+<div style="float: left; width: 500px; height: 500px">
+
+  <div style="float: left; width: 50px; height: 300px"></div>
+
+  <div style="margin-left: 100px"> <!-- 400px wide -->
+
+    <!-- we're testing the position of this float -->
+    <div style="float: right; width: 475px; height: 10px; background: blue"></div>
+
+  </div>
+
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-3-right-ref.html b/layout/reftests/floats/other-float-outside-rule-3-right-ref.html
new file mode 100644
index 000000000..305b7a59c
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-3-right-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<title>Test for float placement around other float in BFC but outside containing block</title>
+<div style="float: left; width: 500px; height: 500px">
+  <div style="margin-left: 75px; width: 425px; height: 10px; background: blue"></div>
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-3-right.html b/layout/reftests/floats/other-float-outside-rule-3-right.html
new file mode 100644
index 000000000..b14382d1b
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-3-right.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+    <title>CSS 2.1 Test Suite: float placement around other float in BFC but outside containing block</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+    <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" />
+
+<!--
+  CSS2.1 9.5.1 rule 3 says:
+
+    The right outer edge of a left-floating box may not be to the right
+    of the left outer edge of any right-floating box that is to the
+    right of it. Analogous rules hold for right-floating elements. 
+
+ -->
+
+<!-- the block formatting context inside which we're testing -->
+<div style="float: left; width: 500px; height: 500px">
+
+  <div style="float: left; width: 50px; height: 300px"></div>
+
+  <div style="margin-left: 100px"> <!-- 400px wide -->
+
+    <!-- we're testing the position of this float -->
+    <div style="float: right; width: 425px; height: 10px; background: blue"></div>
+
+  </div>
+
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-7-left-ref.html b/layout/reftests/floats/other-float-outside-rule-7-left-ref.html
new file mode 100644
index 000000000..0c3efa6cd
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-7-left-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<title>Test for float placement around other float in BFC but outside containing block</title>
+<div style="float: left; width: 500px; height: 500px">
+    <div style="margin-top: 300px; margin-left: 100px; width: 425px; height: 10px; background: blue"></div>
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-7-left.html b/layout/reftests/floats/other-float-outside-rule-7-left.html
new file mode 100644
index 000000000..3809b19a7
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-7-left.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+    <title>CSS 2.1 Test Suite: float placement around other float in BFC but outside containing block</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+    <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" />
+
+<!--
+  CSS2.1 9.5.1 rule 7 says:
+
+    A left-floating box that has another left-floating box to its left
+    may not have its right outer edge to the right of its containing
+    block's right edge. (Loosely: a left float may not stick out at the
+    right edge, unless it is already as far to the left as possible.) An
+    analogous rule holds for right-floating elements. 
+
+ -->
+
+<!-- the block formatting context inside which we're testing -->
+<div style="float: left; width: 500px; height: 500px">
+
+  <div style="float: left; width: 50px; height: 300px"></div>
+
+  <div style="margin-left: 100px"> <!-- 400px wide -->
+
+    <!-- we're testing the position of this float -->
+    <div style="float: left; width: 425px; height: 10px; background: blue"></div>
+
+  </div>
+
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-7-right-ref.html b/layout/reftests/floats/other-float-outside-rule-7-right-ref.html
new file mode 100644
index 000000000..3ae3087da
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-7-right-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<title>Test for float placement around other float in BFC but outside containing block</title>
+<div style="float: left; width: 500px; height: 500px">
+    <div style="margin-top: 300px; margin-left: -25px; width: 425px; height: 10px; background: blue"></div>
+</div>
diff --git a/layout/reftests/floats/other-float-outside-rule-7-right.html b/layout/reftests/floats/other-float-outside-rule-7-right.html
new file mode 100644
index 000000000..fb8c0e821
--- /dev/null
+++ b/layout/reftests/floats/other-float-outside-rule-7-right.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+    <title>CSS 2.1 Test Suite: float placement around other float in BFC but outside containing block</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+    <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" />
+
+<!--
+  CSS2.1 9.5.1 rule 7 says:
+
+    A left-floating box that has another left-floating box to its left
+    may not have its right outer edge to the right of its containing
+    block's right edge. (Loosely: a left float may not stick out at the
+    right edge, unless it is already as far to the left as possible.) An
+    analogous rule holds for right-floating elements. 
+
+ -->
+
+<!-- the block formatting context inside which we're testing -->
+<div style="float: left; width: 500px; height: 500px">
+
+  <div style="float: right; width: 50px; height: 300px"></div>
+
+  <div style="margin-right: 100px"> <!-- 400px wide -->
+
+    <!-- we're testing the position of this float -->
+    <div style="float: right; width: 425px; height: 10px; background: blue"></div>
+
+  </div>
+
+</div>
diff --git a/layout/reftests/floats/reftest-stylo.list b/layout/reftests/floats/reftest-stylo.list
new file mode 100644
index 000000000..d93517f22
--- /dev/null
+++ b/layout/reftests/floats/reftest-stylo.list
@@ -0,0 +1,121 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== border-box-wrap-around-float.html border-box-wrap-around-float.html
+== other-float-outside-rule-3-left.html other-float-outside-rule-3-left.html
+skip == other-float-outside-rule-3-right.html other-float-outside-rule-3-right.html
+== other-float-outside-rule-3-left-2.html other-float-outside-rule-3-left-2.html
+# bug 616334
+== other-float-outside-rule-3-right-2.html other-float-outside-rule-3-right-2.html
+# bug 616334
+== other-float-outside-rule-7-left.html other-float-outside-rule-7-left.html
+# bug 616334
+== other-float-outside-rule-7-right.html other-float-outside-rule-7-right.html
+# bug 616334
+fails fuzzy-if(gtkWidget,1,10) == float-outside-block-push.html float-outside-block-push.html
+# bug 815612
+== relative-float-1.html relative-float-1.html
+== relative-float-2.html relative-float-2.html
+== zero-height-float-base.html zero-height-float-base.html
+== zero-height-float.html zero-height-float.html
+# bug 81710
+== 345369-1.html 345369-1.html
+== 345369-2.html 345369-2.html
+== 345369-3.html 345369-3.html
+== 345369-4.html 345369-4.html
+== 345369-5.html 345369-5.html
+== 429974-1.html 429974-1.html
+== 478834-1.html 478834-1.html
+== 546048-1.html 546048-1.html
+== 775350-1.html 775350-1.html
+== 1114329.html 1114329.html
+== 1236745-1.html 1236745-1.html
+== float-in-rtl-1a.html float-in-rtl-1a.html
+fails fuzzy-if(skiaContent,1,27000) == float-in-rtl-1b.html float-in-rtl-1b.html
+fails fuzzy-if(skiaContent,1,27000) == float-in-rtl-1c.html float-in-rtl-1c.html
+fails fuzzy-if(skiaContent,1,27000) == float-in-rtl-1d.html float-in-rtl-1d.html
+== float-in-rtl-2a.html float-in-rtl-2a.html
+fails fuzzy-if(skiaContent,1,12000) == float-in-rtl-2b.html float-in-rtl-2b.html
+fails fuzzy-if(skiaContent,1,12000) == float-in-rtl-2c.html float-in-rtl-2c.html
+fails fuzzy-if(skiaContent,1,12000) == float-in-rtl-2d.html float-in-rtl-2d.html
+== float-in-rtl-3a.html float-in-rtl-3a.html
+fails fuzzy-if(skiaContent,1,27000) == float-in-rtl-3b.html float-in-rtl-3b.html
+fails fuzzy-if(skiaContent,1,27000) == float-in-rtl-3c.html float-in-rtl-3c.html
+fails fuzzy-if(skiaContent,1,27000) == float-in-rtl-3d.html float-in-rtl-3d.html
+skip == float-in-rtl-4a.html float-in-rtl-4a.html
+fails fuzzy-if(skiaContent,1,12000) == float-in-rtl-4b.html float-in-rtl-4b.html
+fails fuzzy-if(skiaContent,1,12000) == float-in-rtl-4c.html float-in-rtl-4c.html
+fails fuzzy-if(skiaContent,1,12000) == float-in-rtl-4d.html float-in-rtl-4d.html
+
+== bfc-displace-1a.html bfc-displace-1a.html
+== bfc-displace-1b.html bfc-displace-1b.html
+== bfc-displace-2a.html bfc-displace-2a.html
+== bfc-displace-2b.html bfc-displace-2b.html
+== bfc-displace-3a.html bfc-displace-3a.html
+== bfc-displace-3b.html bfc-displace-3b.html
+== bfc-displace-4.html bfc-displace-4.html
+== bfc-shrink-1.html bfc-shrink-1.html
+
+# Testcases that involve vertical writing mode.
+#
+# XXX The default-preferences setting here can be removed after the
+#     pref has been made true by default for all channels (bug 1138384).
+
+
+
+== float-in-rtl-vlr-1a.html float-in-rtl-vlr-1a.html
+== float-in-rtl-vlr-1b.html float-in-rtl-vlr-1b.html
+== float-in-rtl-vlr-1c.html float-in-rtl-vlr-1c.html
+== float-in-rtl-vlr-1d.html float-in-rtl-vlr-1d.html
+== float-in-rtl-vlr-2a.html float-in-rtl-vlr-2a.html
+== float-in-rtl-vlr-2b.html float-in-rtl-vlr-2b.html
+== float-in-rtl-vlr-2c.html float-in-rtl-vlr-2c.html
+== float-in-rtl-vlr-2d.html float-in-rtl-vlr-2d.html
+== float-in-rtl-vlr-3a.html float-in-rtl-vlr-3a.html
+== float-in-rtl-vlr-3b.html float-in-rtl-vlr-3b.html
+== float-in-rtl-vlr-3c.html float-in-rtl-vlr-3c.html
+== float-in-rtl-vlr-3d.html float-in-rtl-vlr-3d.html
+== float-in-rtl-vlr-4a.html float-in-rtl-vlr-4a.html
+== float-in-rtl-vlr-4b.html float-in-rtl-vlr-4b.html
+== float-in-rtl-vlr-4c.html float-in-rtl-vlr-4c.html
+== float-in-rtl-vlr-4d.html float-in-rtl-vlr-4d.html
+== float-in-rtl-vrl-1a.html float-in-rtl-vrl-1a.html
+== float-in-rtl-vrl-1b.html float-in-rtl-vrl-1b.html
+== float-in-rtl-vrl-1c.html float-in-rtl-vrl-1c.html
+== float-in-rtl-vrl-1d.html float-in-rtl-vrl-1d.html
+== float-in-rtl-vrl-2a.html float-in-rtl-vrl-2a.html
+== float-in-rtl-vrl-2b.html float-in-rtl-vrl-2b.html
+== float-in-rtl-vrl-2c.html float-in-rtl-vrl-2c.html
+== float-in-rtl-vrl-2d.html float-in-rtl-vrl-2d.html
+== float-in-rtl-vrl-3a.html float-in-rtl-vrl-3a.html
+== float-in-rtl-vrl-3b.html float-in-rtl-vrl-3b.html
+== float-in-rtl-vrl-3c.html float-in-rtl-vrl-3c.html
+== float-in-rtl-vrl-3d.html float-in-rtl-vrl-3d.html
+== float-in-rtl-vrl-4a.html float-in-rtl-vrl-4a.html
+== float-in-rtl-vrl-4b.html float-in-rtl-vrl-4b.html
+== float-in-rtl-vrl-4c.html float-in-rtl-vrl-4c.html
+== float-in-rtl-vrl-4d.html float-in-rtl-vrl-4d.html
+fuzzy-if(OSX==1010,28,7) fuzzy-if(Android,16,2) == orthogonal-floats-1a.html orthogonal-floats-1a.html
+fuzzy-if(OSX==1010,28,7) == orthogonal-floats-1b.html orthogonal-floats-1b.html
+fuzzy-if(OSX==1010,103,802) fuzzy-if(winWidget,116,700) HTTP(..) == orthogonal-floats-1c.html orthogonal-floats-1c.html
+fuzzy-if(OSX==1010,103,802) fuzzy-if(winWidget,116,700) HTTP(..) == orthogonal-floats-1d.html orthogonal-floats-1d.html
+
+pref(layout.css.float-logical-values.enabled,true) == logical-float-side-1.html logical-float-side-1.html
+pref(layout.css.float-logical-values.enabled,true) == logical-float-side-2.html logical-float-side-2.html
+pref(layout.css.float-logical-values.enabled,true) == logical-float-side-3.html logical-float-side-3.html
+pref(layout.css.float-logical-values.enabled,true) == logical-float-side-4.html logical-float-side-4.html
+
+== float-in-rtl-slr-1a.html float-in-rtl-slr-1a.html
+== float-in-rtl-slr-1b.html float-in-rtl-slr-1b.html
+== float-in-rtl-slr-1c.html float-in-rtl-slr-1c.html
+== float-in-rtl-slr-1d.html float-in-rtl-slr-1d.html
+== float-in-rtl-slr-2a.html float-in-rtl-slr-2a.html
+== float-in-rtl-slr-2b.html float-in-rtl-slr-2b.html
+== float-in-rtl-slr-2c.html float-in-rtl-slr-2c.html
+== float-in-rtl-slr-2d.html float-in-rtl-slr-2d.html
+== float-in-rtl-slr-3a.html float-in-rtl-slr-3a.html
+== float-in-rtl-slr-3b.html float-in-rtl-slr-3b.html
+== float-in-rtl-slr-3c.html float-in-rtl-slr-3c.html
+== float-in-rtl-slr-3d.html float-in-rtl-slr-3d.html
+== float-in-rtl-slr-4a.html float-in-rtl-slr-4a.html
+== float-in-rtl-slr-4b.html float-in-rtl-slr-4b.html
+== float-in-rtl-slr-4c.html float-in-rtl-slr-4c.html
+== float-in-rtl-slr-4d.html float-in-rtl-slr-4d.html
diff --git a/layout/reftests/floats/reftest.list b/layout/reftests/floats/reftest.list
new file mode 100644
index 000000000..cb732c2ca
--- /dev/null
+++ b/layout/reftests/floats/reftest.list
@@ -0,0 +1,110 @@
+== border-box-wrap-around-float.html border-box-wrap-around-float-ref.html
+== other-float-outside-rule-3-left.html other-float-outside-rule-3-left-ref.html
+== other-float-outside-rule-3-right.html other-float-outside-rule-3-right-ref.html
+fails == other-float-outside-rule-3-left-2.html other-float-outside-rule-3-left-2-ref.html # bug 616334
+fails == other-float-outside-rule-3-right-2.html other-float-outside-rule-3-right-2-ref.html # bug 616334
+fails == other-float-outside-rule-7-left.html other-float-outside-rule-7-left-ref.html # bug 616334
+fails == other-float-outside-rule-7-right.html other-float-outside-rule-7-right-ref.html # bug 616334
+fuzzy-if(gtkWidget,1,10) == float-outside-block-push.html float-outside-block-push-ref.html # bug 815612
+== relative-float-1.html relative-float-1-ref.html
+== relative-float-2.html relative-float-2-ref.html
+== zero-height-float-base.html zero-height-float-ref.html
+fails == zero-height-float.html zero-height-float-ref.html # bug 81710
+== 345369-1.html 345369-1-ref.html
+fails == 345369-2.html 345369-2-ref.html
+== 345369-3.html 345369-3-ref.html
+== 345369-4.html 345369-4-ref.html
+== 345369-5.html 345369-5-ref.html
+== 429974-1.html 429974-1-ref.html
+== 478834-1.html 478834-1-ref.html
+== 546048-1.html 546048-1-ref.html
+== 775350-1.html 775350-1-ref.html
+== 1114329.html 1114329-ref.html
+== 1236745-1.html 1236745-1-ref.html
+== 1291110-1.html 1291110-1-ref.html
+== 1291110-2.html 1291110-2-ref.html
+== float-in-rtl-1a.html float-in-rtl-1-ref.html
+fuzzy-if(skiaContent,1,27000) == float-in-rtl-1b.html float-in-rtl-1-ref.html
+fuzzy-if(skiaContent,1,27000) == float-in-rtl-1c.html float-in-rtl-1-ref.html
+fuzzy-if(skiaContent,1,27000) == float-in-rtl-1d.html float-in-rtl-1-ref.html
+== float-in-rtl-2a.html float-in-rtl-2-ref.html
+fuzzy-if(skiaContent,1,12000) == float-in-rtl-2b.html float-in-rtl-2-ref.html
+fuzzy-if(skiaContent,1,12000) == float-in-rtl-2c.html float-in-rtl-2-ref.html
+fuzzy-if(skiaContent,1,12000) == float-in-rtl-2d.html float-in-rtl-2-ref.html
+== float-in-rtl-3a.html float-in-rtl-3-ref.html
+fuzzy-if(skiaContent,1,27000) == float-in-rtl-3b.html float-in-rtl-3-ref.html
+fuzzy-if(skiaContent,1,27000) == float-in-rtl-3c.html float-in-rtl-3-ref.html
+fuzzy-if(skiaContent,1,27000) == float-in-rtl-3d.html float-in-rtl-3-ref.html
+== float-in-rtl-4a.html float-in-rtl-4-ref.html
+fuzzy-if(skiaContent,1,12000) == float-in-rtl-4b.html float-in-rtl-4-ref.html
+fuzzy-if(skiaContent,1,12000) == float-in-rtl-4c.html float-in-rtl-4-ref.html
+fuzzy-if(skiaContent,1,12000) == float-in-rtl-4d.html float-in-rtl-4-ref.html
+
+== bfc-displace-1a.html bfc-displace-1a-ref.html
+== bfc-displace-1b.html bfc-displace-1b-ref.html
+== bfc-displace-2a.html bfc-displace-2a-ref.html
+== bfc-displace-2b.html bfc-displace-2b-ref.html
+== bfc-displace-3a.html bfc-displace-3a-ref.html
+== bfc-displace-3b.html bfc-displace-3b-ref.html
+== bfc-displace-4.html bfc-displace-4-ref.html
+== bfc-shrink-1.html bfc-shrink-1-ref.html
+
+# Testcases that involve vertical writing mode.
+== float-in-rtl-vlr-1a.html float-in-rtl-vlr-1-ref.html
+== float-in-rtl-vlr-1b.html float-in-rtl-vlr-1-ref.html
+== float-in-rtl-vlr-1c.html float-in-rtl-vlr-1-ref.html
+== float-in-rtl-vlr-1d.html float-in-rtl-vlr-1-ref.html
+== float-in-rtl-vlr-2a.html float-in-rtl-vlr-2-ref.html
+== float-in-rtl-vlr-2b.html float-in-rtl-vlr-2-ref.html
+== float-in-rtl-vlr-2c.html float-in-rtl-vlr-2-ref.html
+== float-in-rtl-vlr-2d.html float-in-rtl-vlr-2-ref.html
+== float-in-rtl-vlr-3a.html float-in-rtl-vlr-3-ref.html
+== float-in-rtl-vlr-3b.html float-in-rtl-vlr-3-ref.html
+== float-in-rtl-vlr-3c.html float-in-rtl-vlr-3-ref.html
+== float-in-rtl-vlr-3d.html float-in-rtl-vlr-3-ref.html
+== float-in-rtl-vlr-4a.html float-in-rtl-vlr-4-ref.html
+== float-in-rtl-vlr-4b.html float-in-rtl-vlr-4-ref.html
+== float-in-rtl-vlr-4c.html float-in-rtl-vlr-4-ref.html
+== float-in-rtl-vlr-4d.html float-in-rtl-vlr-4-ref.html
+== float-in-rtl-vrl-1a.html float-in-rtl-vrl-1-ref.html
+== float-in-rtl-vrl-1b.html float-in-rtl-vrl-1-ref.html
+== float-in-rtl-vrl-1c.html float-in-rtl-vrl-1-ref.html
+== float-in-rtl-vrl-1d.html float-in-rtl-vrl-1-ref.html
+== float-in-rtl-vrl-2a.html float-in-rtl-vrl-2-ref.html
+== float-in-rtl-vrl-2b.html float-in-rtl-vrl-2-ref.html
+== float-in-rtl-vrl-2c.html float-in-rtl-vrl-2-ref.html
+== float-in-rtl-vrl-2d.html float-in-rtl-vrl-2-ref.html
+== float-in-rtl-vrl-3a.html float-in-rtl-vrl-3-ref.html
+== float-in-rtl-vrl-3b.html float-in-rtl-vrl-3-ref.html
+== float-in-rtl-vrl-3c.html float-in-rtl-vrl-3-ref.html
+== float-in-rtl-vrl-3d.html float-in-rtl-vrl-3-ref.html
+== float-in-rtl-vrl-4a.html float-in-rtl-vrl-4-ref.html
+== float-in-rtl-vrl-4b.html float-in-rtl-vrl-4-ref.html
+== float-in-rtl-vrl-4c.html float-in-rtl-vrl-4-ref.html
+== float-in-rtl-vrl-4d.html float-in-rtl-vrl-4-ref.html
+fuzzy-if(OSX==1010,28,7) fuzzy-if(Android,16,2) == orthogonal-floats-1a.html orthogonal-floats-1-ref.html
+fuzzy-if(OSX==1010,28,7) == orthogonal-floats-1b.html orthogonal-floats-1-ref.html
+fuzzy-if(OSX==1010,103,802) fuzzy-if(winWidget,135,700) HTTP(..) == orthogonal-floats-1c.html orthogonal-floats-1-ref.html
+fuzzy-if(OSX==1010,103,802) fuzzy-if(winWidget,135,700) HTTP(..) == orthogonal-floats-1d.html orthogonal-floats-1-ref.html
+
+pref(layout.css.float-logical-values.enabled,true) == logical-float-side-1.html logical-float-side-1-ref.html
+pref(layout.css.float-logical-values.enabled,true) == logical-float-side-2.html logical-float-side-2-ref.html
+pref(layout.css.float-logical-values.enabled,true) == logical-float-side-3.html logical-float-side-3-ref.html
+pref(layout.css.float-logical-values.enabled,true) == logical-float-side-4.html logical-float-side-4-ref.html
+
+== float-in-rtl-slr-1a.html float-in-rtl-slr-1-ref.html
+== float-in-rtl-slr-1b.html float-in-rtl-slr-1-ref.html
+== float-in-rtl-slr-1c.html float-in-rtl-slr-1-ref.html
+== float-in-rtl-slr-1d.html float-in-rtl-slr-1-ref.html
+== float-in-rtl-slr-2a.html float-in-rtl-slr-2-ref.html
+== float-in-rtl-slr-2b.html float-in-rtl-slr-2-ref.html
+== float-in-rtl-slr-2c.html float-in-rtl-slr-2-ref.html
+== float-in-rtl-slr-2d.html float-in-rtl-slr-2-ref.html
+== float-in-rtl-slr-3a.html float-in-rtl-slr-3-ref.html
+== float-in-rtl-slr-3b.html float-in-rtl-slr-3-ref.html
+== float-in-rtl-slr-3c.html float-in-rtl-slr-3-ref.html
+== float-in-rtl-slr-3d.html float-in-rtl-slr-3-ref.html
+== float-in-rtl-slr-4a.html float-in-rtl-slr-4-ref.html
+== float-in-rtl-slr-4b.html float-in-rtl-slr-4-ref.html
+== float-in-rtl-slr-4c.html float-in-rtl-slr-4-ref.html
+== float-in-rtl-slr-4d.html float-in-rtl-slr-4-ref.html
diff --git a/layout/reftests/floats/relative-float-1-ref.html b/layout/reftests/floats/relative-float-1-ref.html
new file mode 100644
index 000000000..9e4b4a5cc
--- /dev/null
+++ b/layout/reftests/floats/relative-float-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      div {
+        position: relative;
+        top: 20px;
+        left: 20px;
+        height: 100px;
+        width: 100px;
+        background: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/floats/relative-float-1.html b/layout/reftests/floats/relative-float-1.html
new file mode 100644
index 000000000..9a25418eb
--- /dev/null
+++ b/layout/reftests/floats/relative-float-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      div {
+        float: left;
+        position: relative;
+        top: 20px;
+        left: 20px;
+        height: 100px;
+        width: 100px;
+        background: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/floats/relative-float-2-ref.html b/layout/reftests/floats/relative-float-2-ref.html
new file mode 100644
index 000000000..ba8437c75
--- /dev/null
+++ b/layout/reftests/floats/relative-float-2-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      #a {
+        float: left;
+        height: 100px;
+        width: 100px
+      }
+      #b {
+        position: relative;
+        top: 20px;
+        left: 20px;
+        height: 100px;
+        width: 100px;
+        background: blue
+      }
+    </style>
+  </head>
+  <body>
+    <div id="a">
+      <div id="b">
+      </div>
+    </div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <br>Duis odio est, cursus non adipiscing at, fringilla quis eros.
+    <br>Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida.
+    <br>Mauris elementum cursus urna id vestibulum.
+    <br>Etiam volutpat odio tincidunt libero ullamcorper elementum.
+    <br>Suspendisse potenti.
+    <br>Ut ut arcu lorem.
+    <br>Integer mi sapien, porta a pharetra et, varius laoreet eros.
+    <br>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+    <br>Sed ut mi at elit consequat aliquam id eu lectus.
+    <br>Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis.
+    <br>Sed blandit ultrices dui et bibendum.
+    <br>Sed condimentum velit eget nibh rutrum cursus.
+    <br>Quisque pretium iaculis gravida.
+    <br>Proin risus eros, iaculis quis fermentum a, adipiscing id mauris.
+    </p>
+  </body>
+</html>
diff --git a/layout/reftests/floats/relative-float-2.html b/layout/reftests/floats/relative-float-2.html
new file mode 100644
index 000000000..dd4c3d7e7
--- /dev/null
+++ b/layout/reftests/floats/relative-float-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      #a {
+        float: left;
+        position: relative;
+        top: 20px;
+        left: 20px;
+        height: 100px;
+        width: 100px;
+        background: blue
+      }
+    </style>
+  </head>
+  <body>
+    <div id="a"></div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <br>Duis odio est, cursus non adipiscing at, fringilla quis eros.
+    <br>Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida.
+    <br>Mauris elementum cursus urna id vestibulum.
+    <br>Etiam volutpat odio tincidunt libero ullamcorper elementum.
+    <br>Suspendisse potenti.
+    <br>Ut ut arcu lorem.
+    <br>Integer mi sapien, porta a pharetra et, varius laoreet eros.
+    <br>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+    <br>Sed ut mi at elit consequat aliquam id eu lectus.
+    <br>Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis.
+    <br>Sed blandit ultrices dui et bibendum.
+    <br>Sed condimentum velit eget nibh rutrum cursus.
+    <br>Quisque pretium iaculis gravida.
+    <br>Proin risus eros, iaculis quis fermentum a, adipiscing id mauris.
+    </p>
+  </body>
+</html>
diff --git a/layout/reftests/floats/zero-height-float-base.html b/layout/reftests/floats/zero-height-float-base.html
new file mode 100644
index 000000000..59acfe404
--- /dev/null
+++ b/layout/reftests/floats/zero-height-float-base.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+    <title>CSS 2.1 Test Suite: wrapping around zero-height floats</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+    <meta name="assert" content="wrapping around zero-height floats" />
+
+<div style="width: 500px; height: 500px; float: left; font-size: 12px;">
+
+  <div style="float: left; width: 10px; height: 30px"></div>
+  <div style="float: left; clear: left; width: 100px; height: 1px"></div>
+
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: blue;"></span>
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: purple;"></span>
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: fuchsia"></span>
+
+</div>
diff --git a/layout/reftests/floats/zero-height-float-ref.html b/layout/reftests/floats/zero-height-float-ref.html
new file mode 100644
index 000000000..3b5fe0757
--- /dev/null
+++ b/layout/reftests/floats/zero-height-float-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<title>Test for wrapping around zero-height floats</title>
+
+<div style="width: 500px; height: 500px; float: left; font-size: 12px;">
+
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: blue; margin-left: 10px;"></span>
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: purple; margin-left: 100px;"></span>
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: fuchsia"></span>
+
+</div>
diff --git a/layout/reftests/floats/zero-height-float.html b/layout/reftests/floats/zero-height-float.html
new file mode 100644
index 000000000..2714a3e6e
--- /dev/null
+++ b/layout/reftests/floats/zero-height-float.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+    <title>CSS 2.1 Test Suite: wrapping around zero-height floats</title>
+    <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+    <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+    <meta name="flags" content="" />
+    <meta name="assert" content="wrapping around zero-height floats" />
+
+<div style="width: 500px; height: 500px; float: left; font-size: 12px;">
+
+  <div style="float: left; width: 10px; height: 30px"></div>
+  <div style="float: left; clear: left; width: 100px; height: 0"></div>
+
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: blue;"></span>
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: purple;"></span>
+  <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: fuchsia"></span>
+
+</div>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/floats
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip