CSS Grid Layout Module Level 1 CR Test Suite

Alignment and Spacing (300 tests)

Test Refs Flags Info
+ 10 Alignment and Spacing
grid-align-justify-stretch AhemScript stretch value for align and justify properties
  • This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties for both RTL/LTR directions and horizontal/vertical writing modes.
grid-auto-margin-and-replaced-item-001 = Margin auto and replaced grid item
  • Checks width of the nested grid container applied 'margin:auto' with a replaced item which has a property called max-height.
grid-column-axis-self-baseline-synthesized-001 Script Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
grid-column-axis-self-baseline-synthesized-002 Script Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines
  • Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.
grid-column-axis-self-baseline-synthesized-003 Script Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines
  • Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.
grid-column-axis-self-baseline-synthesized-004 Script Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
  • Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.
grid-column-axis-self-baseline-synthesized-005 Script Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-001 Script Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-002 Script Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines
  • Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-003 Script Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines
  • Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-004 Script Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines
  • Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-005 Script Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
grid-self-alignment-stretch-001 Script Self-Alignment and stretch on fixed-sized tracks
  • Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-002 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-003 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-004 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-005 Script Self-Alignment and stretch on fixed-sized tracks
  • Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-006 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-007 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-008 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-009 Script Self-Alignment and stretch on auto-sized tracks
  • Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-010 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-011 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-012 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-013 Script Self-Alignment and stretch on auto-sized tracks
  • Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-014 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-015 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-016 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-vertical-lr-001 Script Self-Alignment and stretch on fixed-sized tracks
  • Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-vertical-lr-002 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-lr-003 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-vertical-lr-004 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-vertical-lr-005 Script Self-Alignment and stretch on fixed-sized tracks
  • Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-vertical-lr-006 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-lr-007 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-vertical-lr-008 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-vertical-lr-009 Script Self-Alignment and stretch on auto-sized tracks
  • Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-vertical-lr-010 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-lr-011 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-lr-012 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-vertical-lr-013 Script Self-Alignment and stretch on auto-sized tracks
  • Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-vertical-lr-014 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-lr-015 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-vertical-lr-016 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-vertical-rl-001 Script Self-Alignment and stretch on fixed-sized tracks
  • Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-vertical-rl-002 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-rl-003 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-vertical-rl-004 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-vertical-rl-005 Script Self-Alignment and stretch on fixed-sized tracks
  • Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-vertical-rl-006 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-rl-007 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-vertical-rl-008 Script Self-Alignment and stretch on fixed-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-vertical-rl-009 Script Self-Alignment and stretch on auto-sized tracks
  • Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-vertical-rl-010 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-rl-011 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-rl-012 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched grid items along the column and/or row axis include their defined padding-box.
grid-self-alignment-stretch-vertical-rl-013 Script Self-Alignment and stretch on auto-sized tracks
  • Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.
grid-self-alignment-stretch-vertical-rl-014 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.
grid-self-alignment-stretch-vertical-rl-015 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined border-box.
grid-self-alignment-stretch-vertical-rl-016 Script Self-Alignment and stretch on auto-sized tracks
  • The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001 Script Self-Baseline alignment and sizing cyclic dependency
  • Grid items with relative size in the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002 Script Self-Baseline alignment and sizing cyclic dependency
  • Grid items orthogonal to the Baseline Context along the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003 Script Self-Baseline alignment and sizing cyclic dependency
  • Items not participating in baseline may later participate if there is an extra pass of the track sizing algorithm.
+ 10.1 Gutters: the row-gap, column-gap, and gap properties
gap-001-lr = gap - horizontal with vertical LR writing mode
  • The 'gap' property enables putting space exclusively between items
gap-001-ltr = gap - horizontal
  • The 'gap' property enables putting space exclusively between items
gap-001-rl = gap - horizontal with vertical RL writing mode
  • The 'gap' property enables putting space exclusively between items
gap-001-rtl = gap - horizontal with RTL writing mode
  • The 'gap' property enables putting space exclusively between items
