| <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=utf8"> |
| <head> |
| <style> |
| .testDiv { |
| width: 308px; |
| border: 1px solid black; |
| white-space: nowrap; |
| overflow: hidden; |
| margin: 0 0 20px 0; |
| text-align: justify; |
| text-overflow: ellipsis; |
| } |
| |
| .rtl { |
| direction: rtl; |
| unicode-bidi: bidi-override; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <p>This test checks that text with text-overflow:ellipsis follows 'text-align: justify' correctly.</p> |
| |
| <p>LTR text should be aligned with the left hand side of their box. RTL text should be aligned with the right hand side of their box.</p> |
| |
| <h3>Single line</h3> |
| <div class="testDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| <h3>Multi line</h3> |
| <div class="testDiv"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br> |
| orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br> |
| rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br> |
| em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br> |
| </div> |
| |
| <h3>Containing replaced content</h3> |
| <div class="testDiv">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| |
| <h3>Containing replaced content blocking the ellipsis</h3> |
| <div class="testDiv">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| |
| <h3>Right-To-Left single line</h3> |
| <div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| |
| <h3>Right-To-Left Multi line</h3> |
| <div class="testDiv rtl"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br> |
| orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br> |
| rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br> |
| em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br> |
| </div> |
| |
| |
| <h3>Right-To-Left containing replaced content</h3> |
| <div class="testDiv rtl">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| <h3>Right-To-Left containing replaced content blocking the ellipsis</h3> |
| <div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| </body> |
| </html> |
