diff --git a/layout/reftests/text/hyphenation-control-6-ref.html b/layout/reftests/text/hyphenation-control-6-ref.html
new file mode 100644
index 000000000000..b9622229bbe2
--- /dev/null
+++ b/layout/reftests/text/hyphenation-control-6-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<style>
+.test { hyphens:auto; font:10px monospace; border: 1px solid silver; }
+</style>
+<body>
+<p>All the columns should appear identical:</p>
+<div id="outer" style="columns:6">
+<script>
+let outer = document.getElementById("outer");
+for (i = 1; i <= 6; ++i) {
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "0ch";
+  div.innerHTML = "the<br>flow-<br>rel-<br>a-<br>tive";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "2ch";
+  div.innerHTML = "the<br>flow-<br>rel-<br>a-<br>tive";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "4ch";
+  div.innerHTML = "the<br>flow-<br>rel-<br>a-<br>tive";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "6ch";
+  div.innerHTML = "the<br>flow-<br>rela-<br>tive";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "8ch";
+  div.innerHTML = "the<br>flow-<br>relative";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "10ch";
+  div.innerHTML = "the flow-<br>relative";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "12ch";
+  div.innerHTML = "the flow-<br>relative";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "14ch";
+  div.innerHTML = "the flow-<br>relative";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "16ch";
+  div.innerHTML = "the flow-<br>relative";
+  outer.appendChild(div);
+
+  div = document.createElement("div");
+  div.className = "test";
+  div.style.width = "18ch";
+  div.innerHTML = "the flow-relative";
+  outer.appendChild(div);
+}
+</script>
diff --git a/layout/reftests/text/hyphenation-control-6.html b/layout/reftests/text/hyphenation-control-6.html
new file mode 100644
index 000000000000..e9dad67eceb5
--- /dev/null
+++ b/layout/reftests/text/hyphenation-control-6.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<style>
+.test { hyphens:auto; font:10px monospace; border: 1px solid silver; }
+</style>
+<body>
+<p>All the columns should appear identical:</p>
+<div id="outer" style="columns:6">
+<script>
+let outer = document.getElementById("outer");
+for (i = 1; i <= 6; ++i) {
+  for (j = 0; j <= 18; j += 2) {
+    div = document.createElement("div");
+    div.className = "test";
+    div.style.width = j + "ch";
+    div.textContent = "the" + " ".repeat(i) + "flow-relative";
+    outer.appendChild(div);
+  }
+}
+</script>
diff --git a/layout/reftests/text/reftest.list b/layout/reftests/text/reftest.list
index e50cd4c4536e..414108de18b9 100644
--- a/layout/reftests/text/reftest.list
+++ b/layout/reftests/text/reftest.list
@@ -322,6 +322,7 @@ pref(gfx.font_rendering.graphite.enabled,true) == glyph-decomposition-graphite.h
 == hyphenation-control-3.html hyphenation-control-3-ref.html
 == hyphenation-control-4.html hyphenation-control-4-ref.html
 fuzzy-if(winWidget,47,6) == hyphenation-control-5.html hyphenation-control-5-ref.html
+fails == hyphenation-control-6.html hyphenation-control-6-ref.html # bug 1476437
 
 # osx-font-smoothing - with and without subpixel AA, only under OSX
 fails-if(!cocoaWidget) != osx-font-smoothing.html osx-font-smoothing-ref.html
