Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css / text-overflow-ellipsis-text-align-left.html
blobd856febb12856d6433b8821c04287f7a36090aba
1 <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=utf8">
2 <head>
3 <style>
4 .testDiv {
5 width: 308px;
6 border: 1px solid black;
7 white-space: nowrap;
8 overflow: hidden;
9 margin: 0 0 20px 0;
10 text-align: left;
11 text-overflow: ellipsis;
14 .rtl {
15 direction: rtl;
16 unicode-bidi: bidi-override;
18 </style>
19 </head>
20 <body>
22 <p>This test checks that text with text-overflow:ellipsis follows 'text-align: left' correctly.</p>
24 <p>The text in all boxes should be left aligned, sticking to the left side of the box</p>
26 <h3>Single line</h3>
27 <div class="testDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
29 <h3>Multi line</h3>
30 <div class="testDiv">
31 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
32 orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
33 rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
34 em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
35 </div>
37 <h3>Containing replaced content</h3>
38 <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>
41 <h3>Containing replaced content blocking the ellipsis</h3>
42 <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>
45 <h3>Right-To-Left single line</h3>
46 <div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
49 <h3>Right-To-Left Multi line</h3>
50 <div class="testDiv rtl">
51 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
52 orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
53 rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
54 em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
55 </div>
58 <h3>Right-To-Left containing replaced content</h3>
59 <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>
61 <h3>Right-To-Left containing replaced content blocking the ellipsis</h3>
62 <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>
64 </body>
65 </html>