| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| if (window.internals) |
| internals.settings.setAcceleratedCompositingForFixedPositionEnabled(false); |
| </script> |
| <style> |
| body { |
| font: 16px/1.25 monospace; |
| } |
| |
| #content1 { |
| -webkit-flow-into: flow1; |
| } |
| |
| #content2 { |
| -webkit-flow-into: flow2; |
| } |
| |
| .region1 { |
| border: thick solid blue; |
| -webkit-flow-from: flow1; |
| } |
| |
| .region2 { |
| border: thick solid green; |
| -webkit-flow-from: flow2; |
| } |
| |
| #region1 { |
| width: 250px; |
| position: absolute; |
| top: 200px; |
| left: 50px; |
| } |
| |
| #region2 { |
| width: 250px; |
| position: fixed; |
| top: 350px; |
| left: 50px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=111176">[CSS Regions] position: fixed is computed relative to the first region, not the viewport</a>.</p> |
| <p>Test that a fixed positioned region inside a nested flow is laid out properly.</p> |
| <p>On success, you should see pass below and 2 regions: a blue border and below a green border region.</p> |
| <div class="content" id="content1"> |
| Content in first flow. |
| <div class="region2" id="region2"></div> |
| Content in first flow. |
| </div> |
| <div class="content" id="content2">Content in second flow.</div> |
| <div class="region1" id="region1"></div> |
| </body> |
| </html> |
