| <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 { |
| width: 250px; |
| height: 110px; |
| background-color: Yellow; |
| padding: 2px 3px 4px 5px; |
| margin: 3px 4px 5px 6px; |
| } |
| |
| #causesTheRegionToBeComposited { |
| -webkit-transform: translateZ(1px) translateY(-140px) translateX(400px); |
| width: 100px; |
| height: 40px; |
| background-color: Lime; |
| padding: 4px 5px 6px 7px; |
| margin: 5px 6px 7px 8px; |
| } |
| |
| #region { |
| border: double 3px Green; |
| outline: double 5px Blue; |
| padding: 6px 7px 8px 9px; |
| margin: 27px 18px 29px 20px; |
| } |
| |
| #outterRegion { |
| border: double 3px Green; |
| outline: double 5px Blue; |
| padding: 7px 8px 9px 10px; |
| margin: 8px 9px 10px 11px; |
| } |
| |
| .forcedStackingContext { |
| position: relative; |
| z-index: 1; |
| } |
| |
| .boxShadow { |
| box-shadow: 2px 2px 15px Black; |
| margin: 35px; /* Removes overlapping of box-shadows which resulted in flaky results. */ |
| } |
| </style> |
| </head> |
| <body> |
| some text 1. |
| <div id="outterRegion" class="forcedStackingContext boxShadow"> |
| <div class="outterFlow content boxShadow"></div> |
| <div id="region" class="forcedStackingContext boxShadow"> |
| <div class="content"> |
| some text 2. |
| <div id="causesTheRegionToBeComposited" class="boxShadow"> |
| some text 3. |
| </div> |
| some text 4. |
| </div> |
| </div> |
| <div class="content boxShadow"></div> |
| </div> |
| some text 5. |
| <p>RenderRegions may be composited RenderLayers inside another flow thread.</p> |
| </body> |
| </html> |
