Google Git
Sign in
webkit / WebKit / 9e9f82894faa7708e8af1f05e9d485cbe8db52f4 / . / LayoutTests / fast / css-grid-layout / nested-grid-expected.html
blob: 969c6cbf9d68d3fb35355e1efae929d0983f75ee [file] [log] [blame]
<!DOCTYPE html>
<style>
.outerGrid {
width: 200px;
height: 50px;
border: 5px solid;
background: magenta;
margin-bottom: 10px;
}
.innerGrid {
background: gray;
}
.gridItem {
background: cyan;
font: 10px/1 Ahem;
}
.floatLeft {
float: left;
width: 250px;
}
</style>
<p>This test checks that percentage rows are properly resolved for a grid container that is a grid item.</p>
<div class="floatLeft">
<div class="outerGrid">
<div class="innerGrid" style="height: 100%">
<div class="gridItem" style="height: 50%"></div>
</div>
</div>
<div class="outerGrid">
<div class="innerGrid">
<div class="gridItem">X X<br>XX</div>
</div>
</div>
<div class="outerGrid">
<div class="innerGrid" style="height: calc(100% * (2/3))">
<div class="gridItem" style="height: 50%"></div>
</div>
</div>
<div class="outerGrid">
<div class="innerGrid">
<div class="gridItem">X X<br>XX</div>
</div>
</div>
</div>
<div class="floatLeft">
<div class="outerGrid">
<div class="innerGrid" style="height: 75%">
<div class="gridItem" style="height: 75%"></div>
</div>
</div>
<div class="outerGrid">
<div class="innerGrid" style="height: calc(20px * (4/3))">
<div class="gridItem" style="height: 20px">X X<br>XX</div>
</div>
</div>
<div class="outerGrid">
<div class="innerGrid" style="height: 100%;">
<div class="gridItem" style="height: 25%"></div>
</div>
</div>
<div class="outerGrid">
<div class="innerGrid" style="height: 20px;">
<div class="gridItem" style="height: 75%">X X<br>XX</div>
</div>
</div>
</div>