blob: efa384ab4a69cf6c903e196bfc0abcbc59635619 [file] [log] [blame]
<!DOCTYPE html>
<html>
<!--
| Content alignment should be based on the start edge of the line when the
| inline-level boxes overflow.
| https://www.w3.org/TR/css-text/#text-align
-->
<head>
<style>
body {
margin: 0px 0px 0px 100px;
font-family: Roboto;
width: 200px;
font-size: 15px;
color: #999;
}
div.bluebg {
background: #2020F0;
}
div.greybg {
background: #B0B0B0;
}
div.container {
background: #999;
width: 10px;
}
div.left {
text-align: left;
}
div.center {
text-align: center;
}
div.right {
text-align: right;
}
</style>
</head>
<body>
<div dir="ltr" class="container left">
<div class="bluebg">a loooooong child</div>
</div>
<div dir="ltr" class="container center">
<div class="greybg">a loooooong child</div>
</div>
<div dir="ltr" class="container right">
<div class="bluebg">a loooooong child</div>
</div>
<div dir="rtl" class="container left">
<div class="bluebg">a loooooong child</div>
</div>
<div dir="rtl" class="container center">
<div class="greybg">a loooooong child</div>
</div>
<div dir="rtl" class="container right">
<div class="bluebg">a loooooong child</div>
</div>
</body>
</html>