mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-08 10:44:56 +00:00
Bug 312156 - Tests for CSS3 text-overflow. r=roc
This commit is contained in:
Mats Palmgren
parent
e757474795
commit
edc656386c
@ -360,3 +360,5 @@ load 646983-1.html
|
||||
load 647332-1.html
|
||||
load 650499-1.html
|
||||
load 660416.html
|
||||
load text-overflow-form-elements.html
|
||||
load text-overflow-iframe.html
|
||||
|
||||
144
layout/generic/crashtests/text-overflow-form-elements.html
Normal file
144
layout/generic/crashtests/text-overflow-form-elements.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>text-overflow test case</title>
|
||||
<style type="text/css">
|
||||
|
||||
.test {
|
||||
font: 1em bold monospace;
|
||||
background:lightgrey;
|
||||
color: black;
|
||||
margin-left:400px;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
direction:rtl;
|
||||
}
|
||||
.ltr {
|
||||
direction:ltr;
|
||||
}
|
||||
.rlo > * {
|
||||
unicode-bidi: bidi-override; direction: rtl;
|
||||
}
|
||||
.lro > * {
|
||||
unicode-bidi: bidi-override; direction: ltr;
|
||||
}
|
||||
.b { border: 1px dashed blue; }
|
||||
.inline-block {
|
||||
display:inline-block;
|
||||
}
|
||||
.ellipsis {
|
||||
width:4em;
|
||||
width:6.5ch;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow:hidden;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var twoEyes = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAFy7sgCAAAGsUlEQVRo3u2ZbWwcZxHHf3s%2B7LNbO3ZjXBtowprGODRX0qpNQCjmJKuVKhMl1P2AkCwhFOIKkCBSm9IXavGFKAixIAECwkmWo5MrhRI3Ub40IEwQgp6aIDg3Cd6eEqyIHEteah%2B1E69vhw%2BZtTaX8704ZzkKjHS6271nZ56ZZ%2BY%2F%2F%2BdZKF%2FCwYshx3EkkggLsD1v4FQkEZZYLCbAKyG9%2Ba9EIsG6hnUAf8x74K3aUC3j4%2BM54HcsR2oAIomwZOezkv%2FnSHpYNh%2BNCmAE7xv94zvFdd1bHsjMZmQkPSxAJP%2B%2FfuBLwK54PC7JZFKAVJmzXLBt2w%2FMvcDLwIb8QS8CeJ4nkURYIomw7J%2FYJ8BvSiiXptGGxWds2%2Fa9%2Bnaxh%2BYAD%2Bgt04NDgABTpQY2cvvSFLzw86gWeBVwC8SzlOSv2YeBPfmDBoBHgKmR9LBEEmHZfDTqGykqfkUE0nA78BzQGfSgUeP3wNeTXwXg7MwZDhw4UHL6ra2ti79%2FOvljgG8AZ4H64Lhm4MvAocxsRppGG%2FxcXihlwLIs6R%2FfKV2HO%2F26uA94pdDYUKUZUU7W1RQYXA98Gnhaf5%2FXWX0HeAHYoQonqa4sZSOsSWMCWeC9Yko%2BCQwBe4E6oNc0Tc91XTl1%2BaTsn9gnI%2Blhyc5nZWxsrBIkKSbl2tiic3tW53YDEwOKaoFBrcOfqKee53lG9xsPMjV784r%2F4lO%2FpPvyJ9iyZcuvFSaXK5XYeAZ4CDgGvB3MS4B54LQuWYPeuy4iRFsevsXqpuYoqVQKIH2bK1CuDQNo11o4XUzh%2FcDWYIe1LEtyuZx4niee54njOGKapgfsqlL%2Bl2OjEXg8nxrc1dJ0h3hbtL%2BGCtz7KPBF4CuBe9uB15VafE8hr9qylI3HgG8C2%2FK7VyHZoJj7MrBRm30qFotJMpkU27YlHo%2F7Ha5a%2BV%2FKRkSJ4KuKRLVLKapTjB1SzAVIjY2NSXY%2BKyPpYdk%2FsU9OXT4pruv6BdZbBQfKsVGnvWlIe1VB6VQO8JxC1vZYLCbZ%2BaxsPhpdZDyRRFhG0sPiOE6ldKBg2lRg4xF1YCDIIIKN7DGgD3gH%2BBXwejKZfPrs2tPs%2FvPN2bKuYR1nd7xLKBSSJeqoXKnERjPwNWAG%2BLn2rZuM%2B4Tpml6vaWlp4eLcxVusZq5lCgVgOVKJjRqdX86ffL4D5wIoZACnTpw4wRMdT96i%2FImOJxERAs4uVyqxUacF%2FPdiCj%2BjdRBRGFtwXVdG0sPSdbhTmkYbpH98p2RmM2JZlig1vl0GWo4NQ%2Fn%2Bs5pKRXfwjweaxy7TND3HcRZbfC6X8xVPVQlGy7WxVWlO5XRXFXm6EZmrQuSXYyPE3SiVoEhE6Wyr0u2rumO6zv%2B21AFdQAswC1wCMuUCXCmyWQus103Qg8qlDO0lxwOb%2Fl4FiK3AB3VS%2FuKKLtK%2FgbeAnwG%2FvUODuRw%2FFrR0H1UC75fwu8oJ%2FhFsW5VIG%2FBUgEIN6Y65O4AHu4Ap0zQ9y7LEcZyb9lRBUHQcRyzL8unZVBW5bFWAvAp%2BhDQ2g4F47dUYtlU6obXA54DnVdFLekjUGGifh4AFy7LEdV3xj3X9I66m0QZpGm2QrsOd0j%2B%2BU0bSw5KZzYjrun6HWlAd961i4FfCj0aN1Usau%2Bc1lmuXPFwvAEumUut7tQQvAb%2FXb%2FT0bCAej9cODg7yt%2Bm%2F8q2%2F7OUHZ76PnZ1k2p0mJzlykmPancbOTnL0whHs7CQfb%2B5mx2d3sH79%2BtCRI0c6FeaOr9ICrIQfLvA%2B8BGNXxi4R6HrisJVUWrxAVW2oMFf0Aczim8o3kV6enowDIPjF9%2Fk%2BMU3S3rrjzMMg56eHr%2BxP7qKFbASfojG6kpeDGs1tiW53RxwWT%2Bin5q8w4xpQK5evQpAR30H7ZH2khNvj7TTUd8BgD4rqmu1ZKX8qNeY%2BfHz4zlXDgT5E8tpCTUq7XSBC4Euv8227TV9fX1E73%2BYtvo27BmbS9cvFVTY3bSRFza9yOcf6Gfmygy7d%2B%2Fm%2FPnzF4DvrsBLhnJlJfwIKXxv1PheAE4qK6p4H9AGbNKTuhngBPBPXYRe4IemaT5kWZbR19fHNbmGnZ1k4r3U4glDR30Hm5qjbGjsImJEOHbsGHv27JFz5869o0eFq01Jq%2BmHAXwI6FFKagMTgHM7GzFDS%2BoeLSMv7zjzC9x4Y7gxFovVDAwMEI1GaWlpWSzRVCrFwYMH%2FXfxZ4AfAa8B%2F7lDaGg1%2FQgp43lfK0yqtRMuJa3ceKe5DfgYsCYAZ2ngD8CfAkzqTpW7xY%2F%2FSznyX%2FVeUb2kVmX4AAAAAElFTkSuQmCC";
|
||||
function initIMG() {
|
||||
var img = document.getElementsByTagName('img');
|
||||
for (i = 0; i < img.length; ++i)
|
||||
img[i].setAttribute('src', twoEyes);
|
||||
}
|
||||
function setTextOverflow(str,quoted) {
|
||||
var x = document.styleSheets[0];
|
||||
var q = quoted ? '"' : '';
|
||||
x.insertRule('.ellipsis{text-overflow:' + q + str + q +'}', x.cssRules.length);
|
||||
}
|
||||
</script>
|
||||
</head><body onload="initIMG()">
|
||||
text-overflow:"<input placeholder="type text then <ENTER>" onchange='setTextOverflow(this.value,1)'>" | <button onclick="setTextOverflow('ellipsis')">ellipsis</button> | <button onclick="setTextOverflow('clip')">clip</button> (Try "." or "" for example) <br>
|
||||
|
||||
LTR / LTR
|
||||
<div class="test ltr">
|
||||
<span class="ellipsis b inline-block">CSS is awesome</span>
|
||||
<button class="ellipsis">CSS is awesome</button>
|
||||
<input type=button class="ellipsis" value="CSS is awesome">
|
||||
<input class="ellipsis" value="CSS is awesome">
|
||||
<input class="ellipsis" placeholder="CSS is awesome">
|
||||
<fieldset style="display:inline" class="ellipsis"><span style="position:relative;left:1em;">CSS is awesome</span></fieldset>
|
||||
<fieldset style="display:block" class="ellipsis"><span style="position:relative;left:1em;">CSS is awesome</span></fieldset>
|
||||
<legend class="ellipsis">CSS is awesome</legend>
|
||||
<textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off">
|
||||
CSS is awesome CSS is awesome CSS is awesome
|
||||
CSS is awesome CSS is awesome CSS is awesome
|
||||
</textarea>
|
||||
<fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset>
|
||||
<fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;left:1em;">CSS is awesome</span></fieldset>
|
||||
<select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<ul style="float:left"><li class="ellipsis b">CSS is awesome</ul>
|
||||
<br><br></div>
|
||||
|
||||
RTL / LTR
|
||||
<div class="test rtl">
|
||||
<span class="ellipsis b inline-block">CSS is awesome</span>
|
||||
<button class="ellipsis">CSS is awesome</button>
|
||||
<input type=button class="ellipsis" value="CSS is awesome">
|
||||
<input class="ellipsis" value="CSS is awesome">
|
||||
<input class="ellipsis" placeholder="CSS is awesome">
|
||||
<fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<legend class="ellipsis">CSS is awesome</legend>
|
||||
<textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off">
|
||||
CSS is awesome CSS is awesome CSS is awesome
|
||||
CSS is awesome CSS is awesome CSS is awesome
|
||||
</textarea>
|
||||
<fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset>
|
||||
<fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<ul style="float:left"><li class="ellipsis b">CSS is awesome</ul>
|
||||
<br><br></div>
|
||||
|
||||
LTR / RTL
|
||||
<div class="test ltr rlo">
|
||||
<span class="ellipsis b inline-block">CSS is awesome</span>
|
||||
<button class="ellipsis">CSS is awesome</button>
|
||||
<input type=button class="ellipsis" value="CSS is awesome">
|
||||
<input class="ellipsis" value="CSS is awesome">
|
||||
<input class="ellipsis" placeholder="CSS is awesome">
|
||||
<fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<legend class="ellipsis">CSS is awesome</legend>
|
||||
<textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off">
|
||||
CSS is awesome CSS is awesome CSS is awesome
|
||||
CSS is awesome CSS is awesome CSS is awesome
|
||||
</textarea>
|
||||
<fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset>
|
||||
<fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<ul style="float:left"><li class="ellipsis b">CSS is awesome</ul>
|
||||
<br><br></div>
|
||||
|
||||
RTL / RTL
|
||||
<div class="test rtl rlo">
|
||||
<span class="ellipsis b inline-block">CSS is awesome</span>
|
||||
<button class="ellipsis">CSS is awesome</button>
|
||||
<input type=button class="ellipsis" value="CSS is awesome">
|
||||
<input class="ellipsis" value="CSS is awesome">
|
||||
<input class="ellipsis" placeholder="CSS is awesome">
|
||||
<fieldset style="display:inline" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<fieldset style="display:block" class="ellipsis"><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<legend class="ellipsis">CSS is awesome</legend>
|
||||
<textarea class="ellipsis" style="overflow:scroll;width:14em;" wrap="off">
|
||||
CSS is awesome CSS is awesome CSS is awesome
|
||||
CSS is awesome CSS is awesome CSS is awesome
|
||||
</textarea>
|
||||
<fieldset style="display:inline"><legend class="ellipsis">CSS is awesome</legend>CSS is awesome</fieldset>
|
||||
<fieldset style="display:block" class="ellipsis"><legend class="ellipsis">CSS is awesome</legend><span style="position:relative;right:1em;">CSS is awesome</span></fieldset>
|
||||
<select class="ellipsis"><option>CSS is awesome<option>CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<select><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<select size="4"><option>CSS is awesome<option class="ellipsis">CSS is awesome<option>CSS is awesome<option>CSS is awesome</select>
|
||||
<ul style="float:left"><li class="ellipsis b">CSS is awesome</ul>
|
||||
<br><br></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
115
layout/generic/crashtests/text-overflow-iframe.html
Normal file
115
layout/generic/crashtests/text-overflow-iframe.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>text-overflow: Test 12</title>
|
||||
<style type="text/css">
|
||||
|
||||
.test {
|
||||
border: thin dashed black;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
font: 1em bold monospace;
|
||||
background:lime;
|
||||
color: black;
|
||||
margin-left:400px;
|
||||
height: 12em;
|
||||
text-shadow: #6374AB 5px -12px 2px;
|
||||
}
|
||||
|
||||
body {
|
||||
width:800px;
|
||||
}
|
||||
|
||||
img { width: 50px; height: 50px; outline:5px dotted yellow; }
|
||||
span {
|
||||
font-size:16px;
|
||||
background:pink;
|
||||
border: 5px dashed blue;
|
||||
padding: 0 25px;
|
||||
text-decoration: underline overline line-through;
|
||||
color:brown;
|
||||
text-shadow: none;
|
||||
}
|
||||
i {
|
||||
display:inline-block;
|
||||
height: 50px;
|
||||
width: 5em;
|
||||
background: blue;
|
||||
outline:5px dotted yellow;
|
||||
text-shadow: none;
|
||||
}
|
||||
u {
|
||||
padding-left:140px;
|
||||
}
|
||||
v {
|
||||
padding-right:140px;
|
||||
}
|
||||
.rtl {
|
||||
direction:rtl;
|
||||
}
|
||||
.rlo span {
|
||||
unicode-bidi: bidi-override; direction: rtl;
|
||||
}
|
||||
.lro span {
|
||||
unicode-bidi: bidi-override; direction: ltr;
|
||||
}
|
||||
.h {display:none}
|
||||
iframe {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var c = "data:text/html,<style>body {white-space: nowrap;overflow:hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;}</style><body bgcolor='magenta'>CSS is awesome"
|
||||
function initIFRAME() {
|
||||
var f = document.getElementsByTagName('iframe');
|
||||
for (i = 0; i < f.length; ++i) {
|
||||
f[i].setAttribute('src', c);
|
||||
}
|
||||
setTimeout(function(){document.body.style.width='500px'},0);
|
||||
}
|
||||
function setTextOverflow(str,quoted) {
|
||||
var x = document.styleSheets[0];
|
||||
var q = quoted ? '"' : '';
|
||||
x.insertRule('.test{text-overflow:' + q + str + q +'}', x.cssRules.length);
|
||||
}
|
||||
</script>
|
||||
</head><body onload="initIFRAME()">
|
||||
text-overflow:"<input placeholder="type text then <ENTER>" onchange='setTextOverflow(this.value,1)'>" | <button onclick="setTextOverflow('ellipsis')">ellipsis</button> | <button onclick="setTextOverflow('clip')">clip</button> (Try "." or "" for example) <br>
|
||||
|
||||
LTR / LTR
|
||||
<div class="test">
|
||||
<span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i><u> is awesome</u></span><br>
|
||||
<span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br>
|
||||
<span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br>
|
||||
<span>C­SS is awesome CSS is awesom­e <button>BUTTON</button></span><br>
|
||||
<br><br></div>
|
||||
|
||||
RTL / LTR
|
||||
<div class="test rtl">
|
||||
<span><iframe></iframe><v>CSS is awesome CSS</v><i>overflowing-inline-block</i> is awesome </span><br>
|
||||
<span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br>
|
||||
<span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br>
|
||||
<span>C­SS is awesome CSS is awesom­e <button>BUTTON</button></span><br>
|
||||
<br><br></div>
|
||||
|
||||
|
||||
LTR / RTL
|
||||
<div class="test rlo">
|
||||
<span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br>
|
||||
<span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br>
|
||||
<span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br>
|
||||
<span><button>BUTTON</button>C­SS is awesome CSS is awesom­e </span><br>
|
||||
<br><br></div>
|
||||
|
||||
RTL / RTL
|
||||
<div class="test rtl rlo">
|
||||
<span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br>
|
||||
<span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br>
|
||||
<span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br>
|
||||
<span><button>BUTTON</button>C­SS is awesome CSS is awesom­e </span><br>
|
||||
<br><br></div>
|
||||
|
||||
</body></html>
|
||||
@ -89,6 +89,9 @@ skip-if(Android) include css-invalid/reftest.list
|
||||
# css-submit-invalid
|
||||
include css-submit-invalid/reftest.list
|
||||
|
||||
# css text-overflow
|
||||
include text-overflow/reftest.list
|
||||
|
||||
# css transitions
|
||||
include css-transitions/reftest.list
|
||||
|
||||
|
||||
BIN
layout/reftests/text-overflow/TestEllipsisFallback.woff
Normal file
BIN
layout/reftests/text-overflow/TestEllipsisFallback.woff
Normal file
Binary file not shown.
59
layout/reftests/text-overflow/anonymous-block-ref.html
Normal file
59
layout/reftests/text-overflow/anonymous-block-ref.html
Normal file
@ -0,0 +1,59 @@
|
||||
<!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;}
|
||||
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
61
layout/reftests/text-overflow/anonymous-block.html
Normal file
61
layout/reftests/text-overflow/anonymous-block.html
Normal file
@ -0,0 +1,61 @@
|
||||
<!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;}
|
||||
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
85
layout/reftests/text-overflow/bidi-simple-ref.html
Normal file
85
layout/reftests/text-overflow/bidi-simple-ref.html
Normal file
@ -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>
|
||||
106
layout/reftests/text-overflow/bidi-simple-scrolled-ref.html
Normal file
106
layout/reftests/text-overflow/bidi-simple-scrolled-ref.html
Normal file
@ -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>
|
||||
98
layout/reftests/text-overflow/bidi-simple-scrolled.html
Normal file
98
layout/reftests/text-overflow/bidi-simple-scrolled.html
Normal file
@ -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;
|
||||
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>
|
||||
81
layout/reftests/text-overflow/bidi-simple.html
Normal file
81
layout/reftests/text-overflow/bidi-simple.html
Normal file
@ -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>
|
||||
83
layout/reftests/text-overflow/block-padding-ref.html
Normal file
83
layout/reftests/text-overflow/block-padding-ref.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/licenses/publicdomain/
|
||||
-->
|
||||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>text-overflow: text-overflow block padding </title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: DejaVuSansMono;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
|
||||
}
|
||||
body { width:24ch; overflow:hidden; }
|
||||
|
||||
.test {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding-left: 1ch;
|
||||
padding-right: 3ch;
|
||||
height: 3em;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
.s {
|
||||
overflow: auto; position:relative;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.rel { position:relative; }
|
||||
span {
|
||||
text-decoration: underline overline;
|
||||
background:yellow;
|
||||
}
|
||||
.rtl {
|
||||
direction:rtl;
|
||||
}
|
||||
.ltr {
|
||||
direction:ltr;
|
||||
}
|
||||
.rlo span {
|
||||
unicode-bidi: bidi-override; direction: rtl;
|
||||
}
|
||||
.lro span {
|
||||
unicode-bidi: bidi-override; direction: ltr;
|
||||
}
|
||||
.overlay {
|
||||
position:absolute;
|
||||
border-color:transparent;
|
||||
text-decoration: line-through;
|
||||
z-index:1;
|
||||
}
|
||||
y { background:yellow;}
|
||||
m { background:yellow; position:absolute; right:0; padding-right:3ch; z-index:2;}
|
||||
mr { background:yellow; position:absolute; left:0;padding-left:1ch; z-index:2;}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<!-- LTR / LTR -->
|
||||
<div class="test ltr overlay"><r> </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>
|
||||
71
layout/reftests/text-overflow/block-padding.html
Normal file
71
layout/reftests/text-overflow/block-padding.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/licenses/publicdomain/
|
||||
|
||||
Test: test marker trigger point and alignment in a block with padding
|
||||
-->
|
||||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>text-overflow: text-overflow block padding </title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: DejaVuSansMono;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
|
||||
}
|
||||
body { width:24ch; overflow:hidden; }
|
||||
|
||||
.test {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: line-through;
|
||||
padding-left: 1ch;
|
||||
padding-right: 3ch;
|
||||
height: 3em;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
.s {
|
||||
overflow: auto;
|
||||
}
|
||||
span {
|
||||
text-decoration: underline overline;
|
||||
background:yellow;
|
||||
}
|
||||
.rtl {
|
||||
direction:rtl;
|
||||
}
|
||||
.ltr {
|
||||
direction:ltr;
|
||||
}
|
||||
.rlo span {
|
||||
unicode-bidi: bidi-override; direction: rtl;
|
||||
}
|
||||
.lro span {
|
||||
unicode-bidi: bidi-override; direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body>
|
||||
|
||||
<!-- LTR / LTR -->
|
||||
<div class="test ltr" ><span>| | | | | | | | | | | | | </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>
|
||||
149
layout/reftests/text-overflow/ellipsis-font-fallback-ref.html
Normal file
149
layout/reftests/text-overflow/ellipsis-font-fallback-ref.html
Normal file
@ -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=" lro"><m>...</m></span></div></div></div>
|
||||
<div id="test6b"><div class="s6 ltr"><div class="p o"><span class=" lro"><m>...</m></span></div></div></div>
|
||||
<div id="test6c"><div class="s6 ltr"><div class="p o"><span class=" lro"><m>...</m></span></div></div></div>
|
||||
<div id="test6d"><div class="s6 ltr"><div class="p o"><span class=" lro"><m>...</m></span></div></div></div>
|
||||
|
||||
<!-- start marker, all characters overlapped by marker -->
|
||||
<div id="test7a"><div class="s7 ltr"><div class="p o"><span class=" lro"><m>...</m> </span></div></div></div>
|
||||
<div id="test7b"><div class="s7 rtl"><div class="p o"><span class=" lro"> <m>...</m></span></div></div></div>
|
||||
<div id="test7c"><div class="s7 ltr"><div class="p o"><span class=" rlo"> <m>...</m></span></div></div></div>
|
||||
<div id="test7d"><div class="s7 rtl"><div class="p o"><span class=" rlo"><m>...</m> </span></div></div></div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
150
layout/reftests/text-overflow/ellipsis-font-fallback.html
Normal file
150
layout/reftests/text-overflow/ellipsis-font-fallback.html
Normal file
@ -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;
|
||||
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>
|
||||
71
layout/reftests/text-overflow/false-marker-overlap-ref.html
Normal file
71
layout/reftests/text-overflow/false-marker-overlap-ref.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/licenses/publicdomain/
|
||||
|
||||
Test: false marker overlap
|
||||
-->
|
||||
<html><head>
|
||||
<title>text-overflow: form control elements</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: DejaVuSansMono;
|
||||
src: url(../fonts/DejaVuSansMono.woff);
|
||||
}
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
|
||||
}
|
||||
|
||||
.test {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
height: 6em;
|
||||
width: 32.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
i {
|
||||
display:inline-block;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
border:1px solid blue;
|
||||
text-shadow: none;
|
||||
}
|
||||
.rtl {
|
||||
direction:rtl;
|
||||
}
|
||||
.rlo {
|
||||
unicode-bidi: bidi-override; direction: rtl;
|
||||
}
|
||||
.lro {
|
||||
unicode-bidi: bidi-override; direction: ltr;
|
||||
}
|
||||
|
||||
s {
|
||||
float:right;
|
||||
width:3em;
|
||||
height:3em;
|
||||
margin-right:-0.6em;
|
||||
border:1px solid red;
|
||||
}
|
||||
.rtl s {
|
||||
float:left;
|
||||
margin-left:-0.6em;
|
||||
margin-right:0;
|
||||
}
|
||||
.overlap {margin-left:-0.6em;}
|
||||
.rtl .overlap {margin-right:-0.6em;margin-left:0;}
|
||||
.n {padding-left:0.6em;}
|
||||
.rtl .n {padding-right:0.6em;padding-left:0;}
|
||||
</style>
|
||||
|
||||
</head><body>
|
||||
|
||||
<div class="test"><font class="overlap"><s></s> <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>
|
||||
72
layout/reftests/text-overflow/false-marker-overlap.html
Normal file
72
layout/reftests/text-overflow/false-marker-overlap.html
Normal file
@ -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;
|
||||
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>
|
||||
305
layout/reftests/text-overflow/marker-basic-ref.html
Normal file
305
layout/reftests/text-overflow/marker-basic-ref.html
Normal file
@ -0,0 +1,305 @@
|
||||
<!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; }
|
||||
|
||||
</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>
|
||||
|
||||
<div id="test4a">
|
||||
<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="test4b">
|
||||
<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="test4c">
|
||||
<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="test4d">
|
||||
<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="test5a">
|
||||
<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 class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div id="test5b">
|
||||
<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 class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div id="test5c">
|
||||
<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 class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div id="test5d">
|
||||
<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 class="abs0" style="text-align:left"><m>…</m><span class="cl a"> </span></div>
|
||||
</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-right:-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>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
197
layout/reftests/text-overflow/marker-basic.html
Normal file
197
layout/reftests/text-overflow/marker-basic.html
Normal file
@ -0,0 +1,197 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.rel {
|
||||
position: relative;
|
||||
height:2em;
|
||||
}
|
||||
.abs0 {
|
||||
position: absolute;
|
||||
top:0; left:0;
|
||||
}
|
||||
|
||||
.s {
|
||||
width:4em;
|
||||
}
|
||||
.p {
|
||||
overflow: hidden;
|
||||
white-space:nowrap;
|
||||
font-size:16px;
|
||||
}
|
||||
.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; }
|
||||
|
||||
|
||||
</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>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
66
layout/reftests/text-overflow/marker-string-ref.html
Normal file
66
layout/reftests/text-overflow/marker-string-ref.html
Normal file
@ -0,0 +1,66 @@
|
||||
<!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;
|
||||
}
|
||||
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"><m>Hello World</m></div>
|
||||
<div class="test rtl t2"><m>Hello World</m></div>
|
||||
|
||||
<div class="test t2" style="width:3ch"><m>Hel</m></div>
|
||||
<div class="test rtl t2" style="width:3ch"><m>Hel</m></div>
|
||||
<div class="test"><m>X</m><mr>X</mr></div>
|
||||
<div class="test"><m>X</m><mr>X</mr></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
73
layout/reftests/text-overflow/marker-string.html
Normal file
73
layout/reftests/text-overflow/marker-string.html
Normal file
@ -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"; }
|
||||
.t3 { text-overflow:"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>
|
||||
73
layout/reftests/text-overflow/quirks-decorations-ref.html
Normal file
73
layout/reftests/text-overflow/quirks-decorations-ref.html
Normal file
@ -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 rtl t2"><span><m>…</m><span style="visibility:hidden"> </span></span></div>
|
||||
<div class="test rtl t3"><span><m>…</m><span style="visibility:hidden"> </span></span></div>
|
||||
<div class="test t4"><span><m>…</m><span style="visibility:hidden"> </span></span></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
74
layout/reftests/text-overflow/quirks-decorations.html
Normal file
74
layout/reftests/text-overflow/quirks-decorations.html
Normal file
@ -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>
|
||||
57
layout/reftests/text-overflow/quirks-line-height-ref.html
Normal file
57
layout/reftests/text-overflow/quirks-line-height-ref.html
Normal file
@ -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>
|
||||
56
layout/reftests/text-overflow/quirks-line-height.html
Normal file
56
layout/reftests/text-overflow/quirks-line-height.html
Normal file
@ -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>
|
||||
14
layout/reftests/text-overflow/reftest.list
Normal file
14
layout/reftests/text-overflow/reftest.list
Normal file
@ -0,0 +1,14 @@
|
||||
== ellipsis-font-fallback.html ellipsis-font-fallback-ref.html
|
||||
HTTP(..) == marker-basic.html marker-basic-ref.html
|
||||
HTTP(..) == marker-string.html marker-string-ref.html
|
||||
skip-if(Android) HTTP(..) == bidi-simple.html bidi-simple-ref.html # Fails on Android due to anti-aliasing
|
||||
skip-if(!gtk2Widget) HTTP(..) == bidi-simple-scrolled.html bidi-simple-scrolled-ref.html # Fails on Windows and OSX due to anti-aliasing
|
||||
HTTP(..) == scroll-rounding.html scroll-rounding-ref.html
|
||||
HTTP(..) == anonymous-block.html anonymous-block-ref.html
|
||||
HTTP(..) == false-marker-overlap.html false-marker-overlap-ref.html
|
||||
HTTP(..) == visibility-hidden.html visibility-hidden-ref.html
|
||||
HTTP(..) == block-padding.html block-padding-ref.html
|
||||
HTTP(..) == quirks-decorations.html quirks-decorations-ref.html
|
||||
HTTP(..) == quirks-line-height.html quirks-line-height-ref.html
|
||||
HTTP(..) == standards-decorations.html standards-decorations-ref.html
|
||||
HTTP(..) == standards-line-height.html standards-line-height-ref.html
|
||||
92
layout/reftests/text-overflow/scroll-rounding-ref.html
Normal file
92
layout/reftests/text-overflow/scroll-rounding-ref.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!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;}
|
||||
.t3 {width:100.3px;}
|
||||
.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; }
|
||||
#mask10 {top:600px; left:0; width:100%; height:30px; }
|
||||
#mask11 {top:670px; 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>
|
||||
<s id="mask10"></s>
|
||||
<s id="mask11"></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 t3">HelloKittyוסוכנויות</div>
|
||||
<div class="test rtl t3">HelloKittyוסוכנויות</div>
|
||||
<div class="test t4">HelloKittyוסוכנויות</div>
|
||||
<div class="test rtl t4">HelloKittyוסוכנויות</div>
|
||||
</body>
|
||||
</html>
|
||||
93
layout/reftests/text-overflow/scroll-rounding.html
Normal file
93
layout/reftests/text-overflow/scroll-rounding.html
Normal file
@ -0,0 +1,93 @@
|
||||
<!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;}
|
||||
.t3 {width:100.3px;}
|
||||
.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; }
|
||||
#mask10 {top:600px; left:0; width:100%; height:30px; }
|
||||
#mask11 {top:670px; 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>
|
||||
<s id="mask10"></s>
|
||||
<s id="mask11"></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 t3">HelloKittyוסוכנויות</div>
|
||||
<div class="test rtl t3">HelloKittyוסוכנויות</div>
|
||||
<div class="test t4">HelloKittyוסוכנויות</div>
|
||||
<div class="test rtl t4">HelloKittyוסוכנויות</div>
|
||||
</body>
|
||||
</html>
|
||||
72
layout/reftests/text-overflow/standards-decorations-ref.html
Normal file
72
layout/reftests/text-overflow/standards-decorations-ref.html
Normal file
@ -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 rtl t2" style="color:black">…<span><span class="xspan"> </span></span></div>
|
||||
<div class="test rtl t3"><span><m>…</m><span style="visibility:hidden"> </span></span></div>
|
||||
<div class="test t4"><span><m>…</m><span style="visibility:hidden"> </span></span></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
73
layout/reftests/text-overflow/standards-decorations.html
Normal file
73
layout/reftests/text-overflow/standards-decorations.html
Normal file
@ -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>
|
||||
58
layout/reftests/text-overflow/standards-line-height-ref.html
Normal file
58
layout/reftests/text-overflow/standards-line-height-ref.html
Normal file
@ -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>
|
||||
57
layout/reftests/text-overflow/standards-line-height.html
Normal file
57
layout/reftests/text-overflow/standards-line-height.html
Normal file
@ -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>
|
||||
72
layout/reftests/text-overflow/visibility-hidden-ref.html
Normal file
72
layout/reftests/text-overflow/visibility-hidden-ref.html
Normal file
@ -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>
|
||||
74
layout/reftests/text-overflow/visibility-hidden.html
Normal file
74
layout/reftests/text-overflow/visibility-hidden.html
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user