CSS Box Alignment Module Level 3 CR Test Suite

Self-Alignment: Aligning the Box Within Its Parent (212 tests)

Test Refs Flags Info
+ 6 Self-Alignment: Aligning the Box Within Its Parent
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.
parse-align-self-001 Script Self-Alignment: align-self - setting values via CSS
  • Check that the computed value is the specified value and the JS value is empty.
parse-align-self-002 Script Self-Alignment: align-self - 'initial' value
  • Check the 'initial' value in diferent scenarios.
parse-align-self-003 Script Self-Alignment: align-self - setting values via JS
  • Check that the computed value is the specified value and the same than the JS value.
parse-align-self-004 Script Self-Alignment: align-self - invalid values
  • Check bad combinations of specified values.
parse-align-self-005 Script Self-Alignment: align-self - inherit value
  • Check bad cobinations of specified values.
parse-justify-self-001 Script Self-Alignment: justify-self - setting values via CSS
  • Check that the computed value is the specified value and the JS value is empty.
parse-justify-self-002 Script Self-Alignment: justify-self - 'initial' value
  • Check the 'initial' value in diferent scenarios.
parse-justify-self-003 Script Self-Alignment: justify-self - setting values via JS
  • Check that the computed value is the specified value and the same than the JS value.
parse-justify-self-004 Script Self-Alignment: justify-self - invalid values
  • Check bad combinations of specified values.
parse-justify-self-005 Script Self-Alignment: justify-self - inherit value
  • Check bad cobinations of specified values.
+ 6.1 Inline-Axis (or Main-Axis) Alignment: the justify-self property
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-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-align-stretching-replaced-items AhemScript alignment for replaced element
  • This test checks that the alignment properties apply the 'stretch' value correctly on replaced elements, such as images.
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-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-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.
justify-self-computed Script CSS Box Alignment Level 3: getComputedStyle().justifySelf
  • justify-self computed value is as specified.
justify-self-invalid Script CSS Box Alignment Level 3: parsing justify-self with invalid values
  • justify-self supports only the grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]'.
justify-self-valid Script CSS Box Alignment Level 3: parsing justify-self with valid values
  • justify-self supports the full grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]'.
parse-justify-self-001 Script Self-Alignment: justify-self - setting values via CSS
  • Check that the computed value is the specified value and the JS value is empty.
parse-justify-self-002 Script Self-Alignment: justify-self - 'initial' value
  • Check the 'initial' value in diferent scenarios.
parse-justify-self-003 Script Self-Alignment: justify-self - setting values via JS
  • Check that the computed value is the specified value and the same than the JS value.
parse-justify-self-004 Script Self-Alignment: justify-self - invalid values
  • Check bad combinations of specified values.
parse-justify-self-005 Script Self-Alignment: justify-self - inherit value
  • Check bad cobinations of specified values.
+ 6.1.1 Block-Level Boxes
+ 6.1.2 Absolutely-Positioned Boxes
+ 6.1.3 Table Cells
+ 6.1.4 Flex Items
+ 6.1.5 Grid Items
+ 6.2 Block-Axis (or Cross-Axis) Alignment: the align-self property
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-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-content-alignment-and-self-alignment-001 Script content distribution alignment and self alignment.
  • Test that content distribution alignment works fine in combination with self alignment and items in just one cell.
grid-content-alignment-and-self-alignment-002 Script content distribution alignment and self alignment.
  • Test that content distribution alignment works fine in combination with self alignment and items spanning more than one track.
grid-self-alignment-stretch-input-range = align/justify-self on range INPUT items
grid-self-baseline-001 = baseline context and self alignment
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.
grid-self-baseline-002 = baseline context and self alignment
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline.
grid-self-baseline-002-b = baseline context and self alignment
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline.
grid-self-baseline-003 = baseline context and self alignment
  • Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.
grid-self-baseline-004 = baseline context and self alignment
  • Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline.
grid-self-baseline-005 = baseline context and self alignment
  • Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.
grid-self-baseline-006 = baseline context and self alignment
  • Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.
grid-self-baseline-007 = baseline context and self alignment
  • Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.
grid-self-baseline-008 = baseline context and self alignment
  • Test baseline alignment with percentage track sizing functions and grid items being or containing replaced elements with aspect ratio and percentage sizes.
