diff options
Diffstat (limited to 'layout/reftests/text-overflow')
68 files changed, 4762 insertions, 0 deletions
diff --git a/layout/reftests/text-overflow/TestEllipsisFallback.woff b/layout/reftests/text-overflow/TestEllipsisFallback.woff Binary files differnew file mode 100644 index 0000000000..4de40fbbb2 --- /dev/null +++ b/layout/reftests/text-overflow/TestEllipsisFallback.woff 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>…</m><span><i style="display:block;">anonymous<br>block</i>and</span> unin<m>…</m></x></div> +<div class="test t2"><x>So<m>…</m><i style="display:block;">anonymous<br>block</i>an<m>…</m></x></div> +<div style="position:absolute;"><div class="test t3" style="border-style:none;padding:1px"><x> <m style="padding-left:16em">…</m></div></div> +<div class="test t3"><x>Some overly <span>l </span><span><i style="display:block;">anonymous<br>block</i>and</span> uninformative sentence</x></div> +<div class="test t4"><x>Some overly <m>…</m><span>long<i style="display:block;">anonymous<br>block</i>a </span> uninformative sentence</x></div> + +<input size="4" placeholder="pla…"> +<input size="4" dir="rtl" placeholder="der…"> +<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>…</div> <!-- atomic under marker --> +<div class="test t1"><span>!</span>…</div> <!-- atomic in padding --> +<div class="test t1"><span>!</span>…</div> <!-- atomic under marker and in padding --> +<div class="test t2"><span>!</span>…</div> <!-- atomic under marker --> +<div class="test t2"><span>!</span>…</div> <!-- atomic in padding --> +<div class="test t2"><span>!</span>…</div> <!-- atomic under marker and in padding --> + +<div class="test rtl t1"><span>!</span>…</div> <!-- atomic under marker --> +<div class="test rtl t1"><span>!</span>…</div> <!-- atomic in padding --> +<div class="test rtl t1"><span>!</span>…</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>…</r>AxxxxB <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>…</r><span class="rlo">He 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>…</r><span class="rlo">He oWorld</span></div> + + +<!-- LTR overflow:hidden --> +<div class="test hidden">AxxxxB<m>…</m><span class="rlo">HelloWorl </span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div> + +<div class="test hidden"><span class="rlo">H <m>…</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 <m>…</m>oWorld</span></div> + +<!-- RTL overflow:scroll --> +<div class="test rtl"><l>…</l>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW ld</span></div> + +<div class="test rtl"><l>…</l><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloW ld</span></div> + +<div class="test rtl"><l>…</l><span class="rlo">HelloW 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>…</m> </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>…</m> </span></div> + +<div class="test rtl hidden"><span class="rlo">HelloW<m>…</m> </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>…</ll><r>…</r> xxB <span class="rlo">… </span> xxxx<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div> + +<div class="test"><ll>…</ll><r>…</r><span class="rlo"> Wor </span> B<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span></div> + +<div class="test"><ll>…</ll><r>…</r><span class="rlo"> Wor </span></div> + +<!-- RTL block --> +<div class="test rtl"><rr>…</rr><l>…</l>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo"> llo </span></div> + +<div class="test rtl"><rr>…</rr><l>…</l><span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo">HelloWorld</span>AxxxxB<span class="rlo"> llo </span></div> + +<div class="test rtl"><rr>…</rr><l>…</l><span class="rlo"> llo </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"> …lloWo… </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"> …lloWo… </span></div> + +<div class="test rtl hidden"><span class="rlo"> …lloWo… </span></div> + + +<div class="test hidden"> …xxxB<span class="rlo">Hello …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"> …loWor… </span> 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"> …loWor… </span></div> + +<span style="position:absolute; top:0; left:6em; height:6em; overflow:hidden;"> +<div class="test rtl"><br><br><rr>…</rr><l>…</l><span class="rlo"> lloW 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 <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 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 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 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 orld</span></div> + +<div class="test rtl"><span class="rlo">Hello 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> </r></div> +<div class="test ltr"><span>| | | | | | | | | |</span><y>… </y></div> + +<div class="test ltr s"><span>| | | | | | | | | | </span><m>…</m></div> + +<!-- RTL / LTR --> +<div class="test rtl rel"><span><div class="overlay"><r> </r></div>| | | | | | | | | |</span><y style="padding-left:3ch">…</y></div> + +<div class="test rtl s"><mr>…</mr><span>| | | | | | | | | | | | | </span></div> + +<!-- LTR / RTL --> +<div class="test ltr rlo overlay"><r> </r></div> +<div class="test ltr rlo" ><span> | | | | | | | | | </span><y style="padding-right:3ch">…</y></div> + +<div class="test ltr rlo s"><span>| | | | | | | | | | | | | </span><m>…</m></div> + +<!-- RTL / RTL --> +<div class="test rtl rlo rel"><span><div class="overlay"><r> </r></div>| | | | | | | | | |</span><y>… </y></div> + +<div class="test rtl rlo s"><mr>…</mr><span>| | | | | | | | | | | | | </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>| | | | | | | | | | | | | </span></div> +<div class="test ltr s"><span>| | | | | | | | | | | | | </span></div> + +<!-- RTL / LTR --> +<div class="test rtl" ><span>| | | | | | | | | | | | | </span></div> +<div class="test rtl s"><span>| | | | | | | | | | | | | </span></div> + +<!-- LTR / RTL --> +<div class="test ltr rlo" ><span>| | | | | | | | | | | | | </span></div> +<div class="test ltr rlo s"><span>| | | | | | | | | | | | | </span></div> + +<!-- RTL / RTL --> +<div class="test rtl rlo" ><span>| | | | | | | | | | | | | </span></div> +<div class="test rtl rlo s"><span>| | | | | | | | | | | | | </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> <option> </select></div> + <div class="test"><select size="1" style="display:block;"><option> <option> </select></div> + + <div class="test"><select size="4" style=""><option> <option> </select></div> + <div class="test"><select size="4" style="display:block;"><option> <option> </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"> …</div> + <div class="test" style="text-align:left"> …</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">…</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">…</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> <option> </select></div> + <div class="test"><select size="1" style="display:block;"><option> <option> </select></div> + + <div class="test"><select size="4" style=""><option> <option> </select></div> + <div class="test"><select size="4" style="display:block;"><option> <option> </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"> <img src="../image/big.png"></div> + <div class="test"> <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"> <m>...</m>X<m>...</m> </span></div></div></div> +<div id="test1b"><div class="s rtl"><div class="p o"><span class="c lro"> <m>...</m>X<m>...</m> </span></div></div></div> +<div id="test1c"><div class="s ltr"><div class="p o"><span class="c rlo"> <m>...</m>X<m>...</m> </span></div></div></div> +<div id="test1d"><div class="s rtl"><div class="p o"><span class="c rlo"> <m>...</m>X<m>...</m> </span></div></div></div> + +<!-- end marker --> +<div id="test2a"><div class="s2 ltr"><div class="p o"><span class="lro">XXXXX<m>...</m> </span></div></div></div> +<div id="test2b"><div class="s2 rtl"><div class="p o"><span class="lro"> <m>...</m>XXXXX</span></div></div></div> +<div id="test2c"><div class="s2 ltr"><div class="p o"><span class="rlo"> <m>...</m>XXXXX</span></div></div></div> +<div id="test2d"><div class="s2 rtl"><div class="p o"><span class="rlo">XXXXX<m>...</m> </span></div></div></div> + +<!-- start marker --> +<div id="test3a"><div class="s3 ltr"><div class="p o"><span class="c lro"> 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 </span></div></div></div> +<div id="test3c"><div class="s3 ltr"><div class="p o"><span class="c rlo"><m>...</m>X </span></div></div></div> +<div id="test3d"><div class="s3 rtl"><div class="p o"><span class="c rlo"> 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> <m>…</m>| | | | | | | | | | | | | | | | | | | | | | …<i class="n"></i></font></div> +<div class="test"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | …<i></i></font></div> +<div class="test rtl"><font class="overlap"><s></s> <m>…</m>| | | | | | | | | | | | | | | | | | | | | | …<i class="n"></i></font></div> +<div class="test rtl"><font><s></s>| | | | | | | | | | | | | | | | | | | | | | | …<i></i></font></div> + + +</body></html> diff --git a/layout/reftests/text-overflow/false-marker-overlap.html b/layout/reftests/text-overflow/false-marker-overlap.html new file mode 100644 index 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…</div> +<div class="container"><div class="float">FF</div>aaaaaaa…</div> +<div class="container"><div class="float">FF</div>aaaaaaa…<br>aaaaaaaaaaa…</div> +<div class="container"><div class="float">FF</div>aaaaaaa…<br>aaaaaaaaaa</div> + +<div class="container" style="text-indent:-20px"><div class="float left">FF</div> …aa</div> +<div class="container" style="text-indent:-20px"><div class="float left">FF</div> …aa<br>aaaaaaaaaaa…</div> +<div class="container" style="text-indent:-20px"><div class="float left">FF</div> …aa<br>aaaaaaaaaa</div> +<div class="container" style="text-indent:-20px"><div class="float left">FF</div> …aa<br><span style="margin-left:-20px"> …aaaaaaa</span></div> +</div> + + +<div style="float:right"> +<div class="container"> +aaaaaaaaaa<br> +aaaaaaaaaaa…<br><div class="float h">FF</div> +aaaaaaa…<br> +aaaaaaa<br> +aaaaaaa…<br> +aaaaaaa…<br> +aaaaaaaaaa<br> +aaaaaaaaaaa…<br> +</div> + +<div class="container" style="text-indent:-20px"> + …aaaaaaa<br> +aaaaaaaaaaa…<br><div class="float left h">FF</div> +<span style="margin-left:-20px"> …aaaaaa…</span><br> +aaaaaaa…<br> +aaaa<br> +<span style="margin-left:-20px"> …aaaaaaa</span><br> +aaaaaaaaaa<br> +aaaaaaaaaaa…<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…</div> + <div class="test">well, hell… 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"> ||||</span><m>…</m></div> +<div class="abs0" style="text-align:left"><span class="cl a"> <m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">…</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"> ||||</span><m>…</m></div> +<div class="abs0r"><span class="cr a rlo"> <m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">…</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"> ||||</span><m>…</m></div> +<div class="abs0" style="text-align:left"><span class="cl a"> <m style="position:absolute; right:0; bottom:0;"><m0 style=" font-size:16px">…</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"> ||||</span><m>…</m></div> +<div class="abs0r"><span class="cr a rlo"> <m style="position:absolute; left:0; bottom:0;"><m0 style=" font-size:16px">…</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>…</m><span class="cl a"> </span></div> +</div></div> +</div> +<div id="test2b"> +<div class="s a"><div class="p rel"> +<div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </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"> </span><m>…</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"> </span><m>…</m></div> +</div></div> +</div> + +<div id="test3a"> +<div class="s a"><div class="p rel"> +<div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div> +</div></div> +</div> +<div id="test3b"> +<div class="s a"><div class="p rel"> +<div class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </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"> </span><m>…</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"> </span><m>…</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"> </span><img class="a overlap1" src="../image/big.png"></div> +<div class="abs0"><span class="cr a"> <m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">…</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"> </span><img class="a overlap1" src="../image/big.png"></div> +<div class="abs0"><span class="cr a"> <m style="position:absolute; right:0; bottom:0;"><m0 style="font-size:16px">…</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"> </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">…</m0></m> </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"> </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">…</m0></m> </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;">…</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;">…</m></x><span class="c5 a" style="margin-right:0"> </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;">…</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;">…</m></x><span class="c5 a" style="margin-right:0"> </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">…</span><span>‌</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">…</span><span>‌</span></div></div></div> + +<div id="test9a"><div class="s a"><div class="p ltr"><span class="e"></span><i> </i><m>…</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> </i><m>…</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> </i><m>…</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> </i><m>…</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>‌</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>‌</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> </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> </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> </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> </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:<string></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> x</m></div> +<div class="test rtl t1"><m> 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:<string></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 56789012</span><m>…</m></span></div> +<div class="test rtl t1"><span><span class="xspan">1 56789012345</span><m>…</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 567890123456789</span><m>x</m></div> +<div class="test rtl t1"><m>x</m><span>0321 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>…</m></div> +<div class="test rtl rlo t1"><span>0123456|</span><m>…</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..d5496b7a03 --- /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) fails-if(gtkWidget) 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|…</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>… </div> +<div id="t2" contenteditable="true" spellcheck="true" class="test ltr hidden" ><span class="rlo" endNode="2" start="1" end="1">…<i>z</i>d word</span></div> +<div contenteditable="true" spellcheck="true" class="test ltr hidden"><span class="rlo">…<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> …s</span><span>pe|</span>…<span></span></div> + +<!-- RTL overflow:hidden --> +<div contenteditable="true" spellcheck="true" class="test rtl hidden" endNode="2" start="8" end="6">Misp …<i>z</i>d word</div> +<div contenteditable="true" spellcheck="true" class="test rtl hidden" end="2"><span class="lro"> …<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">…<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… word</div> +<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="rlo">Mis</span><span class="rlo">pel… word</div> +<div contenteditable="true" spellcheck="true" class="test rtl hidden"><span class="rlo" style="margin-right:-0.2em"> …s</span><span class="rlo">pel… </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: <single value>, 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: <single value>, 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 56789012</span><m>…</m></span></div> +<div class="test rtl t1"><span><span class="xspan">1 56789012345</span><m>…</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 567890123456789</span></div> +<div class="test rtl t1"><span>0321 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>…</m></div> +<div class="test rtl rlo t1"><span>0123456|</span><m>…</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">|||||||…</div> + </div> + <div class="row"> + <div class="cell"><span>|||||||…</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:<left> <right></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> …||…</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/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:<left> <right></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> <s>x</s> </u> +</div> +<div class="test t1">CSS is awesome<u></u><br></div> +<div class="test t2">CSS is awesome<u> <s>x</s> </u></div> +<div class="test t3">CSS is awesome<u> <s>x</s></u></div> +<div class="test t4">CSS is awesome<m>…</m><u> <s></s></u></div> + +<div class="rtl"> +<div class="test rtl rlo t2"> +CSS is awesome<u></u><br> +CSS is awesome<u> <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> <s>x</s> </u></div> +<div class="test rtl rlo t3">CSS is awesome<u> <s>x</s></u></div> +<div class="test rtl rlo t4">CSS is awesome<m>…</m><u> <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> <s>x</s> </u> +</div> +<div class="test t1">CSS is awesome<u></u><br></div> +<div class="test t2">CSS is awesome<u> <s>x</s> </u></div> +<div class="test t3">CSS is awesome<u> <s>x</s></u></div> +<div class="test t4">CSS is awesome<u> <s>x</s></u></div> + +<div class="rtl"> +<div class="test rtl rlo t2"> +CSS is awesome<u></u><br> +CSS is awesome<u> <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> <s>x</s> </u></div> +<div class="test rtl rlo t3">CSS is awesome<u> <s>x</s></u></div> +<div class="test rtl rlo t4">CSS is awesome<u> <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… jowl biltong tail ribeye ham</span></div><br> + <div class="bacon auto"><span>2Beef hamburger bacon tri- ipJOWLBILTONG tail ribeye ham</span></div><br> + <div class="bacon scroll"><span>3Beef hamburger bacon tri pJOWLBILTONG tail ribeye ham</span></div><br> + <div class="bacon scroll2"><span>4Beef hamburger bacon tr pJOWLBILTONG tail ribeye ham</span></div><br> + <div class="bacon scroll3"><span>5Beef hamburger bacon -tipJOWLBILTONG tail ribeye ham</span></div><br> + <div class="bacon scroll4"><span>6Beef hamburger bacon tri- pJOWLBILTONG 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-tip 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> |