| <!DOCTYPE html> |
| <html> |
| <!-- |
| | This shows, with a large font that a middle block after the (baseline) text |
| | is positioned incorrectly, and sometimes influences the line box height |
| --> |
| <head> |
| <style> |
| body { |
| font-family: Roboto; |
| margin: 0px; |
| font-size: 1.5em; |
| } |
| |
| div { |
| display: inline-block; |
| } |
| div.block { |
| display: block; |
| } |
| |
| div.bluebg { |
| background: #2020F0; |
| } |
| |
| div.greybg_20 { |
| background: #202020; |
| color: #FFFFFF; |
| } |
| div.greybg_40 { |
| background: #404040; |
| } |
| div.greybg_80 { |
| background: #808080; |
| } |
| div.greybg_B0 { |
| background: #B0B0B0; |
| } |
| div.greybg_C0 { |
| background: #C0C0C0; |
| } |
| div.greybg_D0 { |
| background: #D0D0D0; |
| } |
| div.greybg_E0 { |
| background: #E0E0E0; |
| } |
| |
| div.halfheightbox { |
| width : 8px; |
| height : 8px; |
| } |
| div.fullheightbox { |
| width : 8px; |
| height : 16px; |
| } |
| |
| |
| 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">jx<div class="greybg_40 fullheightbox middle"></div><div class="greybg_40 halfheightbox middle"></div></div> |
| <div class="block greybg_C0">jx<div class="greybg_80 fullheightbox top"></div><div class="greybg_80 halfheightbox top"></div></div> |
| <div class="block greybg_D0">jx<div class="greybg_80 fullheightbox bottom"></div><div class="greybg_80 halfheightbox bottom"></div></div> |
| <div class="block greybg_E0">jx<div class="greybg_20 fullheightbox baseline"></div><div class="greybg_20 halfheightbox baseline"></div></div> |
| <div class="block greybg_B0">jx |
| <div class="greybg_40 fullheightbox middle"></div> |
| <div class="greybg_20 fullheightbox baseline"></div> |
| </div> |
| <div class="block bluebg">jx |
| <div class="greybg_40 fullheightbox middle"></div><div class="greybg_40 halfheightbox middle"></div> |
| <div class="greybg_80 fullheightbox top"></div><div class="greybg_80 halfheightbox top"></div> |
| <div class="greybg_80 fullheightbox bottom"></div><div class="greybg_80 halfheightbox bottom"></div> |
| <div class="greybg_20 fullheightbox baseline"></div><div class="greybg_20 halfheightbox baseline"></div> |
| </div> |
| <div class="block greybg_B0">jx |
| <div class="greybg_20 fullheightbox baseline"></div> |
| <div class="greybg_40 fullheightbox middle"></div> |
| </div> |
| <div class="block bluebg">jx |
| <div class="greybg_80 fullheightbox top"></div><div class="greybg_80 halfheightbox top"></div> |
| <div class="greybg_80 fullheightbox bottom"></div><div class="greybg_80 halfheightbox bottom"></div> |
| <div class="greybg_20 fullheightbox baseline"></div><div class="greybg_20 halfheightbox baseline"></div> |
| <div class="greybg_40 fullheightbox middle"></div><div class="greybg_40 halfheightbox middle"></div> |
| </div> |
| <div class="block greybg_B0">jx |
| <div class="greybg_20 halfheightbox baseline"></div></div> |
| </div> |
| </body> |
| </html> |