grid-self-baseline-horiz-001 = baseline context and self alignment (horizontal)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-horiz-002 = baseline context and self alignment (horizontal)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-horiz-003 = baseline context and self alignment (horizontal)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.
grid-self-baseline-horiz-004 = baseline context and self alignment (horizontal)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply.
grid-self-baseline-horiz-005 = baseline context and self alignment (horizontal)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-horiz-006 = baseline context and self alignment (horizontal)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-horiz-007 = baseline context and self alignment (horizontal)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-001 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-002 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-003 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.
grid-self-baseline-vertical-lr-004 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.
grid-self-baseline-vertical-lr-005 = baseline context and self alignment (vertical-lr)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-006 = baseline context and self alignment (vertical-lr)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-007 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-001 = baseline context and self alignment (vertical-rl)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-002 = baseline context and self alignment (vertical-rl)
  • Test that all items share 'first-row' Baseline Context. No item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-003 = baseline context and self alignment (vertical-rl)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.
grid-self-baseline-vertical-rl-004 = baseline context and self alignment (vertical-rl)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply.
grid-self-baseline-vertical-rl-005 = baseline context and self alignment (vertical-rl)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-006 = baseline context and self alignment (vertical-rl)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-007 = baseline context and self alignment (vertical-rl)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
align-self-computed Script CSS Box Alignment Level 3: getComputedStyle().alignSelf
  • align-self computed value is as specified.
align-self-invalid Script CSS Box Alignment Level 3: parsing align-self with invalid values
  • align-self supports only the grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>'.
align-self-valid Script CSS Box Alignment Level 3: parsing align-self with valid values
  • align-self supports the full grammar 'auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>'.
grid-align AhemScript align-self property
  • This test checks that the align-self property is applied correctly for RL and LR, vertical and horizontal writing modes.
grid-align-stretching-replaced-items AhemScript alignment for replaced element
  • This test checks that the alignment properties apply the 'stretch' value correctly on replaced elements, such as images.
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-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-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-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.
parse-align-self-001 Script Self-Alignment: align-self - setting values via CSS
  • Check that the computed value is the specified value and the JS value is empty.
parse-align-self-002 Script Self-Alignment: align-self - 'initial' value
  • Check the 'initial' value in diferent scenarios.
parse-align-self-003 Script Self-Alignment: align-self - setting values via JS
  • Check that the computed value is the specified value and the same than the JS value.
parse-align-self-004 Script Self-Alignment: align-self - invalid values
  • Check bad combinations of specified values.
parse-align-self-005 Script Self-Alignment: align-self - inherit value
  • Check bad cobinations of specified values.
+ 6.2.1 Block-Level Boxes
+ 6.2.2 Absolutely-Positioned Boxes
+ 6.2.3 Table Cells
+ 6.2.4 Flex Items
flexbox_align-items-center-3 =
  • This checks that an orthogonal flex-item with center alignment doesn't stretch.
grid-as-flex-item-should-not-shrink-to-fit-001 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-002 = Evaluate the behavior of a grid container as Flexbox item
  • The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as its grid item, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-003 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The vertical grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-004 = Evaluate the behavior of a grid container as Flexbox item
  • The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as its vertical grid item, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-005 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-006 = Evaluate the behavior of a grid container as Flexbox item
  • The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as grid item, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-007 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's relative block size will be resolved againts the grid's row size, while its inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-008 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item has a relative inline-size, which should be resolved against the stretched grid's inline-size.
+ 6.2.5 Grid Items
grid-as-flex-item-should-not-shrink-to-fit-001 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-002 = Evaluate the behavior of a grid container as Flexbox item
  • The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as its grid item, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-003 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The vertical grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-004 = Evaluate the behavior of a grid container as Flexbox item
  • The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as its vertical grid item, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-005 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-006 = Evaluate the behavior of a grid container as Flexbox item
  • The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as grid item, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-007 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's relative block size will be resolved againts the grid's row size, while its inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')
grid-as-flex-item-should-not-shrink-to-fit-008 = Evaluate the behavior of a grid container as Flexbox item
  • A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item has a relative inline-size, which should be resolved against the stretched grid's inline-size.
+ 6.3 Self-Alignment Shorthand: the place-self property
place-self-computed Script CSS Box Alignment Level 3: getComputedStyle().placeSelf
  • place-self computed value is as specified.
place-self-invalid Script CSS Box Alignment Level 3: parsing place-self with invalid values
  • place-self supports only the grammar '<align-self> <justify-self>?'.
