summaryrefslogtreecommitdiffstats
path: root/layout/reftests/text-overflow
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /layout/reftests/text-overflow
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/text-overflow')
-rw-r--r--layout/reftests/text-overflow/TestEllipsisFallback.woffbin0 -> 1224 bytes
-rw-r--r--layout/reftests/text-overflow/aligned-baseline-ref.html100
-rw-r--r--layout/reftests/text-overflow/aligned-baseline.html100
-rw-r--r--layout/reftests/text-overflow/anonymous-block-ref.html66
-rw-r--r--layout/reftests/text-overflow/anonymous-block.html75
-rw-r--r--layout/reftests/text-overflow/atomic-under-marker-ref.html85
-rw-r--r--layout/reftests/text-overflow/atomic-under-marker.html85
-rw-r--r--layout/reftests/text-overflow/bidi-simple-ref.html85
-rw-r--r--layout/reftests/text-overflow/bidi-simple-scrolled-ref.html106
-rw-r--r--layout/reftests/text-overflow/bidi-simple-scrolled.html98
-rw-r--r--layout/reftests/text-overflow/bidi-simple.html81
-rw-r--r--layout/reftests/text-overflow/block-padding-ref.html83
-rw-r--r--layout/reftests/text-overflow/block-padding.html71
-rw-r--r--layout/reftests/text-overflow/clipped-elements-ref.html78
-rw-r--r--layout/reftests/text-overflow/clipped-elements.html80
-rw-r--r--layout/reftests/text-overflow/combobox-zoom-ref.html34
-rw-r--r--layout/reftests/text-overflow/combobox-zoom.html34
-rw-r--r--layout/reftests/text-overflow/dynamic-change-1-ref.html7
-rw-r--r--layout/reftests/text-overflow/dynamic-change-1.html16
-rw-r--r--layout/reftests/text-overflow/ellipsis-font-fallback-ref.html149
-rw-r--r--layout/reftests/text-overflow/ellipsis-font-fallback.html150
-rw-r--r--layout/reftests/text-overflow/false-marker-overlap-ref.html72
-rw-r--r--layout/reftests/text-overflow/false-marker-overlap.html72
-rw-r--r--layout/reftests/text-overflow/float-edges-1-ref.html71
-rw-r--r--layout/reftests/text-overflow/float-edges-1.html73
-rw-r--r--layout/reftests/text-overflow/line-clipping-ref.html28
-rw-r--r--layout/reftests/text-overflow/line-clipping.html32
-rw-r--r--layout/reftests/text-overflow/marker-basic-ref.html276
-rw-r--r--layout/reftests/text-overflow/marker-basic.html205
-rw-r--r--layout/reftests/text-overflow/marker-shadow-ref.html33
-rw-r--r--layout/reftests/text-overflow/marker-shadow.html37
-rw-r--r--layout/reftests/text-overflow/marker-string-ref.html69
-rw-r--r--layout/reftests/text-overflow/marker-string.html73
-rw-r--r--layout/reftests/text-overflow/quirks-decorations-ref.html73
-rw-r--r--layout/reftests/text-overflow/quirks-decorations.html74
-rw-r--r--layout/reftests/text-overflow/quirks-line-height-ref.html57
-rw-r--r--layout/reftests/text-overflow/quirks-line-height.html56
-rw-r--r--layout/reftests/text-overflow/reftest.list38
-rw-r--r--layout/reftests/text-overflow/scroll-rounding-ref.html85
-rw-r--r--layout/reftests/text-overflow/scroll-rounding.html86
-rw-r--r--layout/reftests/text-overflow/selection-ref.html118
-rw-r--r--layout/reftests/text-overflow/selection.html116
-rw-r--r--layout/reftests/text-overflow/single-value-ref.html106
-rw-r--r--layout/reftests/text-overflow/single-value.html99
-rw-r--r--layout/reftests/text-overflow/standards-decorations-ref.html72
-rw-r--r--layout/reftests/text-overflow/standards-decorations.html73
-rw-r--r--layout/reftests/text-overflow/standards-line-height-ref.html58
-rw-r--r--layout/reftests/text-overflow/standards-line-height.html57
-rw-r--r--layout/reftests/text-overflow/table-cell-ref.html45
-rw-r--r--layout/reftests/text-overflow/table-cell.html47
-rw-r--r--layout/reftests/text-overflow/theme-overflow-ref.html61
-rw-r--r--layout/reftests/text-overflow/theme-overflow.html62
-rw-r--r--layout/reftests/text-overflow/two-value-syntax-ref.html66
-rw-r--r--layout/reftests/text-overflow/two-value-syntax.html75
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-1-2-notref.html27
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-1-ref.html27
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-1.html27
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-2-ref.html30
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-2.html30
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-3-4-notref.html27
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-3-ref.html28
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-3.html28
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-4-ref.html30
-rw-r--r--layout/reftests/text-overflow/vertical-decorations-4.html30
-rw-r--r--layout/reftests/text-overflow/visibility-hidden-ref.html72
-rw-r--r--layout/reftests/text-overflow/visibility-hidden.html74
-rw-r--r--layout/reftests/text-overflow/xulscroll-ref.html80
-rw-r--r--layout/reftests/text-overflow/xulscroll.html104
68 files changed, 4762 insertions, 0 deletions
diff --git a/layout/reftests/text-overflow/TestEllipsisFallback.woff b/layout/reftests/text-overflow/TestEllipsisFallback.woff
new file mode 100644
index 0000000000..4de40fbbb2
--- /dev/null
+++ b/layout/reftests/text-overflow/TestEllipsisFallback.woff
Binary files 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 0000000000..458731f88d
--- /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 0000000000..0703403032
--- /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 0000000000..441d79c82d
--- /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 0000000000..e61ffd4bd9
--- /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 0000000000..fd118943ff
--- /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 0000000000..db37d05e0a
--- /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 0000000000..3a28b6df0a
--- /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 0000000000..65eff80bce
--- /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 0000000000..489535ab83
--- /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 0000000000..82dcdfb5ce
--- /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 0000000000..7e6539e4d8
--- /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; text-decoration-skip-ink: none;
+}
+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 0000000000..eda4217464
--- /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; text-decoration-skip-ink: none;
+}
+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 0000000000..393283f858
--- /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"><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</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 0000000000..ab4292ee64
--- /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 0000000000..35b97ea247
--- /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 0000000000..e45ed6d3fa
--- /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/dynamic-change-1-ref.html b/layout/reftests/text-overflow/dynamic-change-1-ref.html
new file mode 100644
index 0000000000..2a1560e07f
--- /dev/null
+++ b/layout/reftests/text-overflow/dynamic-change-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <div style="overflow: hidden; width: 130px; white-space: nowrap;
+ text-overflow: ellipsis">
+ Some long text that cannot possibly fit in 130 px, because it just can't.
+ </div>
+</html>
diff --git a/layout/reftests/text-overflow/dynamic-change-1.html b/layout/reftests/text-overflow/dynamic-change-1.html
new file mode 100644
index 0000000000..d2c6c3a9e2
--- /dev/null
+++ b/layout/reftests/text-overflow/dynamic-change-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <div style="overflow: hidden; width: 130px; white-space: nowrap">
+ Some long text that cannot possibly fit in 130 px, because it just can't.
+ </div>
+
+ <script>
+ onload = function() {
+ var div = document.querySelector("div");
+ // Make sure layout has happened.
+ window.width = div.offsetWidth;
+ div.style.textOverflow = "ellipsis";
+ document.documentElement.className = "";
+ }
+ </script>
+</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 0000000000..e6a47e8640
--- /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 0000000000..f02d569d0a
--- /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 0000000000..0a6ed9d0ef
--- /dev/null
+++ b/layout/reftests/text-overflow/false-marker-overlap-ref.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: 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;
+ visibility: hidden;
+}
+.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>| | | | | | | | | | | | | | | | | | | | | | &#x2026;<i class="n"></i></font></div>
+<div class="test"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | &#x2026;<i></i></font></div>
+<div class="test rtl"><font class="overlap"><s></s>&nbsp;<m>&#x2026;</m>| | | | | | | | | | | | | | | | | | | | | | &#x2026;<i class="n"></i></font></div>
+<div class="test rtl"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | &#x2026;<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 0000000000..28720226c0
--- /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/float-edges-1-ref.html b/layout/reftests/text-overflow/float-edges-1-ref.html
new file mode 100644
index 0000000000..b56b4da8ff
--- /dev/null
+++ b/layout/reftests/text-overflow/float-edges-1-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Testcase for bug 944200</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:20px/1 Courier New, Courier, monospace; padding:0; margin:0;
+}
+
+.container {
+ border: 1px solid black;
+ width: 150px;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.float {
+ float: right;
+ background: yellow;
+ width: 50px;
+ text-indent: 0;
+}
+.left { float: left; }
+.h { height: 3.5em; }
+ </style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="container"><div class="float">FF</div>aaaaaaa&#x2026;</div>
+<div class="container"><div class="float">FF</div>aaaaaaa&#x2026;</div>
+<div class="container"><div class="float">FF</div>aaaaaaa&#x2026;<br>aaaaaaaaaaa&#x2026;</div>
+<div class="container"><div class="float">FF</div>aaaaaaa&#x2026;<br>aaaaaaaaaa</div>
+
+<div class="container" style="text-indent:-20px"><div class="float left">FF</div>&nbsp;&nbsp;&#x2026;aa</div>
+<div class="container" style="text-indent:-20px"><div class="float left">FF</div>&nbsp;&nbsp;&#x2026;aa<br>aaaaaaaaaaa&#x2026;</div>
+<div class="container" style="text-indent:-20px"><div class="float left">FF</div>&nbsp;&nbsp;&#x2026;aa<br>aaaaaaaaaa</div>
+<div class="container" style="text-indent:-20px"><div class="float left">FF</div>&nbsp;&nbsp;&#x2026;aa<br><span style="margin-left:-20px">&nbsp;&nbsp;&#x2026;aaaaaaa</span></div>
+</div>
+
+
+<div style="float:right">
+<div class="container">
+aaaaaaaaaa<br>
+aaaaaaaaaaa&#x2026;<br><div class="float h">FF</div>
+aaaaaaa&#x2026;<br>
+aaaaaaa<br>
+aaaaaaa&#x2026;<br>
+aaaaaaa&#x2026;<br>
+aaaaaaaaaa<br>
+aaaaaaaaaaa&#x2026;<br>
+</div>
+
+<div class="container" style="text-indent:-20px">
+&nbsp;&nbsp;&#x2026;aaaaaaa<br>
+aaaaaaaaaaa&#x2026;<br><div class="float left h">FF</div>
+<span style="margin-left:-20px">&nbsp;&nbsp;&#x2026;aaaaaa&#x2026;</span><br>
+aaaaaaa&#x2026;<br>
+aaaa<br>
+<span style="margin-left:-20px">&nbsp;&nbsp;&#x2026;aaaaaaa</span><br>
+aaaaaaaaaa<br>
+aaaaaaaaaaa&#x2026;<br>
+</div>
+
+</div>
+</body>
+</html>
diff --git a/layout/reftests/text-overflow/float-edges-1.html b/layout/reftests/text-overflow/float-edges-1.html
new file mode 100644
index 0000000000..985f44b6bc
--- /dev/null
+++ b/layout/reftests/text-overflow/float-edges-1.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 944200</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:20px/1 Courier New, Courier, monospace; padding:0; margin:0;
+}
+
+.container {
+ border: 1px solid black;
+ width: 150px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-overflow: ellipsis ellipsis;
+ white-space: nowrap;
+}
+
+.float {
+ float: right;
+ background: yellow;
+ width: 50px;
+ text-indent: 0;
+}
+.left { float: left; }
+.h { height: 3.5em; }
+ </style>
+</head>
+<body>
+
+<div style="float:left">
+<div class="container"><div class="float">FF</div>aaaaaaaaaaaaaaaaaaaaaa</div>
+<div class="container"><div class="float">FF</div>aaaaaaaaaa</div>
+<div class="container"><div class="float">FF</div>aaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaa</div>
+<div class="container"><div class="float">FF</div>aaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaa</div>
+
+<div class="container" style="text-indent:-20px"><div class="float left">FF</div>aaaaa</div>
+<div class="container" style="text-indent:-20px"><div class="float left">FF</div>aaaaa<br>aaaaaaaaaaaaaaaaaaaaaa</div>
+<div class="container" style="text-indent:-20px"><div class="float left">FF</div>aaaaa<br>aaaaaaaaaa</div>
+<div class="container" style="text-indent:-20px"><div class="float left">FF</div>aaaaa<br><span style="margin-left:-20px">aaaaaaaaaa</span></div>
+</div>
+
+
+<div style="float:right">
+<div class="container">
+aaaaaaaaaa<br>
+aaaaaaaaaaaaaaaaaaaaaa<br><div class="float h">FF</div>
+aaaaaaaaaaaaaaaaaaaaaa<br>
+aaaaaaa<br>
+aaaaaaaaaa<br>
+aaaaaaaaaaaaaaaaaaaaaa<br>
+aaaaaaaaaa<br>
+aaaaaaaaaaaaaaaaaaaaaa<br>
+</div>
+
+<div class="container" style="text-indent:-20px">
+aaaaaaaaaa<br>
+aaaaaaaaaaaaaaaaaaaaaa<br><div class="float left h">FF</div>
+<span style="margin-left:-20px">aaaaaaaaaaaaaaaaaaaaaa</span><br>
+aaaaaaaaaaaaaaaaaaaaaa<br>
+aaaa<br>
+<span style="margin-left:-20px">aaaaaaaaaa</span><br>
+aaaaaaaaaa<br>
+aaaaaaaaaaaaaaaaaaaaaa<br>
+</div>
+
+</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 0000000000..083d42aad6
--- /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 0000000000..edf914d6c6
--- /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 0000000000..c452323f91
--- /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 0000000000..4f4afb667c
--- /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 0000000000..12889142d7
--- /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 0000000000..4f93475650
--- /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 0000000000..ba4b9f4c37
--- /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 0000000000..356ae14c2f
--- /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 0000000000..d2e297ded9
--- /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 0000000000..945dfb63a9
--- /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 0000000000..e05dc88d53
--- /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 0000000000..fe9b1747a9
--- /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.list b/layout/reftests/text-overflow/reftest.list
new file mode 100644
index 0000000000..6c5f982c87
--- /dev/null
+++ b/layout/reftests/text-overflow/reftest.list
@@ -0,0 +1,38 @@
+== ellipsis-font-fallback.html ellipsis-font-fallback-ref.html
+== line-clipping.html line-clipping-ref.html
+fuzzy(0-47,0-6) == marker-basic.html marker-basic-ref.html # Bug 1128229
+== marker-string.html marker-string-ref.html
+fuzzy(0-47,0-18) == bidi-simple.html bidi-simple-ref.html
+skip-if(!gtkWidget) fuzzy-if(gtkWidget,0-124,0-289) == bidi-simple-scrolled.html bidi-simple-scrolled-ref.html # Fails on Windows and OSX due to anti-aliasing
+fuzzy-if(Android,0-24,0-4000) fuzzy-if(cocoaWidget,0-1,0-40) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-149,0-1836) == scroll-rounding.html scroll-rounding-ref.html # bug 760264
+fuzzy(0-16,0-454) fuzzy-if(winWidget,25-85,406-499) fuzzy-if(cocoaWidget,0-7,0-265) fuzzy-if(Android,0-3,0-466) == anonymous-block.html anonymous-block-ref.html # gtkWidget:bug 1309103, fuzzy: subpixel aa
+fuzzy(0-47,0-3) == false-marker-overlap.html false-marker-overlap-ref.html
+== visibility-hidden.html visibility-hidden-ref.html
+fuzzy(0-47,0-24) == block-padding.html block-padding-ref.html
+fuzzy(0-155,0-825) == quirks-decorations.html quirks-decorations-ref.html
+== quirks-line-height.html quirks-line-height-ref.html
+== standards-decorations.html standards-decorations-ref.html
+== standards-line-height.html standards-line-height-ref.html
+fuzzy(0-47,0-6) == selection.html selection-ref.html
+fuzzy(0-8,0-509) == marker-shadow.html marker-shadow-ref.html
+fuzzy(0-3,0-25) == aligned-baseline.html aligned-baseline-ref.html
+fuzzy(0-1,0-5) == clipped-elements.html clipped-elements-ref.html
+== theme-overflow.html theme-overflow-ref.html
+== table-cell.html table-cell-ref.html
+fuzzy(0-47,0-18) == two-value-syntax.html two-value-syntax-ref.html
+== single-value.html single-value-ref.html
+fuzzy-if(gtkWidget,0-10,0-2) == atomic-under-marker.html atomic-under-marker-ref.html
+skip == chrome://reftest/content/text-overflow/xulscroll.html chrome://reftest/content/text-overflow/xulscroll-ref.html # bug 1789123 makes it work like regular flexbox, need to probably fix the test
+== combobox-zoom.html combobox-zoom-ref.html
+== dynamic-change-1.html dynamic-change-1-ref.html
+== float-edges-1.html float-edges-1-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 0000000000..333240f82e
--- /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 0000000000..9957a5e7ab
--- /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 0000000000..aaeaef5d12
--- /dev/null
+++ b/layout/reftests/text-overflow/selection-ref.html
@@ -0,0 +1,118 @@
+<!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() {
+ // For putting selection ranges to multiple editing hosts, we need to put
+ // a range outside all editable elements first, then, selection's ancestor
+ // limiter won't be set to an editing host.
+ getSelection().collapse(document.body, document.body.childNodes.length);
+ 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 0000000000..9727d12881
--- /dev/null
+++ b/layout/reftests/text-overflow/selection.html
@@ -0,0 +1,116 @@
+<!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() {
+ // For putting selection ranges to multiple editing hosts, we need to put
+ // a range outside all editable elements first, then, selection's ancestor
+ // limiter won't be set to an editing host.
+ getSelection().collapse(document.body, document.body.childNodes.length);
+ 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 0000000000..38f498cb94
--- /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);
+</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 0000000000..c903c71c45
--- /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);
+</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 0000000000..14e5268b96
--- /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 0000000000..04c2b84d09
--- /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 0000000000..ffab81e821
--- /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 0000000000..aa8b655dd8
--- /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 0000000000..9e905cf64e
--- /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 0000000000..6cb661f037
--- /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 0000000000..be271aa263
--- /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 0000000000..77f9019f59
--- /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 0000000000..98a7de1e82
--- /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 0000000000..9360c08fcc
--- /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 0000000000..638552e77e
--- /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 0000000000..dfbae42bb6
--- /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 0000000000..e26a2a28fc
--- /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 0000000000..a393aedd85
--- /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 0000000000..c5e6e6fd9f
--- /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 0000000000..dead7a03e4
--- /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 0000000000..743ea37a00
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-3-ref.html
@@ -0,0 +1,28 @@
+<!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;
+ text-decoration-skip-ink: none;
+}
+.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 0000000000..e30d962c50
--- /dev/null
+++ b/layout/reftests/text-overflow/vertical-decorations-3.html
@@ -0,0 +1,28 @@
+<!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;
+ text-decoration-skip-ink:none;
+}
+.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 0000000000..27e66e9652
--- /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 0000000000..20283e5a65
--- /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 0000000000..ba05d4f6dd
--- /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 0000000000..18b917616e
--- /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 0000000000..7b478e293c
--- /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 0000000000..c43f951232
--- /dev/null
+++ b/layout/reftests/text-overflow/xulscroll.html
@@ -0,0 +1,104 @@
+<!-- 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() {
+
+ // The behaviour of this test may be subtly different when this code runs
+ // before the first paint vs after the first paint. If you encounter
+ // intermittent failures in this reftest, you might have luck turning it into
+ // a reliable failure by wrapping this function body in a
+ // requestAnimationFrame callback to force it to run after the first paint.
+ // Alternatively you might need to force it to run before the first paint,
+ // perhaps by running it inline (not as an onload handler) or something.
+
+ // workaround bug 936936
+ document.body.style.display = "block";
+ document.body.getBoundingClientRect();
+
+ 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>