CSS Box Alignment Module Level 3 CR Test Suite

Content Distribution: Aligning a Box’s Contents Within Itself (93 tests)

Test Refs Flags Info
+ 5 Content Distribution: Aligning a Box’s Contents Within Itself
grid-align-content AhemScript align-content property
  • This test checks that the align-content property is applied correctly in both directions RTL and LTR.
grid-align-justify-stretch AhemScript stretch value for align and justify properties
  • This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties for both RTL/LTR directions and horizontal/vertical writing modes.
grid-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-content-alignment-auto-sized-tracks-001 Script content alignment and auto sized tracks.
  • Test that 'stretch' value for content alignment properties is applied only on 'auto-sized' tracks, which are the ones with an 'auto' max sizing function.
grid-content-alignment-overflow-001 Script content alignment and overflow alignment.
  • Test that the overflow alignment mode is applied correctly for content alignment properties.
grid-content-alignment-with-span-001 Script content alignment and items spanning multiple tracks.
  • Test that content distribution alignment is applied correctly when items span more than one track.
grid-content-alignment-with-span-vertical-lr-001 Script content alignment and items spanning multiple tracks (vertical-lr).
  • Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-lr'.
grid-content-alignment-with-span-vertical-rl-001 Script content alignment and items spanning multiple tracks (vertical-rl).
  • Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-rl'.
grid-content-distribution-001 = Content Distribution 'space-evenly' on 2x2 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-002 = Content Distribution 'space-between' on 2x2 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-003 = Content Distribution 'space-around' on 2x2 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-004 = Content Distribution 'stretch' on 2x2 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-005 = Content Distribution default value
  • Content Distribution properties have 'stretch' as default value and render correcly.
grid-content-distribution-006 = Content Distribution 'space-evenly' and gaps on 2x2 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-007 = Content Distribution 'space-evenly' on 3x3 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-008 = Content Distribution 'space-evenly' and gaps on 3x3 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-009 = Content Distribution 'space-evenly' on 4x4 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-010 = Content Distribution 'space-evenly' and gaps on 4x4 grid
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-011 = Content Distribution 'space-between' and gaps on 2x2 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-012 = Content Distribution 'space-between' on 3x3 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-013 = Content Distribution 'space-between' and gaps on 3x3 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-014 = Content Distribution 'space-between' on 4x4 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-015 = Content Distribution 'space-between' and gaps on 4x4 grid
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-016 = Content Distribution 'space-around' and gaps on 2x2 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-017 = Content Distribution 'space-around' on 3x3 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-018 = Content Distribution 'space-around' and gaps on 3x3 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-019 = Content Distribution 'space-around' on 4x4 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-020 = Content Distribution 'space-around' and gaps on 4x4 grid
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-021 = Content Distribution 'stretch' and gaps on 2x2 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-022 = Content Distribution 'stretch' on 3x3 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-023 = Content Distribution 'stretch' and gaps on 3x3 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-024 = Content Distribution 'stretch' on 4x4 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-025 = Content Distribution 'stretch' and gaps on 4x4 grid
  • Content Distribution properties with 'stretch' value render correcly.
grid-content-distribution-with-collapsed-tracks-001 = Content Distribution 'space-evenly' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-evenly'.
grid-content-distribution-with-collapsed-tracks-002 = Content Distribution 'space-between' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-between'.
grid-content-distribution-with-collapsed-tracks-003 = Content Distribution 'space-around' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-around'.
grid-content-distribution-with-collapsed-tracks-004 = Content Distribution 'stretch' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-005 = Content Distribution 'space-evenly' and gaps on 2x2 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-006 = Content Distribution 'space-evenly' on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-007 = Content Distribution 'space-evenly' and gaps on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-008 = Content Distribution 'space-evenly' on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-009 = Content Distribution 'space-evenly' and gaps on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-evenly' value render correcly.
grid-content-distribution-with-collapsed-tracks-010 = Content Distribution 'space-between' and gaps on 2x2 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-011 = Content Distribution 'space-between' on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-012 = Content Distribution 'space-between' and gaps on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-013 = Content Distribution 'space-between' on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-014 = Content Distribution 'space-between' and gaps on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-between' value render correcly.
grid-content-distribution-with-collapsed-tracks-015 = Content Distribution 'space-around' and gaps on 2x2 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-016 = Content Distribution 'space-around' on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-017 = Content Distribution 'space-around' and gaps on 3x3 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-018 = Content Distribution 'space-around' on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-019 = Content Distribution 'space-around' and gaps on 4x4 grid with collapsed tracks
  • Content Distribution properties with 'space-around' value render correcly.
