| <!DOCTYPE html> |
| <!-- |
| | This layout test is an excerpt from Performance Spike. The shrink-to-fit |
| | width of the "duration" element used to be calculated incorrectly because |
| | "text-align: center" made text appear in the middle of containing block, |
| | and the right margin edge of the last child (the text box, in this case) |
| | used to defined the shrink-to-fit width of the line box. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| font-family: Roboto; |
| font-size: 20px; |
| } |
| .tile { |
| position: absolute; |
| width: 200px; |
| } |
| .duration { |
| position: absolute; |
| top: 9em; |
| right: .4em; |
| height: 1em; |
| background-color: rgba(0, 0, 0, 0.5); |
| color: #fff; |
| text-align: center; |
| padding: .2em .5em .5em .5em; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="tile"> |
| <div class="duration">10:42</div> |
| </div> |
| </body> |
| </html> |