CSS Flexible Box Layout Module Level 1 CR Test Suite

Alignment (164 tests)

Test Refs Flags Info
+ 8 Alignment
flex-align-items-center = CSS Flex-basis Test
  • flex items center
+ 8.1 Aligning with auto margins
flexbox-align-self-horiz-005 = Testing the behavior of 'align-self' with auto margins in play, in a horizontal flex container
flexbox-margin-auto-horiz-001 = Testing horizontal auto margins on flex items in a horizontal flex container
flexbox-margin-auto-horiz-002 = Testing vertical auto margins on flex items in a horizontal flex container
flexbox_margin-auto = flexbox | margin: auto
flexbox_margin-auto-overflow = flexbox | margin: auto in overflow
flexbox_margin-auto-overflow-2 = flexbox | margin: auto in overflow
+ 8.2 Axis Alignment: the justify-content property
flexbox-justify-content-horiz-001a = Testing 'justify-content' in a horizontal flex container
flexbox-justify-content-horiz-001b = Testing 'justify-content' in a horizontal flex container with "min-width"
flexbox-justify-content-horiz-002 = Testing 'justify-content' in a horizontal flex container, with margins/border/padding on flex items
flexbox-justify-content-horiz-003 = Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow
flexbox-justify-content-horiz-004 = Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow, with margins/border/padding on flex items
flexbox-justify-content-horiz-005 = Testing 'justify-content' in an auto-sized horizontal flex container
flexbox-justify-content-vert-001a = Testing 'justify-content' in a vertical flex container
flexbox-justify-content-vert-001b = Testing 'justify-content' in a vertical flex container with "min-height"
flexbox-justify-content-vert-002 = Testing 'justify-content' in a vertical flex container, with margins/border/padding on flex items
flexbox-justify-content-vert-003 = Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow
flexbox-justify-content-vert-004 = Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow, with margins/border/padding on flex items
flexbox-justify-content-vert-005 = Testing 'justify-content' in an auto-sized vertical flex container
css-box-justify-content = flexbox |css-box-justify-content
flexbox_computedstyle_justify-content-center DOM/JSScript flexbox | computed style | justify-content: center
flexbox_computedstyle_justify-content-flex-end DOM/JSScript flexbox | computed style | justify-content: flex-end
flexbox_computedstyle_justify-content-flex-start DOM/JSScript flexbox | computed style | justify-content: flex-start
flexbox_computedstyle_justify-content-space-around DOM/JSScript flexbox | computed style | justify-content: space-around
flexbox_computedstyle_justify-content-space-between DOM/JSScript flexbox | computed style | justify-content: space-between
flexbox_justifycontent-center = flexbox | justify-content: center
flexbox_justifycontent-center-overflow = flexbox | justify-content: center / overflow
flexbox_justifycontent-flex-end = flexbox | justify-content: flex-end
flexbox_justifycontent-flex-start = flexbox | justify-content: flex-start
flexbox_justifycontent-spacearound = flexbox | justify-content: space-around
flexbox_justifycontent-spacearound-negative = flexbox | justify-content: space-around / negative
flexbox_justifycontent-spacearound-only = flexbox | justify-content: space-around | single item
flexbox_justifycontent-spacebetween = flexbox | justify-content: space-between
flexbox_justifycontent-spacebetween-negative = flexbox | justify-content: space-between / negative
flexbox_justifycontent-spacebetween-only = flexbox | justify-content: space-between | single item
flexbox_object = flexbox | object fallback as a flex item
flexbox_width-overflow = flexbox | overflow
justify-content-001 = Bitmaps A flex container with 'justify-content' property set to 'center'
  • This test checks that the flex container with 'justify-content: center' centers flex items in the main axis of each line.
justify-content-002 = Bitmaps A flex container with the 'justify-content' property set to 'flex-start'
  • This test checks that the flex container with 'justify-content: flex-start' packs flex items toward the start of the main axis of each line.