place-self-shorthand Script CSS Box Alignment Level 3: place-self sets longhands
  • place-self supports the full grammar '<align-self> <justify-self>?'.
  • <baseline-position> and <baseline-position> start are equivalent.
place-self-valid Script CSS Box Alignment Level 3: parsing place-self with valid values
  • place-self supports the full grammar '<align-self> <justify-self>?'.
+ 6.4 Baseline Self-Alignment
baseline-alignment-affects-intrinsic-size-001 Script evaluate how the baseline affects the grid intrinsic size
  • The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks
baseline-alignment-affects-intrinsic-size-002 Script evaluate how the baseline affects the grid intrinsic size
  • The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks
baseline-alignment-affects-intrinsic-size-003 Script evaluate how the baseline affects the grid intrinsic size
  • The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks
baseline-alignment-affects-intrinsic-size-004 Script evaluate how the baseline affects the grid intrinsic size
  • The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks
baseline-alignment-affects-intrinsic-size-005 Script evaluate how the baseline affects the grid intrinsic size
  • The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks
baseline-alignment-affects-intrinsic-size-006 Script evaluate how the baseline affects the grid intrinsic size
  • The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks
grid-align-baseline AhemScript grid align baseline
  • This test checks that baseline alignment works correctly for align-items and align-self properties
grid-align-baseline-vertical AhemScript grid align baseline vertical
  • This test checks that baseline alignment works correctly for align-self properties in vertical-rl and -lr writing modes
grid-item-self-baseline-001 = align-self/justify-self:baseline/last baseline
grid-self-baseline-001 = baseline context and self alignment
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.
grid-self-baseline-002 = baseline context and self alignment
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline.
grid-self-baseline-002-b = baseline context and self alignment
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline.
grid-self-baseline-003 = baseline context and self alignment
  • Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline.
grid-self-baseline-004 = baseline context and self alignment
  • Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline.
grid-self-baseline-005 = baseline context and self alignment
  • Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.
grid-self-baseline-006 = baseline context and self alignment
  • Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.
grid-self-baseline-007 = baseline context and self alignment
  • Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline.
grid-self-baseline-008 = baseline context and self alignment
  • Test baseline alignment with percentage track sizing functions and grid items being or containing replaced elements with aspect ratio and percentage sizes.
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-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-horiz-001 = baseline context and self alignment (horizontal)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-horiz-002 = baseline context and self alignment (horizontal)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-horiz-003 = baseline context and self alignment (horizontal)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.
grid-self-baseline-horiz-004 = baseline context and self alignment (horizontal)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply.
grid-self-baseline-horiz-005 = baseline context and self alignment (horizontal)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-horiz-006 = baseline context and self alignment (horizontal)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-horiz-007 = baseline context and self alignment (horizontal)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-001 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-002 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-003 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.
grid-self-baseline-vertical-lr-004 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply.
grid-self-baseline-vertical-lr-005 = baseline context and self alignment (vertical-lr)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-006 = baseline context and self alignment (vertical-lr)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-lr-007 = baseline context and self alignment (vertical-lr)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-001 = baseline context and self alignment (vertical-rl)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-002 = baseline context and self alignment (vertical-rl)
  • Test that all items share 'first-row' Baseline Context. No item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-003 = baseline context and self alignment (vertical-rl)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply.
grid-self-baseline-vertical-rl-004 = baseline context and self alignment (vertical-rl)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply.
grid-self-baseline-vertical-rl-005 = baseline context and self alignment (vertical-rl)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-006 = baseline context and self alignment (vertical-rl)
  • Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
grid-self-baseline-vertical-rl-007 = baseline context and self alignment (vertical-rl)
  • Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items.
masonry-grid-item-self-baseline-001 = align-self/justify-self:baseline/last baseline
masonry-grid-item-self-baseline-002a = align-self/justify-self:baseline/last baseline
masonry-grid-item-self-baseline-002b = align-self/justify-self:baseline/last baseline
+ 6.5 Effects on Sizing of Absolutely Positioned Boxes with Static-Position Insets
position-absolute-center-001 =
  • The available space for a box with center alignment is double the distance between the center of the static position rectangle and the closest edge of the containing block in the relevant axis.
position-absolute-center-002 =
  • The available space for a box with center alignment is double the distance between the center of the static position rectangle and the closest edge of the containing block in the relevant axis.