| <!doctype html> |
| <html style="font: 16px/1.25 monospace;"> |
| <head> |
| <style> |
| .content { |
| font-family: Ahem; |
| font-size: 12px; |
| } |
| .content1 { |
| -webkit-flow-into: flow1; |
| } |
| |
| .content2 { |
| -webkit-flow-into: flow2; |
| } |
| |
| .content3 { |
| -webkit-flow-into: flow3; |
| } |
| |
| .no_overflow { margin: 2px; } |
| |
| .region1 { border: 1px solid green;} |
| .region2 { border: 1px solid blue; } |
| .region3 { border: 1px solid yellow; } |
| |
| .region1 { |
| -webkit-flow-from: flow1; |
| } |
| |
| .region2 { |
| -webkit-flow-from: flow2; |
| } |
| |
| .region3 { |
| -webkit-flow-from: flow3; |
| } |
| |
| .region { |
| width: 100px; |
| height: 100px; |
| width: 100%; |
| box-sizing: border-box; |
| } |
| |
| #container { |
| position: relative; |
| border: thin solid red; |
| overflow: auto; |
| height: 200px; |
| width: 160px; |
| float: left; |
| overflow-x: hidden; |
| } |
| |
| .region21 { |
| height: 2em; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <p>Test that the regions relayout correctly when the flow thread overflow generates scrollbars.</p> |
| <p>On success, the first two containers should have scrollbars. The scrollbar in the first container shrinks the first blue region and the content moved to the next region overflows the second container generating a scrollbar. Because the layout algorithm is only 2-step, the yellow regions don't resize</p> |
| <div class="content content1"> |
| <p class="no_overflow">Linetext1</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| </div> |
| <div class="content content2"> |
| <p class="no_overflow break">Linetext1 ZZ</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| </div> |
| <div class="content content3"> |
| <p class="no_overflow break">Linetext1 ZZ</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| <p class="no_overflow">Linetext2 Linetext3</p> |
| </div> |
| <div id="container"> |
| <div class="region21 region2 region"></div> |
| <div class="region1 region"></div> |
| </div> |
| <div id="container"> |
| <div class="region21 region3 region"></div> |
| <div class="region2 region"></div> |
| </div> |
| <div id="container"> |
| <div class="region3 region"></div> |
| </div> |
| </body> |
| </html> |