justify-content-003 = Bitmaps A flex container with the 'justify-content' property set to 'flex-end'
  • This test checks that the flex container with 'justify-content: flex-end' packs flex items toward the end of the main axis of each line.
justify-content-004 = Bitmaps A flex container with the 'justify-content' property set to 'space-between'
  • This test checks that the flex container with 'justify-content: space-between' evenly distributes flex items in the main axis of each line.
justify-content-005 = Bitmaps A flex container with the 'justify-content' property set to 'space-around'
  • This test checks that the flex container with 'justify-content: space-around' evenly distributes flex items in the main axis of each line, with half-size spaces on either end.
justify-content_center justify-content_center
  • Check if the web engine can identify the justify-content value center.
justify-content_flex-end justify-content_flex-end
  • Check if the web engine can indentify the justify-content value flex-end.
justify-content_flex-start justify-content_flex-start
  • Check if the web engine can indentify the justify-content value flex-start.
justify-content_space-around justify-content_space-around
  • Check if the web engine can indentify the justy-content value space-around.
justify-content_space-between justify-content_space-between
  • Check if the web engine can indentify the justify-content value space-between.
+ 8.3 Cross-axis Alignment: the align-items and align-self properties
align-items-001 = A flex container with the 'align-items' property set to 'center'
  • This test checks that the flex container with 'align-items: center' centers each flex item's margin box in the cross-axis of its line.
align-items-002 = A flex container with the 'align-items' property set to 'flex-start'
  • This test checks that the flex container with 'align-items: flex-start' places each flex item's margin box flush with the cross-start edge of line.
align-items-003 = A flex container with the 'align-items' property set to 'flex-end'
  • This test checks that the flex container with 'align-items: flex-end' places each flex item's margin box flush with the cross-end edge of line.
align-items-004 = Ahem A flex container with the 'align-items' property set to 'baseline'
  • This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align.
align-items-005 = A flex container with the 'align-items' property set to 'stretch'
  • This test checks that the flex container with 'align-items: stretch' places each flex item's margin box so that its cross size is the same as the cross size of the line.
align-self-001 = align-self - flex-start
  • The 'align-self' property set 'flex-start' aligns the flex items to the start edge of cross axis
align-self-002 = align-self - flex-end
  • The 'align-self' property set 'flex-end' aligns the flex items to the end edge of cross axis
align-self-003 = align-self - center
  • The 'align-self' property set 'center' centered the flex items in the cross axis within the line
align-self-004 = align-self - stretch
  • The 'align-self' property set 'stretch' makes the cross size of the item's margin box as close to the same size as the line as possible
align-self-005 = align-self - stretch (height: number)
  • The 'align-self' property set 'stretch' will be invalid while cross size of the flex item set exact number
align-self-006 align-self - baseline
  • The 'align-self' property set 'baseline' aligns the flex items to the baseline of content
align-self-007 = align-self - auto and align-items - flex-start
  • The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'
align-self-008 = align-self - auto and align-items - flex-end
  • The 'align-self' property set 'auto' aligns flex items to end edge of cross-axis when 'align-items' set 'flex-end'
align-self-009 = align-self - auto and align-items - center
  • The 'align-self' property set 'auto' will center flex items the flex items in the cross axis when 'align-items' set 'center'
align-self-010 align-self - auto and align-items - baseline
  • The 'align-self' property set 'auto' aligns the flex items to the baseline of content when 'align-items' set 'baseline'
align-self-011 = align-self - auto and align-items - stretch
  • The 'align-self' property set 'auto' makes the cross size of the item's margin box as close to the same size as the line as possible when 'align-items' set 'stretch'
align-self-012 = align-self - auto (initial value)
  • The initial value of 'align-self' property is 'auto'
align-self-013 = align-self - invalid if applied to flex container
  • The 'align-self' property is invalid if applied to flex container
