blob: 12e3d7a8b91b34e3000c127e8e50e93509f16e05 [file] [log] [blame]
<!DOCTYPE html>
| If all three of "left", "width", and "right" are "auto": first set any "auto"
| values for "margin-left" and "margin-right" to 0. For dir=rtl, set "right" to
| the static position and apply rule:
| 1. "left" and "width" are "auto" and "right" is not 'auto', then
| the width is shrink-to-fit. Then solve for "left".
.first {
top: 10px;
.second {
top: 45px;
.third {
top: 80px;
.containing-block {
background-color: #2196f3;
height: 5px;
padding: 10px 0;
position: absolute;
width: 500px;
.block {
/* TODO: Add borders when supported. */
background-color: #3f51b5;
display: block;
height: 5px;
left: auto;
padding: 0 100px;
position: absolute;
right: auto;
width: auto;
.auto-margin-left {
margin-left: auto;
.non-auto-margin-left {
margin-left: 50px;
.auto-margin-right {
margin-right: auto;
.non-auto-margin-right {
margin-right: 50px;
<body dir="rtl">
<div class="first containing-block">
<div class="auto-margin-left non-auto-margin-right block"></div>
<div class="second containing-block">
<div class="non-auto-margin-left auto-margin-right block"></div>
<div class="third containing-block">
<div class="auto-margin-left auto-margin-right block"></div>