| <!doctype html> |
| <html style="font: 16px/1.25 monospace;"> |
| <head> |
| <style> |
| #content { |
| -webkit-flow-into: flow; |
| } |
| |
| .no_overflow { margin: 2px; -webkit-transform: rotate(-90deg); } |
| |
| #region1, #region2 { -webkit-flow-from: flow; height: 100px; } |
| #region1 { border: 5px solid green; width: 150px; } |
| #region2 { border: 5px solid blue; width: 150px; } |
| |
| .container { |
| border: thin solid red; |
| overflow: auto; |
| float: left; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test that rotations generate correct fragment layout overflow.</p> |
| <p>On success, the both regions must generate vertical and horizontal scrollbars in their containers.</p> |
| <div id="content"> |
| <p class="no_overflow">Linetext1</p> |
| <p class="no_overflow">Linetext2</p> |
| <p class="no_overflow">Linetext3</p> |
| <p class="no_overflow" style="-webkit-region-break-after: always; visibility: hidden;">Linetext4</p> |
| <p class="no_overflow">LineText5</p> |
| <p class="no_overflow">Linetext6</p> |
| <p class="no_overflow">Linetext7</p> |
| <p class="no_overflow" style="visibility: hidden;">Linetext8</p> |
| </div> |
| <div class="container"> |
| <div class="region" id="region1"></div> |
| </div> |
| <div class="container"> |
| <div class="region" id="region2"></div> |
| </div> |
| </body> |
| </html> |
