blob: 2cdee367dfe98697ef3ee91fd8a290fecfb30b6e [file] [log] [blame]
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=utf8">
<head>
<style>
.testDiv {
width: 180px;
height: 20px;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
margin: 0 0 20px 0;
}
.forcertl {
direction: rtl;
unicode-bidi: bidi-override;
}
.ellipsis {
text-overflow:ellipsis;
}
</style>
</head>
<body>
This tests checks that the text-overflow:ellipsis property is handled correctly
for bidi text.<br><br>
Pass if the ellipsis do not overlap the text and the underlines for the links are
placed under the text and not the ellipsis.<br><br>
RTL:
<div class="testDiv ellipsis" dir=rtl>
כשהטקסט ערוך מדי נרצה להוסיף אליפסות בסוף שורה
</div>
RTL Override:
<div class="testDiv forcertl ellipsis" dir=rtl>
Lorem ipsum dolor sit amet, consectetur adipiscing
</div>
RTL link:
<div class="testDiv forcertl ellipsis" dir=rtl>
<a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
</div>
RTL with ltr content:
<div class="testDiv ellipsis" dir=rtl>
Lorem ipsum dolor sit amet, consectetur adipiscing
</div>
RTL link with ltr content:
<div class="testDiv ellipsis" dir=rtl>
<a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
</div>
LTR link:
<div class="testDiv ellipsis" dir=ltr>
<a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing</a>
</div>
LTR:
<div class="testDiv ellipsis" dir=ltr>
Lorem ipsum dolor sit amet, consectetur adipiscing
</div>
LTR with rtl content:
<div class="testDiv ellipsis" dir=ltr>
כשהטקסט ערוך מדי נרצה להוסיף אליפסות בסוף שורה
</div>
LTR with forced rtl content:
<div class="testDiv ellipsis" dir=ltr>
<span class=forcertl dir=rtl>
Lorem ipsum dolor sit amet, consectetur adipiscing
</span>
</div>
LTR link with rtl content:
<div class="testDiv ellipsis" dir=ltr>
<a href=#>
כשהטקסט ערוך מדי נרצה להוסיף אליפסות בסוף שורה
</a>
</div>
LTR link with forced rtl content:
<div class="testDiv ellipsis" dir=ltr>
<a href=#>
<span class=forcertl dir=rtl>
Lorem ipsum dolor sit amet, consectetur adipiscing
</span>
</a>
</div>