blob: 617063dca0ec2ac5f71b1a940b98abbd4d29dd81 [file] [log] [blame]
<!DOCTYPE html>
<html>
<!--
| This has some vertical alignment tests with combinations of a larger fixed
| size box with a smaller box in the same linebox.
-->
<head>
<style>
body {
font-family: Roboto;
margin: 0px;
font-size: 8px;
color: #FFFFFF;
}
div {
display: inline-block;
}
div.block {
display: block;
}
div.bluebg {
background: #2020F0;
}
div.greybg_20 {
background: #202020;
}
div.greybg_40 {
background: #404040;
}
div.greybg_80 {
background: #808080;
}
div.greybg_B0 {
background: #B0B0B0;
}
div.halfheightbox {
width : 8px;
height : 8px;
}
div.fullheightbox {
width : 8px;
height : 16px;
}
div.plusheightbox {
width : 8px;
height : 20px;
}
div.baseline {
vertical-align: baseline;
}
div.middle {
vertical-align: middle;
}
div.top {
vertical-align: top;
}
div.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="block greybg_B0">x
<div class="greybg_40 fullheightbox middle">x</div>
<div class="greybg_40 middle">x</div>
</div>
<div class="block bluebg">x
<div class="greybg_40 fullheightbox middle">x</div>
<div class="greybg_40 halfheightbox middle"></div>
</div>
<div class="block greybg_B0">x
<div class="greybg_40 fullheightbox middle">x</div>
<div class="greybg_40 halfheightbox middle">x</div>
</div>
<div class="block bluebg">x
<div class="greybg_80 plusheightbox top">x</div>
<div class="greybg_80 top">x</div>
</div>
<div class="block greybg_B0">x
<div class="greybg_40 plusheightbox bottom">x</div>
<div class="greybg_40 bottom">x</div>
</div>
<div class="block bluebg">x
<div class="greybg_20 fullheightbox baseline"></div>
<div class="greybg_20 baseline">x</div>
</div>
<div class="block greybg_B0">x
<div class="greybg_20 fullheightbox baseline">x</div>
<div class="greybg_20 baseline">x</div>
</div>
<div class="block bluebg">x
<div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
<div class="greybg_40 plusheightbox bottom">x</div>
<div class="greybg_20 baseline">x</div>
</div>
<div class="block greybg_B0">x
<div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
<div class="greybg_80 plusheightbox top">x</div>
<div class="greybg_20 baseline">x</div>
</div>
<div class="block bluebg">x
<div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
<div class="greybg_80 plusheightbox top">x</div>
<div class="greybg_40 plusheightbox bottom">x</div>
<div class="greybg_20 baseline">x</div>
</div>
<div class="block greybg_B0">x
<div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
<div class="greybg_80 plusheightbox top">x</div><div class="greybg_80 top">x</div>
<div class="greybg_40 plusheightbox bottom">x</div><div class="greybg_40 bottom">x</div>
<div class="greybg_20 fullheightbox baseline">x</div><div class="greybg_20 baseline">x</div>
<div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
</div>
<div class="block bluebg">x
<div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
<div class="greybg_80 plusheightbox top">x</div><div class="greybg_80 top">x</div>
<div class="greybg_40 plusheightbox bottom">x</div><div class="greybg_40 bottom">x</div>
<div class="greybg_20 baseline">x</div>
<div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
</div>
<div class="block greybg_B0">x
<div class="greybg_80 plusheightbox top">x</div><div class="greybg_80 top">x</div>
<div class="greybg_40 plusheightbox bottom">x</div><div class="greybg_40 bottom">x</div>
<div class="greybg_20 fullheightbox baseline">x</div><div class="greybg_20 baseline">x</div>
<div class="greybg_40 fullheightbox middle">x</div><div class="greybg_40 middle">x</div>
</div>
</body>
</html>