| <html> |
| <head> |
| <style> |
| div.flexbox { |
| height: 80px; |
| width: 80px; |
| background-color: yellow; |
| display: -moz-box; |
| display: -webkit-box; |
| display: box; |
| -moz-box-align: center; |
| -webkit-box-align: center; |
| box-align: center; |
| } |
| |
| div.horizontal { |
| -moz-box-orient: horizontal; |
| -webkit-box-orient: horizontal; |
| box-orient: horizontal; |
| } |
| |
| div.vertical { |
| -moz-box-orient: vertical; |
| -webkit-box-orient: vertical; |
| box-orient: vertical; |
| } |
| |
| div.bigbox { |
| height: 98px; |
| width: 98px; |
| border: 1px solid black; |
| margin-left: -10px; |
| margin-top: -10px; |
| } |
| </style> |
| </head> |
| <body> |
| <p> |
| This is a test for regressions against <i><a href="https://bugs.webkit.org/show_bug.cgi?id=8056">http://bugzilla.opendarwin.org/show_bug.cgi?id=8056</a> |
| Flexible boxes do not repaint their top, left and children's overflows</i>. |
| </p> |
| <hr> |
| <div style="padding:10px;"> |
| <div class="flexbox horizontal"> |
| <div class="bigbox" style="white-space: pre;">Lorem ipsum dolor sit amet.</div> |
| </div> |
| </div> |
| <div style="padding:10px; margin-top: 20px;"> |
| <div class="flexbox horizontal"> |
| <div class="bigbox"></div> |
| </div> |
| </div> |
| <div style="padding:10px; margin-top: 20px;"> |
| <div class="flexbox vertical"> |
| <div class="bigbox"></div> |
| </div> |
| </div> |
| <div style="padding:10px; margin-top: 20px; margin-bottom: 40px;"> |
| <div class="flexbox vertical"> |
| <div class="bigbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam et ipsum. Nam consectetuer mi eget velit.</div> |
| </div> |
| </div> |
| </body> |
| </html> |
