blob: 6cf58a61893b02ceef870f05e5e85f974d037e18 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Specification does not define whether collapsed elements should reduce
| the available width of a line box (and thus affect the line breaking) or not,
| so Chrome, Firefox, IE, and Opera are treating them differently.
| Cobalt takes collapsed elements into account as long as they have margins,
| borders, or paddings. The resulting rendering is arguably the best among
| the aforementioned browsers (Firefox comes close) but is different from
| Chrome which normally would be a bad thing if not the fact that Chrome's
| rendering looks plain wrong.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
font-size: 20px;
font-weight: bold;
}
.group {
display: inline-block;
margin-right: 50px
}
.containing-block {
background-color: #03a9f4;
margin-bottom: 10px;
width: 70px;
}
.with-padding {
background-color: #2196f3;
padding-left: 60px;
}
.with-large-padding {
background-color: #2196f3;
padding-left: 120px;
}
.inline-block {
background-color: #009688;
display: inline-block;
height: 30px;
width: 30px;
}
</style>
</head>
<body>
<div class="group">
<div class="containing-block">
<span>The Hegemony Consul</span>
</div>
</div>
<div class="group">
<div class="containing-block">
<span class="with-padding"></span>
<span>sat on the balcony</span>
</div>
<div class="containing-block">
<span>sat</span>
<span class="with-padding"></span>
<span>on the balcony</span>
</div>
</div>
<div class="group">
<div class="containing-block">
<span class="with-large-padding"></span>
<span>of his ebony spaceship</span>
</div>
<div class="containing-block">
<span>of his ebony spaceship</span>
<span class="with-large-padding"></span>
</div>
</div>
<div class="group">
<div class="containing-block">
<span class="with-padding"></span>
<span>and</span>
</div>
<div class="containing-block">
<span>and</span>
<span class="with-padding"></span>
</div>
</div>
<div class="group">
<div class="containing-block">
<span class="with-padding"></span>
<div class="inline-block"></div>
</div>
<div class="containing-block">
<div class="inline-block"></div>
<span class="with-padding"></span>
</div>
</div>
</body>
</html>