blob: 2951acfcbf5f34c705991b61644a775c2051bc3d [file] [log] [blame]
<!DOCTYPE html>
<!--
| In case boxes are aligned 'top' or 'bottom', they must be aligned so as to
| minimize the line box height. If such boxes are tall enough, there are
| multiple solutions and CSS 2.1 does not define the position of the line
| box's baseline.
| https://www.w3.org/TR/CSS21/visudet.html#line-height
| For the cases where CSS 2.1 does not specify the baseline position, the
| behavior matches the behavior or WebKit and Blink.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
font-size: 8px;
}
.baseline {
color: #E3F2FD;
background-color: #0D47A1;
}
.medium-box {
display: inline-block;
width : 10px;
height: 15px;
}
.large-box {
display: inline-block;
width : 10px;
height: 20px;
}
.extra-large-box {
display: inline-block;
width : 10px;
height: 30px;
}
.top {
vertical-align: top;
background-color: #448AFF;
}
.bottom {
vertical-align: bottom;
background-color: #82B1FF;
}
</style>
</style>
</head>
<body>
<div style="background-color: #E0E0E0;">
<span class="baseline">
x
<span class="medium-box top"></span>
<span class="large-box bottom"></span>
</span>
</div>
<div style="background-color: #BDBDBD;">
<span class="baseline">
x
<span class="large-box bottom"></span>
<span class="medium-box top"></span>
</span>
</div>
<div style="background-color: #E0E0E0;">
<span class="baseline">
x
<span class="extra-large-box bottom"></span>
<span class="medium-box top"></span>
<span class="large-box bottom"></span>
</span>
</div>
<div style="background-color: #BDBDBD;">
<span class="baseline">
x
<span class="extra-large-box bottom"></span>
<span class="large-box bottom"></span>
<span class="medium-box top"></span>
</span>
</div>
<div style="background-color: #E0E0E0;">
<span class="baseline">
x
<span class="medium-box top"></span>
<span class="large-box bottom"></span>
<span class="extra-large-box bottom"></span>
</span>
</div>
<div style="background-color: #BDBDBD;">
<span class="baseline">
x
<span class="large-box bottom"></span>
<span class="medium-box top"></span>
<span class="extra-large-box bottom"></span>
</span>
</div>
<div style="background-color: #E0E0E0;">
<span class="baseline">
x
<span class="extra-large-box bottom"></span>
<span class="medium-box top"></span>
<span class="large-box bottom"></span>
</span>
</div>
<div style="background-color: #BDBDBD;">
<span class="baseline">
x
<span class="extra-large-box bottom"></span>
<span class="large-box bottom"></span>
<span class="medium-box top"></span>
</span>
</div>
<div style="background-color: #E0E0E0;">
<span class="baseline">
x
<span class="large-box top"></span>
<span class="medium-box bottom"></span>
</span>
</div>
<div style="background-color: #BDBDBD;">
<span class="baseline">
x
<span class="medium-box bottom"></span>
<span class="large-box top"></span>
</span>
</div>
</body>
</html>