CSS Grid Layout Module Level 1 CR Test Suite

Absolute Positioning (99 tests)

Test Refs Flags Info
+ 9 Absolute Positioning
absolute-positioning-changing-containing-block-001 = Absolute positioning changing containing block
  • This test checks that absolutelly positioned children of a grid are properly sized when the containing block switches between the grid container and a grid ancestor.
absolute-positioning-definite-sizes-001 AhemScript Absolute positioning definite sizes
  • Items should extend to fill the width of the absolutely positioned grid container.
absolute-positioning-grid-container-containing-block-001 Script Absolute positioning grid container containing block
  • This test checks the behavior of the absolutely positioned elements with a grid container as containing block.
absolute-positioning-grid-container-parent-001 Script Absolute positioning grid container parent
  • This test checks the behavior of the absolutely positioned elements with a grid container as parent.
descendant-static-position-001 = Grid aligned descendants with static position
  • This test checks that the position and size of the abs.pos. descendant is correct.
descendant-static-position-002 = Grid aligned descendants with static position (direction: rtl)
  • This test checks that the position and size of the abs.pos. descendant is correct.
descendant-static-position-003 = Grid aligned descendants with static position
  • This test checks that the position and size of the abs.pos. descendant is correct.
descendant-static-position-004 = Grid aligned descendants with static position (direction: rtl)
  • This test checks that the position and size of the abs.pos. descendant is correct.
empty-grid-001 Script CSS Grid: empty grid without explicit tracks.
  • Test ensures that the grids with no in-flow items are actually empty.
grid-item-absolute-positioning-dynamic-001 = Grid item absolute positioning dynamic
  • This test checks that a grid item which becomes an absolutelly positioned children of a grid.
grid-paint-positioned-children-001 = Grid paint positioned children
grid-positioned-children-writing-modes-001 = Grid positioned children writing modes
  • This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.
grid-positioned-item-dynamic-change-001 = Grid positioned item dynamic change
  • This test checks that positioned items can be dynamically changed.
grid-positioned-items-and-autofit-tracks-001 Script Grid positioned items in auto-fit tracks
  • This test checks that positioned items don't avoid auto-fit tracks to collapse.
grid-positioned-items-and-autofit-tracks-002 Script Grid positioned items in auto-fit tracks
  • This test checks tracks before the first in-flow item also collapse and positioned items don't have any impact.
grid-positioned-items-and-autofit-tracks-003 Script Grid positioned items in auto-fit tracks
  • This test checks that positioned items will use the area defined by the in-flow items, ignoring any collapsed track.
grid-positioned-items-and-autofit-tracks-004 Script Grid positioned items in auto-fit tracks and gaps
  • This test checks that positioned items ignore collapsed gaps.
grid-positioned-items-and-autofit-tracks-005 Script Grid positioned items in auto-fit tracks and gaps
  • This test checks that positioned items ignore collapsed gaps, both before and after the first in-flow item .
grid-positioned-items-and-autofit-tracks-006 Script Grid positioned items in auto-fit tracks and gaps
  • This test checks that positioned items ignore collapsed gaps but consider those between in-flow items inside their grid area.
grid-positioned-items-and-autofit-tracks-007 Script Grid positioned items in auto-fit tracks and gaps
  • This test checks that positioned items ignore collapsed gaps even with non-empty tracks before and after.
grid-positioned-items-background-001 = Grid positioned items background
  • This test checks that the background of positioned items is painted in the right position
grid-positioned-items-background-rtl-001 = Grid positioned items background RTL
  • This test checks that the background of positioned items is painted in the right position using RTL direction.
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-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.
grid-positioned-items-implicit-grid-001 Script Grid positioned items implicit grid
  • This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.
grid-positioned-items-implicit-grid-line-001 Script Grid positioned items implicit grid line
  • This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as 'auto'.
grid-positioned-items-padding-001 Script Grid positioned items padding
  • This test checks that positioned grid items can be placed directly on the padding.
grid-positioned-items-unknown-named-grid-line-001 Script Grid positioned items unknown named grid line
  • This test checks that grid placement properties of absolutely positioned items can reference implicit grid lines.
grid-positioned-items-within-grid-implicit-track-001 Script Grid positioned items within grid implicit track
  • This test checks that positioned grid items are placed properly (including implicit tracks) even if the grid has implicit tracks.
grid-sizing-positioned-items-001 Script Grid sizing positioned items
  • This test checks the different size options for absolutely positioned grid items.
positioned-grid-items-should-not-create-implicit-tracks-001 Script Positioned grid items should not create implicit tracks
  • This test checks that positioned items shouldn't create implicit tracks on the grid.
positioned-grid-items-should-not-take-up-space-001 Script Positioned grid items should not take up space
  • This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.
positioned-grid-items-sizing-001 = Ahem Positioned grid items sizing
  • This test checks that the sizing of positioned grid items without specific dimensions or offsets is equivalent to the size of regular items.
+ 9.1 With a Grid Container as Containing Block
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-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-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-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-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-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-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-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-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-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.
+ 9.2 With a Grid Container as Parent