| <html> |
| <head> |
| <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title> |
| <style> |
| html { |
| -webkit-font-smoothing: none; |
| } |
| |
| .content { |
| -webkit-flow-into: flow; |
| width: 150px; |
| height: 100px; |
| background-color: Yellow; |
| } |
| |
| #causesTheRegionToBeComposited { |
| -webkit-transform: translateZ(1px); |
| width: 100px; |
| height: 40px; |
| background-color: Lime; |
| } |
| |
| .movesTheLayerToNextRegion { |
| height: 225px; |
| } |
| |
| .region { |
| -webkit-flow-from: flow; |
| height: 230px; |
| border:solid 1px #888; |
| } |
| </style> |
| </head> |
| <body> |
| some text 1. |
| |
| <div class="content">goes in the 1st region.</div> |
| |
| <div class="content"> |
| some text 2. |
| <div id="causesTheRegionToBeComposited"> |
| some text 3. |
| </div> |
| some text 4. |
| <div>some text.</div> |
| <div>some text.</div> |
| <div>some text.</div> |
| <div>some text.</div> |
| </div> |
| |
| <div class="region" id="r1"></div> |
| |
| some text. |
| |
| <div class="region" id="r2"></div> |
| some text 5. |
| |
| <p>If we have layers that moved from one region to another, we trigger a composited layers rebuild to make sure that the regions will collect the right layers.</p> |
| |
| <script> |
| document.body.offsetTop; // do the layout. |
| document.querySelector("body .content:first-child").className = "content movesTheLayerToNextRegion"; |
| </script> |
| </body> |
| </html> |
