| <!doctype html> |
| |
| <style> |
| #content { |
| text-align: justify; |
| padding: 5px; |
| margin-top: -105px; |
| } |
| |
| #first-box { |
| border: 1px solid blue; |
| margin-top:100px; |
| } |
| |
| #second-box { |
| margin:-100px auto 0 auto; |
| border: 1px solid green; |
| width:75% |
| } |
| |
| #region1, #region2 { |
| border: 1px solid red; |
| } |
| |
| #region1 { |
| width: 300px; |
| height: 100px; |
| } |
| |
| #region2 { |
| width: 400px; |
| height: 200px; |
| margin-left: 300px; |
| margin-top: 50px; |
| } |
| </style> |
| |
| <body> |
| |
| <p>In the test case below, the green block's width should not vary and should use the second region to determine its width. |
| It is overflowing upwards 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 one, so using some hypothetical made-up width is incorrect. |
| The overflow should be spilling out of the top of region two and be painted in region one. |
| |
| |
| |
| <div id="container"> |
| <div id="region1"></div> |
| <div id="region2"> |
| <div id="content"> |
| <div id="first-box"> |
| <div id="second-box"> |
| <p>These lines should all fit to the width of the block in the second region and spill out of the top of the second |
| region.</P> |
| <p>These lines should all fit to the width of the block in the second region and spill out of the top of the second |
| region.</P> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
