| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #region1 { -webkit-flow-from: flow; position: absolute; top: 150px; left: 100px; width: 100px; height: 100px; } |
| #content1 { -webkit-flow-into: flow; display: inline-block; background-color: red; width: 100px; height: 250px; } |
| |
| #inside1 { display: inline-block; background-color: orange; width: 100px; height: 250px;} |
| #inside2 { display: inline-block; background-color: green; width: 100px; height: 200px; } |
| #inside3 { display: inline-block; background-color: blue; width: 100px; height: 150px; } |
| </style> |
| </head> |
| <body> |
| <p>Test that an inline block with inline block children is correctly displayed in a region.</p> |
| <p>On success you should see a blue rectangle, followed by a green rectangle and an orange rectangle.</p> |
| <p>You should not see any red below.</p> |
| <div id="region1"></div> |
| <div id="content1"> |
| <div id="inside1"> |
| <div id="inside2"> |
| <div id="inside3"></div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
