blob: 3f7f681d8cc758110e7b52c7ca5b7a026d877cc2 [file] [log] [blame]
<!DOCTYPE html>
<!--
| If all of properties have a computed value other than "auto", the values are
| said to be "over-constrained" and one of the used values will have to be
| different from its computed value. If the "direction" property of the
| containing block has the value "ltr", the specified value of "margin-right"
| is ignored and the value is calculated so as to make the equality true. If
| the value of "direction" is "rtl", this happens to "margin-left" instead.
| https://www.w3.org/TR/CSS21/visudet.html#blockwidth
-->
<html>
<head>
<style>
.containing-block {
background-color: #2196f3;
padding: 10px 0;
margin-bottom: 10px;
width: 500px;
}
.block {
/* TODO: Add borders when supported. */
background-color: #3f51b5;
display: block;
height: 5px;
padding: 0 100px;
width: 100px;
}
.margin-left {
margin-left: 50px;
}
.margin-right {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="containing-block">
<div class="margin-left block"></div>
</div>
<div class="containing-block">
<div class="margin-right block"></div>
</div>
<div class="containing-block">
<div class="margin-left margin-right block"></div>
</div>
</body>
</html>