| <!-- this test should display two identical yellow squares --> |
| <style type="text/css"> |
| |
| h1 { |
| outline: 5px solid yellow; |
| margin-top: 0; |
| } |
| |
| #source{ |
| -webkit-flow-into: body; |
| } |
| |
| #source_clipped { |
| -webkit-flow-into: body_clipped; |
| } |
| |
| #region{ |
| -webkit-flow-from: body; |
| border: 1px solid red; |
| } |
| |
| #region_clipped { |
| -webkit-flow-from: body_clipped; |
| border: 1px solid red; |
| overflow: hidden; |
| } |
| div { |
| width:200px; |
| height:100px; |
| margin-bottom: 20px; |
| } |
| </style> |
| <body> |
| <div id="source" class="source"> |
| <h1> </h1> |
| </div> |
| |
| <div id="source_clipped" class="source"> |
| <h1> </h1> |
| </div> |
| |
| <div id="region"></div> |
| <div id="region_clipped"></div> |
| |
| <div> |
| <h1> </h1> |
| </div> |
| </body> |