grid-content-distribution-with-collapsed-tracks-020 = Content Distribution 'stretch' with collapsed tracks on 2x2 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-021 = Content Distribution 'stretch' with collapsed tracks on 3x3 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-022 = Content Distribution 'stretch' and gaps with collapsed tracks on 3x3 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-023 = Content Distribution 'stretch' with collapsed tracks on 4x4 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-content-distribution-with-collapsed-tracks-024 = Content Distribution 'stretch' and gaps with collapsed tracks on 4x4 grid
  • Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.
grid-tracks-stretched-with-different-flex-factors-sum Script CSS Grid: 'stretch' content alignment on flex tracks.
  • This test ensures that using flex tracks and 'stretch' value for the content alignment css properties work properly.
parse-align-content-001 Script Content Distribution: align-content - setting values via CSS
  • Check that the computed value is the specified value and the JS value is empty.
parse-align-content-002 Script Content Distribution: align-content - 'initial' value
  • Check the 'initial' value in diferent scenarios.
parse-align-content-003 Script Content Disrtribution: align-content - setting values via JS
  • Check that the computed value is the specified value and the same than the JS value.
parse-align-content-004 Script Content Distribution: align-content - invalid values
  • Check bad combinations of specified values.
parse-align-content-005 Script Content Distibution: align-content - inherit value
  • Check bad cobinations of specified values.
parse-justify-content-001 Script Content Distribution: justify-content - setting values via CSS
  • Check that the computed value is the specified value and the JS value is empty.
parse-justify-content-002 Script Content Distribution: justify-content - 'initial' value
  • Check the 'initial' value in diferent scenarios.
parse-justify-content-003 Script Content Disrtribution: justify-content - setting values via JS
  • Check that the computed value is the specified value and the same than the JS value.
parse-justify-content-004 Script Content Distribution: justify-content - invalid values
  • Check bad combinations of specified values.
parse-justify-content-005 Script Content Distibution: justify-content - inherit value
  • Check bad cobinations of specified values.
+ 5.1 The justify-content and align-content Properties
flexbox_justifycontent-left-001 = flexbox | justify-content: left in rows
flexbox_justifycontent-left-002 = flexbox | justify-content: left in columns
flexbox_justifycontent-right-001 = flexbox | justify-content: right in rows
flexbox_justifycontent-right-002 = flexbox | justify-content: right in columns
grid-place-content-001 Script Grid containers support 'place-content'
  • This test checks that the 'justify-content' and 'align-content' properties, set using their 'place-content' shorthand, work well in grid containers.
align-content-computed Script CSS Box Alignment Level 3: getComputedStyle().alignContent
  • align-content computed value is as specified.
align-content-invalid Script CSS Box Alignment Level 3: parsing align-content with invalid values
  • align-content supports only the grammar 'normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>'.
align-content-valid Script CSS Box Alignment Level 3: parsing align-content with valid values
  • align-content supports the full grammar 'normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>'.
grid-content-alignment-with-span-001 Script content alignment and items spanning multiple tracks.
  • Test that content distribution alignment is applied correctly when items span more than one track.
grid-content-alignment-with-span-vertical-lr-001 Script content alignment and items spanning multiple tracks (vertical-lr).
  • Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-lr'.
