| <!DOCTYPE html> |
| <head> |
| <meta charset="utf-8"> |
| <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> |