gap-003-lr = gap - lr rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-ltr = gap - rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-rl = gap - rl rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-003-rtl = gap - RTL rows and columns
  • The 'gap' property enables putting space exclusively between items
gap-004-lr = gap - vertical LR intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-ltr = gap - intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-rl = gap - vertical RL intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-004-rtl = gap - RTL intrinsic horizontal
  • The 'gap' property enables putting space exclusively between items
gap-005-lr = gap - vertical LR intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-ltr = gap - intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-rl = gap - vertical rl intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-005-rtl = gap - intrinsic vertical
  • The 'gap' property enables putting space exclusively between items
gap-006-lr = gap - wrap lr horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-ltr = gap - wrap horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-rl = gap - wrap rl horizontal
  • The 'gap' property enables putting space exclusively between items
gap-006-rtl = gap - wrap rtl horizontal
  • The 'gap' property enables putting space exclusively between items
gap-007-lr = gap - lr wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-ltr = gap - wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-rl = gap - rl wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-007-rtl = gap - rtl wrap vertical
  • The 'gap' property enables putting space exclusively between items
gap-008-ltr = gap - row and column gap
  • The 'gap' property enables putting space exclusively between items
gap-009-ltr = gap - mixed units
  • The 'gap' property enables putting space exclusively between items
gap-010-ltr = gap - calc gap
  • The 'gap' property enables putting space exclusively between items
grid-gutters-001 = Support for gap shorthand property of row-gap and column-gap
grid-gutters-002 = Support for grid-gap shorthand property as an alias for gap
grid-gutters-003 = Support for gap shorthand property of row-gap and column-gap setting both to different values
grid-gutters-004 = Support for grid-gap shorthand property as an alias for gap setting both to different values
grid-gutters-005 = Support for row-gap and column-gap properties
grid-gutters-006 = Support for grid-row-gap alias for row-gap and grid-column-gap for column-gap
grid-gutters-007 = Support for percentage values for gap with definite height and width for grid
grid-gutters-008 = Support for aliased support to gap of percentage values for grid-gap
grid-gutters-009 = Support for percentage values for gap with indefinite percentage basis
grid-gutters-010 = Support for percentage values for grid-gap with indefinite percentage basis
grid-gutters-011 = Support for calc mixing fixed and percentage values for gap
grid-gutters-012 = Support for calc mixing fixed and percentage values for grid-gap as alias for gap
grid-gutters-013 = Gutters adjacent to collapsed tracks also collapse
  • This test checks that gutters adjacent to collapsed tracks don't reduce the space available for aligning adjacent grid items.
grid-gutters-014 = Percentage gap, content-based width/height (via float)
  • Tests that percentage gaps contribute zero to intrinsic sizing, then resolve against corresponding axis of containing block for layout.
grid-gutters-015 =
grid-gutters-016 =
grid-gutters-and-flex-content-001 Script CSS Grid: grid gutters and flex content.
  • Check that gutters do not interfere with flex content resolution for columns or with content sized tracks.
grid-gutters-and-tracks-001 Script CSS Grid: grid gutters and tracks.
  • Check that gutters contribute to the size of the grid containers and spanning items, and do not alter grid items positioning, margin computation and track sizing.
grid-gutters-as-percentage-001 Script CSS Grid: grid gutters as percentage.
  • Check that when 'height' is indefinite, row gaps should be based on grid's 'auto' height.
grid-positioned-items-gaps-001 Script Grid positioned items gaps
  • This test checks the behavior of the positioned items in a grid container with gaps.
grid-positioned-items-gaps-002 Script Grid positioned items percentage and calc() gaps
  • This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps.
grid-positioned-items-gaps-002-rtl Script Grid positioned items percentage and calc() gaps
  • This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps.
grid-positioned-items-gaps-rtl-001 Script Grid positioned items gaps RTL
  • This test checks the behavior of the positioned items in a grid container with gaps in RTL.
