| <!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 / b", "auto / auto"); |
| testColumnRowCSSParsing("GridUniqueRowE", "auto / auto", "e / e"); |
| testColumnRowCSSParsing("GridUniqueColumnBStart", "b-start / b-start", "auto / auto"); |
| testColumnRowCSSParsing("GridUniqueRowGStart", "auto / auto", "g-start / g-start"); |
| |
| testColumnRowCSSParsing("GridUniqueColumnBD", "b / d", "auto / auto"); |
| testColumnRowCSSParsing("GridUniqueRowGH", "auto / auto", "g / h"); |
| testColumnRowCSSParsing("GridUniqueColumnCRowF", "c / c", "f / f"); |
| |
| testColumnRowCSSParsing("GridUniqueColumnBInteger", "b / 4", "auto / auto"); |
| testColumnRowCSSParsing("GridUniqueRowIntegerH", "auto / auto", "3 / h"); |
| testColumnRowCSSParsing("GridUniqueColumnIntegerRowG", "2 / auto", "g / g"); |
| testColumnRowCSSParsing("GridUniqueColumnARowInteger", "a / a", "2 / auto"); |
| |
| testColumnRowCSSParsing("GridUniqueColumnCStart", "c-start / c-start", "auto / auto"); |
| testColumnRowCSSParsing("GridUniqueRowFStart", "auto / auto", "f-start / f-start"); |
| testColumnRowCSSParsing("GridUniqueColumnCStartRowFEnd", "c-start / c-start", "f-end / f-end"); |
| testColumnRowCSSParsing("GridUniqueColumnBEndRowHStart", "b-end / b-end", "h-start / h-start"); |
| |
| testColumnRowCSSParsing("GridAreasNoNamesColumnAStartRowDStart", "a-start / a-start", "d-start / d-start"); |
| testColumnRowCSSParsing("GridAreasNoNamesColumnAStartRowD", "a-start / a-start", "d / d"); |
| testColumnRowCSSParsing("GridAreasNoNamesColumnDStartRowCStart", "d-start / d-start", "c-start / c-start"); |
| |
| testColumnRowCSSParsing("GridAreasNoNamesColumnD", "d / d", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNoNamesRowD", "auto / auto", "d / d"); |
| testColumnRowCSSParsing("GridAreasNoNamesColumnC", "c / c", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNoNamesRowC", "auto / auto", "c / c"); |
| |
| testColumnRowCSSParsing("GridAreasNoNamesColumnA", "a / a", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNoNamesRowA", "auto / auto", "a / a"); |
| testColumnRowCSSParsing("GridAreasNoNamesColumnARowA", "a / a", "a / a"); |
| |
| testColumnRowCSSParsing("GridAreasNamedLineAfterColumnD", "d / d", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNamedLineAfterRowD", "auto / auto", "d / d"); |
| testColumnRowCSSParsing("GridAreasNamedLineAfterColumnC", "c / c", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNamedLineAfterRowC", "auto / auto", "c / c"); |
| |
| testColumnRowCSSParsing("GridAreasNamedLineAfterColumnStartAStart", "a-start / auto", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNamedLineAfterRowStartCStart", "auto / auto", "c-start / auto"); |
| |
| testColumnRowCSSParsing("GridAreasNamedLineAfterColumnA", "a / a", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNamedLineAfterColumnARowD", "a / a", "d / d"); |
| |
| testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnD", "d / d", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNamedLineBeforeRowD", "auto / auto", "d / d"); |
| testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnC", "c / c", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNamedLineBeforeRowC", "auto / auto", "c / c"); |
| |
| testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnStartDStart", "d-start / auto", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNamedLineBeforeRowStartDStart", "auto / auto", "d-start / auto"); |
| |
| testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnA", "a / a", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasNamedLineBeforeColumnARowD", "a / a", "d / d"); |
| |
| testColumnRowCSSParsing("GridAreasNoNamesColumnAAStartRowDStart", "a / a-start", "d-start / d-start"); |
| testColumnRowCSSParsing("GridAreasNoNamesColumnDDStartRowCStart", "d / d-start", "c-start / c-start"); |
| testColumnRowCSSParsing("GridAreasNoNamesColumnCRowAAStart", "c / c", "a / a-start"); |
| testColumnRowCSSParsing("GridAreasNoNamesColumnDRowCCStart", "d / d", "c / c-start"); |
| |
| testColumnRowCSSParsing("GridAreasEnd", "a / a", "auto / auto"); |
| testColumnRowCSSParsing("GridAreasEndColumnARowC", "a / a", "c / c"); |
| testColumnRowCSSParsing("GridAreasEndRowD", "auto / auto", "d / d"); |
| testColumnRowCSSParsing("GridAreasEndColumnARowD", "a / a", "d / d"); |
| |
| testColumnRowCSSParsing("GridAreasRepeatColumnDRowC", "d / d", "c / c"); |
| testColumnRowCSSParsing("GridAreasRepeatColumnDStartDEndRowCStartCEnd", "d-start / d-end", "c-start / c-end"); |
| testColumnRowCSSParsing("GridAreasRepeatColumnCRowD", "c / c", "d / d"); |
| </script> |
| </body> |
| </html> |