grid-content-alignment-with-span-vertical-rl-001 Script content alignment and items spanning multiple tracks (vertical-rl).
  • Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-rl'.
parse-align-content-001 Script Content Distribution: align-content - setting values via CSS
  • Check that the computed value is the specified value and the JS value is empty.
parse-align-content-002 Script Content Distribution: align-content - 'initial' value
  • Check the 'initial' value in diferent scenarios.
parse-align-content-003 Script Content Disrtribution: align-content - setting values via JS
  • Check that the computed value is the specified value and the same than the JS value.
parse-align-content-004 Script Content Distribution: align-content - invalid values
  • Check bad combinations of specified values.
parse-align-content-005 Script Content Distibution: align-content - inherit value
  • Check bad cobinations of specified values.
grid-content-alignment-with-span-001 Script content alignment and items spanning multiple tracks.
  • Test that content distribution alignment is applied correctly when items span more than one track.
grid-content-alignment-with-span-vertical-lr-001 Script content alignment and items spanning multiple tracks (vertical-lr).
  • Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-lr'.
grid-content-alignment-with-span-vertical-rl-001 Script content alignment and items spanning multiple tracks (vertical-rl).
  • Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-rl'.
justify-content-computed Script CSS Box Alignment Level 3: getComputedStyle().justifyContent
  • justify-content computed value is as specified.
justify-content-invalid Script CSS Box Alignment Level 3: parsing justify-content with invalid values
  • justify-content supports only the grammar 'normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]'.
justify-content-valid Script CSS Box Alignment Level 3: parsing justify-content with valid values
  • justify-content supports the full grammar 'normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]'.
parse-justify-content-001 Script Content Distribution: justify-content - setting values via CSS
  • Check that the computed value is the specified value and the JS value is empty.
parse-justify-content-002 Script Content Distribution: justify-content - 'initial' value
  • Check the 'initial' value in diferent scenarios.
parse-justify-content-003 Script Content Disrtribution: justify-content - setting values via JS
  • Check that the computed value is the specified value and the same than the JS value.
parse-justify-content-004 Script Content Distribution: justify-content - invalid values
  • Check bad combinations of specified values.
parse-justify-content-005 Script Content Distibution: justify-content - inherit value
  • Check bad cobinations of specified values.
+ 5.1.1 Block Containers (Including Table Cells)
+ 5.1.2 Multicol Containers
+ 5.1.3 Flex Containers
+ 5.1.4 Grid Containers
+ 5.2 Content-Distribution Shorthand: the place-content property
place-content-computed Script CSS Box Alignment Level 3: getComputedStyle().placeContent
  • place-content computed value is as specified.
place-content-invalid Script CSS Box Alignment Level 3: parsing place-content with invalid values
  • place-content supports only the grammar '<align-content> <justify-content>?'.
place-content-shorthand Script CSS Box Alignment Level 3: place-content sets longhands
  • place-content supports the full grammar '<align-content> <justify-content>?'.
place-content-valid Script CSS Box Alignment Level 3: parsing place-content with valid values
  • place-content supports the full grammar '<align-content> <justify-content>?'.
  • <baseline-position> and <baseline-position> start are equivalent.
+ 5.3 Overflow and Scroll Positions
+ 5.4 Baseline Content-Alignment
grid-item-content-baseline-001 = align-content:baseline/last baseline
grid-item-content-baseline-002 = align-content:baseline/last baseline
grid-item-content-baseline-003 = align-content:baseline/last baseline
grid-item-content-baseline-004 = align-content:baseline/last baseline
grid-item-mixed-baseline-001 = mixed align-content/self:baseline/last baseline
grid-item-mixed-baseline-002 = mixed align-content/self:baseline/last baseline
grid-item-mixed-baseline-003 = mixed align-content/self:baseline/last baseline
grid-item-mixed-baseline-004 = mixed align-content/self:baseline/last baseline in fragmentated grid
masonry-grid-item-content-baseline-001 = align-content:baseline/last baseline