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