| <!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> |