+ 10.2 Aligning with auto margins
+ 10.3 Inline-axis Alignment: the justify-self and justify-items properties
grid-alignment-implies-size-change-019 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid's justify-items value from 'stretch' to 'start' causes non-replaced items to shrink.
grid-alignment-implies-size-change-020 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid's justify-items value from 'start' to 'stretch' causes non-replaced items to grow.
grid-alignment-implies-size-change-021 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid's justify-items value from 'stretch' to 'normal' causes no effect on non-replaced items.
grid-alignment-implies-size-change-022 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'normal' to 'stretch' causes no effect on non-replaced items.
grid-alignment-implies-size-change-023 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid's justify-items value from 'start' to 'normal' causes non-replaced items to grow.
grid-alignment-implies-size-change-024 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid's justify-items value from 'normal' to 'start' causes non-replaced items to shrink.
grid-alignment-implies-size-change-025 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'start' to 'stretch' causes non-replaced items to shrink.
grid-alignment-implies-size-change-026 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'stretch' to 'start' causes non-replaced items to grow.
grid-alignment-implies-size-change-027 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'start' to 'normal' causes non-replaced items to shrink.
grid-alignment-implies-size-change-028 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'normal' to 'start' causes non-replaced items to grow.
grid-alignment-implies-size-change-029 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid's justify-items value from 'stretch' to 'start' causes replaced items to shrink.
grid-alignment-implies-size-change-030 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid's justify-items value from 'start' to 'stretch' causes replaced items to grow.
grid-alignment-implies-size-change-031 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid's justify-items value from 'stretch' to 'normal' causes replaced items to shrink.
grid-alignment-implies-size-change-032 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'normal' to 'stretch' causes non-replaced items to grow.
grid-alignment-implies-size-change-033 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'start' to 'normal' causes no effect on replaced items.
grid-alignment-implies-size-change-034 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'normal' to 'start' causes no effect on replaced items.
grid-alignment-implies-size-change-035 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'start' to 'stretch' causes replaced items to shrink.
grid-alignment-implies-size-change-036 Script Changes on Default-Alignment may affect grid item's width
  • Changing the grid item's justify-items value from 'stretch' to 'start' causes replaced items to grow.
grid-baseline-align-cycles-001 = Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions
  • A grid item whose size is input to the size of the track on which its size depends cannot participate in baseline alignment.
grid-column-axis-alignment-positioned-items-014 Script Self-Alignment along column axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.
grid-row-axis-alignment-positioned-items-001 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'start' value for justify-self are flushed with its alignment container's 'start' edge.
grid-row-axis-alignment-positioned-items-002 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'end' value for justify-self are flushed with its alignment container's 'end' edge.
grid-row-axis-alignment-positioned-items-003 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'left' value for justify-self are flushed with its alignment container's 'left' edge.
grid-row-axis-alignment-positioned-items-004 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'right' value for justify-self are flushed with its alignment container's 'right' edge.
grid-row-axis-alignment-positioned-items-005 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.
grid-row-axis-alignment-positioned-items-006 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • The 'flex-start' value of justify-self behaves like 'start' for absolute positioned grid items.
grid-row-axis-alignment-positioned-items-007 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • The 'flex-end' value of justify-self behaves like 'end' for absolute positioned grid items.
grid-row-axis-alignment-positioned-items-008 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-row-axis-alignment-positioned-items-009 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.
grid-row-axis-alignment-positioned-items-010 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-row-axis-alignment-positioned-items-011 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.
grid-row-axis-alignment-positioned-items-012 Script Self-Alignment along row axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with 'start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-row-axis-alignment-positioned-items-013 Script Self-Alignment along row axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with 'end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.
grid-row-axis-alignment-positioned-items-014 Script Self-Alignment along row axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.
grid-row-axis-alignment-positioned-items-015 Script Self-Alignment along row axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-row-axis-alignment-positioned-items-016 Script Self-Alignment along row axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-row-axis-alignment-positioned-items-017 Script Self-Alignment along row axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.
grid-row-axis-alignment-sticky-positioned-items-001 Script Self-Alignment along row axis of stcky positioned items
  • Sticky positioned grid items are aligned correcly.