flexbox-align-self-horiz-001-block = Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal flex container
flexbox-align-self-horiz-001-table = Testing the various 'align-self' property values on flex items that are tables
flexbox-align-self-horiz-002 = Testing the behavior of 'align-self' with a horizontal flex container, with margin/padding/border on the items
flexbox-align-self-horiz-003 = Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items
flexbox-align-self-horiz-004 = Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items
flexbox-align-self-vert-001 = Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container
flexbox-align-self-vert-002 = Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items
flexbox-align-self-vert-003 = Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items
flexbox-align-self-vert-004 = Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items
flexbox-align-self-vert-rtl-001 = Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl'
flexbox-align-self-vert-rtl-002 = Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl'
flexbox-align-self-vert-rtl-003 = Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items and with 'direction: rtl'
flexbox-align-self-vert-rtl-004 = Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl'
flexbox-align-self-baseline-horiz-001a = Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'
flexbox-align-self-baseline-horiz-001b = Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse flex container
flexbox-align-self-baseline-horiz-002 = Baseline alignment of flex items in fixed-size single-line flex container
flexbox-align-self-baseline-horiz-003 = Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed
flexbox-align-self-baseline-horiz-004 = Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container
flexbox-align-self-baseline-horiz-005 = Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container
flexbox-align-self-baseline-horiz-006 = Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.
flexbox-align-self-baseline-horiz-007 = Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.
align-items-001 = A flex container with the 'align-items' property set to 'center'
  • This test checks that the flex container with 'align-items: center' centers each flex item's margin box in the cross-axis of its line.
align-items-002 = A flex container with the 'align-items' property set to 'flex-start'
  • This test checks that the flex container with 'align-items: flex-start' places each flex item's margin box flush with the cross-start edge of line.
align-items-003 = A flex container with the 'align-items' property set to 'flex-end'
  • This test checks that the flex container with 'align-items: flex-end' places each flex item's margin box flush with the cross-end edge of line.
align-items-004 = Ahem A flex container with the 'align-items' property set to 'baseline'
  • This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align.
align-items-005 = A flex container with the 'align-items' property set to 'stretch'
  • This test checks that the flex container with 'align-items: stretch' places each flex item's margin box so that its cross size is the same as the cross size of the line.
align-self-007 = align-self - auto and align-items - flex-start
  • The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'
css-flexbox-height-animation-stretch = Items stretch correctly while content is animating
  • Items should stretch vertically in all time
flexbox_align-items-baseline = flexbox | align-items: baseline
flexbox_align-items-center = flexbox | align-items: center
flexbox_align-items-center-2 = flexbox | align-items: center
flexbox_align-items-flexend = flexbox | align-items: flex-end
flexbox_align-items-flexend-2 = flexbox | align-items: flex-end
flexbox_align-items-flexstart = flexbox | align-items: flex-start
flexbox_align-items-flexstart-2 = flexbox | align-items: flex-start
flexbox_align-items-stretch = flexbox | align-items: stretch
flexbox_align-items-stretch-2 = flexbox | align-items: stretch
flexbox_align-items-stretch-writing-modes = Flexbox align-items: stretch with writing-mode vertical-lr and vertical-rl
  • vertical-writing-mode flex items should stretch
flexbox_align-self-auto = flexbox | align-self: auto
flexbox_align-self-baseline = flexbox | align-self: baseline
flexbox_align-self-center = flexbox | align-self: center
flexbox_align-self-flexend = flexbox | align-self: flex-end
flexbox_align-self-flexstart = flexbox | align-self: flex-start
flexbox_align-self-stretch = flexbox | align-self: stretch
flexbox_computedstyle_align-items-baseline DOM/JSScript flexbox | computed style | align-items: baseline
flexbox_computedstyle_align-items-center DOM/JSScript flexbox | computed style | align-items: center
flexbox_computedstyle_align-items-flex-end DOM/JSScript flexbox | computed style | align-items: flex-end
flexbox_computedstyle_align-items-flex-start DOM/JSScript flexbox | computed style | align-items: flex-start
flexbox_computedstyle_align-items-invalid DOM/JSScript flexbox | computed style | align-items: invalid
flexbox_computedstyle_align-items-stretch DOM/JSScript flexbox | computed style | align-items: stretch
align-self-001 = align-self - flex-start
  • The 'align-self' property set 'flex-start' aligns the flex items to the start edge of cross axis
