From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 .../text-overflow/TestEllipsisFallback.woff        | Bin 0 -> 1224 bytes
 .../text-overflow/aligned-baseline-ref.html        | 100 ++++++++
 .../reftests/text-overflow/aligned-baseline.html   | 100 ++++++++
 .../text-overflow/anonymous-block-ref.html         |  66 +++++
 layout/reftests/text-overflow/anonymous-block.html |  75 ++++++
 .../text-overflow/atomic-under-marker-ref.html     |  85 +++++++
 .../text-overflow/atomic-under-marker.html         |  85 +++++++
 layout/reftests/text-overflow/bidi-simple-ref.html |  85 +++++++
 .../text-overflow/bidi-simple-scrolled-ref.html    | 106 ++++++++
 .../text-overflow/bidi-simple-scrolled.html        |  98 ++++++++
 layout/reftests/text-overflow/bidi-simple.html     |  81 ++++++
 .../reftests/text-overflow/block-padding-ref.html  |  83 +++++++
 layout/reftests/text-overflow/block-padding.html   |  71 ++++++
 .../text-overflow/clipped-elements-ref.html        |  78 ++++++
 .../reftests/text-overflow/clipped-elements.html   |  80 ++++++
 .../reftests/text-overflow/combobox-zoom-ref.html  |  34 +++
 layout/reftests/text-overflow/combobox-zoom.html   |  34 +++
 .../text-overflow/ellipsis-font-fallback-ref.html  | 149 +++++++++++
 .../text-overflow/ellipsis-font-fallback.html      | 150 +++++++++++
 .../text-overflow/false-marker-overlap-ref.html    |  71 ++++++
 .../text-overflow/false-marker-overlap.html        |  72 ++++++
 .../reftests/text-overflow/line-clipping-ref.html  |  28 +++
 layout/reftests/text-overflow/line-clipping.html   |  32 +++
 .../reftests/text-overflow/marker-basic-ref.html   | 276 +++++++++++++++++++++
 layout/reftests/text-overflow/marker-basic.html    | 205 +++++++++++++++
 .../reftests/text-overflow/marker-shadow-ref.html  |  33 +++
 layout/reftests/text-overflow/marker-shadow.html   |  37 +++
 .../reftests/text-overflow/marker-string-ref.html  |  69 ++++++
 layout/reftests/text-overflow/marker-string.html   |  73 ++++++
 .../text-overflow/quirks-decorations-ref.html      |  73 ++++++
 .../reftests/text-overflow/quirks-decorations.html |  74 ++++++
 .../text-overflow/quirks-line-height-ref.html      |  57 +++++
 .../reftests/text-overflow/quirks-line-height.html |  56 +++++
 layout/reftests/text-overflow/reftest-stylo.list   |  54 ++++
 layout/reftests/text-overflow/reftest.list         |  36 +++
 .../text-overflow/scroll-rounding-ref.html         |  85 +++++++
 layout/reftests/text-overflow/scroll-rounding.html |  86 +++++++
 layout/reftests/text-overflow/selection-ref.html   | 114 +++++++++
 layout/reftests/text-overflow/selection.html       | 112 +++++++++
 .../reftests/text-overflow/single-value-ref.html   | 106 ++++++++
 layout/reftests/text-overflow/single-value.html    |  99 ++++++++
 .../text-overflow/standards-decorations-ref.html   |  72 ++++++
 .../text-overflow/standards-decorations.html       |  73 ++++++
 .../text-overflow/standards-line-height-ref.html   |  58 +++++
 .../text-overflow/standards-line-height.html       |  57 +++++
 layout/reftests/text-overflow/table-cell-ref.html  |  45 ++++
 layout/reftests/text-overflow/table-cell.html      |  47 ++++
 .../reftests/text-overflow/theme-overflow-ref.html |  61 +++++
 layout/reftests/text-overflow/theme-overflow.html  |  62 +++++
 .../text-overflow/two-value-syntax-ref.html        |  66 +++++
 .../reftests/text-overflow/two-value-syntax.html   |  75 ++++++
 .../vertical-decorations-1-2-notref.html           |  27 ++
 .../text-overflow/vertical-decorations-1-ref.html  |  27 ++
 .../text-overflow/vertical-decorations-1.html      |  27 ++
 .../text-overflow/vertical-decorations-2-ref.html  |  30 +++
 .../text-overflow/vertical-decorations-2.html      |  30 +++
 .../vertical-decorations-3-4-notref.html           |  27 ++
 .../text-overflow/vertical-decorations-3-ref.html  |  27 ++
 .../text-overflow/vertical-decorations-3.html      |  27 ++
 .../text-overflow/vertical-decorations-4-ref.html  |  30 +++
 .../text-overflow/vertical-decorations-4.html      |  30 +++
 .../text-overflow/visibility-hidden-ref.html       |  72 ++++++
 .../reftests/text-overflow/visibility-hidden.html  |  74 ++++++
 layout/reftests/text-overflow/xulscroll-ref.html   |  80 ++++++
 layout/reftests/text-overflow/xulscroll.html       |  94 +++++++
 65 files changed, 4626 insertions(+)
 create mode 100644 layout/reftests/text-overflow/TestEllipsisFallback.woff
 create mode 100644 layout/reftests/text-overflow/aligned-baseline-ref.html
 create mode 100644 layout/reftests/text-overflow/aligned-baseline.html
 create mode 100644 layout/reftests/text-overflow/anonymous-block-ref.html
 create mode 100644 layout/reftests/text-overflow/anonymous-block.html
 create mode 100644 layout/reftests/text-overflow/atomic-under-marker-ref.html
 create mode 100644 layout/reftests/text-overflow/atomic-under-marker.html
 create mode 100644 layout/reftests/text-overflow/bidi-simple-ref.html
 create mode 100644 layout/reftests/text-overflow/bidi-simple-scrolled-ref.html
 create mode 100644 layout/reftests/text-overflow/bidi-simple-scrolled.html
 create mode 100644 layout/reftests/text-overflow/bidi-simple.html
 create mode 100644 layout/reftests/text-overflow/block-padding-ref.html
 create mode 100644 layout/reftests/text-overflow/block-padding.html
 create mode 100644 layout/reftests/text-overflow/clipped-elements-ref.html
 create mode 100644 layout/reftests/text-overflow/clipped-elements.html
 create mode 100644 layout/reftests/text-overflow/combobox-zoom-ref.html
 create mode 100644 layout/reftests/text-overflow/combobox-zoom.html
 create mode 100644 layout/reftests/text-overflow/ellipsis-font-fallback-ref.html
 create mode 100644 layout/reftests/text-overflow/ellipsis-font-fallback.html
 create mode 100644 layout/reftests/text-overflow/false-marker-overlap-ref.html
 create mode 100644 layout/reftests/text-overflow/false-marker-overlap.html
 create mode 100644 layout/reftests/text-overflow/line-clipping-ref.html
 create mode 100644 layout/reftests/text-overflow/line-clipping.html
 create mode 100644 layout/reftests/text-overflow/marker-basic-ref.html
 create mode 100644 layout/reftests/text-overflow/marker-basic.html
 create mode 100644 layout/reftests/text-overflow/marker-shadow-ref.html
 create mode 100644 layout/reftests/text-overflow/marker-shadow.html
 create mode 100644 layout/reftests/text-overflow/marker-string-ref.html
 create mode 100644 layout/reftests/text-overflow/marker-string.html
 create mode 100644 layout/reftests/text-overflow/quirks-decorations-ref.html
 create mode 100644 layout/reftests/text-overflow/quirks-decorations.html
 create mode 100644 layout/reftests/text-overflow/quirks-line-height-ref.html
 create mode 100644 layout/reftests/text-overflow/quirks-line-height.html
 create mode 100644 layout/reftests/text-overflow/reftest-stylo.list
 create mode 100644 layout/reftests/text-overflow/reftest.list
 create mode 100644 layout/reftests/text-overflow/scroll-rounding-ref.html
 create mode 100644 layout/reftests/text-overflow/scroll-rounding.html
 create mode 100644 layout/reftests/text-overflow/selection-ref.html
 create mode 100644 layout/reftests/text-overflow/selection.html
 create mode 100644 layout/reftests/text-overflow/single-value-ref.html
 create mode 100644 layout/reftests/text-overflow/single-value.html
 create mode 100644 layout/reftests/text-overflow/standards-decorations-ref.html
 create mode 100644 layout/reftests/text-overflow/standards-decorations.html
 create mode 100644 layout/reftests/text-overflow/standards-line-height-ref.html
 create mode 100644 layout/reftests/text-overflow/standards-line-height.html
 create mode 100644 layout/reftests/text-overflow/table-cell-ref.html
 create mode 100644 layout/reftests/text-overflow/table-cell.html
 create mode 100644 layout/reftests/text-overflow/theme-overflow-ref.html
 create mode 100644 layout/reftests/text-overflow/theme-overflow.html
 create mode 100644 layout/reftests/text-overflow/two-value-syntax-ref.html
 create mode 100644 layout/reftests/text-overflow/two-value-syntax.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-1-2-notref.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-1-ref.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-1.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-2-ref.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-2.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-3-4-notref.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-3-ref.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-3.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-4-ref.html
 create mode 100644 layout/reftests/text-overflow/vertical-decorations-4.html
 create mode 100644 layout/reftests/text-overflow/visibility-hidden-ref.html
 create mode 100644 layout/reftests/text-overflow/visibility-hidden.html
 create mode 100644 layout/reftests/text-overflow/xulscroll-ref.html
 create mode 100644 layout/reftests/text-overflow/xulscroll.html

(limited to 'layout/reftests/text-overflow')

