+
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
|