109 lines
2.9 KiB
HTML
109 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<style>
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.grid {
|
|
position: absolute;
|
|
font: 10px/1 Ahem;
|
|
}
|
|
|
|
.grid > div {
|
|
min-width: 0px;
|
|
}
|
|
|
|
.topBottomLeftRight {
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.oneRowOneColumn {
|
|
grid-template-rows: 100%;
|
|
grid-template-columns: 100%;
|
|
}
|
|
|
|
.twoRowsTwoColumns {
|
|
grid-template-rows: 25% 75%;
|
|
grid-template-columns: 60% 40%;
|
|
}
|
|
|
|
</style>
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
<script src="../../resources/check-layout-th.js"></script>
|
|
<body onload="checkLayout('.grid')">
|
|
<div id="log"></div>
|
|
|
|
<p>This test checks that percentage tracks are properly resolved for absolute positioned grid containers.</p>
|
|
|
|
|
|
<div class="wrapper">
|
|
<div class="grid oneRowOneColumn">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10">
|
|
XXX
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid oneRowOneColumn topBottomLeftRight">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">
|
|
XXX
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid twoRowsTwoColumns">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="36" data-expected-height="5">
|
|
XXX
|
|
</div>
|
|
<div class="firstRowSecondColumn"
|
|
data-offset-x="36" data-offset-y="0" data-expected-width="24" data-expected-height="5">
|
|
XXX
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="5" data-expected-width="36" data-expected-height="15">
|
|
XXX
|
|
</div>
|
|
<div class="secondRowSecondColumn"
|
|
data-offset-x="36" data-offset-y="5" data-expected-width="24" data-expected-height="15">
|
|
XXX
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="grid twoRowsTwoColumns topBottomLeftRight">
|
|
<div class="firstRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25">
|
|
XXX
|
|
</div>
|
|
<div class="firstRowSecondColumn"
|
|
data-offset-x="60" data-offset-y="0" data-expected-width="40" data-expected-height="25">
|
|
XXX
|
|
</div>
|
|
<div class="secondRowFirstColumn"
|
|
data-offset-x="0" data-offset-y="25" data-expected-width="60" data-expected-height="75">
|
|
XXX
|
|
</div>
|
|
<div class="secondRowSecondColumn"
|
|
data-offset-x="60" data-offset-y="25" data-expected-width="40" data-expected-height="75">
|
|
XXX
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|