text-overflow-ellipsis-block-with-border-and-padding.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.testDiv {
    width: 308px;
    border: 5px solid green;
    padding: 0px 5px 0px 20px;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 0 20px 0;
    text-overflow: ellipsis;
}

.rtl {
    direction: rtl;
    unicode-bidi: bidi-override;
}

.leftAlign { text-align: left; }
.rightAlign { text-align: right; }
.centerAlign { text-align: center; }
.justifyAlign { text-align: justify; }
</style>
</head>
<body>
<div class="testDiv leftAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<div class="testDiv leftAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>

<div class="testDiv rightAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<div class="testDiv rightAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>

<div class="testDiv centerAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<div class="testDiv centerAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>

<div class="testDiv justifyAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<div class="testDiv justifyAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/text-overflow-ellipsis-block-with-border-and-padding.html
