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