CSS Grid Layout Module Level 1 CR Test Suite

Grid Containers (47 tests)

Test Refs Flags Info
+ 5 Grid Containers
column-property-should-not-apply-on-grid-container-001 = CSS Grid: column-* properties are ignored.
  • This test ensures the column-* properties (in the Multicol module) have no effect on a grid container.
+ 5.1 Establishing Grid Containers: the grid and inline-grid display values
display-computed Script CSS Display: getComputedStyle().display
  • position and float can change display computed value.
  • display computed value is otherwise as specified.
display-grid = CSS Grid Layout: display: grid
  • 'display: grid' causes an element to generate a block-level grid container box.
display-inline-grid = CSS Grid Layout: display: inline-grid
  • 'display: inline-grid' causes an element to generate an inline-level grid container box.
display-invalid Script CSS Display: parsing display with invalid values
  • display supports only the spec grammar.
display-valid Script CSS Display: parsing display with valid values
  • display supports the full spec grammar.
  • display supports the new values 'grid | inline-grid'.
display-with-float Script Computed float value of flex/grid items
  • computed float value of flex/grid items should be as specified
display-with-float-dynamic Script Computed float value of flex/grid items
  • computed float value of flex/grid items should be as specified
grid-button-001 Script Grid items work inside a button
  • When a button is set to display: grid, its children should flow into its grid cells
grid-computed-value-display-floated-items-001 DOM/JSScript 'float' affects to the computed value of 'display' on grid items
grid-container-ignores-first-letter-001 Script '::first-letter' is ignored in grid containers
  • The test checks that grid item should ignore grid container's first-letter pseudo-element.
grid-container-ignores-first-letter-002 = '::first-letter' is ignored in button grid containers
grid-container-ignores-first-line-001 Script '::first-line' is ignored in grid containers
  • The test checks that grid item should ignore grid container's first-line pseudo-element.
grid-display-grid-001 = Ahem 'grid' value for 'display' property
  • This test checks that 'grid' value for 'display' property generates a block level containing box.
grid-display-inline-grid-001 = 'inline-grid' value for 'display' property
  • This test checks that 'inline-grid' value for 'display' property generates an inline level containing box.
grid-first-letter-001 = '::first-letter' from grid container does not apply to grid items
  • This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container.
grid-first-letter-002 = '::first-letter' from grid container ancestors does not apply to grid items
  • This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container ancestors.
grid-first-letter-003 = '::first-letter' works on grid items
  • This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item.
grid-first-line-001 = '::first-line' from grid container does not apply to grid items
  • This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container.
grid-first-line-002 = '::first-line' from grid container ancestors does not apply to grid items
  • This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container ancestors.
grid-first-line-003 = '::first-line' works on grid items
  • This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item.
grid-float-001 = 'float' has no effect on grid items
grid-floats-no-intrude-001 = floats do not intrude into a grid
grid-floats-no-intrude-002 = floats do not protrude content onto grid items
  • Test that a grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item.
grid-inline-first-letter-001 = '::first-letter' from inline grid container does not apply to grid items
  • This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container.
grid-inline-first-letter-002 = '::first-letter' from inline grid container ancestors does not apply to grid items
  • This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container ancestors.
grid-inline-first-letter-003 = '::first-letter' works on grid items within an inline grid
  • This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.
grid-inline-first-line-001 = '::first-line' from inline grid container does not apply to grid items
  • This test checks that '::first-line' pseudo-element is ignored in grid items when applied to an inline grid container.
grid-inline-first-line-002 = '::first-line' from inline grid container ancestors does not apply to grid items
  • This test checks that '::first-line' pseudo-element is ignored in anonymous grid items when applied to an inline grid container ancestors.
grid-inline-first-line-003 = '::first-line' works on grid items within an inline grid
  • This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.
grid-inline-float-001 = 'float' has no effect on grid items within an inline grid
grid-inline-floats-no-intrude-001 = floats do not intrude into an inline grid
grid-inline-margins-no-collapse-001 = inline grid's margins do not collapse
  • This test checks that inline grid's margin (body) do not collapse with the marings of the grid item (a paragraph).
grid-inline-multicol-001 = 'column-*' properties from inline grid container does not apply to grid items
  • This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container.
grid-inline-vertical-align-001 = Ahem 'vertical-align' has no effect on grid items within an inline grid
grid-item-accepts-first-letter-001 Script '::first-letter' is valid in grid items
  • The test checks that grid items accept first-letter pseudo-element.
grid-item-accepts-first-line-001 Script '::first-line' is valid in grid items
  • The test checks that grid items accept first-line pseudo-element.
grid-margins-no-collapse-001 = grid's margins do not collapse
  • This test checks that grid's margin (body) do not collapse with the marings of the grid item (a paragraph).
grid-margins-no-collapse-002 = grid items not collapsing
  • Test that grid item's margins do not collapse with its content's margins.
grid-multicol-001 = 'column-*' properties from grid container does not apply to grid items
  • This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container.
grid-support-display-001 DOM/JSScript DOM support for 'grid' and 'inline-grid' 'display' values
  • This test checks that 'grid' and 'inline-grid' values for 'display' property are supported so that DOM methods, specifically getComputedValue(), and its associated CSS2Properties interface, can fetch such 'display' values.
grid-vertical-align-001 = Ahem 'vertical-align' has no effect on grid items
+ 5.2 Sizing Grid Containers
grid-box-sizing-001 Script Grid container and tracks sizes with box-sizing property
  • The test checks the sizes of a grid container and its track depending on min-size constraints and the box-sizing property.
grid-container-sizing-constraints-001 Script min|max-content sizing constraints on grid containers
  • The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto.
+ 5.3 Scrollable Grid Overflow
compute-intrinsic-widths-scrollbar-001 Script CSS Grid: width of grid container with scrollbar.
  • This test ensures that a grid container scrollbar is computed properly during intrinsic width calculation.
fixed-width-intrinsic-width-should-exclude-scrollbar-001 Script CSS Grid: intrinsic width of fixed-width grid items.
  • This test ensures that scrollbar width is not accounted for fixed-width grid items' intrinsic width.
grid-container-margin-border-padding-scrollbar-001 Script CSS Grid: grid container's size includes border, padding and scrollbar.
  • This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected.
+ 5.4 Limiting Large Grids