260 lines
16 KiB
HTML
260 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<link href="resources/grid-alignment.css" rel="stylesheet">
|
|
<style type="text/css">
|
|
|
|
.gridAreas {
|
|
grid-template-areas: ". a a"
|
|
"c a a"
|
|
". . d";
|
|
}
|
|
|
|
.gridAreasSpecial {
|
|
grid-template-areas: ". a-start a-start"
|
|
"c a-end a-end"
|
|
". . d";
|
|
}
|
|
|
|
.gridNoLineNames {
|
|
grid-template-columns: 50px 100px 200px;
|
|
grid-template-rows: 50px 100px 200px;
|
|
}
|
|
|
|
.gridUniqueNames {
|
|
grid-template-columns: [a] 50px [b b-start] 100px [c -start] 200px [d];
|
|
grid-template-rows: [e] 50px [f -end] 100px [g g-start] 200px [h];
|
|
}
|
|
|
|
.gridWithNamedLineBeforeGridArea {
|
|
grid-template-columns: [a-start c-start] 50px [d-start] 100px 200px;
|
|
grid-template-rows: [c-start] 50px [d-start] 100px 200px;
|
|
}
|
|
|
|
.gridWithNamedLineAfterGridArea {
|
|
grid-template-columns: 50px 100px [a-start] 200px;
|
|
grid-template-rows: 50px 100px [c-start] 200px;
|
|
}
|
|
|
|
.gridWithEndLines {
|
|
grid-template-columns: 50px 100px [a-end] 200px [c-end];
|
|
grid-template-rows: 50px [c-end] 100px [d-end] 200px;
|
|
}
|
|
|
|
.gridRepeatedNames {
|
|
grid-template-columns: [d-start] 50px [d-start] 100px [d-start] 200px;
|
|
grid-template-rows: 50px [c-end] 100px [c-end] 200px [c-end];
|
|
}
|
|
|
|
.gridImplicitArea {
|
|
grid-template-columns: 50px [z-start] 100px [z-end] 200px;
|
|
grid-template-rows: 50px [z-start] 100px 200px [z-end];
|
|
}
|
|
|
|
</style>
|
|
<script src="../../resources/check-layout.js"></script>
|
|
</head>
|
|
<body onload="checkLayout('.grid')">
|
|
|
|
<p>This test checks that we resolve named grid line per the specification.</p>
|
|
|
|
<!-- Check positioning using unique grid-line names -->
|
|
<div style="position: relative">
|
|
<div class="grid gridUniqueNames">
|
|
<div class="sizedToGridArea" style="grid-column: b;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: e;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-column: b-start;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="sizedToGridArea" style="grid-row: g-start;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridUniqueNames">
|
|
<div class="sizedToGridArea" style="grid-column: b / d;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: g / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: c; grid-row: f;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check positioning using unique grid-line names mixed with integers -->
|
|
<div style="position: relative">
|
|
<div class="grid gridUniqueNames">
|
|
<div class="sizedToGridArea" style="grid-column: b / 4;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: 3 / h;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: 2; grid-row: g;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a; grid-row: 2;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check that without named gridAreas there are no implicit grid-line names defined -->
|
|
<div style="position: relative">
|
|
<div class="grid gridUniqueNames justifyContentStart">
|
|
<div class="sizedToGridArea" style="grid-column: c-start;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: f-start;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
|
|
<div class="sizedToGridArea" style="grid-column: c-start; grid-row: f-end" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
|
|
<div class="sizedToGridArea" style="grid-column: b-end; grid-row: h-start" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check that gridArea's implicit names are well defined -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridNoLineNames">
|
|
<div class="sizedToGridArea" style="grid-column: a-start; grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: d-start; grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check positioning using grid areas -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridNoLineNames gridAutoFlowRowDense">
|
|
<div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridNoLineNames">
|
|
<div class="sizedToGridArea" style="grid-column: a;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridWithNamedLineAfterGridArea gridAutoFlowRowDense">
|
|
<div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridWithNamedLineAfterGridArea">
|
|
<div class="sizedToGridArea" style="grid-column-start: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row-start: c-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridWithNamedLineAfterGridArea">
|
|
<div class="sizedToGridArea" style="grid-column: a;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Use explicitly named grid lines if they're defined before the grid area -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridWithNamedLineBeforeGridArea">
|
|
<div class="sizedToGridArea" style="grid-column: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
|
|
<div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
|
|
<div class="sizedToGridArea" style="grid-row: c;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart">
|
|
<div class="sizedToGridArea" style="grid-column-start: d-start;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row-start: d-start;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart">
|
|
<div class="sizedToGridArea" style="grid-column: a;" data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="350" data-offset-y="50" data-expected-width="0" data-expected-height="300"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check that a "-start" ident in a end column or a "-end" ident in a start column is not treated as a implicit grid line of a grid area -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridNoLineNames">
|
|
<div class="sizedToGridArea" style="grid-column: a / a-start; grid-row: d-start;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: d / d-start; grid-row: c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
|
|
<div class="sizedToGridArea" style="grid-column: c; grid-row: a / a-start;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-column: d; grid-row: c / c-start;" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check that we propertly resolve explicit "-end" lines inside grid areas -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridWithEndLines">
|
|
<div class="sizedToGridArea" style="grid-column: a" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a; grid-row: c" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check that we always pick the first definition when multiple grid lines have the same name -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridRepeatedNames">
|
|
<div class="sizedToGridArea" style="grid-column: d; grid-row: c" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
|
|
<div class="sizedToGridArea" style="grid-column: d-start / d-end; grid-row: c-start / c-end" data-offset-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"></div>
|
|
<div class="sizedToGridArea" style="grid-column: c; grid-row: d" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check behavior with areas named *-start or *-end -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreasSpecial gridNoLineNames justifyContentStart">
|
|
<div class="sizedToGridArea" style="grid-column: a;" data-offset-x="350" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="0"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridAreasSpecial gridNoLineNames">
|
|
<div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a-start; grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridAreasSpecial gridWithNamedLineBeforeGridArea">
|
|
<div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: a-end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a-start; grid-row: a-end;" data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div class="grid gridAreasSpecial gridWithNamedLineAfterGridArea">
|
|
<div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
|
|
<div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" data-offset-x="50" data-offset-y="150" data-expected-width="300" data-expected-height="200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check behavior with lines named *-start or *-end -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreasSpecial gridUniqueNames">
|
|
<div class="sizedToGridArea" style="grid-column: -start;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: -end;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
|
|
<div class="sizedToGridArea" style="grid-column-end: -start; grid-row-start: -end;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check that <custom-ident>-{start|end} named lines define implicit named areas -->
|
|
<div style="position: relative">
|
|
<div class="grid gridAreas gridImplicitArea">
|
|
<div class="sizedToGridArea" style="grid-column: z;" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea" style="grid-row: z;" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="300"></div>
|
|
<div class="sizedToGridArea" style="grid-column-end: z; grid-row-start: z;" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|