grid-row-axis-alignment-sticky-positioned-items-002 Script Self-Alignment along row axis of stcky positioned items
  • Sticky positioned grid items are aligned correcly, but preserving non-static positions when required.
grid-row-axis-self-baseline-synthesized-001 Script Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-002 Script Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines
  • Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-003 Script Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines
  • Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-004 Script Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines
  • Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.
grid-row-axis-self-baseline-synthesized-005 Script Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
grid-self-baseline-changes-grid-area-size-007 = Self-Baseline alignment may change grid area width
  • Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid.
grid-self-baseline-changes-grid-area-size-008 = Self-Baseline alignment may change grid area width
  • Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and content-distribution.
grid-self-baseline-changes-grid-area-size-009 = Self-Baseline alignment may change grid area width
  • Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and empty items.
grid-self-baseline-changes-grid-area-size-010 = Self-Baseline alignment may change grid area width
  • Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid.
grid-self-baseline-changes-grid-area-size-011 = Self-Baseline alignment may change grid area width
  • Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and gutters.
grid-self-baseline-changes-grid-area-size-012 = Self-Baseline alignment may change grid area width
  • Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and empty items.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001 Script Self-Baseline alignment and sizing cyclic dependency
  • Grid items with relative size in the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002 Script Self-Baseline alignment and sizing cyclic dependency
  • Grid items orthogonal to the Baseline Context along the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003 Script Self-Baseline alignment and sizing cyclic dependency
  • Items not participating in baseline may later participate if there is an extra pass of the track sizing algorithm.
+ 10.4 Block-axis Alignment: the align-self and align-items properties
grid-alignment-implies-size-change-001 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid's align-items value from 'stretch' to 'start' causes non-replaced items to shrink.
grid-alignment-implies-size-change-002 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid's align-items value from 'start' to 'stretch' causes non-replaced items to grow.
grid-alignment-implies-size-change-003 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid's align-items value from 'stretch' to 'normal' causes no effect on non-replaced items.
grid-alignment-implies-size-change-004 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'normal' to 'stretch' causes no effect on non-replaced items.
grid-alignment-implies-size-change-005 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid's align-items value from 'start' to 'normal' causes non-replaced items to grow.
grid-alignment-implies-size-change-006 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid's align-items value from 'normal' to 'start' causes non-replaced items to shrink.
grid-alignment-implies-size-change-007 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'start' to 'stretch' causes non-replaced items to shrink.
grid-alignment-implies-size-change-008 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'stretch' to 'start' causes non-replaced items to grow.
grid-alignment-implies-size-change-009 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'start' to 'normal' causes non-replaced items to shrink.
grid-alignment-implies-size-change-010 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'normal' to 'start' causes non-replaced items to grow.
grid-alignment-implies-size-change-011 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid's align-items value from 'stretch' to 'start' causes replaced items to shrink.
grid-alignment-implies-size-change-012 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid's align-items value from 'start' to 'stretch' causes replaced items to grow.
grid-alignment-implies-size-change-013 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid's align-items value from 'stretch' to 'normal' causes replaced items to shrink.
grid-alignment-implies-size-change-014 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'normal' to 'stretch' causes non-replaced items to grow.
grid-alignment-implies-size-change-015 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'start' to 'normal' causes no effect on replaced items.
grid-alignment-implies-size-change-016 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'normal' to 'start' causes no effect on replaced items.
grid-alignment-implies-size-change-017 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'start' to 'stretch' causes replaced items to shrink.
grid-alignment-implies-size-change-018 Script Changes on Default-Alignment may affect grid item's height
  • Changing the grid item's align-items value from 'stretch' to 'start' causes replaced items to grow.
