| <!doctype html> |
| <html> |
| <head> |
| <style> |
| body { font: 16px/1.25 monospace; } |
| |
| #region1, #region2 { border: 1px solid black; } |
| |
| #region1 { |
| width: 412px; |
| height: 210px; |
| } |
| |
| #region2 { |
| width: 300px; |
| height: 150px; |
| } |
| |
| #content { |
| padding: 5px; |
| } |
| |
| #first-box { |
| border: 1px solid blue; |
| height:200px; |
| } |
| |
| #second-box { |
| margin: auto; |
| border: 1px solid green; |
| border-bottom: 0px; |
| width: 75%; |
| height: 203px; |
| } |
| |
| #second-box-2 { |
| border: 1px solid green; |
| border-top: 0px; |
| width: 300px; |
| margin-left: 55px; |
| } |
| |
| #p1, #p2, #p3 { |
| margin: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <p>In the test case below, the green block's width should not vary and should use the first region to determine its width. It is overflowing downwards out of the blue block, and so the portion that overflows should continue to use the blue block's containing block width. The blue block does not exist in region two, so using some hypothetical made-up width is incorrect. The overflow should be spilling out of the top of region one and be painted in region two.</p> |
| <div id="region1"> |
| <div id="content"> |
| <div id="first-box"> |
| <div id="second-box"> |
| <p id="p1">These lines should all fit to the width of the block in the first region and spill out of the bottom of the first region.</p> |
| <p id="p2">These lines should all fit to the width of the block in the first region and spill out of the bottom of the first region.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div id="region2"> |
| <div id="second-box-2"> |
| <p id="p3">These lines should all fit to the width of the block in the first region and spill out of the bottom of the first region.</p> |
| </div> |
| </div> |
| </body> |
| </html> |
