|
+
8.2 Axis Alignment: the justify-content property |
|---|
|
css-box-justify-content |
= |
|
flexbox |css-box-justify-content
|
|
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-horiz-006 |
= |
|
Testing 'justify-content' in an auto-sized reversed 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
|
|
flexbox-justify-content-vert-006 |
= |
|
Testing 'justify-content' in a vertical flex container
|
|
flexbox-justify-content-wmvert-001 |
= |
|
Testing 'justify-content' in a vertical writing mode flex container
|
|
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 |
|
Script |
flexbox | justify-content: center / overflow
- Items that overflow a singleline justify-content:center flexbox container are positioned correctly.
|
|
flexbox_justifycontent-end |
= |
|
flexbox | justify-content: end
|
|
flexbox_justifycontent-end-rtl |
= |
|
flexbox | justify-content: end RTL
|
|
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_justifycontent-start |
= |
|
flexbox | justify-content: start
|
|
flexbox_justifycontent-start-rtl |
= |
|
flexbox | justify-content: start RTL
|
|
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-001 |
|
|
justify-content_space-between
- Check if the web engine can indentify the justify-content value space-between.
|
|
space-evenly-001 |
= |
|
CSS Box Alignment: space-evenly & flexbox with single item
- justify-content: space-evenly with flexbox and a single item must center it
|
|
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')
|
|
+
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-items-006 |
= |
|
A flex container with 'column' direction and 'align-items' property set to 'flex-start'
- This test checks that 'align-items: flex-start' implies the flex item's 'auto' width to be resolved as 'fit-content'.
|
|
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
|
|
css-flexbox-height-animation-stretch |
= |
Animated |
Items stretch correctly while content is animating
- Items should stretch vertically in all time
|
|
flexbox-align-items-center-nested-001 |
= |
|
Flexbox nested containers with align-items: center and flexible items
|
|
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-vert-rtl-005 |
= |
|
Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction:rtl'
|
|
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-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
|
|
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
|
|
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.
|
|
+
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-horiz-001a |
|
Script |
Testing 'align-content' in a horizontal flex container
|
|
align-content-horiz-001b |
|
Script |
Testing 'align-content' in a horizontal flex container
|
|
align-content-horiz-002 |
|
Script |
Testing 'align-content' in a row wrap-reverse flex container
|
|
align-content-vert-001a |
|
Script |
Testing 'align-content' in a vertical flex container
|
|
align-content-vert-001b |
|
Script |
Testing 'align-content' in a vertical flex container
|
|
align-content-vert-002 |
|
Script |
Testing 'align-content' in a column wrap-reverse flex container
|
|
align-content-wmvert-001 |
|
Script |
Testing 'align-content' in a vertical writing-mode flex container
|
|
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.
|
|
flex-align-content-center |
= |
|
align-content property - center
- Statement describing what the test case is asserting
|
|
flex-align-content-end |
= |
|
align-content property - flex-end
- Statement describing what the test case is asserting
|
|
flex-align-content-space-around |
= |
|
align-content property - space-around
- Statement describing what the test case is asserting
|
|
flex-align-content-space-between |
= |
|
align-content property - space-between
- Statement describing what the test case is asserting
|
|
flex-align-content-start |
= |
|
align-content property - flex-start
- Statement describing what the test case is asserting
|
|
flexbox-lines-must-be-stretched-by-default |
|
Script |
CSS Flexbox: align-content initial value.
- This test ensures that a flexbox container's align-content value default to 'stretch'.
|
|
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
|
|
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-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.
|
|
+
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-001a |
= |
|
Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned
|
|
flexbox-baseline-multi-item-horiz-001b |
= |
|
Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned
|
|
flexbox-baseline-multi-item-vert-001a |
= |
|
Testing the baseline of a vertical flex container whose flex items are not baseline-aligned
|
|
flexbox-baseline-multi-item-vert-001b |
= |
|
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
|
|
synthesized-baseline-flexbox-001 |
|
AhemScript |
Synthesized baseline flexbox
- This test check the synthesized of a flexbox container if it has no items (it should use the flex container margin box) or if the items have no baseline (in that case it should use the flex item's border box).
|