grid-baseline-align-001 = Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items
grid-baseline-justify-001 = Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
grid-column-axis-alignment-positioned-items-001 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'start' value for align-self are flushed with its alignment container's 'start' edge.
grid-column-axis-alignment-positioned-items-002 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'end' value for align-self are flushed with its alignment container's 'end' edge.
grid-column-axis-alignment-positioned-items-003 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'left' value for align-self are flushed with its alignment container's 'left' edge.
grid-column-axis-alignment-positioned-items-004 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'right' value for align-self are flushed with its alignment container's 'right' edge.
grid-column-axis-alignment-positioned-items-005 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.
grid-column-axis-alignment-positioned-items-006 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • The 'flex-start' value of align-self behaves like 'start' for absolute positioned grid items.
grid-column-axis-alignment-positioned-items-007 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • The 'flex-end' value of align-self behaves like 'end' for absolute positioned grid items.
grid-column-axis-alignment-positioned-items-008 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-column-axis-alignment-positioned-items-009 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.
grid-column-axis-alignment-positioned-items-010 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-column-axis-alignment-positioned-items-011 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-column-axis-alignment-positioned-items-012 Script Self-Alignment along column axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with 'start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-column-axis-alignment-positioned-items-013 Script Self-Alignment along column axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with 'end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.
grid-column-axis-alignment-positioned-items-015 Script Self-Alignment along column axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.
grid-column-axis-alignment-positioned-items-016 Script Self-Alignment along column axis of absolute positioned items with 'auto' grid positions
  • Absolute positioned grid items with opposite direction and 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.
grid-column-axis-alignment-positioned-items-017 Script Self-Alignment along column axis of absolute positioned items with 'definite' grid positions
  • Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.
grid-column-axis-alignment-sticky-positioned-items-001 Script Self-Alignment along column axis of stcky positioned items
  • Sticky positioned grid items are aligned correcly.
grid-column-axis-alignment-sticky-positioned-items-002 Script Self-Alignment along column axis of stcky positioned items
  • Sticky positioned grid items are aligned correcly, but preserving non-static positions when required.
grid-column-axis-self-baseline-synthesized-001 Script Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
grid-column-axis-self-baseline-synthesized-002 Script Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines
  • Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.
grid-column-axis-self-baseline-synthesized-003 Script Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines
  • Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.
grid-column-axis-self-baseline-synthesized-004 Script Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
  • Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.
grid-column-axis-self-baseline-synthesized-005 Script Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines
  • Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.
grid-self-alignment-non-static-positioned-items-001 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on absolute positioned grid items with non-static position in the property's axis.
grid-self-alignment-non-static-positioned-items-002 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned grid items with margins.
grid-self-alignment-non-static-positioned-items-003 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned grid items with borders.
grid-self-alignment-non-static-positioned-items-004 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned grid items with paddings.
grid-self-alignment-non-static-positioned-items-005 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned grid items with margins, borders and paddings.
grid-self-alignment-non-static-positioned-items-006 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned grid items when both grid and its items have margins, borders and paddings.
grid-self-alignment-non-static-positioned-items-007 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on absolute positioned orthogonal grid items with non-static position in the property's axis.
grid-self-alignment-non-static-positioned-items-008 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins.
grid-self-alignment-non-static-positioned-items-009 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned orthogonal grid items with borders.
grid-self-alignment-non-static-positioned-items-010 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned orthogonal grid items with paddings.
grid-self-alignment-non-static-positioned-items-011 Script Self-Alignment of non-static absolute positioned items
  • Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins, borders and paddings.
grid-self-alignment-non-static-positioned-items-012 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-001 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when items have margins.
grid-self-alignment-positioned-items-with-margin-border-padding-002 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when items have borders.
grid-self-alignment-positioned-items-with-margin-border-padding-003 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when items have paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-004 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when items have margins, borders and paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-005 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-006 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned orthogonal grid items alignment works as expected when items have margins.
grid-self-alignment-positioned-items-with-margin-border-padding-007 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned orthogonal grid items alignment works as expected when items have borders.
grid-self-alignment-positioned-items-with-margin-border-padding-008 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned orthogonal grid items alignment works as expected when items have paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-009 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned orthogonal grid items alignment works as expected when items have margins, borders and paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-010 Script Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding
  • Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-011 Script Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected.
