blob: b3d93aa3defbb7c759d3f2d14f730f87b7f0a083 [file] [log] [blame]
<!DOCTYPE html>
<!--
| A sufficiently large element, even with a very small line-height, can
| increase the distance between successive baselines by altering the size of
| the content-area.
| This test is based on an example from an explanation of the inner workings
| of the inline formatting model found at
| http://meyerweb.com/eric/css/inline-format.html.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
font-size: 16px;
}
.spacer {
width:240px; background-color:#FFF9C4;
}
</style>
</head>
<body>
<div style="height:50px;" class="spacer"></div>
<div style="line-height: 12px; font-size: 12px;">
x<span style="background-color: #FFEB3B; font-size: 80px;">glx</span>
baseline glx
<span style="vertical-align: top; background-color:#FBC02D;">top glx</span>
</div>
<div style="height:70px;" class="spacer"></div>
<div style="line-height: 12px; font-size: 12px;">
x<span style="background-color: #F57F17">
x<span style="background-color: #FFEB3B; font-size: 80px;">glx</span>
baseline glx
<span style="vertical-align: top; background-color:#FBC02D;">top glx</span></span>
</div>
<div style="height:30px;" class="spacer"></div>
</body>
</html>