97 lines
2.0 KiB
HTML
97 lines
2.0 KiB
HTML
<!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>
|