grid-self-alignment-positioned-items-with-margin-border-padding-012 Script Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when items have margins.
grid-self-alignment-positioned-items-with-margin-border-padding-013 Script Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when items have borders.
grid-self-alignment-positioned-items-with-margin-border-padding-014 Script Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when items have paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-015 Script Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when items have margins, borders and paddings.
grid-self-alignment-positioned-items-with-margin-border-padding-016 Script Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding
  • Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings.
grid-self-baseline-changes-grid-area-size-001 = Self-Baseline alignment may change grid area height
  • Column-Axis Self-Baseline alignment may change grid area height on a fixed grid.
grid-self-baseline-changes-grid-area-size-002 = Self-Baseline alignment may change grid area height
  • Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and content-distribution.
grid-self-baseline-changes-grid-area-size-003 = Self-Baseline alignment may change grid area height
  • Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and empty items .
grid-self-baseline-changes-grid-area-size-004 = Self-Baseline alignment may change grid area height
  • Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid.
grid-self-baseline-changes-grid-area-size-005 = Self-Baseline alignment may change grid area height
  • Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and gutters.
grid-self-baseline-changes-grid-area-size-006 = Self-Baseline alignment may change grid area height
  • Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and empty items.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001 Script Self-Baseline alignment and sizing cyclic dependency
  • Grid items with relative size in the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002 Script Self-Baseline alignment and sizing cyclic dependency
  • Grid items orthogonal to the Baseline Context along the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.
grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003 Script Self-Baseline alignment and sizing cyclic dependency
  • Items not participating in baseline may later participate if there is an extra pass of the track sizing algorithm.
+ 10.5 Aligning the Grid: the justify-content and align-content properties
grid-align-content AhemScript align-content property
  • This test checks that the align-content property is applied correctly in both directions RTL and LTR.
grid-align-content-vertical-lr AhemScript align-content in vertical-lr
  • This test checks that the align-content property is applied correctly in vertical-lr grids, for both LTR and RTL directions.
grid-align-content-vertical-rl AhemScript align-content in vertical-rl
  • This test checks that the align-content property is applied correctly in vertical-rl grids, for both LTR and RTL directions.
grid-alignment-style-changes-001 Script Changing Self-Alignment properties to interfere in Baseline Alignment
  • Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.
grid-alignment-style-changes-002 Script Changing Self-Alignment properties to interfere in Baseline Alignment
  • Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.
grid-alignment-style-changes-003 Script Changing the Self-Alignment properties to interfere in Baseline Alignment
  • Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.
grid-alignment-style-changes-004 Script Changing the Self-Alignment properties to interfere in Baseline Alignment
  • Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.
grid-alignment-style-changes-005 Script Changing Self-Alignment properties to interfere in Baseline Alignment
  • Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.
grid-alignment-style-changes-006 Script Changing Self-Alignment properties to interfere in Baseline Alignment
  • Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.
grid-alignment-style-changes-007 Script Changing the value of Self-Alignment properties
  • Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.
grid-alignment-style-changes-008 Script Changing the Self-Alignment properties to interfere in Baseline Alignment
  • Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.
grid-content-alignment-second-pass-001 AhemDOM/JSScript Content alignment second pass
  • This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.
grid-content-alignment-second-pass-002 AhemDOM/JSScript Content alignment second pass
  • This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.
grid-content-distribution-001 = Content Distribution 'space-evenly' on 2x2 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-002 = Content Distribution 'space-between' on 2x2 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-003 = Content Distribution 'space-around' on 2x2 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-004 = Content Distribution 'stretch' on 2x2 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-005 = Content Distribution default value
  • Content Distribution properties have 'stretch' as default value and render correcly.
