CSS Grid Layout Module Level 1 CR Test Suite

Placing Grid Items (25 tests)

Test Refs Flags Info
+ 8 Placing Grid Items
grid-area-computed Script getComputedStyle().gridArea
grid-layout-grid-span = grid span
  • the layout should behave the same as reference.
+ 8.1 Common Patterns for Grid Placement
+ 8.1.1 Named Areas
+ 8.1.2 Numeric Indexes and Spans
+ 8.1.3 Named Lines and Spans
grid-layout-lines = grid lines
  • the layout should behave the same as reference.
grid-layout-lines-shorthands = grid lines shorthands
  • the layout should behave the same as reference.
+ 8.1.4 Auto Placement
+ 8.2 Grid Item Placement vs. Source Order
+ 8.3 Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-placement-using-named-grid-lines-001 = Grid item placement mixing named grid areas and lines
  • Line placement algorithm selects the first matching column when using a grid line name associated to several columns and no integer is specified within the custom-ident.
grid-placement-using-named-grid-lines-002 = Grid item placement with named line and auto repeat()
  • Grid placement algorithm is able to select the 1st line by name when the 1st track is defined with auto repeat().
grid-placement-using-named-grid-lines-003 = Grid item placement with named line and auto repeat()
  • Grid placement algorithm is able to select the right line when there is an auto repeat().
grid-placement-using-named-grid-lines-004 = Grid item placement with '<integer> && <custom-ident>' and auto repeat()
  • Grid placement algorithm is able to select the right line when using the '<integer> && <custom-ident>' syntax and there is an auto repeat().
grid-placement-using-named-grid-lines-005 = Grid item placement with implicit named line and auto repeat()
  • Grid placement algorithm is able to select the right line when defined implicitly with grid-template-areas.
grid-placement-using-named-grid-lines-006 = Grid item placement with implicit named line, '<integer> && <custom-ident>', and auto repeat()
  • Grid placement algorithm is able to select the right line when defined implicitly with grid-template-areas, referenced using the '<integer> && <custom-ident>' syntax, and with auto repeat().
grid-placement-using-named-grid-lines-007 = Grid item placement with dynamically named grid lines
  • Grid item placement is updated when the names of the grid lines change dynamically.
grid-placement-using-named-grid-lines-008 = Grid item placement with inherited grid-template-areas
  • Grid placement algorithm is able to select the right line when defined implicitly with an inherited grid-template-areas.
grid-placement-using-named-grid-lines-009 = Grid item placement with non-inherited grid-template-areas
  • Checks that inheriting grid-template-columns and grid-template-rows doesn't also inherit grid-template-areas.
grid-placement-using-named-grid-lines-001 = Grid item placement mixing named grid areas and lines
  • Line placement algorithm selects the first matching column when using a grid line name associated to several columns and no integer is specified within the custom-ident.
+ 8.3.1 Grid Placement Conflict Handling
+ 8.4 Placement Shorthands: the grid-column, grid-row, and grid-area properties
grid-layout-placement-shorthands = placement shorthand
  • the layout should behave the same as reference.
grid-area-invalid Script parsing grid-area with invalid values
  • grid-area supports only the grammar '<grid-line> [ / <grid-line> ]{0,3}'.
grid-area-shorthand Script grid-area sets longhands
  • grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.
grid-area-valid Script parsing grid-area with valid values
  • grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.
grid-auto-fill-columns-001 Script CSS Grid: auto-fill columns
  • Check that auto-fill columns are properly computed in a grid container
grid-auto-fit-columns-001 Script CSS Grid: auto-fit columns
  • Check that auto-fit columns are properly computed in a grid container
grid-item-margins-and-writing-modes-001 = CSS Grid: Grid items and logical margins
  • This test ensures that the border, margin, and padding combining with RTL direction and different writing-modes generate the proper layout.
grid-template-areas-must-keep-named-columns-order-001 =
  • A grid item located in a named line will be placed in the first one associated to that name
grid-auto-fill-rows-001 Script CSS Grid: auto-fill rows
  • Check that auto-fill rows are properly computed in a grid container
grid-auto-fit-rows-001 Script CSS Grid: auto-fit rows
  • Check that auto-fit rows are properly computed in a grid container
grid-item-margins-and-writing-modes-001 = CSS Grid: Grid items and logical margins
  • This test ensures that the border, margin, and padding combining with RTL direction and different writing-modes generate the proper layout.
+ 8.5 Grid Item Placement Algorithm
grid-auto-flow-sparse-001 Script CSS Grid: auto-placement with 'grid-auto-flow: column'
  • Check that the auto-placement algorithm is sparse by default.
grid-auto-placement-implicit-tracks-001 Script Grid items auto-placement implicit tracks
  • This test checks that auto-placement works properly even when implicit tracks have been created during the first steps of the placement algorithm.