| <!doctype html> |
| <html> |
| <!-- |
| Testing that regions become layers as required by the content that display in those regions. |
| In this case the region is also a float and we are testing that the correct enclosing |
| layer will paint the region as needed. In this case box1 is responsible of painting |
| the first region, even though the whole element fits inside box2. |
| There should be two boxes: one taller gray box and one orange box. The orange box has a black border. |
| The test fails if there's any red on screen. |
| --> |
| <head> |
| <link rel="stylesheet" href="../resources/region-style.css"> |
| <style> |
| .redBox |
| { |
| position: relative; |
| } |
| .dummyFloat |
| { |
| float: left; |
| width: 1px; |
| height: 10px; |
| } |
| .box1 |
| { |
| width: 52px; |
| height: 1px; |
| } |
| .box2 |
| { |
| /* The following border will be painted on top of the first region */ |
| border-left: gray 52px solid; |
| /* Making box2 have its own layer. */ |
| position: relative; |
| width: 200px; |
| height: 61px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="flowArticle"> |
| <div class="redBox"></div> |
| <div class="orangeBox"></div> |
| </div> |
| |
| <div class="box1"> |
| <div class="dummyFloat"></div> |
| <!-- The following element will get its own layer. --> |
| <div class="regionArticle borderBox"></div> |
| </div> |
| |
| <div class="box2"> |
| <div class="regionArticle borderBox"></div> |
| </div> |
| </body> |
| </html> |