align-self-002 = align-self - flex-end
  • The 'align-self' property set 'flex-end' aligns the flex items to the end edge of cross axis
align-self-003 = align-self - center
  • The 'align-self' property set 'center' centered the flex items in the cross axis within the line
align-self-004 = align-self - stretch
  • The 'align-self' property set 'stretch' makes the cross size of the item's margin box as close to the same size as the line as possible
align-self-005 = align-self - stretch (height: number)
  • The 'align-self' property set 'stretch' will be invalid while cross size of the flex item set exact number
align-self-006 align-self - baseline
  • The 'align-self' property set 'baseline' aligns the flex items to the baseline of content
align-self-007 = align-self - auto and align-items - flex-start
  • The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'
align-self-008 = align-self - auto and align-items - flex-end
  • The 'align-self' property set 'auto' aligns flex items to end edge of cross-axis when 'align-items' set 'flex-end'
align-self-009 = align-self - auto and align-items - center
  • The 'align-self' property set 'auto' will center flex items the flex items in the cross axis when 'align-items' set 'center'
align-self-010 align-self - auto and align-items - baseline
  • The 'align-self' property set 'auto' aligns the flex items to the baseline of content when 'align-items' set 'baseline'
align-self-011 = align-self - auto and align-items - stretch
  • The 'align-self' property set 'auto' makes the cross size of the item's margin box as close to the same size as the line as possible when 'align-items' set 'stretch'
align-self-012 = align-self - auto (initial value)
  • The initial value of 'align-self' property is 'auto'
align-self-013 = align-self - invalid if applied to flex container
  • The 'align-self' property is invalid if applied to flex container
flexbox_computedstyle_align-self-baseline DOM/JSScript flexbox | computed style | align-self: baseline
flexbox_computedstyle_align-self-center DOM/JSScript flexbox | computed style | align-self: center
flexbox_computedstyle_align-self-flex-end DOM/JSScript flexbox | computed style | align-self: flex-end
flexbox_computedstyle_align-self-flex-start DOM/JSScript flexbox | computed style | align-self: flex-start
flexbox_computedstyle_align-self-invalid DOM/JSScript flexbox | computed style | align-self: invalid
flexbox_computedstyle_align-self-stretch DOM/JSScript flexbox | computed style | align-self: stretch
+ 8.4 Packing Flex Lines: the align-content property
align-content-001 = A multi-line flex container with the 'align-content' property set to 'center'
  • This test checks that a multi-line flex container with 'align-content: center' centers lines in the flex container.
align-content-002 = A multi-line flex container with the 'align-content' property set to 'flex-start'
  • This test checks that a multi-line flex container with 'align-content: flex-start' packs lines toward the start of the flex container.
align-content-003 = A multi-line flex container with the 'align-content' property set to 'flex-end'
  • This test checks that a multi-line flex container with 'align-content: flex-end' packs lines toward the end of the flex container.
align-content-004 = A multi-line flex container with the 'align-content' property set to 'space-between'
  • This test checks that a multi-line flex container with 'align-content: space-between' distributes lines evenly in the flex container.
align-content-005 = A multi-line flex container with the 'align-content' property set to 'space-around'
  • This test checks that a multi-line flex container with 'align-content: space-around' distributes lines evenly in the flex container, with half-size spaces on either end.
align-content-006 = A multi-line flex container with the 'align-content' property set to 'stretch'
  • This test checks that a multi-line flex container with 'align-content: stretch' stretches lines to take up the remaining space.
