<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style type="text/css">
.gridAreas {
grid-template-areas: ". a a"
"c a a"
". . 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] 200px [d];
grid-template-rows: [e] 50px [f] 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];
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div style="position: relative">
<div class="grid gridUniqueNames">
<div class="sizedToGridArea" style="grid-column: b;" id="GridUniqueColumnB"></div>
<div class="sizedToGridArea" style="grid-row: e;" id="GridUniqueRowE"></div>
<div class="sizedToGridArea" style="grid-column: b-start;" id="GridUniqueColumnBStart"></div>
<div class="sizedToGridArea" style="grid-row: g-start;" id="GridUniqueRowGStart"></div>
</div>
</div>
<div style="position: relative">
<div class="grid gridUniqueNames">
<div class="sizedToGridArea" style="grid-column: b / d;" id="GridUniqueColumnBD"></div>
<div class="sizedToGridArea" style="grid-row: g / h;" id="GridUniqueRowGH"></div>
<div class="sizedToGridArea" style="grid-column: c; grid-row: f;" id="GridUniqueColumnCRowF"></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;" id="GridUniqueColumnBInteger"></div>
<div class="sizedToGridArea" style="grid-row: 3 / h;" id="GridUniqueRowIntegerH"></div>
<div class="sizedToGridArea" style="grid-column: 2; grid-row: g;" id="GridUniqueColumnIntegerRowG"></div>
<div class="sizedToGridArea" style="grid-column: a; grid-row: 2;" id="GridUniqueColumnARowInteger"></div>
</div>
</div>
<!-- Check that without named gridAreas there are no implicit grid-line names defined -->
<div style="position: relative">
<div class="grid gridUniqueNames">
<div class="sizedToGridArea" style="grid-column: c-start;" id="GridUniqueColumnCStart"></div>
<div class="sizedToGridArea" style="grid-row: f-start;" id="GridUniqueRowFStart"></div>
<div class="sizedToGridArea" style="grid-column: c-start; grid-row: f-end" id="GridUniqueColumnCStartRowFEnd"></div>
<div class="sizedToGridArea" style="grid-column: b-end; grid-row: h-start" id="GridUniqueColumnBEndRowHStart"></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;" id="GridAreasNoNamesColumnAStartRowDStart"></div>
<div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" id="GridAreasNoNamesColumnAStartRowD"></div>
<div class="sizedToGridArea" style="grid-column: d-start; grid-row: c-start;"id="GridAreasNoNamesColumnDStartRowCStart"></div>
</div>
</div>
<!-- Check positioning using grid areas -->
<div style="position: relative">
<div class="grid gridAreas gridNoLineNames">
<div class="sizedToGridArea" style="grid-column: d;" id="GridAreasNoNamesColumnD"></div>
<div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNoNamesRowD"></div>
<div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNoNamesColumnC"></div>
<div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNoNamesRowC"></div>
</div>
</div>
<div style="position: relative">
<div class="grid gridAreas gridNoLineNames">
<div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNoNamesColumnA"></div>
<div class="sizedToGridArea" style="grid-row: a;" id="GridAreasNoNamesRowA"></div>
<div class="sizedToGridArea" style="grid-column: a; grid-row: a;" id="GridAreasNoNamesColumnARowA"></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">
<div class="sizedToGridArea" style="grid-column: d;" id="GridAreasNamedLineAfterColumnD"></div>
<div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNamedLineAfterRowD"></div>
<div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNamedLineAfterColumnC"></div>
<div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNamedLineAfterRowC"></div>
</div>
</div>
<div style="position: relative">
<div class="grid gridAreas gridWithNamedLineAfterGridArea">
<div class="sizedToGridArea" style="grid-column-start: a-start;" id="GridAreasNamedLineAfterColumnStartAStart"></div>
<div class="sizedToGridArea" style="grid-row-start: c-start;" id="GridAreasNamedLineAfterRowStartCStart"></div>
</div>
</div>
<div style="position: relative">
<div class="grid gridAreas gridWithNamedLineAfterGridArea">
<div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNamedLineAfterColumnA"></div>
<div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasNamedLineAfterColumnARowD"></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;" id="GridAreasNamedLineBeforeColumnD"></div>
<div class="sizedToGridArea" style="grid-row: d;" id="GridAreasNamedLineBeforeRowD"></div>
<div class="sizedToGridArea" style="grid-column: c;" id="GridAreasNamedLineBeforeColumnC"></div>
<div class="sizedToGridArea" style="grid-row: c;" id="GridAreasNamedLineBeforeRowC"></div>
</div>
</div>
<div style="position: relative">
<div class="grid gridAreas gridWithNamedLineBeforeGridArea">
<div class="sizedToGridArea" style="grid-column-start: d-start;" id="GridAreasNamedLineBeforeColumnStartDStart"></div>
<div class="sizedToGridArea" style="grid-row-start: d-start;" id="GridAreasNamedLineBeforeRowStartDStart"></div>
</div>
</div>
<div style="position: relative">
<div class="grid gridAreas gridWithNamedLineBeforeGridArea">
<div class="sizedToGridArea" style="grid-column: a;" id="GridAreasNamedLineBeforeColumnA"></div>
<div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasNamedLineBeforeColumnARowD"></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;" id="GridAreasNoNamesColumnAAStartRowDStart"></div>
<div class="sizedToGridArea" style="grid-column: d / d-start; grid-row: c-start;" id="GridAreasNoNamesColumnDDStartRowCStart"></div>
<div class="sizedToGridArea" style="grid-column: c; grid-row: a / a-start;" id="GridAreasNoNamesColumnCRowAAStart"></div>
<div class="sizedToGridArea" style="grid-column: d; grid-row: c / c-start;" id="GridAreasNoNamesColumnDRowCCStart"></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" id="GridAreasEnd"></div>
<div class="sizedToGridArea" style="grid-column: a; grid-row: c" id="GridAreasEndColumnARowC"></div>
<div class="sizedToGridArea" style="grid-row: d;" id="GridAreasEndRowD"></div>
<div class="sizedToGridArea" style="grid-column: a; grid-row: d;" id="GridAreasEndColumnARowD"></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" id="GridAreasRepeatColumnDRowC"></div>
<div class="sizedToGridArea" style="grid-column: d-start / d-end; grid-row: c-start / c-end" id="GridAreasRepeatColumnDStartDEndRowCStartCEnd"></div>
<div class="sizedToGridArea" style="grid-column: c; grid-row: d" id="GridAreasRepeatColumnCRowD"></div>
</div>
</div>
<script src="resources/grid-item-column-row-parsing-utils.js"></script>
<script>
testColumnRowCSSParsing("GridUniqueColumnB", "b", "auto");
testColumnRowCSSParsing("GridUniqueRowE", "auto", "e");
testColumnRowCSSParsing("GridUniqueColumnBStart", "b-start", "auto");
testColumnRowCSSParsing("GridUniqueRowGStart", "auto", "g-start");
testColumnRowCSSParsing("GridUniqueColumnBD", "b / d", "auto");
testColumnRowCSSParsing("GridUniqueRowGH", "auto", "g / h");
testColumnRowCSSParsing("GridUniqueColumnCRowF", "c", "f");
testColumnRowCSSParsing("GridUniqueColumnBInteger", "b / 4", "auto");
testColumnRowCSSParsing("GridUniqueRowIntegerH", "auto", "3 / h");
testColumnRowCSSParsing("GridUniqueColumnIntegerRowG", "2", "g");
testColumnRowCSSParsing("GridUniqueColumnARowInteger", "a", "2");
testColumnRowCSSParsing("GridUniqueColumnCStart", "c-start", "auto");
testColumnRowCSSParsing("GridUniqueRowFStart", "auto", "f-start");
testColumnRowCSSParsing("GridUniqueColumnCStartRowFEnd", "c-start", "f-end");
testColumnRowCSSParsing("GridUniqueColumnBEndRowHStart", "b-end", "h-start");
testColumnRowCSSParsing("GridAreasNoNamesColumnAStartRowDStart", "a-start", "d-start");
testColumnRowCSSParsing("GridAreasNoNamesColumnAStartRowD", "a-start", "d");
testColumnRowCSSParsing("GridAreasNoNamesColumnDStartRowCStart", "d-start", "c-start");
testColumnRowCSSParsing("GridAreasNoNamesColumnD", "d", "auto");
testColumnRowCSSParsing("GridAreasNoNamesRowD", "auto", "d");
testColumnRowCSSParsing("GridAreasNoNamesColumnC", "c", "auto");
testColumnRowCSSParsing("GridAreasNoNamesRowC", "auto", "c");
testColumnRowCSSParsing("GridAreasNoNamesColumnA", "a", "auto");
testColumnRowCSSParsing("GridAreasNoNamesRowA", "auto", "a");
testColumnRowCSSParsing("GridAreasNoNamesColumnARowA", "a", "a");
testColumnRowCSSParsing("GridAreasNamedLineAfterColumnD", "d", "auto");
testColumnRowCSSParsing("GridAreasNamedLineAfterRowD", "auto", "d");
testColumnRowCSSParsing("GridAreasNamedLineAfterColumnC", "c", "auto");
testColumnRowCSSParsing("GridAreasNamedLineAfterRowC", "auto", "c");
testColumnRowCSSParsing("GridAreasNamedLineAfterColumnStartAStart", "a-start / auto", "auto");
testColumnRowCSSParsing("GridAreasNamedLineAfterRowStartCStart", "auto", "c-start / auto");
testColumnRowCSSParsing("GridAreasNamedLineAfterColumnA", "a", "auto");
testColumnRowCSSParsing("GridAreasNamedLineAfterColumnARowD", "a", "d");
testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnD", "d", "auto");
testColumnRowCSSParsing("GridAreasNamedLineBeforeRowD", "auto", "d");
testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnC", "c", "auto");
testColumnRowCSSParsing("GridAreasNamedLineBeforeRowC", "auto", "c");
testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnStartDStart", "d-start / auto", "auto");
testColumnRowCSSParsing("GridAreasNamedLineBeforeRowStartDStart", "auto", "d-start / auto");
testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnA", "a", "auto");
testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnARowD", "a", "d");
testColumnRowCSSParsing("GridAreasNoNamesColumnAAStartRowDStart", "a / a-start", "d-start");
testColumnRowCSSParsing("GridAreasNoNamesColumnDDStartRowCStart", "d / d-start", "c-start");
testColumnRowCSSParsing("GridAreasNoNamesColumnCRowAAStart", "c", "a / a-start");
testColumnRowCSSParsing("GridAreasNoNamesColumnDRowCCStart", "d", "c / c-start");
testColumnRowCSSParsing("GridAreasEnd", "a", "auto");
testColumnRowCSSParsing("GridAreasEndColumnARowC", "a", "c");
testColumnRowCSSParsing("GridAreasEndRowD", "auto", "d");
testColumnRowCSSParsing("GridAreasEndColumnARowD", "a", "d");
testColumnRowCSSParsing("GridAreasRepeatColumnDRowC", "d", "c");
testColumnRowCSSParsing("GridAreasRepeatColumnDStartDEndRowCStartCEnd", "d-start / d-end", "c-start / c-end");
testColumnRowCSSParsing("GridAreasRepeatColumnCRowD", "c", "d");
</script>
</body>
</html>
Codebase Browser
chromium