chromium/third_party/blink/web_tests/fast/css/text-overflow-ellipsis-text-align-justify.html

<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>