Adding upstream version 115.7.0esr.upstream/115.7.0esr upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
commit: 36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree: 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/floats
parent: Initial commit. (diff)
download: firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
160 files changed, 4157 insertions, 0 deletions
diff --git a/layout/reftests/floats/1114329-ref.html b/layout/reftests/floats/1114329-ref.html
new file mode 100644
index 0000000000..84e7b49ead
--- /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 0000000000..ad202f8f99
--- /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 0000000000..79da184857
--- /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 0000000000..e1264fb9a5
--- /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/1260031-1-ref.html b/layout/reftests/floats/1260031-1-ref.html
new file mode 100644
index 0000000000..8bdbe5f6bb
--- /dev/null
+++ b/layout/reftests/floats/1260031-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Bug 1260031 - Intrinsic width with float</title>
+  <style>
+    #left {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      background: green;
+    }
+    #right {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      background: blue;
+    }
+  </style>
+</head>
+<body>
+  <div id="test">
+    <div id="wrapper">
+      <div id="left"></div><div id="right"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/floats/1260031-1.html b/layout/reftests/floats/1260031-1.html
new file mode 100644
index 0000000000..fdb2b99816
--- /dev/null
+++ b/layout/reftests/floats/1260031-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Bug 1260031 - Intrinsic width with float</title>
+  <style>
+    #wrapper {
+      background: red;
+      width: -moz-fit-content;
+      width: fit-content;
+    }
+    #left {
+      float: left;
+      width: 50px;
+      height: 50px;
+      background: green;
+    }
+    #right {
+      width: 50px;
+      height: 50px;
+      background: blue;
+    }
+  </style>
+</head>
+<body>
+  <div id="test">
+    <div id="wrapper">
+      <div id="left"></div>
+      <div id="right"></div>
+    </div>
+  </div>
+  <script>
+    document.getElementById("right").style = location.search.slice(1);
+  </script>
+</body>
+</html>
diff --git a/layout/reftests/floats/1291110-1-ref.html b/layout/reftests/floats/1291110-1-ref.html
new file mode 100644
index 0000000000..5655fa212d
--- /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 0000000000..dd1645744d
--- /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 0000000000..3fde1c3ac5
--- /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 0000000000..57b502ab7e
--- /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/1322843-1-ref.html b/layout/reftests/floats/1322843-1-ref.html
new file mode 100644
index 0000000000..f3b15eb9e0
--- /dev/null
+++ b/layout/reftests/floats/1322843-1-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<title>Bug 1322843 - Intrinsic width with float</title>
+<style>
+  #outer {
+    width: 200px;
+    height: 200px;
+    background: green;
+  }
+</style>
+<div id="outer"></div>
diff --git a/layout/reftests/floats/1322843-1a.html b/layout/reftests/floats/1322843-1a.html
new file mode 100644
index 0000000000..c2f7ba2857
--- /dev/null
+++ b/layout/reftests/floats/1322843-1a.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>Bug 1322843 - Intrinsic width with float</title>
+<style>
+  #outer {
+    width: -moz-fit-content;
+    width: fit-content;
+    background: red;
+  }
+  #float1 {
+    float: left;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  #float2 {
+    float: right;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  #inner {
+    width: 200px;
+    height: 100px;
+    clear: both;
+    overflow: hidden; /* to establish block formatting context */
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="float1"></div>
+  <div id="float2"></div>
+  <div id="inner"></div>
+</div>
diff --git a/layout/reftests/floats/1322843-1b.html b/layout/reftests/floats/1322843-1b.html
new file mode 100644
index 0000000000..6ab8e1b42a
--- /dev/null
+++ b/layout/reftests/floats/1322843-1b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Bug 1322843 - Intrinsic width with float</title>
+<style>
+  #outer {
+    width: -moz-fit-content;
+    width: fit-content;
+    background: red;
+  }
+  #float {
+    float: left;
+    width: 200px;
+    height: 100px;
+    background: green;
+  }
+  #inner {
+    width: 200px;
+    height: 100px;
+    clear: left;
+    overflow: hidden; /* to establish block formatting context */
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="float"></div>
+  <div id="inner"></div>
+</div>
diff --git a/layout/reftests/floats/1322843-1c.html b/layout/reftests/floats/1322843-1c.html
new file mode 100644
index 0000000000..2625f847df
--- /dev/null
+++ b/layout/reftests/floats/1322843-1c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Bug 1322843 - Intrinsic width with float</title>
+<style>
+  #outer {
+    width: -moz-fit-content;
+    width: fit-content;
+    background: red;
+  }
+  #float {
+    float: right;
+    width: 200px;
+    height: 100px;
+    background: green;
+  }
+  #inner {
+    width: 200px;
+    height: 100px;
+    clear: right;
+    overflow: hidden; /* to establish block formatting context */
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="float"></div>
+  <div id="inner"></div>
+</div>
diff --git a/layout/reftests/floats/1322843-1d.html b/layout/reftests/floats/1322843-1d.html
new file mode 100644
index 0000000000..e8fb14ce46
--- /dev/null
+++ b/layout/reftests/floats/1322843-1d.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>Bug 1322843 - Intrinsic width with float</title>
+<style>
+  #outer {
+    width: -moz-fit-content;
+    width: fit-content;
+    background: red;
+  }
+  #float1 {
+    float: left;
+    width: 200px;
+    height: 100px;
+    background: green;
+  }
+  #float2 {
+    float: right;
+    clear: both;
+    width: 100px;
+    height: 0px;
+  }
+  #float3 {
+    float: left;
+    clear: both;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  #inner {
+    clear: right;
+    overflow: hidden; /* to establish block formatting context */
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="float1"></div>
+  <div id="float2"></div>
+  <div id="float3"></div>
+  <div id="inner"></div>
+</div>
diff --git a/layout/reftests/floats/1322843-1e.html b/layout/reftests/floats/1322843-1e.html
new file mode 100644
index 0000000000..493ed17349
--- /dev/null
+++ b/layout/reftests/floats/1322843-1e.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Bug 1322843 - Intrinsic width with float</title>
+<style>
+  #outer {
+    width: -moz-fit-content;
+    width: fit-content;
+    background: red;
+  }
+  #float {
+    float: left;
+    width: 100px;
+    height: 200px;
+    background: green;
+  }
+  #inner {
+    width: 100px;
+    height: 200px;
+    clear: right;
+    overflow: hidden; /* to establish block formatting context */
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="float"></div>
+  <div id="inner"></div>
+</div>
diff --git a/layout/reftests/floats/1322843-1f.html b/layout/reftests/floats/1322843-1f.html
new file mode 100644
index 0000000000..49e9189b01
--- /dev/null
+++ b/layout/reftests/floats/1322843-1f.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Bug 1322843 - Intrinsic width with float</title>
+<style>
+  #outer {
+    width: -moz-fit-content;
+    width: fit-content;
+    background: red;
+  }
+  #float1 {
+    float: right;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  #float2 {
+    float: right;
+    clear: right;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  #inner {
+    width: 100px;
+    height: 200px;
+    clear: left;
+    overflow: hidden; /* to establish block formatting context */
+    background: green;
+  }
+</style>
+<div id="outer">
+  <div id="float1"></div>
+  <div id="float2"></div>
+  <div id="inner"></div>
+</div>
diff --git a/layout/reftests/floats/345369-1-ref.html b/layout/reftests/floats/345369-1-ref.html
new file mode 100644
index 0000000000..9febdf382b
--- /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 0000000000..714899a47d
--- /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 0000000000..76d999dcfa
--- /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 0000000000..ccd4696a04
--- /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 0000000000..166f5e475f
--- /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 0000000000..f758302d9a
--- /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 0000000000..79d32213e2
--- /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 0000000000..a5c53e2546
--- /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 0000000000..a38cc580ad
--- /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 0000000000..0ed4014c1b
--- /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 0000000000..d2d2e6aac5
--- /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 0000000000..56693a937b
--- /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 0000000000..22cc4548e5
--- /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 0000000000..c38663ec23
--- /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 0000000000..b12cfee4cf
--- /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 0000000000..42f66377e8
--- /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);
+
+</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 0000000000..db8d6c2719
--- /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 0000000000..8d5ffddb9a
--- /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 0000000000..3171bdc03e
--- /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 0000000000..6189510401
--- /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 0000000000..1eddcbdf6c
--- /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 0000000000..b7d4ec4838
--- /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 0000000000..0855ce8de4
--- /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 0000000000..615b4a7595
--- /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 0000000000..bb6ede1cee
--- /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 0000000000..2e95777248
--- /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 0000000000..b0744d3205
--- /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 0000000000..6622fa723c
--- /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 0000000000..284301c1f7
--- /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 0000000000..d4dc7f9b3a
--- /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 0000000000..959f4bbef0
--- /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 0000000000..2ff18c691e
--- /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 0000000000..071b66300a
--- /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 0000000000..6f89a90a52
--- /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 0000000000..d688e35485
--- /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 0000000000..dd5021352f
--- /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 0000000000..597bc68d0d
--- /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 0000000000..a20c1e3712
--- /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 0000000000..0d669dd15c
--- /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 0000000000..95f03f289f
--- /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 0000000000..2b9c91943f
--- /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 0000000000..385bb669be
--- /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 0000000000..6e3a6968d2
--- /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 0000000000..abe03dbeff
--- /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 0000000000..8bfa838439
--- /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 0000000000..c17b493e32
--- /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 0000000000..0a6199b93f
--- /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 0000000000..33f905aed2
--- /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 0000000000..8e2ad66ba0
--- /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 0000000000..9e6b6f999d
--- /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 0000000000..cc784f744b
--- /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 0000000000..fc726af4d4
--- /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 0000000000..04d416d40a
--- /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 0000000000..380ee3307f
--- /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 0000000000..e4a9cfcd02
--- /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 0000000000..b7af65b193
--- /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 0000000000..f5af2bc196
--- /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 0000000000..04e05bf2c4
--- /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 0000000000..0d67449198
--- /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 0000000000..41e3be793d
--- /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 0000000000..8813c2a63e
--- /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 0000000000..b3cd61f6c7
--- /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 0000000000..31c4fe178f
--- /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 0000000000..dd25587665
--- /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 0000000000..4ee217ce1d
--- /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 0000000000..b3b9623eec
--- /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 0000000000..4c99aa543c
--- /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 0000000000..641a6aa79a
--- /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 0000000000..613ffac32e
--- /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 0000000000..5c4669bb41
--- /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 0000000000..ef7b1886fd
--- /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 0000000000..1696cdd4d8
--- /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 0000000000..f94ed50980
--- /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 0000000000..7520ea6ddb
--- /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 0000000000..000938f91c
--- /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 0000000000..6fb5e8509b
--- /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 0000000000..ec15eff4f5
--- /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 0000000000..475188c400
--- /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 0000000000..30fcf9e1a9
--- /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 0000000000..5f92680d76
--- /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 0000000000..b6ce505b8d
--- /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 0000000000..570067b3d7
--- /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 0000000000..efb5b68f81
--- /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 0000000000..976fcd4c78
--- /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 0000000000..e130df96f2
--- /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 0000000000..fafaa1e918
--- /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 0000000000..64182b14f9
--- /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 0000000000..979beded39
--- /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 0000000000..d66585e959
--- /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 0000000000..2309173654
--- /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 0000000000..341aa7aea0
--- /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 0000000000..1249cd3519
--- /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 0000000000..75ccc89d46
--- /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 0000000000..f56d7a3544
--- /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 0000000000..33543aeb3a
--- /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 0000000000..631d196ca7
--- /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 0000000000..7931c3c4fa
--- /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 0000000000..7996d670ec
--- /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 0000000000..1171a11681
--- /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 0000000000..d7e42c2b89
--- /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 0000000000..b181e44915
--- /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 0000000000..a4dda9eb65
--- /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 0000000000..e920706edb
--- /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 0000000000..951270f4e0
--- /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 0000000000..5108dbdcb9
--- /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 0000000000..7f53dbe9a4
--- /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 0000000000..b16ea15fb9
--- /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 0000000000..1ffb583f59
--- /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 0000000000..a5b1db4bc9
--- /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 0000000000..aaef029166
--- /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 0000000000..142c433a0b
--- /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 0000000000..9758a39911
--- /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 0000000000..4daa9e2d27
--- /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 0000000000..5b238a42f2
--- /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 0000000000..08a34370fc
--- /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 0000000000..c456708109
--- /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 0000000000..945245727e
--- /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 {box-sizing: border-box; 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 0000000000..83760bfc14
--- /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 {box-sizing: border-box; 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/orthogonal-floats-1-ref.html b/layout/reftests/floats/orthogonal-floats-1-ref.html
new file mode 100644
index 0000000000..a5ccc8a3c8
--- /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 0000000000..25604d1b6b
--- /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 Gerard 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"></div>
+
+  <div class="floated-right"></div>
+
+  <div class="floated-right"></div>
+
+  <div class="floated-right"></div>
+
+  <div class="floated-right"></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 0000000000..ee682c0dfc
--- /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 Gerard 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"></div>
+
+  <div class="floated-right"></div>
+
+  <div class="floated-right"></div>
+
+  <div class="floated-right"></div>
+
+  <div class="floated-right"></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 0000000000..3c447b0ce9
--- /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 0000000000..97a22e1a66
--- /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 0000000000..508b4741b2
--- /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 0000000000..b7ef87cbba
--- /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 0000000000..68b9f6adf8
--- /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 0000000000..42ae12baef
--- /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 0000000000..711010112e
--- /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 0000000000..e2a0673ba3
--- /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 0000000000..305b7a59c3
--- /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 0000000000..b14382d1be
--- /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 0000000000..0c3efa6cd6
--- /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 0000000000..3809b19a7d
--- /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 0000000000..3ae3087da3
--- /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 0000000000..fb8c0e821c
--- /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.list b/layout/reftests/floats/reftest.list
new file mode 100644
index 0000000000..c35925f2ce
--- /dev/null
+++ b/layout/reftests/floats/reftest.list
@@ -0,0 +1,114 @@
+== 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(0-5,0-1) == 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
+== 1260031-1.html?display:table 1260031-1-ref.html
+== 1260031-1.html?display:table-cell 1260031-1-ref.html
+== 1260031-1.html?overflow:hidden 1260031-1-ref.html
+== 1291110-1.html 1291110-1-ref.html
+== 1291110-2.html 1291110-2-ref.html
+== 1322843-1a.html 1322843-1-ref.html
+== 1322843-1b.html 1322843-1-ref.html
+== 1322843-1c.html 1322843-1-ref.html
+== 1322843-1d.html 1322843-1-ref.html
+== 1322843-1e.html 1322843-1-ref.html
+== 1322843-1f.html 1322843-1-ref.html
+== float-in-rtl-1a.html float-in-rtl-1-ref.html
+fuzzy(0-1,0-27000) == float-in-rtl-1b.html float-in-rtl-1-ref.html
+fuzzy(0-1,0-27000) == float-in-rtl-1c.html float-in-rtl-1-ref.html
+fuzzy(0-1,0-27000) == float-in-rtl-1d.html float-in-rtl-1-ref.html
+== float-in-rtl-2a.html float-in-rtl-2-ref.html
+fuzzy(0-1,0-12000) == float-in-rtl-2b.html float-in-rtl-2-ref.html
+fuzzy(0-1,0-12000) == float-in-rtl-2c.html float-in-rtl-2-ref.html
+fuzzy(0-1,0-12000) == float-in-rtl-2d.html float-in-rtl-2-ref.html
+== float-in-rtl-3a.html float-in-rtl-3-ref.html
+fuzzy(0-1,0-27000) == float-in-rtl-3b.html float-in-rtl-3-ref.html
+fuzzy(0-1,0-27000) == float-in-rtl-3c.html float-in-rtl-3-ref.html
+fuzzy(0-1,0-27000) == float-in-rtl-3d.html float-in-rtl-3-ref.html
+== float-in-rtl-4a.html float-in-rtl-4-ref.html
+fuzzy(0-1,0-12000) == float-in-rtl-4b.html float-in-rtl-4-ref.html
+fuzzy(0-1,0-12000) == float-in-rtl-4c.html float-in-rtl-4-ref.html
+fuzzy(0-1,0-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,0-28,0-11) fuzzy-if(Android,0-16,0-2) == orthogonal-floats-1a.html orthogonal-floats-1-ref.html
+fuzzy-if(OSX,0-28,0-11) fuzzy-if(winWidget,0-137,0-3) == orthogonal-floats-1b.html orthogonal-floats-1-ref.html
+fuzzy-if(winWidget,0-135,0-700) == orthogonal-floats-1c.html orthogonal-floats-1-ref.html
+fuzzy-if(winWidget,0-135,0-700) == orthogonal-floats-1d.html orthogonal-floats-1-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 0000000000..9e4b4a5cc0
--- /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 0000000000..9a25418eb0
--- /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 0000000000..ba8437c75d
--- /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 0000000000..dd4c3d7e77
--- /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 0000000000..59acfe404e
--- /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 0000000000..3b5fe07575
--- /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 0000000000..2714a3e6e3
--- /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	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
commit	36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree	105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/floats
parent	Initial commit. (diff)
download	firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip