| <!DOCTYPE html> |
| <html> |
| <style> |
| .grid { |
| background-color: grey; |
| } |
| |
| .regularGrid { |
| height: 100px; |
| } |
| |
| .outOfFlowGrid { |
| width: 200px; |
| height: 100px; |
| } |
| |
| .firstRowFirstColumn { |
| position: absolute; |
| background-color: blue; |
| width: 100px; |
| height: 40px; |
| top: 0px; |
| } |
| |
| .firstRowSecondColumn { |
| position: absolute; |
| background-color: lime; |
| width: 50px; |
| height: 40px; |
| left: 50%; |
| } |
| |
| .secondRowFirstColumn { |
| position: absolute; |
| background-color: purple; |
| width: 40px; |
| height: 40px; |
| top: 50px; |
| } |
| |
| .secondRowSecondColumn { |
| position: absolute; |
| background-color: orange; |
| width: 30px; |
| height: 40px; |
| top: 50px; |
| left: 50%; |
| } |
| |
| .testContainer { |
| position: relative; |
| } |
| </style> |
| <body> |
| |
| <p>This test checks that the shrink-to-fit behavior is applied to out-of-flow positioned elements.</p> |
| |
| <div class="testContainer"> |
| <div class="grid regularGrid"> |
| <div class="firstRowFirstColumn"></div> |
| <div class="firstRowSecondColumn"></div> |
| <div class="secondRowFirstColumn"></div> |
| <div class="secondRowSecondColumn"></div> |
| </div> |
| </div> |
| |
| <div class="testContainer" style="width: 200px;"> |
| <div class="grid outOfFlowGrid"> |
| <div class="one firstRowFirstColumn"></div> |
| <div class="two firstRowSecondColumn"></div> |
| <div class="three secondRowFirstColumn"></div> |
| <div class="four secondRowSecondColumn"></div> |
| </div> |
| </div> |
| |
| <div class="testContainer" style="width: 200px;"> |
| <div class="grid outOfFlowGrid"> |
| <div class="firstRowFirstColumn"></div> |
| <div class="firstRowSecondColumn"></div> |
| <div class="secondRowFirstColumn"></div> |
| <div class="secondRowSecondColumn"></div> |
| </div> |
| </div> |
| |
| <div class="testContainer" style="width: 200px;"> |
| <div class="grid outOfFlowGrid"> |
| <div class="firstRowFirstColumn"></div> |
| <div class="firstRowSecondColumn"></div> |
| <div class="secondRowFirstColumn"></div> |
| <div class="secondRowSecondColumn"></div> |
| </div> |
| </div> |
| |
| |
| </body> |
| </html> |