align-content_center align-content_center
  • Check if the web engine can identify the align-content value center.
align-content_flex-end align-content_flex-end
  • Check if the web engine can identify the align-content value flex-end.
align-content_flex-start align-content_flex-start
  • Check if the web engine can identify the align-content value flex-start.
align-content_space-around align-content_space-around
  • Check if the web engine can identify align-content value space-around.
align-content_space-between align-content_space-between
  • Check if the display can recognize inline-flex value.
align-content_stretch align-content_stretch
  • Check if the web engine can identify the align-content value stretch.
flexbox-align-content-horiz-001a = Testing 'align-content' in a horizontal flex container
flexbox-align-content-horiz-001b = Testing 'align-content' in a horizontal flex container
flexbox-align-content-vert-001a = Testing 'align-content' in a vertical flex container
flexbox-align-content-vert-001b = Testing 'align-content' in a vertical flex container
flexbox-overflow-horiz-005 = Testing 'overflow' property on a horizontal flex container, with 'align-content: space-around'
flexbox-overflow-vert-005 = Testing 'overflow' property on a vertical flex container, with 'align-content: space-around'
flexbox_align-content-center = flexbox | align-content: center
flexbox_align-content-flexend = flexbox | align-content: flex-end
flexbox_align-content-flexstart = flexbox | align-content: flex-start
flexbox_align-content-spacearound = flexbox | align-content: space-around
flexbox_align-content-spacebetween = flexbox | align-content: space-between
flexbox_align-content-stretch = flexbox | align-content: stretch
flexbox_align-content-stretch-2 = flexbox | align-content: stretch
flexbox_computedstyle_align-content-center DOM/JSScript flexbox | computed style | align-content: center
flexbox_computedstyle_align-content-flex-end DOM/JSScript flexbox | computed style | align-content: flex-end
flexbox_computedstyle_align-content-flex-start DOM/JSScript flexbox | computed style | align-content: flex-start
flexbox_computedstyle_align-content-space-around DOM/JSScript flexbox | computed style | align-content: space-around
flexbox_computedstyle_align-content-space-between DOM/JSScript flexbox | computed style | align-content: space-between
ttwf-reftest-flex-align-content-center = align-content property - center
  • Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-end = align-content property - flex-end
  • Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-space-around = align-content property - space-around
  • Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-space-between = align-content property - space-between
  • Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-start = align-content property - flex-start
  • Statement describing what the test case is asserting
+ 8.5 Flex Container Baselines
flexbox-baseline-align-self-baseline-horiz-001 = Testing the baseline of a horizontal flex container with baseline-aligned flex items
flexbox-baseline-align-self-baseline-vert-001 = Testing the baseline of a vertical flex container with baseline-aligned flex items
flexbox-baseline-empty-001a = Testing the baseline of an empty horizontal flex container
flexbox-baseline-empty-001b = Testing the baseline of an empty vertical flex container
flexbox-baseline-multi-item-horiz-001 = Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned
flexbox-baseline-multi-item-vert-001 = Testing the baseline of a vertical flex container whose flex items are not baseline-aligned
flexbox-baseline-multi-line-horiz-001 = Testing the baseline of a horizontal flex container with multiple flex lines
flexbox-baseline-multi-line-horiz-002 = Testing the baseline of a horizontal flex container with multiple flex lines
flexbox-baseline-multi-line-horiz-003 = Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line
flexbox-baseline-multi-line-horiz-004 = Testing the baseline of a horizontal multi-line (wrap-reverse) flex container with baseline-aligned items on first line
flexbox-baseline-multi-line-vert-001 = Testing the baseline of a vertical flex container with multiple flex lines
flexbox-baseline-multi-line-vert-002 = Testing the baseline of a vertical flex container with multiple flex lines
flexbox-baseline-single-item-001a = Testing the baseline of a horizontal flex container with one flex item
flexbox-baseline-single-item-001b = Testing the baseline of a vertical flex container with one flex item