grid-content-distribution-006 = Content Distribution 'space-evenly' and gaps on 2x2 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-007 = Content Distribution 'space-evenly' on 3x3 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-008 = Content Distribution 'space-evenly' and gaps on 3x3 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-009 = Content Distribution 'space-evenly' on 4x4 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-010 = Content Distribution 'space-evenly' and gaps on 4x4 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-011 = Content Distribution 'space-between' and gaps on 2x2 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-012 = Content Distribution 'space-between' on 3x3 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-013 = Content Distribution 'space-between' and gaps on 3x3 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-014 = Content Distribution 'space-between' on 4x4 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-015 = Content Distribution 'space-between' and gaps on 4x4 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-016 = Content Distribution 'space-around' and gaps on 2x2 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-017 = Content Distribution 'space-around' on 3x3 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-019 = Content Distribution 'space-around' on 4x4 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-020 = Content Distribution 'space-around' and gaps on 4x4 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-021 = Content Distribution 'stretch' and gaps on 2x2 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-022 = Content Distribution 'stretch' on 3x3 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-023 = Content Distribution 'stretch' and gaps on 3x3 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-024 = Content Distribution 'stretch' on 4x4 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-025 = Content Distribution 'stretch' and gaps on 4x4 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-with-collapsed-tracks-001 = Content Distribution 'space-evenly' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-evenly'.
grid-content-distribution-with-collapsed-tracks-002 = Content Distribution 'space-between' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-between'.
grid-content-distribution-with-collapsed-tracks-003 = Content Distribution 'space-around' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-around'.
grid-content-distribution-with-collapsed-tracks-004 = Content Distribution 'stretch' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-005 = Content Distribution 'space-evenly' and gaps on 2x2 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-006 = Content Distribution 'space-evenly' on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-007 = Content Distribution 'space-evenly' and gaps on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-008 = Content Distribution 'space-evenly' on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-009 = Content Distribution 'space-evenly' and gaps on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-010 = Content Distribution 'space-between' and gaps on 2x2 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-011 = Content Distribution 'space-between' on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-012 = Content Distribution 'space-between' and gaps on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-013 = Content Distribution 'space-between' on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-014 = Content Distribution 'space-between' and gaps on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-015 = Content Distribution 'space-around' and gaps on 2x2 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-016 = Content Distribution 'space-around' on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-017 = Content Distribution 'space-around' and gaps on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-018 = Content Distribution 'space-around' on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-019 = Content Distribution 'space-around' and gaps on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-020 = Content Distribution 'stretch' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-021 = Content Distribution 'stretch' with collapsed tracks on 3x3 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-022 = Content Distribution 'stretch' and gaps with collapsed tracks on 3x3 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-023 = Content Distribution 'stretch' with collapsed tracks on 4x4 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-024 = Content Distribution 'stretch' and gaps with collapsed tracks on 4x4 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-fit-content-tracks-dont-stretch-001 AhemDOM/JSScript fit-content() tracks don't stretch
  • This test checks that 'fit-content()' tracks behave the same with 'normal', 'stretch' or 'start' values for content distribution properties.
grid-place-content-001 Script Grid containers support 'place-content'
  • This test checks that the 'justify-content' and 'align-content' properties, set using their 'place-content' shorthand, work well in grid containers.
grid-positioned-items-content-alignment-001 Script Grid positioned items content alignment
  • This test checks the behavior of the positioned items in a grid using content alignment.
grid-positioned-items-content-alignment-rtl-001 Script Grid positioned items content alignment RTL
  • This test checks the behavior of the positioned items in a grid using content alignment in RTL.
grid-self-alignment Script
  • This test checks that the self-start/self-end alignment values are applied correctly in all writing-modes for inflow content.
grid-stretch-respects-min-size-001 = stretch alignment respects min size constraints of the grid container
  • The test checks that during the last step of the track sizing algorithm (stretch auto tracks), the min-width/height constraints of the grid container are respected.
+ 10.6 Grid Container Baselines
contain-layout-baseline-003 = Layout containment supress baseline in grid items
  • Grid items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the grid item's border box when they're baseline aligned.
grid-container-baseline-001 Script Grid container baseline
  • Grid container baseline should match the element with 'align-self: baseline' in the first row, even if it's an orthogonal element.
synthesized-baseline-grid-001 AhemScript Synthesized baseline grid container
  • This test check the synthesized of a grid container if it has no items (it should use the grid container margin box) or if the items have no baseline (in that case it should use the grid item's border box).