diff --git a/layout/reftests/text-overflow/TestEllipsisFallback.woff b/layout/reftests/text-overflow/TestEllipsisFallback.woff
new file mode 100644
index 000000000..4de40fbbb
Binary files /dev/null and b/layout/reftests/text-overflow/TestEllipsisFallback.woff differ
diff --git a/layout/reftests/text-overflow/aligned-baseline-ref.html b/layout/reftests/text-overflow/aligned-baseline-ref.html
new file mode 100644
index 000000000..458731f88
--- /dev/null
+++ b/layout/reftests/text-overflow/aligned-baseline-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Testcase for bug 668919</title>
+
+<style>
+.tab-title {
+  overflow:hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 5em;
+  height:25px;
+}
+
+.c1 { font-size: 14px; }
+.c2 { font-size: 15px; }
+.c3 { font-size: 16px; }
+.c4 { font-size: 17px; }
+.c5 { font-size: 18px; }
+.c6 { font-size: 19px; }
+.c7 { font-size: 20px; }
+.c8 { font-size: 24px; }
+.c9 { font-size: 28px; }
+.c10 { font-size: 32px; }
+.c11 { font-size: 36px; }
+
+.p0  { padding-top:0; }
+.p1  { padding-top:0px; }
+.p2  { padding-top:0px; }
+
+.col2 .tab-title { text-shadow: 1px 1px 1px blue; }
+</style>
+    </head>
+<body>
+
+<div style="position:absolute; top: 0px;">
+<div class="tab-title c1 p0">CSS is awesome</div>
+<div class="tab-title c1 p2">CSS is awesome</div>
+<div class="tab-title c1 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 100px;">
+<div class="tab-title c2 p0">CSS is awesome</div>
+<div class="tab-title c2 p2">CSS is awesome</div>
+<div class="tab-title c2 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 200px;">
+<div class="tab-title c3 p0">CSS is awesome</div>
+<div class="tab-title c3 p2">CSS is awesome</div>
+<div class="tab-title c3 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 300px;">
+<div class="tab-title c4 p0">CSS is awesome</div>
+<div class="tab-title c4 p2">CSS is awesome</div>
+<div class="tab-title c4 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 400px;">
+<div class="tab-title c5 p0">CSS is awesome</div>
+<div class="tab-title c5 p2">CSS is awesome</div>
+<div class="tab-title c5 p3">CSS is awesome</div>
+</div>
+
+<div class="col2" style="position:absolute; top: 0px; left:8em;">
+<div style="position:absolute; top: 0px;">
+<div class="tab-title c1 p0">CSS is awesome</div>
+<div class="tab-title c1 p2">CSS is awesome</div>
+<div class="tab-title c1 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 100px;">
+<div class="tab-title c2 p0">CSS is awesome</div>
+<div class="tab-title c2 p2">CSS is awesome</div>
+<div class="tab-title c2 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 200px;">
+<div class="tab-title c3 p0">CSS is awesome</div>
+<div class="tab-title c3 p2">CSS is awesome</div>
+<div class="tab-title c3 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 300px;">
+<div class="tab-title c4 p0">CSS is awesome</div>
+<div class="tab-title c4 p2">CSS is awesome</div>
+<div class="tab-title c4 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 400px;">
+<div class="tab-title c5 p0">CSS is awesome</div>
+<div class="tab-title c5 p2">CSS is awesome</div>
+<div class="tab-title c5 p3">CSS is awesome</div>
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/aligned-baseline.html b/layout/reftests/text-overflow/aligned-baseline.html
new file mode 100644
index 000000000..070340303
--- /dev/null
+++ b/layout/reftests/text-overflow/aligned-baseline.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Testcase for bug 668919</title>
+
+<style>
+.tab-title {
+  overflow:hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 5em;
+  height:25px;
+}
+
+.c1 { font-size: 14px; }
+.c2 { font-size: 15px; }
+.c3 { font-size: 16px; }
+.c4 { font-size: 17px; }
+.c5 { font-size: 18px; }
+.c6 { font-size: 19px; }
+.c7 { font-size: 20px; }
+.c8 { font-size: 24px; }
+.c9 { font-size: 28px; }
+.c10 { font-size: 32px; }
+.c11 { font-size: 36px; }
+
+.p0  { padding-top:0; }
+.p1  { padding-top:0.1px; }
+.p2  { padding-top:0.2px; }
+
+.col2 .tab-title { text-shadow: 1px 1px 1px blue; }
+</style>
+    </head>
+<body>
+
+<div style="position:absolute; top: 0px;">
+<div class="tab-title c1 p0">CSS is awesome</div>
+<div class="tab-title c1 p2">CSS is awesome</div>
+<div class="tab-title c1 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 100px;">
+<div class="tab-title c2 p0">CSS is awesome</div>
+<div class="tab-title c2 p2">CSS is awesome</div>
+<div class="tab-title c2 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 200px;">
+<div class="tab-title c3 p0">CSS is awesome</div>
+<div class="tab-title c3 p2">CSS is awesome</div>
+<div class="tab-title c3 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 300px;">
+<div class="tab-title c4 p0">CSS is awesome</div>
+<div class="tab-title c4 p2">CSS is awesome</div>
+<div class="tab-title c4 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 400px;">
+<div class="tab-title c5 p0">CSS is awesome</div>
+<div class="tab-title c5 p2">CSS is awesome</div>
+<div class="tab-title c5 p3">CSS is awesome</div>
+</div>
+
+<div class="col2" style="position:absolute; top: 0px; left:8em;">
+<div style="position:absolute; top: 0px;">
+<div class="tab-title c1 p0">CSS is awesome</div>
+<div class="tab-title c1 p2">CSS is awesome</div>
+<div class="tab-title c1 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 100px;">
+<div class="tab-title c2 p0">CSS is awesome</div>
+<div class="tab-title c2 p2">CSS is awesome</div>
+<div class="tab-title c2 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 200px;">
+<div class="tab-title c3 p0">CSS is awesome</div>
+<div class="tab-title c3 p2">CSS is awesome</div>
+<div class="tab-title c3 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 300px;">
+<div class="tab-title c4 p0">CSS is awesome</div>
+<div class="tab-title c4 p2">CSS is awesome</div>
+<div class="tab-title c4 p3">CSS is awesome</div>
+</div>
+
+<div style="position:absolute; top: 400px;">
+<div class="tab-title c5 p0">CSS is awesome</div>
+<div class="tab-title c5 p2">CSS is awesome</div>
+<div class="tab-title c5 p3">CSS is awesome</div>
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/anonymous-block-ref.html b/layout/reftests/text-overflow/anonymous-block-ref.html
new file mode 100644
index 000000000..441d79c82
--- /dev/null
+++ b/layout/reftests/text-overflow/anonymous-block-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+<title>text-overflow: anonymous block</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  width:50%;
+  height:10em;
+
+  border:1px solid black;
+  white-space:pre;
+  margin-left:2em;
+  margin-bottom:2em;
+  line-height:1.5em;
+}
+i {
+  display:inline-block;
+  height: 3em;
+  width: 5em;
+  background: blue;
+  font-style:normal;
+}
+span {
+  position:relative;
+  background:pink;
+  top:40px;
+  left:16em;
+}
+
+.t1 {width:6em;}
+.t2 {width:2em;}
+.t3 {width:25em;}
+.t4 {width:17.5em;}
+
+input { font-family:DejaVuSansMono; }
+
+</style>
+
+</head><body>
+
+
+<div class="test t1"><x>Some ove<m>&#x2026;</m><span><i style="display:block;">anonymous<br>block</i>and</span> unin<m>&#x2026;</m></x></div>
+<div class="test t2"><x>So<m>&#x2026;</m><i style="display:block;">anonymous<br>block</i>an<m>&#x2026;</m></x></div>
+<div style="position:absolute;"><div class="test t3" style="border-style:none;padding:1px"><x>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<m style="padding-left:16em">&#x2026;</m></div></div>
+<div class="test t3"><x>Some overly <span>l&nbsp;&nbsp;&nbsp;</span><span><i style="display:block;">anonymous<br>block</i>and</span> uninformative sentence</x></div>
+<div class="test t4"><x>Some overly <m>&#x2026;</m><span>long<i style="display:block;">anonymous<br>block</i>a&nbsp;&nbsp;</span> uninformative sentence</x></div>
+
+<input size="4" placeholder="pla&#x2026;">
+<input size="4" dir="rtl" placeholder="der&#x2026;">
+<input size="4" placeholder="plaX">
+<input size="4" dir="rtl" placeholder="Xder">
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/anonymous-block.html b/layout/reftests/text-overflow/anonymous-block.html
new file mode 100644
index 000000000..e61ffd4bd
--- /dev/null
+++ b/layout/reftests/text-overflow/anonymous-block.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: overflowing anonymous block should not have marker
+-->
+<html><head>
+<title>text-overflow: anonymous block</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  text-overflow:ellipsis;
+  overflow:hidden;
+  width:50%;
+  height:10em;
+
+  border:1px solid black;
+  white-space:pre;
+  margin-left:2em;
+  margin-bottom:2em;
+  line-height:1.5em;
+}
+i {
+  display:inline-block;
+  height: 3em;
+  width: 5em;
+  background: blue;
+  font-style:normal;
+}
+span {
+  position:relative;
+  background:pink;
+  top:40px;
+  left:16em;
+}
+
+.t1 {width:6em;}
+.t2 {width:2em;}
+.t3 {width:25em;}
+.t4 {width:17.5em;}
+
+input { font-family:DejaVuSansMono; }
+input::placeholder {
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+input.t5::placeholder {
+  text-overflow:"X";
+}
+
+</style>
+
+</head><body>
+
+
+<div class="test t1"><x>Some overly <span>long<i style="display:block;">anonymous<br>block</i>and</span> uninformative sentence</x></div>
+<div class="test t2"><x>Some overly long<i style="display:block;">anonymous<br>block</i>and uninformative sentence</x></div>
+<div class="test t3"><x>Some overly <span>long<i style="display:block;">anonymous<br>block</i>and</span> uninformative sentence</x></div>
+<div class="test t4"><x>Some overly <span>long<i style="display:block;">anonymous<br>block</i>and</span> uninformative sentence</x></div>
+
+<input size="4" placeholder="placeholder">
+<input size="4" dir="rtl" placeholder="placeholder">
+<input size="4" class="t5" placeholder="placeholder">
+<input size="4" class="t5" dir="rtl" placeholder="placeholder">
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/atomic-under-marker-ref.html b/layout/reftests/text-overflow/atomic-under-marker-ref.html
new file mode 100644
index 000000000..fd118943f
--- /dev/null
+++ b/layout/reftests/text-overflow/atomic-under-marker-ref.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow with overflow where introducing a marker would cause
+          the line to have no visible text or atomic inline-level content --
+          then we should either suppress or clip the marker
+-->
+<html><head>
+<title>text-overflow: suppress or clip the marker when it hides all content</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  width:100px;
+  white-space:nowrap;
+  margin:0 100px;
+}
+span {
+ width:97px;
+ display:inline-block;
+}
+s {
+ width:3px;
+ height:10px;
+ margin-left:-2px;
+ display:inline-block;
+ background:blue;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+
+.t1 { }
+.t2 { }
+.t3 { margin-left:98px; padding-left:3px; }
+
+i {
+  display:inline-block;
+  width:2px; 
+  height:10px;
+  background:blue;
+}
+
+</style>
+
+</head><body>
+
+<div style="float:left;">
+<div class="test t1"><span>!</span>&#x2026;</div> <!-- atomic under marker -->
+<div class="test t1"><span>!</span>&#x2026;</div> <!-- atomic in padding -->
+<div class="test t1"><span>!</span>&#x2026;</div> <!-- atomic under marker and in padding -->
+<div class="test t2"><span>!</span>&#x2026;</div> <!-- atomic under marker -->
+<div class="test t2"><span>!</span>&#x2026;</div> <!-- atomic in padding -->
+<div class="test t2"><span>!</span>&#x2026;</div> <!-- atomic under marker and in padding -->
+
+<div class="test rtl t1"><span>!</span>&#x2026;</div> <!-- atomic under marker -->
+<div class="test rtl t1"><span>!</span>&#x2026;</div> <!-- atomic in padding -->
+<div class="test rtl t1"><span>!</span>&#x2026;</div> <!-- atomic under marker and in padding -->
+<div class="test t2"><x style="margin-left:3px">.|</style></div> <!-- atomic under marker -->
+<div class="test t3">g<i></i></div> <!-- atomic in padding -->
+<div class="test t2"><s style="margin-left:1px;"></s><i style="width:17px"></i></div> <!-- atomic under marker and in padding -->
+
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/atomic-under-marker.html b/layout/reftests/text-overflow/atomic-under-marker.html
new file mode 100644
index 000000000..db37d05e0
--- /dev/null
+++ b/layout/reftests/text-overflow/atomic-under-marker.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow with overflow where introducing a marker would cause
+          the line to have no visible text or atomic inline-level content --
+          then we should either suppress or clip the marker
+-->
+<html><head>
+<title>text-overflow: suppress or clip the marker when it hides all content</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  width:100px;
+  white-space:nowrap;
+  padding:0 100px;
+}
+span {
+ width:97px;
+ display:inline-block;
+}
+s {
+ width:3px;
+ height:10px;
+ margin-left:-2px;
+ display:inline-block;
+ background:blue;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+
+.t1 { text-overflow:ellipsis; }
+.t2 { text-overflow:"." ellipsis; }
+.t3 { text-overflow:"long" ellipsis; }
+
+i {
+  display:inline-block;
+  width:2px; 
+  height:10px;
+  background:blue;
+}
+
+</style>
+
+</head><body>
+
+<div style="float:left;">
+<div class="test t1"><span>!</span><i></i>||</div> <!-- atomic under marker -->
+<div class="test t1"><span>!</span>||<i></i></div> <!-- atomic in padding -->
+<div class="test t1"><span>!</span><i style="width:20px"></i></div> <!-- atomic under marker and in padding -->
+<div class="test t2"><span>!</span><i></i>||</div> <!-- atomic under marker -->
+<div class="test t2"><span>!</span>||<i></i></div> <!-- atomic in padding -->
+<div class="test t2"><span>!</span><i style="width:20px"></i></div> <!-- atomic under marker and in padding -->
+
+<div class="test rtl t1"><span>!</span><i></i>||</div> <!-- atomic under marker -->
+<div class="test rtl t1"><span>!</span>||<i></i></div> <!-- atomic in padding -->
+<div class="test rtl t1"><span>!</span><i style="width:20px"></i></div> <!-- atomic under marker and in padding -->
+<div class="test t2"><s></s><i></i>||</div> <!-- atomic under marker -->
+<div class="test t3"><s></s>|<i></i></div> <!-- atomic in padding -->
+<div class="test t2"><s></s><i style="width:20px"></i></div> <!-- atomic under marker and in padding -->
+
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/bidi-simple-ref.html b/layout/reftests/text-overflow/bidi-simple-ref.html
new file mode 100644
index 000000000..3a28b6df0
--- /dev/null
+++ b/layout/reftests/text-overflow/bidi-simple-ref.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+<title>text-overflow: simple mixed-bidi cases</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:auto;
+  white-space:nowrap;
+  width: 4.4em;
+  position:relative;
+  margin-top:1em;
+}
+
+.hidden {
+  overflow:hidden;
+  width: 4.7em;
+}
+
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+.rtl {
+  direction:rtl;
+}
+r {
+  position:absolute;
+  top:0; right:0;
+}
+l {
+  position:absolute;
+  top:0; left:0;
+}
+</style>
+
+</head><body>
+
+
+<!-- LTR overflow:scroll -->
+<div class="test"><r>&#x2026</r>AxxxxB&nbsp;&nbsp;<span class="rlo">HelloWor</span>Axxxx<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test"><r>&#x2026</r><span class="rlo">He&nbsp;&nbsp;oWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test"><r>&#x2026</r><span class="rlo">He&nbsp;&nbsp;oWorld</span></div>
+
+
+<!-- LTR overflow:hidden -->
+<div class="test hidden">AxxxxB<m>&#x2026</m><span class="rlo">HelloWorl&nbsp;</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test hidden"><span class="rlo">H&nbsp;&nbsp;<m>&#x2026</m>oWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test hidden"><span class="rlo">H&nbsp;&nbsp;<m>&#x2026</m>oWorld</span></div>
+
+<!-- RTL overflow:scroll -->
+<div class="test rtl"><l>&#x2026</l>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW&nbsp;&nbsp;ld</span></div>
+
+<div class="test rtl"><l>&#x2026</l><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW&nbsp;&nbsp;ld</span></div>
+
+<div class="test rtl"><l>&#x2026</l><span class="rlo">HelloW&nbsp;&nbsp;ld</span></div>
+
+
+<!-- RTL overflow:hidden -->
+<div class="test rtl hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW<m>&#x2026</m>&nbsp;&nbsp;&nbsp;</span></div>
+
+<div class="test rtl hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW<m>&#x2026</m>&nbsp;&nbsp;&nbsp;</span></div>
+
+<div class="test rtl hidden"><span class="rlo">HelloW<m>&#x2026</m>&nbsp;&nbsp;&nbsp;</span></div>
+
+
+
+
+</body></html>
diff --git a/layout/reftests/text-overflow/bidi-simple-scrolled-ref.html b/layout/reftests/text-overflow/bidi-simple-scrolled-ref.html
new file mode 100644
index 000000000..65eff80bc
--- /dev/null
+++ b/layout/reftests/text-overflow/bidi-simple-scrolled-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html class="reftest-wait"><head>
+<title>text-overflow: simple mixed-bidi cases</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:auto;
+  white-space:nowrap;
+  width: 4.4em;
+  margin-bottom:1em;
+  position:relative;
+  line-height:2em;
+}
+
+.hidden {
+  overflow:hidden;
+  width: 4.7em;
+}
+
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+.rtl {
+  direction:rtl;
+}
+rr {
+  position:absolute;
+  bottom:0; right:8px;
+}
+r {
+  position:absolute;
+  bottom:0; right:-8px;
+}
+ll {
+  position:absolute;
+  bottom:0; left:8px;
+}
+l {
+  position:absolute;
+  bottom:0; left:-8px;
+}
+
+</style>
+<script>
+function scrolldivs() {
+ var divs = document.getElementsByTagName('div');
+  for (i = 0; i < divs.length; ++i) {
+    if (window.getComputedStyle(divs[i]).direction == 'ltr')
+      divs[i].scrollLeft = 8;
+    else
+      divs[i].scrollLeft = -8;
+  }
+  document.documentElement.removeAttribute('class');
+}
+</script>
+
+</head><body onload="scrolldivs()">
+
+<!-- LTR block -->
+
+<div class="test"><ll>&#x2026;</ll><r>&#x2026;</r>&nbsp;&nbsp;xxB&nbsp;<span class="rlo">&#x2026;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;xxxx<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test"><ll>&#x2026;</ll><r>&#x2026;</r><span class="rlo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wor&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test"><ll>&#x2026;</ll><r>&#x2026;</r><span class="rlo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wor&nbsp;&nbsp;</span></div>
+
+<!-- RTL block -->
+<div class="test rtl"><rr>&#x2026;</rr><l>&#x2026;</l>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">&nbsp;&nbsp;llo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
+
+<div class="test rtl"><rr>&#x2026;</rr><l>&#x2026;</l><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">&nbsp;&nbsp;llo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
+
+<div class="test rtl"><rr>&#x2026;</rr><l>&#x2026;</l><span class="rlo">&nbsp;&nbsp;llo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
+
+
+<div class="test rtl hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">&nbsp;&#x2026;lloWo&#x2026;&nbsp;&nbsp;</span></div>
+
+<div class="test rtl hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">&nbsp;&#x2026;lloWo&#x2026;&nbsp;&nbsp;</span></div>
+
+<div class="test rtl hidden"><span class="rlo">&nbsp;&#x2026;lloWo&#x2026;&nbsp;&nbsp;</span></div>
+
+
+<div class="test hidden">&nbsp;&#x2026;xxxB<span class="rlo">Hello&nbsp;&nbsp;&nbsp;&#x2026;d</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test hidden"><span class="rlo">&nbsp;&nbsp;&#x2026;loWor&#x2026;&nbsp;</span>&nbsp;xxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test hidden"><span class="rlo">&nbsp;&nbsp;&#x2026;loWor&#x2026;&nbsp;</span></div>
+
+<span style="position:absolute; top:0; left:6em; height:6em; overflow:hidden;">
+<div class="test rtl"><br><br><rr>&#x2026;</rr><l>&#x2026;</l><span class="rlo">&nbsp;&nbsp;lloW&nbsp;&nbsp;&nbsp;&nbsp;HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld</span></div>
+</span>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/bidi-simple-scrolled.html b/layout/reftests/text-overflow/bidi-simple-scrolled.html
new file mode 100644
index 000000000..489535ab8
--- /dev/null
+++ b/layout/reftests/text-overflow/bidi-simple-scrolled.html
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: Simple bidi cases, scrolled a bit from the start position
+-->
+<html class="reftest-wait"><head>
+<title>text-overflow: simple mixed-bidi cases, scrolled a bit from the start position</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+.test {
+  overflow:auto;
+  text-overflow:ellipsis ellipsis;
+  white-space:nowrap;
+  width: 4.4em;
+  margin-bottom:1em;
+  position:relative;
+  line-height:2em;
+}
+
+.hidden {
+  overflow:hidden;
+  width: 4.7em;
+}
+
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+
+</style>
+<script>
+function scrolldivs() {
+ var divs = document.getElementsByTagName('div');
+  for (i = 0; i < divs.length; ++i) {
+    if (window.getComputedStyle(divs[i]).direction == 'ltr')
+      divs[i].scrollLeft = 8;
+    else
+      divs[i].scrollLeft = -8;
+  }
+  document.documentElement.removeAttribute('class');
+}
+</script>
+
+</head><body onload="scrolldivs()">
+
+<!-- LTR block -->
+
+<div class="test ltr">AxxxB&nbsp;<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test ltr"><span class="rlo">Hell&nbsp;World</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test ltr"><span class="rlo">Hell&nbsp;World</span></div>
+
+
+<!-- RTL block -->
+<div class="test rtl">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">Hello&nbsp;orld</span></div>
+
+<div class="test rtl"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">Hello&nbsp;orld</span></div>
+
+<div class="test rtl"><span class="rlo">Hello&nbsp;orld</span></div>
+
+
+<div class="test rtl hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test rtl hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test rtl hidden"><span class="rlo">HelloWorld</span></div>
+
+<!-- LTR block -->
+
+
+<div class="test ltr hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test ltr hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test ltr hidden"><span class="rlo">HelloWorld</span></div>
+
+<span style="position:absolute; top:0; left:6em; height:6em; overflow:hidden;">
+<div class="test rtl"><br><br><span class="rlo">HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld</span></div>
+</span>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/bidi-simple.html b/layout/reftests/text-overflow/bidi-simple.html
new file mode 100644
index 000000000..82dcdfb5c
--- /dev/null
+++ b/layout/reftests/text-overflow/bidi-simple.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: Simple bidi cases
+-->
+<html><head>
+<title>text-overflow: simple mixed-bidi cases</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:auto;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  width: 4.4em;
+  position:relative;
+  margin-top:1em;
+}
+
+.hidden {
+  overflow:hidden;
+  width: 4.7em;
+}
+
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+.rtl {
+  direction:rtl;
+}
+
+</style>
+
+</head><body>
+
+<!-- LTR overflow:scroll -->
+
+<div class="test">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test"><span class="rlo">HelloWorld</span></div>
+
+<!-- LTR overflow:hidden -->
+<div class="test hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test hidden"><span class="rlo">HelloWorld</span></div>
+
+<!-- RTL overflow:scroll -->
+
+<div class="test rtl">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test rtl"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test rtl"><span class="rlo">HelloWorld</span></div>
+
+
+<!-- RTL overflow:hidden -->
+<div class="test rtl hidden">AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test rtl hidden"><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div>
+
+<div class="test rtl hidden"><span class="rlo">HelloWorld</span></div>
+
+
+
+
+</body></html>
diff --git a/layout/reftests/text-overflow/block-padding-ref.html b/layout/reftests/text-overflow/block-padding-ref.html
new file mode 100644
index 000000000..d699ea61b
--- /dev/null
+++ b/layout/reftests/text-overflow/block-padding-ref.html
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<!DOCTYPE HTML>
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>text-overflow: text-overflow block padding </title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+body { width:24ch; overflow:hidden; }
+
+.test { 
+  overflow: hidden; 
+  white-space: nowrap;
+  padding-left: 1ch;
+  padding-right: 3ch;
+  height: 3em;
+  margin-bottom:1em;
+}
+.s {
+  overflow: auto; position:relative;
+  text-decoration: line-through;
+}
+.rel { position:relative; }
+span {
+  text-decoration: underline overline;
+  background:yellow;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.rlo span {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro span {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+.overlay {
+  position:absolute;
+  border-color:transparent;
+  text-decoration: line-through;
+  z-index:1;
+}
+y {   background:yellow;}
+m {   background:yellow; position:absolute; right:0; padding-right:3ch; z-index:2;}
+mr {  background:yellow; position:absolute; left:0;padding-left:1ch; z-index:2;}
+</style>
+</head><body>
+
+<!-- LTR / LTR -->
+<div class="test ltr overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>
+<div class="test ltr"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y>&#x2026;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</y></div>
+
+<div class="test ltr s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
+
+<!-- RTL / LTR -->
+<div class="test rtl rel"><span><div class="overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y style="padding-left:3ch">&#x2026;</y></div>
+
+<div class="test rtl s"><mr>&#x2026;</mr><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+
+<!-- LTR / RTL -->
+<div class="test ltr rlo overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>
+<div class="test ltr rlo"  ><span>&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span><y style="padding-right:3ch">&#x2026;</y></div>
+
+<div class="test ltr rlo s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span><m>&#x2026;</m></div>
+
+<!-- RTL / RTL -->
+<div class="test rtl rlo rel"><span><div class="overlay"><r>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</r></div>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|</span><y>&#x2026;&nbsp;</y></div>
+
+<div class="test rtl rlo s"><mr>&#x2026;</mr><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/block-padding.html b/layout/reftests/text-overflow/block-padding.html
new file mode 100644
index 000000000..36839f0c3
--- /dev/null
+++ b/layout/reftests/text-overflow/block-padding.html
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: test marker trigger point and alignment in a block with padding
+-->
+<!DOCTYPE HTML>
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>text-overflow: text-overflow block padding </title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+body { width:24ch; overflow:hidden; }
+
+.test { 
+  overflow: hidden; 
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-decoration: line-through;
+  padding-left: 1ch;
+  padding-right: 3ch;
+  height: 3em;
+  margin-bottom:1em;
+}
+.s {
+  overflow: auto; 
+}
+span {
+  text-decoration: underline overline;
+  background:yellow;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.rlo span {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro span {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+</style>
+
+</head><body>
+
+<!-- LTR / LTR -->
+<div class="test ltr"  ><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+<div class="test ltr s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+
+<!-- RTL / LTR -->
+<div class="test rtl"  ><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+<div class="test rtl s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+
+<!-- LTR / RTL -->
+<div class="test ltr rlo"  ><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+<div class="test ltr rlo s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+
+<!-- RTL / RTL -->
+<div class="test rtl rlo"  ><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+<div class="test rtl rlo s"><span>|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;|&nbsp;</span></div>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/clipped-elements-ref.html b/layout/reftests/text-overflow/clipped-elements-ref.html
new file mode 100644
index 000000000..b337bab92
--- /dev/null
+++ b/layout/reftests/text-overflow/clipped-elements-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html><html>
+<head><style>
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+.test { 
+  overflow: hidden; 
+  text-align:right;
+  width: 50px;
+  margin-bottom:1em;
+  height: 20px;
+  white-space:nowrap;
+/*border:1px solid red;width: 500px;*/
+}
+.rel { position:relative; text-align:left;}
+input,select,fieldset,textarea,hr,span {
+ border:1px solid black;
+ background: white;
+ color: black;
+ padding:0 40px;
+}
+iframe,img { width: 80px; height:10px; }
+select[size="4"],iframe,textarea,hr { height:10px; margin:0; }
+</style></head>
+<body>
+
+<div style="position:absolute; top:0; left:0;">
+  <div class="test"><fieldset style="display:inline;"></fieldset></div>
+  <div class="test"><fieldset style="display:inline-block;"></fieldset></div>
+  <div class="test"><fieldset style="display:block;"></fieldset></div>
+
+  <div class="test"><input type="button"></div>
+  <div class="test"><input type="button" style="display:inline-block;"></div>
+  <div class="test"><input type="button" style="display:list-item;"></div>
+  <div class="test"><input type="button" style="display:block;"></div>
+
+  <div class="test"><input type="text"></div>
+  <div class="test"><input type="text" style="display:inline-block;"></div>
+  <div class="test"><input type="text" style="display:block;"></div>
+
+  <div class="test"><textarea></textarea></div>
+  <div class="test"><textarea style="display:inline-block;"></textarea></div>
+  <div class="test"><textarea style="display:block;"></textarea></div>
+
+  <div class="test"><select size="1" style=""><option>&nbsp;<option>&nbsp;</select></div>
+  <div class="test"><select size="1" style="display:block;"><option>&nbsp;<option>&nbsp;</select></div>
+
+  <div class="test"><select size="4" style=""><option>&nbsp;<option>&nbsp;</select></div>
+  <div class="test"><select size="4" style="display:block;"><option>&nbsp;<option>&nbsp;</select></div>
+</div>
+
+<div style="position:absolute; top:0; left:100px;">
+  <div class="test"><iframe src="about:blank" style=""></iframe></div>
+  <div class="test"><iframe src="about:blank" style="display:block"></iframe></div>
+
+  <div class="test" style="text-align:left">&nbsp;&#x2026;</div>
+  <div class="test" style="text-align:left">&nbsp;&#x2026;</div>
+  <div class="test"><img style="display:block;" src="../image/big.png"></div>
+
+  <div class="test"><x style="display:inline-block; height:100px; width:100%; background:lime">&#x2026;</x></div>
+  <div class="test"><hr style="display:inline-block;vertical-align:top"></div>
+  <div class="test"><hr style="display:block;"></div>
+
+  <div class="test">&#x2026;</div>
+  <div class="test"><span style="display:inline-block;"></span></div>
+  <div class="test"></div>
+  <div class="test"><span style="display:list-item;"></span></div>
+  <div class="test"><span style="display:block;"></span></div>
+  <div class="test rel">1<span style="position:relative;"></span></div>
+  <div class="test rel">2<span style="position:absolute;"></span></div>
+  <div class="test rel">3</div>
+  <div class="test rel">4</div>
+  <div class="test"><span style="float:left"></span></div>
+  <div class="test"><span style="float:left; margin-left:-10px"></span></div>
+  <div class="test"><span style="float:right; margin-right:-10px"></span></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/clipped-elements.html b/layout/reftests/text-overflow/clipped-elements.html
new file mode 100644
index 000000000..ab4292ee6
--- /dev/null
+++ b/layout/reftests/text-overflow/clipped-elements.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html><html>
+<head><style>
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+.test { 
+  overflow: hidden; 
+  text-overflow: ellipsis;
+  width: 50px;
+  margin-bottom:1em;
+  height: 20px;
+  white-space:nowrap;
+/*border:1px solid red;width: 500px;*/
+}
+.rel { position:relative;}
+input,select,fieldset,textarea,hr,span {
+ border:1px solid black;
+ background: white;
+ color: black;
+ padding:0 40px;
+}
+iframe,img { width: 80px; height:10px; }
+select[size="4"],iframe,textarea,hr { height:10px; margin:0; }
+
+x {visibility:hidden;display:inline-block;margin-left:-10px;width:1000px;}
+</style></head>
+<body>
+
+<div style="position:absolute; top:0; left:0;">
+  <div class="test"><fieldset style="display:inline;"></fieldset></div>
+  <div class="test"><fieldset style="display:inline-block;"></fieldset></div>
+  <div class="test"><fieldset style="display:block;"></fieldset></div>
+
+  <div class="test"><input type="button"></div>
+  <div class="test"><input type="button" style="display:inline-block;"></div>
+  <div class="test"><input type="button" style="display:list-item;"></div>
+  <div class="test"><input type="button" style="display:block;"></div>
+
+  <div class="test"><input type="text"></div>
+  <div class="test"><input type="text" style="display:inline-block;"></div>
+  <div class="test"><input type="text" style="display:block;"></div>
+
+  <div class="test"><textarea></textarea></div>
+  <div class="test"><textarea style="display:inline-block;"></textarea></div>
+  <div class="test"><textarea style="display:block;"></textarea></div>
+
+  <div class="test"><select size="1" style=""><option>&nbsp;<option>&nbsp;</select></div>
+  <div class="test"><select size="1" style="display:block;"><option>&nbsp;<option>&nbsp;</select></div>
+
+  <div class="test"><select size="4" style=""><option>&nbsp;<option>&nbsp;</select></div>
+  <div class="test"><select size="4" style="display:block;"><option>&nbsp;<option>&nbsp;</select></div>
+</div>
+
+<div style="position:absolute; top:0; left:100px;">
+  <div class="test"><iframe src="about:blank" style=""></iframe></div>
+  <div class="test"><iframe src="about:blank" style="display:block"></iframe></div>
+
+  <div class="test">&nbsp;<img src="../image/big.png"></div>
+  <div class="test">&nbsp;<img style="display:inline-block;" src="../image/big.png"></div>
+  <div class="test"><img style="display:block;" src="../image/big.png"></div>
+
+  <div class="test"><hr style="display:inline;background:lime;vertical-align:top;padding-top:100px;padding-bottom:100px; border-width:0"></div>
+  <div class="test"><hr style="display:inline-block;vertical-align:top"></div>
+  <div class="test"><hr style="display:block;"></div>
+
+  <div class="test"><span style="border-width:0"></span></div>
+  <div class="test"><span style="display:inline-block;"></span></div>
+  <div class="test"><span style="display:inline-table;"></span></div>
+  <div class="test"><span style="display:list-item;"></span></div>
+  <div class="test"><span style="display:block;"></span></div>
+  <div class="test rel">1<span style="position:relative;"></span></div>
+  <div class="test rel">2<span style="position:absolute"></span></div>
+  <div class="test rel">3<span style="position:absolute; left:60px"></span></div>
+  <div class="test rel">4<x></x><span style="position:absolute;">abs4</span></div>
+  <div class="test"><span style="float:left"></span></div>
+  <div class="test"><span style="float:left; margin-left:-10px"></span></div>
+  <div class="test"><span style="float:right; margin-right:-10px"></span></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/combobox-zoom-ref.html b/layout/reftests/text-overflow/combobox-zoom-ref.html
new file mode 100644
index 000000000..35b97ea24
--- /dev/null
+++ b/layout/reftests/text-overflow/combobox-zoom-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+  -->
+<html reftest-zoom="1.5">
+<head>
+<style>
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+html,body {
+  color:black; background-color:white; padding:0; margin:0;
+}
+* {
+  font-family:DejaVuSansMono!important;
+  font-size:16px!important;
+}
+select {
+  width: 200px;
+  padding-right: 8px;
+
+  -moz-appearance: none;
+}
+</style>
+</head>
+<body>
+<select></select><br>
+
+<select><option>long string long s</option></select>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/combobox-zoom.html b/layout/reftests/text-overflow/combobox-zoom.html
new file mode 100644
index 000000000..e45ed6d3f
--- /dev/null
+++ b/layout/reftests/text-overflow/combobox-zoom.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+  -->
+<html reftest-zoom="1.5">
+<head>
+<style>
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+html,body {
+  color:black; background-color:white; padding:0; margin:0;
+}
+* {
+  font-family:DejaVuSansMono!important;
+  font-size:16px!important;
+}
+select {
+  width: 200px;
+  padding-right: 8px;
+  text-overflow: " ";
+  -moz-appearance: none;
+}
+</style>
+</head>
+<body>
+<select></select><br>
+
+<select><option>long string long string long string long string long string long string long string</option></select>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/ellipsis-font-fallback-ref.html b/layout/reftests/text-overflow/ellipsis-font-fallback-ref.html
new file mode 100644
index 000000000..e6a47e864
--- /dev/null
+++ b/layout/reftests/text-overflow/ellipsis-font-fallback-ref.html
@@ -0,0 +1,149 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: fallback to three ASCII periods when ellipsis is unavailable in the font
+-->
+<html><head>
+    <title>text-overflow: ellipsis fallback</title>
+    <style type="text/css">
+@font-face {
+  /* This font has glyphs for ASCII period, upper-case X and space. */
+  font-family: TestEllipsisFallback;
+  src: url(TestEllipsisFallback.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family: TestEllipsisFallback;
+}
+
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+
+m {
+  color:blue;
+}
+.o span {
+  color:black;
+}
+
+.s {
+  width:10em;
+}
+.s2 {
+  width:10em;
+}
+.s3 {
+  width:6em;
+}
+.s4 {
+  width:8em;
+}
+.s5 {
+  width:5em;
+}
+.s6 {
+  width:1em;
+}
+.s7 {
+  width:6em;
+}
+.p {
+  overflow: hidden;
+  white-space:nowrap;
+}
+.r {
+  text-align:right;
+}
+
+.c {
+  margin-left:-0.5em;
+  margin-right:-0.5em;
+}
+
+
+#test1a  { top:0em;     left:0; position:absolute; }
+#test1b  { top:2em;     left:0; position:absolute; }
+#test1c  { top:4em;     left:0; position:absolute; }
+#test1d  { top:6em;     left:0; position:absolute; }
+
+#test2a  { top:0em;     left:15em; position:absolute; }
+#test2b  { top:2em;     left:15em; position:absolute; }
+#test2c  { top:4em;     left:15em; position:absolute; }
+#test2d  { top:6em;     left:15em; position:absolute; }
+
+#test3a  { top: 8em;     left:0; position:absolute; }
+#test3b  { top:10em;     left:0; position:absolute; }
+#test3c  { top:12em;     left:0; position:absolute; }
+#test3d  { top:14em;     left:0; position:absolute; }
+
+#test4a  { top: 8em;     left:15em; position:absolute; }
+#test4b  { top:10em;     left:15em; position:absolute; }
+#test4c  { top:12em;     left:15em; position:absolute; }
+#test4d  { top:14em;     left:15em; position:absolute; }
+
+#test5a  { top:16em;     left:0; position:absolute; }
+#test5b  { top:18em;     left:0; position:absolute; }
+#test5c  { top:20em;     left:0; position:absolute; }
+#test5d  { top:22em;     left:0; position:absolute; }
+
+#test6a  { top:16em;     left:15em; position:absolute; }
+#test6b  { top:18em;     left:15em; position:absolute; }
+#test6c  { top:20em;     left:15em; position:absolute; }
+#test6d  { top:22em;     left:15em; position:absolute; }
+
+#test7a  { top:24em;     left:0; position:absolute; }
+#test7b  { top:26em;     left:0; position:absolute; }
+#test7c  { top:28em;     left:0; position:absolute; }
+#test7d  { top:30em;     left:0; position:absolute; }
+
+
+    </style>
+</head>
+<body>
+<div style="position: absolute; top:20px; left:50px;">
+
+<!-- start + end marker -->
+<div id="test1a"><div class="s ltr"><div class="p o"><span class="c lro">&nbsp;<m>...</m>X<m>...</m>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></div>
+<div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<m>...</m>X<m>...</m>&nbsp;</span></div></div></div>
+<div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<m>...</m>X<m>...</m>&nbsp;</span></div></div></div>
+<div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo">&nbsp;<m>...</m>X<m>...</m>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div></div></div>
+
+<!-- end marker -->
+<div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXX<m>...</m>&nbsp;</span></div></div></div>
+<div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro">&nbsp;<m>...</m>XXXXX</span></div></div></div>
+<div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo">&nbsp;<m>...</m>XXXXX</span></div></div></div>
+<div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXX<m>...</m>&nbsp;</span></div></div></div>
+
+<!-- start marker -->
+<div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro">&nbsp;X<m>...</m></span></div></div></div>
+<div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro"><m>...</m>X&nbsp;</span></div></div></div>
+<div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo"><m>...</m>X&nbsp;</span></div></div></div>
+<div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo">&nbsp;X<m>...</m></span></div></div></div>
+
+<!-- start + end marker, no characters fit, marker is clipped -->
+<div id="test6a"><div class="s6 ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
+<div id="test6b"><div class="s6 rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
+<div id="test6c"><div class="s6 ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
+<div id="test6d"><div class="s6 rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
+
+<!-- start marker, all characters overlapped by marker -->
+<div id="test7a"><div class="s7 ltr"><div class="p o"><span class="c lro">XXX</span></div></div></div>
+<div id="test7b"><div class="s7 rtl"><div class="p o"><span class="c lro">XXX</span></div></div></div>
+<div id="test7c"><div class="s7 ltr"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
+<div id="test7d"><div class="s7 rtl"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/ellipsis-font-fallback.html b/layout/reftests/text-overflow/ellipsis-font-fallback.html
new file mode 100644
index 000000000..f02d569d0
--- /dev/null
+++ b/layout/reftests/text-overflow/ellipsis-font-fallback.html
@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: fallback to three ASCII periods when ellipsis is unavailable in the font
+-->
+<html><head>
+    <title>text-overflow: ellipsis fallback</title>
+    <style type="text/css">
+@font-face {
+  /* This font has glyphs for ASCII period, upper-case X and space. */
+  font-family: TestEllipsisFallback;
+  src: url(TestEllipsisFallback.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family: TestEllipsisFallback;
+}
+
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+
+.o {
+  text-overflow: ellipsis ellipsis;
+  color:blue;
+}
+.o span {
+  color:black;
+}
+
+.s {
+  width:10em;
+}
+.s2 {
+  width:10em;
+}
+.s3 {
+  width:6em;
+}
+.s4 {
+  width:8em;
+}
+.s5 {
+  width:5em;
+}
+.s6 {
+  width:1em;
+}
+.s7 {
+  width:6em;
+}
+.p {
+  overflow: hidden;
+  white-space:nowrap;
+}
+.r {
+  text-align:right;
+}
+
+.c {
+  margin-left:-0.5em;
+  margin-right:-0.5em;
+}
+
+
+#test1a  { top:0em;     left:0; position:absolute; }
+#test1b  { top:2em;     left:0; position:absolute; }
+#test1c  { top:4em;     left:0; position:absolute; }
+#test1d  { top:6em;     left:0; position:absolute; }
+
+#test2a  { top:0em;     left:15em; position:absolute; }
+#test2b  { top:2em;     left:15em; position:absolute; }
+#test2c  { top:4em;     left:15em; position:absolute; }
+#test2d  { top:6em;     left:15em; position:absolute; }
+
+#test3a  { top: 8em;     left:0; position:absolute; }
+#test3b  { top:10em;     left:0; position:absolute; }
+#test3c  { top:12em;     left:0; position:absolute; }
+#test3d  { top:14em;     left:0; position:absolute; }
+
+#test4a  { top: 8em;     left:15em; position:absolute; }
+#test4b  { top:10em;     left:15em; position:absolute; }
+#test4c  { top:12em;     left:15em; position:absolute; }
+#test4d  { top:14em;     left:15em; position:absolute; }
+
+#test5a  { top:16em;     left:0; position:absolute; }
+#test5b  { top:18em;     left:0; position:absolute; }
+#test5c  { top:20em;     left:0; position:absolute; }
+#test5d  { top:22em;     left:0; position:absolute; }
+
+#test6a  { top:16em;     left:15em; position:absolute; }
+#test6b  { top:18em;     left:15em; position:absolute; }
+#test6c  { top:20em;     left:15em; position:absolute; }
+#test6d  { top:22em;     left:15em; position:absolute; }
+
+#test7a  { top:24em;     left:0; position:absolute; }
+#test7b  { top:26em;     left:0; position:absolute; }
+#test7c  { top:28em;     left:0; position:absolute; }
+#test7d  { top:30em;     left:0; position:absolute; }
+
+    </style>
+</head>
+<body>
+<div style="position: absolute; top:20px; left:50px;">
+
+<!-- start + end marker -->
+<div id="test1a"><div class="s ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
+<div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
+<div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
+<div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
+
+<!-- end marker -->
+<div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div>
+<div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro">XXXXXXXXXXXX</span></div></div></div>
+<div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div>
+<div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXXXXXXXXX</span></div></div></div>
+
+<!-- start marker -->
+<div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div>
+<div id="test3b"><div class="s3 rtl"><div class="p o"><span class="c lro">XXXXXX</span></div></div></div>
+<div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div>
+<div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo">XXXXXX</span></div></div></div>
+
+<!-- start + end marker, no characters fit, marker is clipped -->
+<div id="test6a"><div class="s6 ltr"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
+<div id="test6b"><div class="s6 rtl"><div class="p o"><span class="c lro">XXXXXXXXXXXX</span></div></div></div>
+<div id="test6c"><div class="s6 ltr"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
+<div id="test6d"><div class="s6 rtl"><div class="p o"><span class="c rlo">XXXXXXXXXXXX</span></div></div></div>
+
+<!-- start marker, all characters overlapped by marker -->
+<div id="test7a"><div class="s7 ltr"><div class="p o"><span class="c lro">XXX</span></div></div></div>
+<div id="test7b"><div class="s7 rtl"><div class="p o"><span class="c lro">XXX</span></div></div></div>
+<div id="test7c"><div class="s7 ltr"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
+<div id="test7d"><div class="s7 rtl"><div class="p o"><span class="c rlo">XXX</span></div></div></div>
+
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/false-marker-overlap-ref.html b/layout/reftests/text-overflow/false-marker-overlap-ref.html
new file mode 100644
index 000000000..6421d5f5f
--- /dev/null
+++ b/layout/reftests/text-overflow/false-marker-overlap-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: false marker overlap
+-->
+<html><head>
+<title>text-overflow: form control elements</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test { 
+  overflow: hidden; 
+  white-space: nowrap;
+  color: black;
+  height: 6em;
+  width: 32.5em;
+  margin-bottom: 1em;
+}
+
+i {
+  display:inline-block;
+  height: 3em;
+  width: 3em;
+  border:1px solid blue;
+  text-shadow: none;
+}
+.rtl {
+  direction:rtl;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+
+s {
+   float:right;
+   width:3em;
+   height:3em;
+   margin-right:-0.6em;
+   border:1px solid red;
+}
+.rtl s {
+   float:left;
+   margin-left:-0.6em;
+   margin-right:0;
+}
+.overlap {margin-left:-0.6em;}
+.rtl .overlap {margin-right:-0.6em;margin-left:0;}
+.n {padding-left:0.6em;}
+.rtl .n {padding-right:0.6em;padding-left:0;}
+</style>
+
+</head><body>
+
+<div class="test"><font class="overlap"><s></s>&nbsp;<m>&#x2026;</m>| | | | | | | | | | | | | | | | | | | | | | <i class="n"></i></font></div>
+<div class="test"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i></i></font></div>
+<div class="test rtl"><font class="overlap"><s></s>&nbsp;<m>&#x2026;</m>| | | | | | | | | | | | | | | | | | | | | | <i class="n"></i></font></div>
+<div class="test rtl"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i></i></font></div>
+
+
+</body></html>
diff --git a/layout/reftests/text-overflow/false-marker-overlap.html b/layout/reftests/text-overflow/false-marker-overlap.html
new file mode 100644
index 000000000..28720226c
--- /dev/null
+++ b/layout/reftests/text-overflow/false-marker-overlap.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: false marker overlap
+-->
+<html><head>
+<title>text-overflow: false marker overlap</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test { 
+  overflow: hidden; 
+  white-space: nowrap;
+  text-overflow: ellipsis ellipsis;
+  color: black;
+  height: 6em;
+  width: 32.5em;
+  margin-bottom: 1em;
+}
+
+i {
+  display:inline-block;
+  height: 3em;
+  width: 3em;
+  border:1px solid blue;
+  text-shadow: none;
+}
+.rtl {
+  direction:rtl;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+
+s {
+   float:right;
+   width:3em;
+   height:3em;
+   margin-right:-0.6em;
+   border:1px solid red;
+}
+.rtl s {
+   float:left;
+   margin-left:-0.6em;
+   margin-right:0;
+}
+.overlap {margin-left:-0.6em;}
+.rtl .overlap {margin-right:-0.6em;margin-left:0;}
+.n {padding-left:0.6em;}
+.rtl .n {padding-right:0.6em;padding-left:0;}
+</style>
+
+</head><body>
+
+<div class="test"><font class="overlap"><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i class="n"></i></font></div>
+<div class="test"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i></i></font></div>
+<div class="test rtl"><font class="overlap"><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i class="n"></i></font></div>
+<div class="test rtl"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | <i></i></font></div>
+
+
+</body></html>
diff --git a/layout/reftests/text-overflow/line-clipping-ref.html b/layout/reftests/text-overflow/line-clipping-ref.html
new file mode 100644
index 000000000..083d42aad
--- /dev/null
+++ b/layout/reftests/text-overflow/line-clipping-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<head>
+<title>Reference for bug 886313</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+.test {
+  font: 16px DejaVuSansMono;
+  overflow: hidden;
+  width:55px;
+  border: 1px solid black;
+  margin-bottom: 2px;
+}
+</style>
+</head>
+<body>
+  <div class="test">well, hello world</div>
+  <div class="test">well, hello worl&#x2026;</div>
+  <div class="test">well, hell&#x2026; world</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/line-clipping.html b/layout/reftests/text-overflow/line-clipping.html
new file mode 100644
index 000000000..edf914d6c
--- /dev/null
+++ b/layout/reftests/text-overflow/line-clipping.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: When we have multiple lines of text with "text-overflow: ellipsis",
+    an ellipsis on one line shouldn't affect the other lines.
+-->
+<html>
+<head>
+<title>Testcase for bug 886313</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+.test {
+  font: 16px DejaVuSansMono;
+  text-overflow:ellipsis;
+  overflow: hidden;
+  width:55px;
+  border: 1px solid black;
+  margin-bottom: 2px;
+}
+</style>
+</head>
+<body>
+  <div class="test">well, hello world</div>
+  <div class="test">well, hello world!</div>
+  <div class="test">well, helloo world</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/marker-basic-ref.html b/layout/reftests/text-overflow/marker-basic-ref.html
new file mode 100644
index 000000000..c452323f9
--- /dev/null
+++ b/layout/reftests/text-overflow/marker-basic-ref.html
@@ -0,0 +1,276 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+    <title>text-overflow: basic marker position tests</title>
+    <style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+
+.rel {
+  position: relative;
+  height:2em;
+}
+.abs0 {
+  position: absolute;
+  top:0; left:0;
+}
+.abs0r {
+  position: absolute;
+  top:0; right:0;
+}
+
+.s {
+  width:4em;
+}
+.p {
+  overflow: hidden;
+  white-space:nowrap;
+  font-size:16px;
+}
+.a {
+  font-size:20px;
+}
+.r {
+  text-align:right;
+}
+.l {
+  text-align:left;
+}
+
+i {
+  display:inline-block;
+  width: 1.5em;
+  height: 1em;
+  font-style:normal;
+  color:lime;
+  border: 1px solid magenta;
+  text-decoration:overline;
+}
+.cl {
+  margin-left:-1em;
+  color: black;
+}
+.cr {
+  margin-right:-1em;
+  color: black;
+}
+.c5 {
+  margin-left:-0.5em;
+  margin-right:-0.5em;
+  color: black;
+}
+.outside {
+ width:1px; height:1px;
+}
+.overlap1 {
+ width:1.5em; height:1px;
+}
+.ins1 {
+ width:1em; height:1px;
+}
+.ins2 {  margin-right: 0.8em; margin-left: -1em; }
+.overlap2 {
+ width:1000px; height:1px;
+}
+.e { padding: 0 0.8em; }
+
+x1 { display:inline-block; position:relative;}
+x1 m { position:absolute; right:0; font-size:16px; }
+
+#test1a  { top:0;     left:0;     position:absolute; }
+#test1b  { top:0;     left:100px; position:absolute; }
+#test1c  { top:0;     left:200px; position:absolute; }
+#test1d  { top:0;     left:300px; position:absolute; }
+#test2a  { top:40px;  left:0;     position:absolute; }
+#test2b  { top:40px;  left:100px; position:absolute; }
+#test2c  { top:40px;  left:200px; position:absolute; }
+#test2d  { top:40px;  left:300px; position:absolute; }
+#test3a  { top:80px; left:0;     position:absolute; }
+#test3b  { top:80px; left:100px; position:absolute; }
+#test3c  { top:80px; left:200px; position:absolute; }
+#test3d  { top:80px; left:300px; position:absolute; }
+#test4a  { top:120px; left:0;     position:absolute; }
+#test4b  { top:120px; left:100px; position:absolute; }
+#test4c  { top:120px; left:200px; position:absolute; }
+#test4d  { top:120px; left:300px; position:absolute; }
+#test5a  { top:160px; left:0;     position:absolute; }
+#test5b  { top:160px; left:100px; position:absolute; }
+#test5c  { top:160px; left:200px; position:absolute; }
+#test5d  { top:160px; left:300px; position:absolute; }
+#test6a  { top:200px; left:0;     position:absolute; }
+#test6b  { top:200px; left:100px; position:absolute; }
+#test6c  { top:200px; left:200px; position:absolute; }
+#test6d  { top:200px; left:300px; position:absolute; }
+#test7a  { top:240px; left:0;     position:absolute; }
+#test7b  { top:240px; left:100px; position:absolute; }
+#test7c  { top:240px; left:200px; position:absolute; }
+#test7d  { top:240px; left:300px; position:absolute; }
+#test8a  { top:280px; left:0;     position:absolute; }
+#test8b  { top:280px; left:100px; position:absolute; }
+#test8c  { top:280px; left:200px; position:absolute; }
+#test8d  { top:280px; left:300px; position:absolute; }
+#test9a  { top:320px; left:0;     position:absolute; border:1px solid black; }
+#test9b  { top:320px; left:100px; position:absolute; border:1px solid black; }
+#test9c  { top:320px; left:200px; position:absolute; border:1px solid black; }
+#test9d  { top:320px; left:300px; position:absolute; border:1px solid black; }
+#test10a { top:360px; left:0;     position:absolute; }
+#test10b { top:360px; left:100px; position:absolute; }
+
+    </style>
+</head>
+<body>
+<div style="position: absolute; top:20px; left:50px;">
+
+<div id="test1a">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
+<div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</m0></m></span></div>
+</div></div>
+</div>
+<div id="test1b">
+<div class="s a rtl"><div class="p rel">
+<div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
+<div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;<m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</m0></m></span></span></div>
+</div></div>
+</div>
+<div id="test1c">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
+<div class="abs0" style="text-align:left"><span class="cl a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</m0></m></span></div>
+</div></div>
+</div>
+<div id="test1d">
+<div class="s a rtl"><div class="p rel">
+<div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;||||</span><m>&#x2026;</m></div>
+<div class="abs0r"><span class="cr a rlo">&nbsp;&nbsp;&nbsp;<m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">&#x2026;</m0></m></span></span></div>
+</div></div>
+</div>
+
+<div id="test2a">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
+</div></div>
+</div>
+<div id="test2b">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
+</div></div>
+</div>
+<div id="test2c">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
+</div></div>
+</div>
+<div id="test2d">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
+</div></div>
+</div>
+
+<div id="test3a">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
+</div></div>
+</div>
+<div id="test3b">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:left"><m>&#x2026;</m><span class="cl a">&nbsp;</span></div>
+</div></div>
+</div>
+<div id="test3c">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
+</div></div>
+</div>
+<div id="test3d">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:right; left:auto; right:0;"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><m>&#x2026;</m></div>
+</div></div>
+</div>
+
+<!-- start marker, marker partly overlaps image, nothing to align with -->
+<div id="test4a"><div class="s a"><div class="p o ltr"><span class="cl a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
+<div id="test4b"><div class="s a"><div class="p o rtl l"><span class="cl a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
+<div id="test4c"><div class="s a"><div class="p o ltr r"><span class="cr a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
+<div id="test4d"><div class="s a"><div class="p o rtl"><span class="cr a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
+
+<!-- start marker + end, marker partly overlaps image, nothing to align with -->
+<div id="test5a"><div class="s a"><div class="p o ltr"><span class="cl a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
+<div id="test5b"><div class="s a"><div class="p o rtl l"><span class="cl a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
+<div id="test5c"><div class="s a"><div class="p o ltr r"><span class="cr a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
+<div id="test5d"><div class="s a"><div class="p o rtl"><span class="cr a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
+
+<div id="test6a">
+<div class="s a"><div class="p rel">
+<div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><img class="a overlap1" src="../image/big.png"></div>
+<div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">&#x2026;</m0></m></span></span></div>
+</div></div>
+</div>
+<div id="test6b">
+<div class="s a"><div class="p rel">
+<div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;</span><img class="a overlap1" src="../image/big.png"></div>
+<div class="abs0"><span class="cr a">&nbsp;&nbsp;&nbsp;<m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">&#x2026;</m0></m></span></span></div>
+</div></div>
+</div>
+<div id="test6c">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png">&nbsp;&nbsp;&nbsp;</span></div>
+<div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"><m style="position:absolute; bottom:0;"><m0 style="font-size:16px">&#x2026;</m0></m>&nbsp;&nbsp;&nbsp;</span></div>
+</div></div>
+</div>
+<div id="test6d">
+<div class="s a"><div class="p rel">
+<div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png">&nbsp;&nbsp;&nbsp;</span></div>
+<div class="abs0" style="text-align:right; right:0; "><span class="cr a"><img class="overlap1" src="../image/big.png"><m style="position:absolute; bottom:0;"><m0 style="font-size:16px">&#x2026;</m0></m>&nbsp;&nbsp;&nbsp;</span></div>
+</div></div>
+</div>
+
+<div id="test7a">
+<div class="s a"><div class="p ltr"><span class="c5 a">|<x style="display:inline-block;width:0.8em;text-align:right"><m style="font-size:16px;">&#x2026;</m></x><img class="ins1" src="../image/big.png"></span></div></div>
+</div>
+
+<div id="test7b"><div class="s a"><div class="p ltr r"><img class="a ins1" src="../image/big.png"><x class="a" style="display:inline-block;width:0.8em;text-align:left"><m style="font-size:16px;">&#x2026;</m></x><span class="c5 a" style="margin-right:0">&nbsp;</span></div></div></div>
+
+<div id="test7c">
+<div class="s a"><div class="p ltr"><span class="c5 a">|<x style="display:inline-block;width:0.8em;text-align:right"><m style="font-size:16px;">&#x2026;</m></x><img class="ins1" src="../image/big.png"></span></div></div>
+</div>
+
+<div id="test7d"><div class="s a"><div class="p ltr r"><img class="a ins1" src="../image/big.png"><x class="a" style="display:inline-block;width:0.8em;text-align:left"><m style="font-size:16px;">&#x2026;</m></x><span class="c5 a" style="margin-right:0">&nbsp;</span></div></div></div>
+
+
+<div id="test8a"><div class="s a"><div class="a p ltr"><span class="c5 a"></span><span class="e"></span><span style="margin-right:-0.5em">&#x2026;</span><span>&#x200c;</span></div></div></div>
+<div id="test8d"><div class="s a"><div class="a p rtl"><span class="c5 a"></span><span class="e"></span><span style="margin-left:-0.5em">&#x2026;</span><span>&#x200c;</span></div></div></div>
+
+<div id="test9a"><div class="s a"><div class="p ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</m><span class="e a"></span></div></div></div>
+<div id="test9b"><div class="s a"><div class="p rtl"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</m><span class="e a"></span></div></div></div>
+<div id="test9c"><div class="s a"><div class="p ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</m><span class="e a"></span></div></div></div>
+<div id="test9d"><div class="s a"><div class="p rtl"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><m>&#x2026;</m><span class="e a"></span></div></div></div>
+
+<!-- no marker for overflow:auto that doesn't trigger scrollbar -->
+<div id="test10a"><div class="s a"><div class="p o ltr"><span style="margin-left:-5px" >||||||</span></div></div></div>
+<div id="test10b"><div class="s a"><div class="p o rtl"><span style="margin-right:-5px">||||||</span></div></div></div>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/marker-basic.html b/layout/reftests/text-overflow/marker-basic.html
new file mode 100644
index 000000000..4f4afb667
--- /dev/null
+++ b/layout/reftests/text-overflow/marker-basic.html
@@ -0,0 +1,205 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: basic marker position tests
+-->
+<html><head>
+    <title>text-overflow: basic marker position tests</title>
+    <style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+
+.o {
+  text-overflow: ellipsis ellipsis;
+}
+
+.rel {
+  position: relative;
+  height:2em;
+}
+.abs0 {
+  position: absolute;
+  top:0; left:0;
+}
+
+.s {
+  width:4em;
+}
+.p {
+  overflow: hidden;
+  white-space:nowrap;
+  font-size:16px;
+}
+.auto {
+  overflow: auto;
+}
+.r {
+  text-align:right;
+}
+.a {
+  font-size:20px;
+}
+.l {
+  text-align:left;
+}
+i {
+  display:inline-block;
+  width: 1.5em;
+  height: 1em;
+  font-style:normal;
+  color:lime;
+  border: 1px solid magenta;
+  text-decoration:overline;
+}
+
+.c {
+  margin-left:-1em;
+  margin-right:-1em;
+  color: black;
+}
+.c5 {
+  margin-left:-0.5em;
+  margin-right:-0.5em;
+  color: black;
+}
+.outside {
+ width:1px; height:1px;
+}
+.overlap1 {
+ width:1.5em; height:1px;
+}
+.ins1 {
+ width:1em; height:1px;
+ margin: 0 0.8em;
+}
+.overlap2 {
+ width:1000px; height:1px;
+}
+.e { padding: 0 0.8em; }
+
+
+#test1a  { top:0;     left:0;     position:absolute; }
+#test1b  { top:0;     left:100px; position:absolute; }
+#test1c  { top:0;     left:200px; position:absolute; }
+#test1d  { top:0;     left:300px; position:absolute; }
+#test2a  { top:40px;  left:0;     position:absolute; }
+#test2b  { top:40px;  left:100px; position:absolute; }
+#test2c  { top:40px;  left:200px; position:absolute; }
+#test2d  { top:40px;  left:300px; position:absolute; }
+#test3a  { top:80px; left:0;     position:absolute; }
+#test3b  { top:80px; left:100px; position:absolute; }
+#test3c  { top:80px; left:200px; position:absolute; }
+#test3d  { top:80px; left:300px; position:absolute; }
+#test4a  { top:120px; left:0;     position:absolute; }
+#test4b  { top:120px; left:100px; position:absolute; }
+#test4c  { top:120px; left:200px; position:absolute; }
+#test4d  { top:120px; left:300px; position:absolute; }
+#test5a  { top:160px; left:0;     position:absolute; }
+#test5b  { top:160px; left:100px; position:absolute; }
+#test5c  { top:160px; left:200px; position:absolute; }
+#test5d  { top:160px; left:300px; position:absolute; }
+#test6a  { top:200px; left:0;     position:absolute; }
+#test6b  { top:200px; left:100px; position:absolute; }
+#test6c  { top:200px; left:200px; position:absolute; }
+#test6d  { top:200px; left:300px; position:absolute; }
+#test7a  { top:240px; left:0;     position:absolute; }
+#test7b  { top:240px; left:100px; position:absolute; }
+#test7c  { top:240px; left:200px; position:absolute; }
+#test7d  { top:240px; left:300px; position:absolute; }
+#test8a  { top:280px; left:0;     position:absolute; }
+#test8b  { top:280px; left:100px; position:absolute; }
+#test8c  { top:280px; left:200px; position:absolute; }
+#test8d  { top:280px; left:300px; position:absolute; }
+#test9a  { top:320px; left:0;     position:absolute; border:1px solid black; }
+#test9b  { top:320px; left:100px; position:absolute; border:1px solid black; }
+#test9c  { top:320px; left:200px; position:absolute; border:1px solid black; }
+#test9d  { top:320px; left:300px; position:absolute; border:1px solid black; }
+#test10a { top:360px; left:0;     position:absolute; }
+#test10b { top:360px; left:100px; position:absolute; }
+
+
+    </style>
+</head>
+<body>
+<div style="position: absolute; top:20px; left:50px;">
+
+<!-- start + end marker, aligned to text -->
+<div id="test1a"><div class="s a ltr"><div class="p o"><span class="c a lro">||||||||||</span></div></div></div>
+<div id="test1b"><div class="s a rtl"><div class="p o"><span class="c a lro">||||||||||</span></div></div></div>
+<div id="test1c"><div class="s a ltr"><div class="p o"><span class="c a rlo">||||||||||</span></div></div></div>
+<div id="test1d"><div class="s a rtl"><div class="p o"><span class="c a rlo">||||||||||</span></div></div></div>
+
+<!-- start marker, text outside marker edge, nothing to align with -->
+<div id="test2a"><div class="s a"><div class="p o ltr"><span class="c a">x</span></div></div></div>
+<div id="test2b"><div class="s a"><div class="p o rtl l"><span class="c a">x</span></div></div></div>
+<div id="test2c"><div class="s a"><div class="p o ltr r"><span class="c a">x</span></div></div></div>
+<div id="test2d"><div class="s a"><div class="p o rtl"><span class="c a">x</span></div></div></div>
+
+<!-- start marker, image outside marker edge, nothing to align with -->
+<div id="test3a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div>
+<div id="test3b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div>
+<div id="test3c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div>
+<div id="test3d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="outside" src="../image/big.png"></span></div></div></div>
+
+<!-- start marker, marker partly overlaps image, nothing to align with -->
+<div id="test4a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
+<div id="test4b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
+<div id="test4c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
+<div id="test4d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="overlap1" src="../image/big.png"></span></div></div></div>
+
+<!-- start marker + end, marker partly overlaps image, nothing to align with -->
+<div id="test5a"><div class="s a"><div class="p o ltr"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
+<div id="test5b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
+<div id="test5c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
+<div id="test5d"><div class="s a"><div class="p o rtl"><span class="c a"><img class="overlap2" src="../image/big.png"></span></div></div></div>
+
+<!-- start marker, marker clips text, aligns to image -->
+<div id="test6a"><div class="s a"><div class="p o ltr"><span class="c a">|||<img class="overlap1" src="../image/big.png"></span></div></div></div>
+<div id="test6b"><div class="s a"><div class="p o rtl l"><span class="c a"><img class="overlap1" src="../image/big.png">|||</span></div></div></div>
+<div id="test6c"><div class="s a"><div class="p o ltr r"><span class="c a"><img class="overlap1" src="../image/big.png">|||</span></div></div></div>
+<div id="test6d"><div class="s a"><div class="p o rtl"><span class="c a">|||<img class="overlap1" src="../image/big.png"></span></div></div></div>
+
+<!-- start marker, marker aligns to image -->
+<div id="test7a"><div class="s a"><div class="p o ltr"><span class="c5 a">|<img class="ins1" src="../image/big.png"></span></div></div></div>
+<div id="test7b"><div class="s a"><div class="p o rtl"><span class="c5 a">|<img class="ins1" src="../image/big.png"></span></div></div></div>
+<!-- end marker, marker aligns to image -->
+<div id="test7c"><div class="s a"><div class="p o rtl l"><span class="c5 a"><img class="ins1" src="../image/big.png">|</span></div></div></div>
+<div id="test7d"><div class="s a"><div class="p o ltr r"><span class="c5 a"><img class="ins1" src="../image/big.png">|</span></div></div></div>
+
+<!-- start marker, marker aligns to empty element -->
+<div id="test8a"><div class="s a"><div class="a p o ltr"><span class="c5 a">|</span><span class="e"></span><span>&#x200c;</span></div></div></div>
+<div id="test8d"><div class="s a"><div class="a p o rtl"><span class="c5 a">|</span><span class="e"></span><span>&#x200c;</span></div></div></div>
+
+<!-- end marker, marker aligns to inline block with overflow -->
+<div id="test9a"><div class="s a"><div class="p o ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="e"></span><span class="c5 a">|||</span></div></div></div>
+<div id="test9b"><div class="s a"><div class="p o rtl"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="e"></span><span class="c5 a">|||</span></div></div></div>
+<div id="test9c"><div class="s a"><div class="p o ltr"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="e"></span><span class="c5 a">|||</span></div></div></div>
+<div id="test9d"><div class="s a"><div class="p o rtl"><span class="e"></span><i>&nbsp;&nbsp;&nbsp;&nbsp;</i><span class="e"></span><span class="c5 a">|||</span></div></div></div>
+
+<!-- no marker for overflow:auto that doesn't trigger scrollbar -->
+<div id="test10a"><div class="s a"><div class="p o ltr auto"><span style="margin-left:-5px" >||||||</span></div></div></div>
+<div id="test10b"><div class="s a"><div class="p o rtl auto"><span style="margin-right:-5px">||||||</span></div></div></div>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/marker-shadow-ref.html b/layout/reftests/text-overflow/marker-shadow-ref.html
new file mode 100644
index 000000000..12889142d
--- /dev/null
+++ b/layout/reftests/text-overflow/marker-shadow-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+
+div {
+  font-family: DejaVuSansMono;
+  padding-left: 1em;
+}
+
+/* We put the text and marker into separate spans, because
+   overflow markers (and their shadows) are drawn separately
+   from the text frame. */
+span {
+  text-shadow: -0.5em 3px 2px red;
+}
+</style>
+</head>
+<body>
+
+<div><span>Hello</span><span>...</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/marker-shadow.html b/layout/reftests/text-overflow/marker-shadow.html
new file mode 100644
index 000000000..4f9347565
--- /dev/null
+++ b/layout/reftests/text-overflow/marker-shadow.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: Marker should have text-shadow applied to it
+-->
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+
+/* overflow:hidden will clip off some of our text-shadow too.
+   Give us some padding, so we can put the shadow to the left and bottom
+   and beat the overflow clipping. */
+div {
+  font-family: DejaVuSansMono;
+  width: 5em;
+  padding-left: 1em;
+  padding-bottom: 1em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: "...";
+  text-shadow: -0.5em 3px 2px red;
+}
+</style>
+</head>
+<body>
+
+<div>HelloKitty</div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/marker-string-ref.html b/layout/reftests/text-overflow/marker-string-ref.html
new file mode 100644
index 000000000..ba4b9f4c3
--- /dev/null
+++ b/layout/reftests/text-overflow/marker-string-ref.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow:<string>
+-->
+<html><head>
+<title>text-overflow: text-overflow:&lt;string&gt;</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  width:20ch;
+  height:3em;
+  white-space:nowrap;
+  margin-left:2em;
+  position:relative;
+}
+span {
+  margin: 0 -0.5ch;
+}
+m {
+  margin: 0;
+  position:relative;
+}
+mr {
+  position:absolute;
+  right:0;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+
+.t1 m { margin: 0 -0.5ch; }
+
+</style>
+
+</head><body>
+
+
+<div class="test t1"><m>&nbsp;x</m></div>
+<div class="test rtl t1"><m>&nbsp;x</m></div>
+<div class="test t2"><span>xx</span></div>
+<div class="test rtl t2"><span>xx</span></div>
+
+<div class="test t2" style="width:3ch"><span>xx</span></div>
+<div class="test rtl t2" style="width:3ch"><span>xx</span></div>
+<div class="test"><m>X</m><mr>X</mr></div>
+<div class="test"><m>X</m><mr>X</mr></div>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/marker-string.html b/layout/reftests/text-overflow/marker-string.html
new file mode 100644
index 000000000..356ae14c2
--- /dev/null
+++ b/layout/reftests/text-overflow/marker-string.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow:<string>
+-->
+<html><head>
+<title>text-overflow: text-overflow:&lt;string&gt;</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  width:20ch;
+  height:3em;
+  white-space:nowrap;
+  margin-left:2em;
+  position:relative;
+}
+span {
+  margin: 0 -0.5ch;
+}
+s {
+  margin: 0 -0.5ch;
+  padding: 0 11ch;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+
+.t1 { text-overflow:"" ""; }
+.t2 { text-overflow:"Hello World" "Hello World"; }
+.t3 { text-overflow:"X" "X"; }
+
+</style>
+
+</head><body>
+
+
+<!-- Empty marker clips text -->
+<div class="test t1"><span>xx</span></div>
+<div class="test rtl t1"><span>xx</span></div>
+<!-- big marker clips all text -->
+<div class="test t2"><span>xx</span></div>
+<div class="test rtl t2"><span>xx</span></div>
+
+<!-- start marker that doesn't fit -->
+<div class="test t2" style="width:3ch"><span>xx</span></div>
+<div class="test rtl t2" style="width:3ch"><span>xx</span></div>
+
+<!-- start + end marker, nothing to align to -->
+<div class="test t3"><s></s></div>
+<div class="test rtl t3"><s></s></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/quirks-decorations-ref.html b/layout/reftests/text-overflow/quirks-decorations-ref.html
new file mode 100644
index 000000000..d2e297ded
--- /dev/null
+++ b/layout/reftests/text-overflow/quirks-decorations-ref.html
@@ -0,0 +1,73 @@
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+<title>text-overflow: Quirks mode text-decorations</title>
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  float:left;
+  height:2em;
+  white-space:pre;
+  margin-left:1em;
+  margin-bottom:1em;
+  font-size:20px; 
+  color:blue;
+}
+span {
+  font-size:16px;
+  color:black;
+}
+.xspan {
+  text-shadow:0px 1em 2px blue;
+  text-decoration: line-through;
+}
+.rtl .xspan {
+  text-shadow:0 1em 0px blue;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.t1 { width:7.3em; }
+.t2 { width:20px;}
+.t3 { width:22px;}
+.t4 { width:1px; font-family:Ahem; }
+.t3 span {margin-left:14px; }
+
+m { font-size:20px; color:blue; }
+
+</style>
+
+</head><body>
+
+<div class="test t1"><span><span class="xspan">0123&nbsp;56789012</span><m>&#x2026;</m></span></div>
+<div class="test rtl t1"><span><span class="xspan">1&nbsp;56789012345</span><m>&#x2026;</m></span></div>
+<div class="test t2"><span class="xspan">xxxx<m>x</m></span></div>
+<div class="test t3"><span class="xspan">x<m>x</m></span></div>
+<div class="test t4"><span class="xspan">x<m>x</m></span></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/quirks-decorations.html b/layout/reftests/text-overflow/quirks-decorations.html
new file mode 100644
index 000000000..945dfb63a
--- /dev/null
+++ b/layout/reftests/text-overflow/quirks-decorations.html
@@ -0,0 +1,74 @@
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: Quirks mode text-decorations
+-->
+<html><head>
+<title>text-overflow: Quirks mode text-decorations</title>
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  float:left;
+  height:2em;
+  white-space:pre;
+  margin-left:1em;
+  margin-bottom:1em;
+  font-size:20px;
+  color:blue;
+}
+span {
+  text-shadow:0px 1em 2px blue;
+  text-decoration: line-through;
+  font-size:16px;
+  color:black;
+}
+.rtl span {
+  text-shadow:0 1em 0px blue;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.t1 { width:7.3em;}
+.t2 { width:20px;}
+.t3 { width:22px; }
+.t4 { width:1px; font-family:Ahem; }
+.t3 span {margin-left:14px; }
+
+m { font-size:20px; }
+
+</style>
+
+</head><body>
+
+<div class="test t1"><span>0123&nbsp;567890123456789</span><m>x</m></div>
+<div class="test rtl t1"><m>x</m><span>0321&nbsp;56789012345</span></div>
+<div class="test t2"><span>xxxx<m>x</m></span></div>
+<div class="test t3"><span>x<m>x</m></span></div>
+<div class="test t4"><span>x<m>x</m></span></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/quirks-line-height-ref.html b/layout/reftests/text-overflow/quirks-line-height-ref.html
new file mode 100644
index 000000000..e05dc88d5
--- /dev/null
+++ b/layout/reftests/text-overflow/quirks-line-height-ref.html
@@ -0,0 +1,57 @@
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+<title>text-overflow: Quirks mode line height</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+
+  float:left;
+  white-space:pre;
+  margin-left:1em;
+  margin-bottom:1em;
+  font-size:24px; 
+  color:blue;
+  border:1px solid black;
+  position:relative;
+}
+span {
+  font-size:16px;
+  color:black;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.t1 { width:4em; }
+
+m { font-size:24px; color:blue; line-height:8px; }
+
+</style>
+
+</head><body>
+
+<div class="test t1"><span>0123456|</span><m>&#x2026;</m></div>
+<div class="test rtl rlo t1"><span>0123456|</span><m>&#x2026;</m></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/quirks-line-height.html b/layout/reftests/text-overflow/quirks-line-height.html
new file mode 100644
index 000000000..fe9b1747a
--- /dev/null
+++ b/layout/reftests/text-overflow/quirks-line-height.html
@@ -0,0 +1,56 @@
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: Quirks mode line height should not be affected by marker
+-->
+<html><head>
+<title>text-overflow: Quirks mode line height</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  float:left;
+  white-space:pre;
+  margin-left:1em;
+  margin-bottom:1em;
+  font-size:24px;
+  color:blue;
+  border:1px solid black;
+}
+span {
+  font-size:16px;
+  color:black;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.t1 { width:4em; }
+
+</style>
+
+</head><body>
+
+<div class="test t1"><span>0123456|890123456789</span></div>
+<div class="test rtl rlo t1"><span>0123456|89012345</span></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/reftest-stylo.list b/layout/reftests/text-overflow/reftest-stylo.list
new file mode 100644
index 000000000..c7d990f43
--- /dev/null
+++ b/layout/reftests/text-overflow/reftest-stylo.list
@@ -0,0 +1,54 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip-if(B2G||Mulet) == ellipsis-font-fallback.html ellipsis-font-fallback.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== line-clipping.html line-clipping.html
+skip HTTP(..) == marker-basic.html marker-basic.html
+# Bug 1128229
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) HTTP(..) == marker-string.html marker-string.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G) HTTP(..) == bidi-simple.html bidi-simple.html
+# Fails on Android due to anti-aliasing
+fails skip-if(!gtkWidget) fuzzy-if(gtkWidget,2,289) HTTP(..) == bidi-simple-scrolled.html bidi-simple-scrolled.html
+# Fails on Windows and OSX due to anti-aliasing
+skip-if(B2G||Mulet) fuzzy-if(Android,24,4000) fuzzy-if(cocoaWidget,1,40) fuzzy-if(asyncPan&&!layersGPUAccelerated,121,1770) HTTP(..) == scroll-rounding.html scroll-rounding.html
+# bug 760264
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails fuzzy-if(skiaContent,9,1800) HTTP(..) == anonymous-block.html anonymous-block.html
+skip-if(B2G||Mulet) HTTP(..) == false-marker-overlap.html false-marker-overlap.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+HTTP(..) == visibility-hidden.html visibility-hidden.html
+skip-if(B2G||Mulet) fuzzy-if(asyncPan&&!layersGPUAccelerated,102,1724) fuzzy-if(gtkWidget,10,8) HTTP(..) == block-padding.html block-padding.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+HTTP(..) == quirks-decorations.html quirks-decorations.html
+HTTP(..) == quirks-line-height.html quirks-line-height.html
+HTTP(..) == standards-decorations.html standards-decorations.html
+HTTP(..) == standards-line-height.html standards-line-height.html
+fails skip-if(B2G||Mulet) random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) fuzzy-if(skiaContent,1,4200) HTTP(..) == selection.html selection.html
+# bug 668849
+# Initial mulet triage: parity with B2G/B2G Desktop
+HTTP(..) == marker-shadow.html marker-shadow.html
+== aligned-baseline.html aligned-baseline.html
+fails skip-if(Android||B2G) fuzzy-if(skiaContent,1,5) == clipped-elements.html clipped-elements.html
+HTTP(..) == theme-overflow.html theme-overflow.html
+skip-if(B2G||Mulet) HTTP(..) == table-cell.html table-cell.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails skip-if(Mulet) fuzzy-if(gtkWidget,10,32) HTTP(..) == two-value-syntax.html two-value-syntax.html
+# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables
+skip-if(B2G||Mulet) HTTP(..) == single-value.html single-value.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails skip-if(B2G||Mulet) fuzzy-if(gtkWidget,10,2) HTTP(..) == atomic-under-marker.html atomic-under-marker.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(Android||B2G||Mulet) fuzzy-if(asyncPan&&!layersGPUAccelerated,102,12352) HTTP(..) == xulscroll.html xulscroll.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+HTTP(..) == combobox-zoom.html combobox-zoom.html
+
+# The vertical-text pref setting can be removed after bug 1138384 lands
+== vertical-decorations-1.html vertical-decorations-1.html
+== vertical-decorations-2.html vertical-decorations-2.html
+== vertical-decorations-1.html vertical-decorations-1.html
+== vertical-decorations-2.html vertical-decorations-2.html
+== vertical-decorations-3.html vertical-decorations-3.html
+== vertical-decorations-4.html vertical-decorations-4.html
+== vertical-decorations-3.html vertical-decorations-3.html
+== vertical-decorations-4.html vertical-decorations-4.html
diff --git a/layout/reftests/text-overflow/reftest.list b/layout/reftests/text-overflow/reftest.list
new file mode 100644
index 000000000..8a396db9d
--- /dev/null
+++ b/layout/reftests/text-overflow/reftest.list
@@ -0,0 +1,36 @@
+== ellipsis-font-fallback.html ellipsis-font-fallback-ref.html
+== line-clipping.html line-clipping-ref.html
+fuzzy-if(Android,16,244) HTTP(..) == marker-basic.html marker-basic-ref.html  # Bug 1128229
+HTTP(..) == marker-string.html marker-string-ref.html
+skip-if(Android) HTTP(..) == bidi-simple.html bidi-simple-ref.html # Fails on Android due to anti-aliasing
+skip-if(!gtkWidget) fuzzy-if(gtkWidget,2,289) HTTP(..) == bidi-simple-scrolled.html bidi-simple-scrolled-ref.html # Fails on Windows and OSX due to anti-aliasing
+fuzzy-if(Android,24,4000) fuzzy-if(cocoaWidget,1,40) fuzzy-if(asyncPan&&!layersGPUAccelerated,140,1836) HTTP(..) == scroll-rounding.html scroll-rounding-ref.html # bug 760264
+fuzzy(2,453) fuzzy-if(skiaContent,9,2100) fails-if(gtkWidget) HTTP(..) == anonymous-block.html anonymous-block-ref.html # gtkWidget:bug 1309103
+HTTP(..) == false-marker-overlap.html false-marker-overlap-ref.html
+HTTP(..) == visibility-hidden.html visibility-hidden-ref.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,102,1724) fuzzy-if(gtkWidget,10,8) HTTP(..) == block-padding.html block-padding-ref.html
+HTTP(..) == quirks-decorations.html quirks-decorations-ref.html
+HTTP(..) == quirks-line-height.html quirks-line-height-ref.html
+HTTP(..) == standards-decorations.html standards-decorations-ref.html
+HTTP(..) == standards-line-height.html standards-line-height-ref.html
+random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) fuzzy-if(skiaContent,1,4200) HTTP(..) == selection.html selection-ref.html # bug 668849
+HTTP(..) == marker-shadow.html marker-shadow-ref.html
+== aligned-baseline.html aligned-baseline-ref.html
+skip-if(Android) fuzzy-if(skiaContent,1,5) == clipped-elements.html clipped-elements-ref.html
+HTTP(..) == theme-overflow.html theme-overflow-ref.html
+HTTP(..) == table-cell.html table-cell-ref.html
+fuzzy-if(gtkWidget,10,32) HTTP(..) == two-value-syntax.html two-value-syntax-ref.html
+HTTP(..) == single-value.html single-value-ref.html
+fuzzy-if(gtkWidget,10,2) HTTP(..) == atomic-under-marker.html atomic-under-marker-ref.html
+fuzzy(1,2616) skip-if(Android) fuzzy-if(asyncPan&&!layersGPUAccelerated,102,12352) fails-if(http.oscpu=="Linux\u0020x86_64") HTTP(..) == xulscroll.html xulscroll-ref.html # Linux x86_64:bug 1309107
+HTTP(..) == combobox-zoom.html combobox-zoom-ref.html
+
+# The vertical-text pref setting can be removed after bug 1138384 lands
+== vertical-decorations-1.html vertical-decorations-1-ref.html
+== vertical-decorations-2.html vertical-decorations-2-ref.html
+!= vertical-decorations-1.html vertical-decorations-1-2-notref.html
+!= vertical-decorations-2.html vertical-decorations-1-2-notref.html
+== vertical-decorations-3.html vertical-decorations-3-ref.html
+== vertical-decorations-4.html vertical-decorations-4-ref.html
+!= vertical-decorations-3.html vertical-decorations-3-4-notref.html
+!= vertical-decorations-4.html vertical-decorations-3-4-notref.html
diff --git a/layout/reftests/text-overflow/scroll-rounding-ref.html b/layout/reftests/text-overflow/scroll-rounding-ref.html
new file mode 100644
index 000000000..1c0d8d00a
--- /dev/null
+++ b/layout/reftests/text-overflow/scroll-rounding-ref.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: 1px scroll rounding at the end position
+-->
+<html class="reftest-wait"><head>
+<title>text-overflow: scroll rounding</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:auto;
+  width:100px;
+  height:50px;
+  border:1px solid black;
+  white-space:pre;
+  margin-left:90px;
+  margin-bottom:20px;
+}
+
+.rtl {
+  direction:rtl;  margin-left:0;
+}
+.ltr {
+  direction:ltr;
+}
+
+.t1 {width:100.1px;}
+.t2 {width:100.2px;}
+.t4 {width:100.4px;}
+
+s {position:absolute; background:black; z-index:1; }
+#mask1 {top:0; left:60px; width:70px; height:100%; }
+#mask2 {top:30px; left:0; width:100%; height:30px; }
+#mask3 {top:100px; left:0; width:100%; height:30px; }
+#mask4 {top:170px; left:0; width:100%; height:30px; }
+#mask5 {top:240px; left:0; width:100%; height:30px; }
+#mask6 {top:320px; left:0; width:100%; height:30px; }
+#mask7 {top:390px; left:0; width:100%; height:30px; }
+#mask8 {top:460px; left:0; width:100%; height:30px; }
+#mask9 {top:530px; left:0; width:100%; height:30px; }
+</style>
+<script>
+function scrolldivs() {
+ var divs = document.getElementsByTagName('div');
+  for (i = 0; i < divs.length; ++i) {
+    if (window.getComputedStyle(divs[i]).direction == 'ltr')
+      divs[i].scrollLeft = 99999999;
+    else
+      divs[i].scrollLeft = -99999999;
+  }
+  document.documentElement.removeAttribute('class');
+}
+</script>
+
+</head><body onload="scrolldivs()">
+
+<s id="mask1"></s>
+<s id="mask2"></s>
+<s id="mask3"></s>
+<s id="mask4"></s>
+<s id="mask5"></s>
+<s id="mask6"></s>
+<s id="mask7"></s>
+<s id="mask8"></s>
+<s id="mask9"></s>
+
+<div class="test">HelloKittyוסוכנויות</div>
+<div class="test rtl">HelloKittyוסוכנויות</div>
+<div class="test t1">HelloKittyוסוכנויות</div>
+<div class="test rtl t1">HelloKittyוסוכנויות</div>
+<div class="test t2">HelloKittyוסוכנויות</div>
+<div class="test rtl t2">HelloKittyוסוכנויות</div>
+<div class="test t4">HelloKittyוסוכנויות</div>
+<div class="test rtl t4">HelloKittyוסוכנויות</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/scroll-rounding.html b/layout/reftests/text-overflow/scroll-rounding.html
new file mode 100644
index 000000000..7808ab5b1
--- /dev/null
+++ b/layout/reftests/text-overflow/scroll-rounding.html
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: 1px scroll rounding at the end position
+-->
+<html class="reftest-wait"><head>
+<title>text-overflow: scroll rounding</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  text-overflow:ellipsis;
+  overflow:auto;
+  width:100px;
+  height:50px;
+  border:1px solid black;
+  white-space:pre;
+  margin-left:90px;
+  margin-bottom:20px;
+}
+
+.rtl {
+  direction:rtl;  margin-left:0;
+}
+.ltr {
+  direction:ltr;
+}
+
+.t1 {width:100.1px;}
+.t2 {width:100.2px;}
+.t4 {width:100.4px;}
+
+s {position:absolute; background:black; z-index:1; }
+#mask1 {top:0; left:60px; width:70px; height:100%; }
+#mask2 {top:30px; left:0; width:100%; height:30px; }
+#mask3 {top:100px; left:0; width:100%; height:30px; }
+#mask4 {top:170px; left:0; width:100%; height:30px; }
+#mask5 {top:240px; left:0; width:100%; height:30px; }
+#mask6 {top:320px; left:0; width:100%; height:30px; }
+#mask7 {top:390px; left:0; width:100%; height:30px; }
+#mask8 {top:460px; left:0; width:100%; height:30px; }
+#mask9 {top:530px; left:0; width:100%; height:30px; }
+</style>
+<script>
+function scrolldivs() {
+ var divs = document.getElementsByTagName('div');
+  for (i = 0; i < divs.length; ++i) {
+    if (window.getComputedStyle(divs[i]).direction == 'ltr')
+      divs[i].scrollLeft = 99999999;
+    else
+      divs[i].scrollLeft = -99999999;
+  }
+  document.documentElement.removeAttribute('class');
+}
+</script>
+
+</head><body onload="scrolldivs()">
+
+<s id="mask1"></s>
+<s id="mask2"></s>
+<s id="mask3"></s>
+<s id="mask4"></s>
+<s id="mask5"></s>
+<s id="mask6"></s>
+<s id="mask7"></s>
+<s id="mask8"></s>
+<s id="mask9"></s>
+
+<div class="test">HelloKittyוסוכנויות</div>
+<div class="test rtl">HelloKittyוסוכנויות</div>
+<div class="test t1">HelloKittyוסוכנויות</div>
+<div class="test rtl t1">HelloKittyוסוכנויות</div>
+<div class="test t2">HelloKittyוסוכנויות</div>
+<div class="test rtl t2">HelloKittyוסוכנויות</div>
+<div class="test t4">HelloKittyוסוכנויות</div>
+<div class="test rtl t4">HelloKittyוסוכנויות</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/selection-ref.html b/layout/reftests/text-overflow/selection-ref.html
new file mode 100644
index 000000000..526dd02f3
--- /dev/null
+++ b/layout/reftests/text-overflow/selection-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html class="reftest-wait"><head>
+<title>text-overflow: Selected text, background, decorations</title>
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+@font-face {
+  font-family: TestEllipsisFallback;
+  src: url(TestEllipsisFallback.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:auto;
+  white-space:nowrap;
+  width: 5em;
+  position:relative;
+  margin-top:1em;
+  padding-left: 0.9em;
+  padding-right: 1.3em;
+}
+
+.hidden {
+  overflow:hidden;
+  width: 4.4em;
+}
+
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+.rtl {
+  direction:rtl;
+}
+i { display:none; }
+x {font-family:DejaVuSansMono;}
+</style>
+<script>
+function getTextNode(elm) {
+  if (elm.nodeType != 3)
+    return getTextNode(elm.firstChild);
+  return elm;
+}
+function addRange(elm) {
+try {
+  var sel = window.getSelection();
+  var range = document.createRange();
+  var startNode = elm.getAttribute('startNode');
+  if (startNode == null)
+    startNode = getTextNode(elm);
+  else
+    startNode = getTextNode(elm.childNodes[startNode])
+  var start = elm.getAttribute('start');
+  if (start == null) start = 2;
+  var endNode = elm.getAttribute('endNode');
+  if (endNode == null)
+    endNode = startNode;
+  else
+    endNode = getTextNode(elm.childNodes[endNode])
+  var end = elm.getAttribute('end');
+  if (end == null) end = endNode.textContent.length;
+  if (startNode==endNode && start > end) return;
+  if (startNode==null) return;
+  range.setStart(startNode, start);
+  range.setEnd(endNode, end);
+  sel.addRange(range);
+} catch (e) {
+alert(e+'\n'+elm.id+'\n'+t)
+}
+}
+function selectText() {
+ var divs = document.getElementsByTagName('div');
+  for (i = 0; i < divs.length; ++i) {
+    addRange(divs[i]);
+  }
+  var t1 = document.getElementById('t1');
+  addRange(t1.firstChild);
+  var t2 = document.getElementById('t2');
+  addRange(t2.firstChild);
+  document.body.offsetHeight;
+  setTimeout(function(){document.documentElement.removeAttribute('class')},2000);
+}
+</script>
+</head><body onload="selectText();">
+
+<!-- LTR overflow:hidden -->
+<div contenteditable="true" spellcheck="true" class="test ltr hidden" end=6>Mispe|&#x2026;</div>
+<span style="display:block;width:15em"><div contenteditable="true" spellcheck="true" class="test ltr hidden" style="width:auto; float:right; font-family:TestEllipsisFallback; text-align:right; width:9em;" start=0 end=0>...<x><i>z</i>d word</x></div></span><br clear="all">
+
+<div id="t1" contenteditable="true" spellcheck="true" class="test ltr hidden"><span class="rlo" endNode="1" start="0" end="6"><i>z</i>d word</span>&#x2026;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+<div id="t2" contenteditable="true" spellcheck="true" class="test ltr hidden" ><span class="rlo" endNode="2" start="1" end="1">&#x2026;<i>z</i>d word</span></div>
+<div contenteditable="true" spellcheck="true" class="test ltr hidden"><span class="rlo">&#x2026;<i>z</i>d word</div>
+<div contenteditable="true" spellcheck="true" class="test ltr hidden" endNode="1" start="2" end="3" style="text-indent:-0.2em"><span>&nbsp;&#x2026;s</span><span>pe|</span>&#x2026;<span></span></div>
+
+<!-- RTL overflow:hidden -->
+<div contenteditable="true" spellcheck="true" class="test rtl hidden" endNode="2" start="8" end="6">Misp&nbsp;&nbsp;&nbsp;&#x2026;<i>z</i>d word</div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden" end="2"><span class="lro">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x2026;<i>z</i>d word</span></div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden" endNode="1" end=0 start=1><span class="lro">&#x2026;<i>z</i>d</span><span class="rlo"> word</span></div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="rlo">Mis</span><span class="rlo">pel&#x2026;&nbsp;&nbsp;&nbsp; word</div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="rlo">Mis</span><span class="rlo">pel&#x2026;&nbsp;&nbsp;&nbsp; word</div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="rlo" style="margin-right:-0.2em">&nbsp;&#x2026;s</span><span class="rlo">pel&#x2026;&nbsp;&nbsp;&nbsp;</span><span class="rlo"> word</span></div>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/selection.html b/layout/reftests/text-overflow/selection.html
new file mode 100644
index 000000000..3b5388e5e
--- /dev/null
+++ b/layout/reftests/text-overflow/selection.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: Selected text, background, decorations
+-->
+<html class="reftest-wait"><head>
+<title>text-overflow: Selected text, background, decorations</title>
+<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+@font-face {
+  font-family: TestEllipsisFallback;
+  src: url(TestEllipsisFallback.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:auto;
+  text-overflow:ellipsis ellipsis;
+  white-space:nowrap;
+  width: 5em;
+  position:relative;
+  margin-top:1em;
+  padding-left: 0.9em;
+  padding-right: 1.3em;
+}
+
+.hidden {
+  overflow:hidden;
+  width: 4.4em;
+}
+
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+.lro {
+  unicode-bidi: bidi-override; direction: ltr;
+}
+.rtl {
+  direction:rtl;
+}
+x {font-family:DejaVuSansMono;}
+</style>
+<script>
+function getTextNode(elm) {
+  if (elm.nodeType != 3)
+    return getTextNode(elm.firstChild);
+  return elm;
+}
+function addRange(elm) {
+try {
+  var sel = window.getSelection();
+  var range = document.createRange();
+  var startNode = elm.getAttribute('startNode');
+  if (startNode == null)
+    startNode = getTextNode(elm);
+  else
+    startNode = getTextNode(elm.childNodes[startNode])
+  var start = elm.getAttribute('start');
+  if (start == null) start = 2;
+  var endNode = elm.getAttribute('endNode');
+  if (endNode == null)
+    endNode = startNode;
+  else
+    endNode = getTextNode(elm.childNodes[endNode])
+  var end = elm.getAttribute('end');
+  if (end == null) end = endNode.textContent.length;
+  if (startNode==endNode && start > end) return;
+  if (startNode==null) return;
+  range.setStart(startNode, start);
+  range.setEnd(endNode, end);
+  sel.addRange(range);
+} catch (e) {
+alert(e+'\n'+elm.id+'\n'+t)
+}
+}
+function selectText() {
+ var divs = document.getElementsByTagName('div');
+  for (i = 0; i < divs.length; ++i) {
+    addRange(divs[i]);
+  }
+  document.body.offsetHeight;
+  setTimeout(function(){document.documentElement.removeAttribute('class')},2000);
+}
+</script>
+</head><body onload="selectText();">
+
+
+<!-- LTR overflow:hidden -->
+<div contenteditable="true" spellcheck="true" class="test ltr hidden">Mispe|led word</div>
+<span style="display:block;width:15em"><div contenteditable="true" spellcheck="true" class="test ltr hidden" style="width:auto; float:right; font-family:TestEllipsisFallback; text-indent:-1em; " start=0 end=9><x>M       ispeled word</x></div></span><br clear="all">
+<div contenteditable="true" spellcheck="true" class="test ltr hidden"><span class="rlo">Mispelled word</span></div>
+<div contenteditable="true" spellcheck="true" class="test ltr hidden"><span class="rlo">Mispelled</span><span class="rlo"> word</span></div>
+<div contenteditable="true" spellcheck="true" class="test ltr hidden"><span class="rlo">Mis</span><span class="rlo">pelled word</div>
+<div contenteditable="true" spellcheck="true" class="test ltr hidden" endNode="1" style="text-indent:-0.2em"><span>Mis</span><span>pe|led</span><span> word</span></div>
+
+<!-- RTL overflow:hidden -->
+<div contenteditable="true" spellcheck="true" class="test rtl hidden">Mispelled word</div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden" end="2"><span class="lro">Mispelled word</span></div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="lro">Mispelled</span><span class="rlo"> word</span></div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="rlo">Mis</span><span class="rlo">pelled word</div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="rlo">Mis</span><span class="rlo">pelled          word</div>
+<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="rlo" style="margin-right:-0.2em">Mis</span><span class="rlo">pelled</span><span class="rlo"> word</span></div>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/single-value-ref.html b/layout/reftests/text-overflow/single-value-ref.html
new file mode 100644
index 000000000..bb0954f25
--- /dev/null
+++ b/layout/reftests/text-overflow/single-value-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow: <single value>, scrolled and non-scrolled tests, (bug 684266)
+-->
+<html class="reftest-wait"><head>
+<title>text-overflow: &lt;single value&gt;, scrolled and non-scrolled tests, (bug 684266)</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+body {padding:10px 40px;}
+
+div {
+  width:100px;
+  white-space:nowrap;
+}
+.hidden {overflow:hidden}
+.auto {overflow:auto}
+.autolong {overflow:auto; width:100%;}
+.scroll {overflow:scroll}
+
+.ltr { direction:ltr; unicode-bidi: bidi-override; }
+.rtl { direction:rtl; unicode-bidi: bidi-override; }
+
+.ltr.p { text-indent: -5px; padding-left: 40px; } /* overflow into padding, but not outside the padding edge */
+.rtl.p { text-indent: -5px; padding-right: 40px; } /* overflow into padding, but not outside the padding edge */
+
+.s { text-indent: -5px; } /* overflow start edge outside the padding edge */
+
+div.ltr {
+  text-overflow: clip ellipsis;
+}
+div.rtl {
+  text-overflow: ellipsis clip;
+}
+
+</style>
+
+<script>
+function scrolldivs() {
+ var divs = document.getElementsByTagName('div');
+  for (i = 0; i < divs.length; ++i) {
+    var elm = divs[i];
+    if (elm.hasAttribute('scroll')) {
+      if (window.getComputedStyle(elm).direction == 'ltr')
+        elm.scrollLeft = 8;
+      else
+        elm.scrollLeft = -8;
+    }
+  }
+  document.documentElement.removeAttribute('class');
+}
+window.addEventListener("MozReftestInvalidate", scrolldivs, false);
+</script>
+</head>
+<body>
+
+    <div class="ltr start p hidden">A long line that does not break (overflow:hidden)</div>
+    <div class="ltr start p auto">A long line that does not break (overflow:auto)</div>
+    <div class="ltr start p autolong">A long line that does not break (overflow:auto)</div>
+    <div class="ltr start p scroll">A long line that does not break (overflow:scroll)</div>
+    <div class="ltr start s hidden">A long line that does not break (overflow:hidden)</div>
+    <div class="ltr start s auto">A long line that does not break (overflow:auto)</div>
+    <div class="ltr start s autolong">A long line that does not break (overflow:auto)</div>
+    <div class="ltr start s scroll">A long line that does not break (overflow:scroll)</div>
+
+    <div scroll class="ltr start p hidden">A long line that does not break (overflow:hidden)</div>
+    <div scroll class="ltr start p auto">A long line that does not break (overflow:auto)</div>
+    <div scroll class="ltr start p autolong">A long line that does not break (overflow:auto)</div>
+    <div scroll class="ltr start p scroll">A long line that does not break (overflow:scroll)</div>
+    <div scroll class="ltr start s hidden">A long line that does not break (overflow:hidden)</div>
+    <div scroll class="ltr start s auto">A long line that does not break (overflow:auto)</div>
+    <div scroll class="ltr start s autolong">A long line that does not break (overflow:auto)</div>
+    <div scroll class="ltr start s scroll">A long line that does not break (overflow:scroll)</div>
+
+<div class="rtl" style="float:right">
+    <div class="rtl start p hidden">A long line that does not break (overflow:hidden)</div>
+    <div class="rtl start p auto">A long line that does not break (overflow:auto)</div>
+    <div class="rtl start p autolong">A long line that does not break (overflow:auto)</div>
+    <div class="rtl start p scroll">A long line that does not break (overflow:scroll)</div>
+    <div class="rtl start s hidden">A long line that does not break (overflow:hidden)</div>
+    <div class="rtl start s auto">A long line that does not break (overflow:auto)</div>
+    <div class="rtl start s autolong">A long line that does not break (overflow:auto)</div>
+    <div class="rtl start s scroll">A long line that does not break (overflow:scroll)</div>
+
+    <div scroll class="rtl start p hidden">A long line that does not break (overflow:hidden)</div>
+    <div scroll class="rtl start p auto">A long line that does not break (overflow:auto)</div>
+    <div scroll class="rtl start p autolong">A long line that does not break (overflow:auto)</div>
+    <div scroll class="rtl start p scroll">A long line that does not break (overflow:scroll)</div>
+    <div scroll class="rtl start s hidden">A long line that does not break (overflow:hidden)</div>
+    <div scroll class="rtl start s auto">A long line that does not break (overflow:auto)</div>
+    <div scroll class="rtl start s autolong">A long line that does not break (overflow:auto)</div>
+    <div scroll class="rtl start s scroll">A long line that does not break (overflow:scroll)</div>
+</div>
+
+
+</body>
+</hml>
diff --git a/layout/reftests/text-overflow/single-value.html b/layout/reftests/text-overflow/single-value.html
new file mode 100644
index 000000000..d6f765303
--- /dev/null
+++ b/layout/reftests/text-overflow/single-value.html
@@ -0,0 +1,99 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow: <single value>, scrolled and non-scrolled tests, (bug 684266)
+-->
+<html class="reftest-wait"><head>
+<title>text-overflow: &lt;single value&gt;, scrolled and non-scrolled tests, (bug 684266)</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+body {padding:10px 40px;}
+
+div {
+  text-overflow: ellipsis;
+  width:100px;
+  white-space:nowrap;
+}
+.hidden {overflow:hidden}
+.auto {overflow:auto}
+.autolong {overflow:auto; width:100%;}
+.scroll {overflow:scroll}
+
+.ltr { direction:ltr; unicode-bidi: bidi-override; }
+.rtl { direction:rtl; unicode-bidi: bidi-override; }
+
+.ltr.p { text-indent: -5px; padding-left: 40px; } /* overflow into padding, but not outside the padding edge */
+.rtl.p { text-indent: -5px; padding-right: 40px; } /* overflow into padding, but not outside the padding edge */
+
+.s { text-indent: -5px; } /* overflow start edge outside the padding edge */
+</style>
+
+<script>
+function scrolldivs() {
+ var divs = document.getElementsByTagName('div');
+  for (i = 0; i < divs.length; ++i) {
+    var elm = divs[i];
+    if (elm.hasAttribute('scroll')) {
+      if (window.getComputedStyle(elm).direction == 'ltr')
+        elm.scrollLeft = 8;
+      else
+        elm.scrollLeft = -8;
+    }
+  }
+  document.documentElement.removeAttribute('class');
+}
+window.addEventListener("MozReftestInvalidate", scrolldivs, false);
+</script>
+</head>
+<body>
+
+    <div class="ltr start p hidden">A long line that does not break (overflow:hidden)</div>
+    <div class="ltr start p auto">A long line that does not break (overflow:auto)</div>
+    <div class="ltr start p autolong">A long line that does not break (overflow:auto)</div>
+    <div class="ltr start p scroll">A long line that does not break (overflow:scroll)</div>
+    <div class="ltr start s hidden">A long line that does not break (overflow:hidden)</div>
+    <div class="ltr start s auto">A long line that does not break (overflow:auto)</div>
+    <div class="ltr start s autolong">A long line that does not break (overflow:auto)</div>
+    <div class="ltr start s scroll">A long line that does not break (overflow:scroll)</div>
+
+    <div scroll class="ltr start p hidden">A long line that does not break (overflow:hidden)</div>
+    <div scroll class="ltr start p auto">A long line that does not break (overflow:auto)</div>
+    <div scroll class="ltr start p autolong">A long line that does not break (overflow:auto)</div>
+    <div scroll class="ltr start p scroll">A long line that does not break (overflow:scroll)</div>
+    <div scroll class="ltr start s hidden">A long line that does not break (overflow:hidden)</div>
+    <div scroll class="ltr start s auto">A long line that does not break (overflow:auto)</div>
+    <div scroll class="ltr start s autolong">A long line that does not break (overflow:auto)</div>
+    <div scroll class="ltr start s scroll">A long line that does not break (overflow:scroll)</div>
+
+<div class="rtl" style="float:right">
+    <div class="rtl start p hidden">A long line that does not break (overflow:hidden)</div>
+    <div class="rtl start p auto">A long line that does not break (overflow:auto)</div>
+    <div class="rtl start p autolong">A long line that does not break (overflow:auto)</div>
+    <div class="rtl start p scroll">A long line that does not break (overflow:scroll)</div>
+    <div class="rtl start s hidden">A long line that does not break (overflow:hidden)</div>
+    <div class="rtl start s auto">A long line that does not break (overflow:auto)</div>
+    <div class="rtl start s autolong">A long line that does not break (overflow:auto)</div>
+    <div class="rtl start s scroll">A long line that does not break (overflow:scroll)</div>
+
+    <div scroll class="rtl start p hidden">A long line that does not break (overflow:hidden)</div>
+    <div scroll class="rtl start p auto">A long line that does not break (overflow:auto)</div>
+    <div scroll class="rtl start p autolong">A long line that does not break (overflow:auto)</div>
+    <div scroll class="rtl start p scroll">A long line that does not break (overflow:scroll)</div>
+    <div scroll class="rtl start s hidden">A long line that does not break (overflow:hidden)</div>
+    <div scroll class="rtl start s auto">A long line that does not break (overflow:auto)</div>
+    <div scroll class="rtl start s autolong">A long line that does not break (overflow:auto)</div>
+    <div scroll class="rtl start s scroll">A long line that does not break (overflow:scroll)</div>
+</div>
+
+
+</body>
+</hml>
diff --git a/layout/reftests/text-overflow/standards-decorations-ref.html b/layout/reftests/text-overflow/standards-decorations-ref.html
new file mode 100644
index 000000000..14e5268b9
--- /dev/null
+++ b/layout/reftests/text-overflow/standards-decorations-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+<title>text-overflow: Standards mode text-decorations</title>
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  float:left;
+  height:2em;
+  white-space:pre;
+  margin-left:1em;
+  margin-bottom:1em;
+  font-size:20px;
+  color:blue;
+}
+span {
+  font-size:16px;
+  color:black;
+}
+.xspan {
+  text-decoration: line-through;
+}
+.t1 .xspan {
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.t1 { width:7.3em;}
+.t2 { width:20px;}
+.t3 { width:22px;}
+.t4 { width:1px; font-family:Ahem; }
+.t3 span {margin-left:14px; }
+
+m { font-size:20px; color:blue; }
+
+</style>
+
+</head><body>
+
+<div class="test t1"><span><span class="xspan">0123&nbsp;56789012</span><m>&#x2026;</m></span></div>
+<div class="test rtl t1"><span><span class="xspan">1&nbsp;56789012345</span><m>&#x2026;</m></span></div>
+<div class="test t2" style="color:black"><span class="xspan">xxxx</span></div>
+<div class="test t3"><span class="xspan">x</span></div>
+<div class="test t4"><span class="xspan">x</span></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/standards-decorations.html b/layout/reftests/text-overflow/standards-decorations.html
new file mode 100644
index 000000000..04c2b84d0
--- /dev/null
+++ b/layout/reftests/text-overflow/standards-decorations.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: Standards mode text-decorations
+-->
+<html><head>
+<title>text-overflow: Standards mode text-decorations</title>
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url(../fonts/Ahem.ttf);
+}
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  float:left;
+  height:2em;
+  white-space:pre;
+  margin-left:1em;
+  margin-bottom:1em;
+  font-size:20px;
+  color:blue;
+}
+span {
+  text-decoration: line-through;
+  font-size:16px;
+  color:black;
+}
+.t1 span {
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.t1 { width:7.3em;}
+.t2 { width:20px;}
+.t3 { width:22px;}
+.t4 { width:1px; font-family:Ahem; }
+.t3 span {margin-left:14px; }
+
+m { font-size:20px; }
+
+</style>
+
+</head><body>
+
+<div class="test t1"><span>0123&nbsp;567890123456789</span></div>
+<div class="test rtl t1"><span>0321&nbsp;56789012345</span></div>
+<div class="test t2" style="color:black"><span>xxxx</span></div>
+<div class="test t3"><span>x</span></div>
+<div class="test t4"><span>x</span></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/standards-line-height-ref.html b/layout/reftests/text-overflow/standards-line-height-ref.html
new file mode 100644
index 000000000..ffab81e82
--- /dev/null
+++ b/layout/reftests/text-overflow/standards-line-height-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+<title>text-overflow: Standards mode line height</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+
+  float:left;
+  white-space:pre;
+  margin-left:1em;
+  margin-bottom:1em;
+  font-size:24px; 
+  color:blue;
+  border:1px solid black;
+  position:relative;
+}
+span {
+  font-size:16px;
+  color:black;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.t1 { width:4em; }
+
+m { font-size:24px; color:blue; line-height:8px; }
+
+</style>
+
+</head><body>
+
+<div class="test t1"><span>0123456|</span><m>&#x2026;</m></div>
+<div class="test rtl rlo t1"><span>0123456|</span><m>&#x2026;</m></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/standards-line-height.html b/layout/reftests/text-overflow/standards-line-height.html
new file mode 100644
index 000000000..aa8b655dd
--- /dev/null
+++ b/layout/reftests/text-overflow/standards-line-height.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: Standards mode line height should not be affected by marker
+-->
+<html><head>
+<title>text-overflow: Standards mode line height</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  float:left;
+  white-space:pre;
+  margin-left:1em;
+  margin-bottom:1em;
+  font-size:24px;
+  color:blue;
+  border:1px solid black;
+}
+span {
+  font-size:16px;
+  color:black;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+.t1 { width:4em; }
+
+</style>
+
+</head><body>
+
+<div class="test t1"><span>0123456|890123456789</span></div>
+<div class="test rtl rlo t1"><span>0123456|89012345</span></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/table-cell-ref.html b/layout/reftests/text-overflow/table-cell-ref.html
new file mode 100644
index 000000000..9e905cf64
--- /dev/null
+++ b/layout/reftests/text-overflow/table-cell-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <title>Test text-overflow:ellipsis on table-cell</title>
+        <style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+
+            .table {
+                color: black;
+                display: table;
+                table-layout: fixed;
+                height: 5em;
+                width: 5em;
+            }
+            .row {
+                display: table-row;
+            }
+            .cell {
+                display: table-cell;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="table">
+            <div class="row">
+                <div class="cell">|||||||&#x2026;</div>
+            </div>
+            <div class="row">
+                <div class="cell"><span>|||||||&#x2026;</span></div>
+            </div>
+        </div>
+</body></html>
diff --git a/layout/reftests/text-overflow/table-cell.html b/layout/reftests/text-overflow/table-cell.html
new file mode 100644
index 000000000..6cb661f03
--- /dev/null
+++ b/layout/reftests/text-overflow/table-cell.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow:ellipsis on table-cell
+-->
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <title>Test text-overflow:ellipsis on table-cell</title>
+        <style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+            .table {
+                color: black;
+                display: table;
+                table-layout: fixed;
+                height: 5em;
+                width: 5em;
+            }
+            .row {
+                display: table-row;
+            }
+            .cell {
+                display: table-cell;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="table">
+            <div class="row">
+                <div class="cell">||||||||||||||</div>
+            </div>
+            <div class="row">
+                <div class="cell"><span>||||||||||||||</span></div>
+            </div>
+        </div>
+</body></html>
diff --git a/layout/reftests/text-overflow/theme-overflow-ref.html b/layout/reftests/text-overflow/theme-overflow-ref.html
new file mode 100644
index 000000000..be271aa26
--- /dev/null
+++ b/layout/reftests/text-overflow/theme-overflow-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <title>Testcase for bug 669284</title>
+  
+  <style type="text/css">
+    p {
+      overflow: hidden;
+      width: 200px;
+    }
+    .r {
+      direction:rtl;
+    }
+
+.x0 { margin:0px;}
+.x1 { margin:1px;}
+.x2 { margin:2px;}
+.x3 { margin:3px;}
+.x4 { margin-left:-1px; }
+.r .x4 { margin-right:-1px;}
+
+f { float:left; width:1px; height:1px; margin-left:-100px; }
+.r f { float:right; width:1px; height:1px; margin-right:-100px; }
+  </style>
+</head>
+<body>
+<p>
+    <input type="checkbox" class="x0"> 0<f></f><br>
+    <input type="checkbox" class="x1"> 1<f></f><br>
+    <input type="checkbox" class="x2"> 2<f></f><br>
+    <input type="checkbox" class="x3"> 3<f></f><br>
+    <input type="checkbox" class="x4"><f></f><br>
+</p>
+
+<p>
+    <input type="radio" class="x0"> 0<f></f><br>
+    <input type="radio" class="x1"> 1<f></f><br>
+    <input type="radio" class="x2"> 2<f></f><br>
+    <input type="radio" class="x3"> 3<f></f><br>
+    <input type="radio" class="x4"><f></f><br>
+</p>
+
+<p class="r">
+    <input type="checkbox" class="x0"> 0<f></f><br>
+    <input type="checkbox" class="x1"> 1<f></f><br>
+    <input type="checkbox" class="x2"> 2<f></f><br>
+    <input type="checkbox" class="x3"> 3<f></f><br>
+    <input type="checkbox" class="x4"><f></f><br>
+</p>
+
+<p class="r">
+    <input type="radio" class="x0"> 0<f></f><br>
+    <input type="radio" class="x1"> 1<f></f><br>
+    <input type="radio" class="x2"> 2<f></f><br>
+    <input type="radio" class="x3"> 3<f></f><br>
+    <input type="radio" class="x4"><f></f><br>
+</p>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/theme-overflow.html b/layout/reftests/text-overflow/theme-overflow.html
new file mode 100644
index 000000000..77f9019f5
--- /dev/null
+++ b/layout/reftests/text-overflow/theme-overflow.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <title>Testcase for bug 669284</title>
+  
+  <style type="text/css">
+    p {
+      overflow: hidden;
+      text-overflow: ellipsis ellipsis;
+      width: 200px;
+    }
+    .r {
+      direction:rtl;
+    }
+
+.x0 { margin:0px;}
+.x1 { margin:1px;}
+.x2 { margin:2px;}
+.x3 { margin:3px;}
+.x4 { margin-left:-1px;}
+.r .x4 { margin-right:-1px;}
+
+f { float:left; width:1px; height:1px; margin-left:-100px; }
+.r f { float:right; width:1px; height:1px; margin-right:-100px; }
+  </style>
+</head>
+<body>
+<p>
+    <input type="checkbox" class="x0"> 0<f></f><br>
+    <input type="checkbox" class="x1"> 1<f></f><br>
+    <input type="checkbox" class="x2"> 2<f></f><br>
+    <input type="checkbox" class="x3"> 3<f></f><br>
+    <input type="checkbox" class="x4"><f></f><br>
+</p>
+
+<p>
+    <input type="radio" class="x0"> 0<f></f><br>
+    <input type="radio" class="x1"> 1<f></f><br>
+    <input type="radio" class="x2"> 2<f></f><br>
+    <input type="radio" class="x3"> 3<f></f><br>
+    <input type="radio" class="x4"><f></f><br>
+</p>
+
+<p class="r">
+    <input type="checkbox" class="x0"> 0<f></f><br>
+    <input type="checkbox" class="x1"> 1<f></f><br>
+    <input type="checkbox" class="x2"> 2<f></f><br>
+    <input type="checkbox" class="x3"> 3<f></f><br>
+    <input type="checkbox" class="x4"><f></f><br>
+</p>
+
+<p class="r">
+    <input type="radio" class="x0"> 0<f></f><br>
+    <input type="radio" class="x1"> 1<f></f><br>
+    <input type="radio" class="x2"> 2<f></f><br>
+    <input type="radio" class="x3"> 3<f></f><br>
+    <input type="radio" class="x4"><f></f><br>
+</p>
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/two-value-syntax-ref.html b/layout/reftests/text-overflow/two-value-syntax-ref.html
new file mode 100644
index 000000000..98a7de1e8
--- /dev/null
+++ b/layout/reftests/text-overflow/two-value-syntax-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow:<left> <right>
+-->
+<html><head>
+<title>text-overflow: text-overflow:&lt;left&gt; &lt;right&gt;</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  width:100%;
+  white-space:nowrap;
+}
+span {
+  margin: 0 -2px;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+
+</style>
+
+</head><body>
+
+<div style="float:left;">
+|||||
+<div class="test t1"><span>&nbsp;&#x2026;||&#x2026;</span></div>
+<div class="test rtl t1"><span>&nbsp;&#x2026;||&#x2026;</span></div>
+<div class="test t2"><span>&nbsp;&#x2026;||||</span></div>
+<div class="test rtl t2"><span>||||&#x2026;</span></div>
+<div class="test t3"><span>||||&#x2026;</span></div>
+<div class="test rtl t3"><span>&nbsp;&#x2026;||||</span></div>
+<div class="test t4"><span>||||.</span></div>
+<div class="test rtl t4"><span>&nbsp;.||||</span></div>
+<div class="test t5"><span>&nbsp;.||||</span></div>
+<div class="test rtl t5"><span>||||.</span></div>
+<div class="test t6"><span>&nbsp;.||,</span></div>
+<div class="test rtl t6"><span>&nbsp;,||.</span></div>
+<div class="test t7"><span>&nbsp;&#x2026;||,</span></div>
+<div class="test rtl t7"><span>&nbsp;,||&#x2026;</span></div>
+<div class="test t8"><span>&nbsp;.||&#x2026;</span></div>
+<div class="test rtl t8"><span>&nbsp;&#x2026;||.</span></div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/two-value-syntax.html b/layout/reftests/text-overflow/two-value-syntax.html
new file mode 100644
index 000000000..9360c08fc
--- /dev/null
+++ b/layout/reftests/text-overflow/two-value-syntax.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: text-overflow:<left> <right>
+-->
+<html><head>
+<title>text-overflow: text-overflow:&lt;left&gt; &lt;right&gt;</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test {
+  overflow:hidden;
+  width:100%;
+  white-space:nowrap;
+}
+span {
+  margin: 0 -2px;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction:rtl;
+}
+.lro {
+  unicode-bidi: bidi-override;
+}
+.rtl {
+  direction:rtl;
+}
+.ltr {
+  direction:ltr;
+}
+
+.t1 { text-overflow:ellipsis ellipsis; }
+.t2 { text-overflow:ellipsis clip; }
+.t3 { text-overflow:clip ellipsis; }
+.t4 { text-overflow:clip "."; }
+.t5 { text-overflow:"." clip; }
+.t6 { text-overflow:"." ","; }
+.t7 { text-overflow:ellipsis ","; }
+.t8 { text-overflow:"." ellipsis; }
+
+</style>
+
+</head><body>
+
+<div style="float:left;">
+|||||
+<div class="test t1"><span>||||||</span></div>
+<div class="test rtl t1"><span>||||||</span></div>
+<div class="test t2"><span>||||||</span></div>
+<div class="test rtl t2"><span>||||||</span></div>
+<div class="test t3"><span>||||||</span></div>
+<div class="test rtl t3"><span>||||||</span></div>
+<div class="test t4"><span>||||||</span></div>
+<div class="test rtl t4"><span>||||||</span></div>
+<div class="test t5"><span>||||||</span></div>
+<div class="test rtl t5"><span>||||||</span></div>
+<div class="test t6"><span>||||||</span></div>
+<div class="test rtl t6"><span>||||||</span></div>
+<div class="test t7"><span>||||||</span></div>
+<div class="test rtl t7"><span>||||||</span></div>
+<div class="test t8"><span>||||||</span></div>
+<div class="test rtl t8"><span>||||||</span></div>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-1-2-notref.html b/layout/reftests/text-overflow/vertical-decorations-1-2-notref.html
new file mode 100644
index 000000000..638552e77
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-1-2-notref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+.vlr {
+  writing-mode: vertical-lr;
+  text-orientation: sideways-right;
+  height: 10ch;
+}
+</style>
+</head>
+
+<body>
+<div class="vlr">abcdefghijklm</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-1-ref.html b/layout/reftests/text-overflow/vertical-decorations-1-ref.html
new file mode 100644
index 000000000..dfbae42bb
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+.vlr {
+  writing-mode: vertical-lr;
+  text-orientation: sideways-right;
+  height: 10ch;
+}
+</style>
+</head>
+
+<body>
+<div class="vlr"><u>abcdefghi</u>…</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-1.html b/layout/reftests/text-overflow/vertical-decorations-1.html
new file mode 100644
index 000000000..e26a2a28f
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+.vlr {
+  writing-mode: vertical-lr;
+  text-orientation: sideways-right;
+  height: 10ch;
+}
+</style>
+</head>
+
+<body>
+<div class="vlr"><u>abcdefghijklm</u></div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-2-ref.html b/layout/reftests/text-overflow/vertical-decorations-2-ref.html
new file mode 100644
index 000000000..a393aedd8
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-2-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+span {
+  text-decoration: overline;
+}
+.vlr {
+  writing-mode: vertical-lr;
+  text-orientation: sideways-right;
+  height: 10ch;
+}
+</style>
+</head>
+
+<body>
+<div class="vlr"><span>abcdefghi</span>…</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-2.html b/layout/reftests/text-overflow/vertical-decorations-2.html
new file mode 100644
index 000000000..c5e6e6fd9
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+span {
+  text-decoration: overline;
+}
+.vlr {
+  writing-mode: vertical-lr;
+  text-orientation: sideways-right;
+  height: 10ch;
+}
+</style>
+</head>
+
+<body>
+<div class="vlr"><span>abcdefghijklm</span></div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-3-4-notref.html b/layout/reftests/text-overflow/vertical-decorations-3-4-notref.html
new file mode 100644
index 000000000..dead7a03e
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-3-4-notref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+.vrl {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  height: 6em;
+}
+</style>
+</head>
+
+<body>
+<div class="vrl">你好吗？我很好！</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-3-ref.html b/layout/reftests/text-overflow/vertical-decorations-3-ref.html
new file mode 100644
index 000000000..b7d886868
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-3-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+.vrl {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  height: 6em;
+}
+</style>
+</head>
+
+<body>
+<div class="vrl"><u>你好吗？我</u>…</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-3.html b/layout/reftests/text-overflow/vertical-decorations-3.html
new file mode 100644
index 000000000..5af70b647
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+.vrl {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  height: 6em;
+}
+</style>
+</head>
+
+<body>
+<div class="vrl"><u>你好吗？我很好！</u></div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-4-ref.html b/layout/reftests/text-overflow/vertical-decorations-4-ref.html
new file mode 100644
index 000000000..27e66e965
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-4-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+span {
+  text-decoration: overline;
+}
+.vrl {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  height: 6em;
+}
+</style>
+</head>
+
+<body>
+<div class="vrl"><span>你好吗？我</span>…</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/vertical-decorations-4.html b/layout/reftests/text-overflow/vertical-decorations-4.html
new file mode 100644
index 000000000..20283e5a6
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-4.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+div {
+  font: 25px monospace;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid gray;
+  padding: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+span {
+  text-decoration: overline;
+}
+.vrl {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  height: 6em;
+}
+</style>
+</head>
+
+<body>
+<div class="vrl"><span>你好吗？我很好！</span></div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/visibility-hidden-ref.html b/layout/reftests/text-overflow/visibility-hidden-ref.html
new file mode 100644
index 000000000..ba05d4f6d
--- /dev/null
+++ b/layout/reftests/text-overflow/visibility-hidden-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+-->
+<html><head>
+<title>text-overflow: visibility:hidden</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test { 
+
+  overflow: hidden; 
+  white-space: nowrap;
+  background:lime;
+  color: black;
+  width: 50%;
+}
+
+.rtl {
+  direction:rtl;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+u {
+  visibility:hidden;
+  padding-left: 3em;
+  background: cyan;
+}
+.rtl u {padding-right: 3em; padding-left:0;}
+s {
+  visibility:visible;
+}
+
+.t1 {width:10em;}
+.t2 {width:14em;}
+.t3 {width:13.5em;}
+.t3 u { padding-right:1em; }
+.t3.rtl u {padding-left:1em; padding-right: 3em; }
+.t4 {width:12.5em;}
+</style>
+
+</head><body>
+
+<div class="test t2">
+CSS is awesome<u></u><br>
+CSS is awesome<u>&nbsp;<s>x</s>&nbsp;</u>
+</div>
+<div class="test t1">CSS is awesome<u></u><br></div>
+<div class="test t2">CSS is awesome<u>&nbsp;<s>x</s>&nbsp;</u></div>
+<div class="test t3">CSS is awesome<u>&nbsp;<s>x</s></u></div>
+<div class="test t4">CSS is awesome<m>&#x2026;</m><u>&nbsp;<s></s></u></div>
+
+<div class="rtl">
+<div class="test rtl rlo t2">
+CSS is awesome<u></u><br>
+CSS is awesome<u>&nbsp;<s>x</s></u>
+</div>
+<div class="test rtl rlo t1">CSS is awesome<u></u><br></div>
+<div class="test rtl rlo t2">CSS is awesome<u>&nbsp;<s>x</s>&nbsp;</u></div>
+<div class="test rtl rlo t3">CSS is awesome<u>&nbsp;<s>x</s></u></div>
+<div class="test rtl rlo t4">CSS is awesome<m>&#x2026;</m><u>&nbsp;<s></s></u></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/visibility-hidden.html b/layout/reftests/text-overflow/visibility-hidden.html
new file mode 100644
index 000000000..18b917616
--- /dev/null
+++ b/layout/reftests/text-overflow/visibility-hidden.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<!--
+    Any copyright is dedicated to the Public Domain.
+    http://creativecommons.org/licenses/publicdomain/
+
+    Test: visibility:hidden should not trigger text-overflow markers
+-->
+<html><head>
+<title>text-overflow: visibility:hidden</title>
+<style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+
+.test { 
+  text-overflow:ellipsis;
+  overflow: hidden; 
+  white-space: nowrap;
+  background:lime;
+  color: black;
+  width: 50%;
+}
+
+.rtl {
+  direction:rtl;
+}
+.rlo {
+  unicode-bidi: bidi-override; direction: rtl;
+}
+u {
+  visibility:hidden;
+  padding-left: 3em;
+  background: cyan;
+}
+.rtl u {padding-right: 3em; padding-left:0;}
+s {
+  visibility:visible;
+}
+
+.t1 {width:10em;}
+.t2 {width:14em;}
+.t3 {width:13.5em;}
+.t3 u { padding-right:1em; }
+.t3.rtl u {padding-left:1em; padding-right: 3em; }
+.t4 {width:12.5em;}
+</style>
+
+</head><body>
+
+<div class="test t2">
+CSS is awesome<u></u><br>
+CSS is awesome<u>&nbsp;<s>x</s>&nbsp;&nbsp;&nbsp;</u>
+</div>
+<div class="test t1">CSS is awesome<u></u><br></div>
+<div class="test t2">CSS is awesome<u>&nbsp;<s>x</s>&nbsp;&nbsp;&nbsp;</u></div>
+<div class="test t3">CSS is awesome<u>&nbsp;<s>x</s></u></div>
+<div class="test t4">CSS is awesome<u>&nbsp;<s>x</s></u></div>
+
+<div class="rtl">
+<div class="test rtl rlo t2">
+CSS is awesome<u></u><br>
+CSS is awesome<u>&nbsp;<s>x</s></u>
+</div>
+<div class="test rtl rlo t1">CSS is awesome<u></u><br></div>
+<div class="test rtl rlo t2">CSS is awesome<u>&nbsp;<s>x</s>&nbsp;&nbsp;&nbsp;</u></div>
+<div class="test rtl rlo t3">CSS is awesome<u>&nbsp;<s>x</s></u></div>
+<div class="test rtl rlo t4">CSS is awesome<u>&nbsp;<s>x</s></u></div>
+</div>
+
+</body></html>
diff --git a/layout/reftests/text-overflow/xulscroll-ref.html b/layout/reftests/text-overflow/xulscroll-ref.html
new file mode 100644
index 000000000..7b478e293
--- /dev/null
+++ b/layout/reftests/text-overflow/xulscroll-ref.html
@@ -0,0 +1,80 @@
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE HTML>
+<html><head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+    <title>Testcase for bug 672944</title>
+    <style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+	
+  .bacon {
+    white-space:    nowrap;
+    text-overflow:  clip;
+    overflow:       hidden;
+    width:          30ch;
+    display:        -moz-box;
+    background:     lime;
+    margin-bottom:  1em;
+  }
+
+  .auto {
+    overflow-x:       auto;
+    width:          29.5ch;
+    padding-bottom: 2ch;
+  }
+  .scroll {
+    overflow:       auto;
+    padding:        2ch;
+    border:         3px solid black;
+  }
+  .scroll2 {
+    overflow:       auto;
+    padding:        3ch;
+  }
+  .scroll3 {
+    overflow:       auto;
+    padding:        2ch;
+    text-indent:    -3ch;
+  }
+  .scroll4 {
+    overflow:       auto;
+    padding:        2ch 0.2ch;
+  }
+span { background-color:white; position: relative; }
+ml3 {position: absolute; left:29ch; }
+
+#block-hover {
+  position:fixed;
+  top:0;left:0;width:100%;height:100%;
+}
+    </style>
+</head>
+<body>
+
+<div style="float:right;" dir="rtl">
+  <div class="bacon"><span>1Beef hamburger bacon tri-tip&#x2026; jowl biltong tail ribeye ham</span></div><br>
+  <div class="bacon auto"><span>2Beef hamburger bacon tri-&nbsp;ipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll"><span>3Beef hamburger bacon tri&nbsp;&nbsp;&nbsp;pJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll2"><span>4Beef hamburger bacon tr&nbsp;&nbsp;&nbsp;&nbsp;pJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll3"><span>5Beef hamburger bacon&nbsp;&nbsp;&nbsp;&nbsp;-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll4"><span>6Beef hamburger bacon tri-&nbsp;&nbsp;pJOWLBILTONG tail ribeye ham</span></div><br>
+</div>
+
+<div>
+  <div class="bacon"><span>1Beef hamburger bacon tri-tip&#x2026; jowl biltong tail ribeye ham</span></div><br>
+  <div class="bacon auto"><span>2Beef hamburger bacon tri-tip&nbsp;OWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll"><span>3Beef hamburger bacon tri-tipJ WLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll2"><span>4Beef hamburger bacon tri-tipJO LBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll3"><span>5Beef hamburger bacon tri-tipJOWL ILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll4"><span>6Beef hamburger bacon tri-ti JOWLBILTONG tail ribeye ham</span></div><br>
+</div>
+
+<div id="block-hover"></div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/xulscroll.html b/layout/reftests/text-overflow/xulscroll.html
new file mode 100644
index 000000000..88cca8a04
--- /dev/null
+++ b/layout/reftests/text-overflow/xulscroll.html
@@ -0,0 +1,94 @@
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+    <title>Testcase for bug 672944</title>
+    <style type="text/css">
+@font-face {
+  font-family: DejaVuSansMono;
+  src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff);
+}
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+}
+	
+  .bacon {
+    white-space:    nowrap;
+    text-overflow:  ellipsis ellipsis;
+    overflow:       hidden;
+    width:          30ch;
+    display:        -moz-box;
+    background:     lime;
+    margin-bottom:  1em;
+  }
+
+  .auto {
+    overflow-x:       auto;
+    padding-bottom: 2ch;
+    width:          29.5ch;
+    text-overflow:  "" "";
+  }
+  .scroll {
+    overflow:       auto;
+    padding:        2ch;
+    border:         3px solid black;
+    text-overflow:  "" "";
+  }
+  .scroll2 {
+    overflow:       auto;
+    padding:        3ch;
+    text-overflow:  "" "";
+  }
+  .scroll3 {
+    overflow:       auto;
+    padding:        2ch;
+    text-indent:    -3ch;
+    text-overflow:  "" "";
+  }
+  .scroll4 {
+    overflow:       auto;
+    padding:        2ch 0.2ch;
+    text-overflow:  "" "";
+  }
+span { background-color:white; }
+
+#block-hover {
+  position:fixed;
+  top:0;left:0;width:100%;height:100%;
+}
+    </style>
+    <script type="text/javascript">
+function init() {
+  // workaround bug 936936
+  document.body.style.display="block";
+
+  document.getElementById('rtl_auto').scrollLeft=999999;
+
+  document.documentElement.removeAttribute('class');
+}
+    </script>
+</head>
+<body onload="init();" style="display: inline;">
+
+<div style="float:right;" dir="rtl">
+  <div class="bacon"><span>1Beef hamburger bacon tri-tip, jowl biltong tail ribeye ham</span></div><br>
+  <div id="rtl_auto" class="bacon auto"><span>2Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll"><span>3Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll2"><span>4Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll3"><span>5Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll4"><span>6Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+</div>
+
+<div>
+  <div class="bacon"><span>1Beef hamburger bacon tri-tip, jowl biltong tail ribeye ham</span></div><br>
+  <div class="bacon auto"><span>2Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll"><span>3Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll2"><span>4Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll3"><span>5Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+  <div class="bacon scroll4"><span>6Beef hamburger bacon tri-tipJOWLBILTONG tail ribeye ham</span></div><br>
+</div>
+
+<div id="block-hover"></div>
+</body>
+</html>
-- 
cgit v1.2.3