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