|
+
7.1 The flex Shorthand |
|---|
|
flex-001 |
= |
|
The 'flex' shorthand adjusting the 'flex-grow' sub-property
- This test checks that the flex grow factor determines the distribution of positive free space.
|
|
flex-002 |
= |
|
The 'flex' shorthand adjusting the 'flex-shrink' sub-property
- This test checks that the flex shrink factor is multiplied by the flex base size when distributing negative space.
|
|
flex-003 |
= |
|
Comparing two different elements using different values for the 'flex-grow' sub-property on the 'flex' shorthand
- This test checks that the flex items with a different flex grow factor have different flexibilities.
|
|
flex-004 |
= |
|
Comparing two different elements using different values for the 'flex-shrink' sub-property on the 'flex' shorthand
- This test checks that the flex items with a different flex shrink factor have different flexibilities.
|
|
flex-vertical-align-effect |
= |
|
'display' property set to 'flex'
- vertical-align property has no effect
|
|
flexbox_computedstyle_flex-shorthand |
|
DOM/JSScript |
flexbox | computed style | flex: invalid
|
|
flexbox_computedstyle_flex-shorthand-0-auto |
|
DOM/JSScript |
flexbox | computed style | flex: 0 auto
|
|
flexbox_computedstyle_flex-shorthand-auto |
|
DOM/JSScript |
flexbox | computed style | flex: auto
|
|
flexbox_computedstyle_flex-shorthand-initial |
|
DOM/JSScript |
flexbox | computed style | flex: initial
|
|
flexbox_computedstyle_flex-shorthand-invalid |
|
DOM/JSScript |
flexbox | computed style | flex: invalid
|
|
flexbox_computedstyle_flex-shorthand-none |
|
DOM/JSScript |
flexbox | computed style | flex: auto
|
|
flexbox_computedstyle_flex-shorthand-number |
|
DOM/JSScript |
flexbox | computed style | flex: number
|
|
flexbox_flex-0-0 |
= |
|
flexbox | flex: 0 0
|
|
flexbox_flex-0-0-0 |
= |
|
flexbox | flex: 0 0 0
|
|
flexbox_flex-0-0-0-unitless |
= |
|
flexbox | flex: 0 0 0 unitless
|
|
flexbox_flex-0-0-1-unitless-basis |
= |
|
flexbox | flex: 0 0 N unitless
|
|
flexbox_flex-0-0-auto |
= |
|
flexbox | flex: 0 0 auto
|
|
flexbox_flex-0-0-auto-shrink |
= |
|
flexbox | flex: 0 0 auto | shrinking
|
|
flexbox_flex-0-0-n |
= |
|
flexbox | flex: 0 0 N
|
|
flexbox_flex-0-0-n-shrink |
= |
|
flexbox | flex: 0 0 N | shrinking
|
|
flexbox_flex-0-0-n-unitless-basis |
= |
|
flexbox | flex: 0 0 N unitless
|
|
flexbox_flex-0-0-npercent |
= |
|
flexbox | flex: 0 0 N%
|
|
flexbox_flex-0-0-npercent-shrink |
= |
|
flexbox | flex: 0 0 N% | shrinking
|
|
flexbox_flex-0-1 |
= |
|
flexbox | flex: 0 1
|
|
flexbox_flex-0-1-0 |
= |
|
flexbox | flex: 0 1 0
|
|
flexbox_flex-0-1-0-unitless |
= |
|
flexbox | flex: 0 1 0 unitless
|
|
flexbox_flex-0-1-1-unitless-basis |
= |
|
flexbox | flex: 0 1 1 unitless
|
|
flexbox_flex-0-1-auto |
= |
|
flexbox | flex: 0 1 auto
|
|
flexbox_flex-0-1-auto-shrink |
= |
|
flexbox | flex: 0 1 auto | shrinking
|
|
flexbox_flex-0-1-n |
= |
|
flexbox | flex: 0 1 N
|
|
flexbox_flex-0-1-n-shrink |
= |
|
flexbox | flex: 0 1 N | shrinking
|
|
flexbox_flex-0-1-n-unitless-basis |
= |
|
flexbox | flex: 0 1 N unitless
|
|
flexbox_flex-0-1-npercent |
= |
|
flexbox | flex: 0 1 N%
|
|
flexbox_flex-0-1-npercent-shrink |
= |
|
flexbox | flex: 0 1 N% | shrinking
|
|
flexbox_flex-0-auto |
= |
|
flexbox | flex: 0 auto
|
|
flexbox_flex-0-n |
= |
|
flexbox | flex: 0 N
|
|
flexbox_flex-0-n-0 |
= |
|
flexbox | flex: 0 N 0
|
|
flexbox_flex-0-n-0-unitless |
= |
|
flexbox | flex: 0 N 0 unitless
|
|
flexbox_flex-0-n-auto |
= |
|
flexbox | flex: 0 N auto
|
|
flexbox_flex-0-n-auto-shrink |
= |
|
flexbox | flex: 0 N auto | shrinking
|
|
flexbox_flex-0-n-n |
= |
|
flexbox | flex: 0 N N
|
|
flexbox_flex-0-n-n-shrink |
= |
|
flexbox | flex: 0 N N | shrinking
|
|
flexbox_flex-0-n-npercent |
= |
|
flexbox | flex: 0 N N%
|
|
flexbox_flex-0-n-npercent-shrink |
= |
|
flexbox | flex: 0 N N% | shrinking
|
|
flexbox_flex-1-0 |
= |
|
flexbox | flex: 1 0
|
|
flexbox_flex-1-0-0 |
= |
|
flexbox | flex: 1 0 0
|
|
flexbox_flex-1-0-0-unitless |
= |
|
flexbox | flex: 1 0 0 unitless
|
|
flexbox_flex-1-0-auto |
= |
|
flexbox | flex: 1 0 auto
|
|
flexbox_flex-1-0-auto-shrink |
= |
|
flexbox | flex: 1 0 auto | shrinking
|
|
flexbox_flex-1-0-n |
= |
|
flexbox | flex: 1 0 N
|
|
flexbox_flex-1-0-n-shrink |
= |
|
flexbox | flex: 1 0 N | shrinking
|
|
flexbox_flex-1-0-npercent |
= |
|
flexbox | flex: 1 0 N%
|
|
flexbox_flex-1-0-npercent-shrink |
= |
|
flexbox | flex: 1 0 N% | shrinking
|
|
flexbox_flex-1-1 |
= |
|
flexbox | flex: 1 1
|
|
flexbox_flex-1-1-0 |
= |
|
flexbox | flex: 1 1 0
|
|
flexbox_flex-1-1-0-unitless |
= |
|
flexbox | flex: 1 1 0 unitless
|
|
flexbox_flex-1-1-auto |
= |
|
flexbox | flex: 1 1 auto
|
|
flexbox_flex-1-1-auto-shrink |
= |
|
flexbox | flex: 1 1 auto | shrinking
|
|
flexbox_flex-1-1-n |
= |
|
flexbox | flex: 1 1 N
|
|
flexbox_flex-1-1-n-shrink |
= |
|
flexbox | flex: 1 1 N | shrinking
|
|
flexbox_flex-1-1-npercent |
= |
|
flexbox | flex: 1 1 N%
|
|
flexbox_flex-1-1-npercent-shrink |
= |
|
flexbox | flex: 1 1 N% | shrinking
|
|
flexbox_flex-1-n |
= |
|
flexbox | flex: 1 N
|
|
flexbox_flex-1-n-0 |
= |
|
flexbox | flex: 1 N 0
|
|
flexbox_flex-1-n-0-unitless |
= |
|
flexbox | flex: 1 N 0 unitless
|
|
flexbox_flex-1-n-auto |
= |
|
flexbox | flex: 1 N auto
|
|
flexbox_flex-1-n-auto-shrink |
= |
|
flexbox | flex: 1 N auto | shrinking
|
|
flexbox_flex-1-n-n |
= |
|
flexbox | flex: 1 N N
|
|
flexbox_flex-1-n-n-shrink |
= |
|
flexbox | flex: 1 N N | shrinking
|
|
flexbox_flex-1-n-npercent |
= |
|
flexbox | flex: 1 N N%
|
|
flexbox_flex-1-n-npercent-shrink |
= |
|
flexbox | flex: 1 N N% | shrinking
|
|
flexbox_flex-n-0 |
= |
|
flexbox | flex: N 0
|
|
flexbox_flex-n-0-0 |
= |
|
flexbox | flex: N 0 0
|
|
flexbox_flex-n-0-0-unitless |
= |
|
flexbox | flex: N 0 0 unitless
|
|
flexbox_flex-n-0-auto |
= |
|
flexbox | flex: N 0 auto
|
|
flexbox_flex-n-0-auto-shrink |
= |
|
flexbox | flex: N 0 auto | shrinking
|
|
flexbox_flex-n-0-n |
= |
|
flexbox | flex: N 0 N
|
|
flexbox_flex-n-0-n-shrink |
= |
|
flexbox | flex: N 0 N | shrinking
|
|
flexbox_flex-n-0-npercent |
= |
|
flexbox | flex: N 0 N%
|
|
flexbox_flex-n-0-npercent-shrink |
= |
|
flexbox | flex: N 0 N% | shrinking
|
|
flexbox_flex-n-1 |
= |
|
flexbox | flex: N 1
|
|
flexbox_flex-n-1-0 |
= |
|
flexbox | flex: N 1 0
|
|
flexbox_flex-n-1-0-unitless |
= |
|
flexbox | flex: N 1 0 unitless
|
|
flexbox_flex-n-1-auto |
= |
|
flexbox | flex: N 1 auto
|
|
flexbox_flex-n-1-auto-shrink |
= |
|
flexbox | flex: N 1 auto | shrinking
|
|
flexbox_flex-n-1-n |
= |
|
flexbox | flex: N 1 N
|
|
flexbox_flex-n-1-n-shrink |
= |
|
flexbox | flex: N 1 N | shrinking
|
|
flexbox_flex-n-1-npercent |
= |
|
flexbox | flex: N 1 N%
|
|
flexbox_flex-n-1-npercent-shrink |
= |
|
flexbox | flex: N 1 N% | shrinking
|
|
flexbox_flex-n-n |
= |
|
flexbox | flex: N N
|
|
flexbox_flex-n-n-0 |
= |
|
flexbox | flex: N N 0
|
|
flexbox_flex-n-n-0-unitless |
= |
|
flexbox | flex: N N 0 unitless
|
|
flexbox_flex-n-n-auto |
= |
|
flexbox | flex: N N auto
|
|
flexbox_flex-n-n-auto-shrink |
= |
|
flexbox | flex: N N auto | shrinking
|
|
flexbox_flex-n-n-n |
= |
|
flexbox | flex: N N N
|
|
flexbox_flex-n-n-n-shrink |
= |
|
flexbox | flex: N N N | shrinking
|
|
flexbox_flex-n-n-npercent |
= |
|
flexbox | flex: N N N%
|
|
flexbox_flex-n-n-npercent-shrink |
= |
|
flexbox | flex: N N N% | shrinking
|
|
flexbox_interactive_flex-transitions |
|
Interact |
flexbox | transitioned flex
|
|
flexbox_interactive_order-transitions |
|
Interact |
flexbox | flex-flow and transitioned order
|
|
flexbox_interactive_order-transitions-2 |
|
Interact |
flexbox | transitioned order
|
|
flexbox_item-bottom-float |
= |
|
flexbox | GCPM bottom float
|
|
flexbox_item-top-float |
= |
|
flexbox | floated item
|
|
flexbox_rowspan-overflow |
= |
|
flexbox | flexcontainers in cells with rowspan
|
|
flexbox_rowspan-overflow-automatic |
= |
|
flexbox | flexcontainers in cells with rowspan
|
|
inline-flex |
|
Script |
CSS Flexbox: Ensure proper formatting with display: inline-flex
- This test checks that inline-flex generates a flex container box that is inline-level when placed in flow layout.
|
|
table-as-item-percent-width-cell-001 |
= |
|
display:table flex items with percent-width cells and content keywords for used flex-basis
- If a table as a flex item has used 'flex-basis:content' (or another content-based keyword), and default flex factors, and plenty of space, then it should be sized similarly to a table with 'width:max-content' in a block formatting context.
|
|
+
7.2.1 The flex-grow property |
|---|
|
css-flexbox-img-expand-evenly |
= |
|
Image Expansion
- 3 rectangular images fill out border.
|
|
flex-grow-001 |
= |
|
Flex-grow Property of Block-level Flex Items
- 'flex-grow' property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.
|
|
flex-grow-002 |
= |
|
flex-grow - 0(initial value)
- The 'flex-grow' property initial value is '0', the flex item will keep the width when 'flex-grow' set '0'
|
|
flex-grow-003 |
= |
|
flex-grow - negative number
- The 'flex-grow' property set negative number, the flex item will not grow.
|
|
flex-grow-004 |
= |
|
flex-grow - (invalid when no space distributed)
- The 'flex-grow' property is invalid when the flex container has no space distributed.
|
|
flex-grow-005 |
= |
|
flex-grow - (invalid when applied to flex container)
- The 'flex-grow' property is invalid when the property applied to flex container.
|
|
flex-grow-006 |
= |
|
flex-grow - positive number(fill all space)
- Test checks that all space of flex container will be filled when there is only one flex item and 'flex-grow' set any positive number.
|
|
flex-grow-007 |
= |
|
flex-grow - less than one
- Test checks that remaining free space is calculated from 'flex-grow' set to positive number less than one.
|
|
flex-grow-interpolation |
|
Script |
flex-grow interpolation
- flex-grow supports animation by computed value type
|
|
flexbox_computedstyle_flex-grow-0 |
|
DOM/JSScript |
flexbox | computed style | flex-grow: 0
|
|
flexbox_computedstyle_flex-grow-invalid |
|
DOM/JSScript |
flexbox | computed style | flex-grow: negative
|
|
flexbox_computedstyle_flex-grow-number |
|
DOM/JSScript |
flexbox | computed style | flex-grow: number
|
|
flexbox_interactive_flex-grow-transitions |
|
Interact |
flexbox | transitioned flex-grow
|
|
+
7.2.2 The flex-shrink property |
|---|
|
flex-shrink-001 |
= |
|
flex-shrink - number(positive)
- The flex-shrink property set positive number determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed
|
|
flex-shrink-002 |
= |
|
flex-shrink - number(negative)
- The flex-shrink property set negative is invalid to shrink flex items when negative free space is distributed
|
|
flex-shrink-003 |
= |
|
flex-shrink - 1(initial value)
- The flex-shrink property initial value is 1
|
|
flex-shrink-004 |
= |
|
flex-shrink - number(flex container has enough space)
- The flex-shrink property is invalid when flex container has enough space to load flex items
|
|
flex-shrink-005 |
= |
|
flex-shrink - 0
- The flex-shrink property set 0 will ignore the flex container
|
|
flex-shrink-006 |
= |
|
flex-shrink - 0(one of flex-shrinks sets 0, another not)
- The flex item whose flex-shrink property of set 0 will displayed on the top of all flex items
|
|
flex-shrink-007 |
= |
|
flex-shrink - applied to flex container
- The flex-shrink property applied to flex container is invalid, all flex items will use the default value 1
|
|
flex-shrink-008 |
= |
|
flex-shrink - less than one
- Test checks that remaining free space is calculated from 'flex-shrink' set to positive number less than one.
|
|
flex-shrink-interpolation |
|
Script |
flex-shrink interpolation
- flex-shrink supports animation as a number
|
|
flexbox_computedstyle_flex-shrink-0 |
|
DOM/JSScript |
flexbox | computed style | flex-shrink: 0
|
|
flexbox_computedstyle_flex-shrink-invalid |
|
DOM/JSScript |
flexbox | computed style | flex-shrink: negative
|
|
flexbox_computedstyle_flex-shrink-number |
|
DOM/JSScript |
flexbox | computed style | flex-shrink: number
|
|
flexbox_interactive_flex-shrink-transitions |
|
Interact |
flexbox | transitioned flex-shrink
|
|
flexbox_interactive_flex-shrink-transitions-invalid |
|
Interact |
flexbox | invalid flex-shrink transition
|
|
+
7.2.3 The flex-basis property |
|---|
|
auto-height-with-flex |
= |
|
- This test ensures that a vertical flexbox (with auto height) and a flexitem with flex: 1; will not have 0 set to the flex basis, but to auto instead.
|
|
flex-basis-001 |
= |
|
flex-basis - positive number
- The 'flex-basis' property set positive number, the actual value of test element size is same as the positive number
|
|
flex-basis-002 |
= |
|
flex-basis - positive number
- The 'flex-basis' property specified correct value, the actual value of test element size is same as to the value of 'flex-basis' property, and the 'width' property is invalid.
|
|
flex-basis-003 |
= |
|
flex-basis - negative number(width not specified)
- The 'flex-basis' property set negative number, the tested element is not shown when width not set either.
|
|
flex-basis-004 |
= |
|
flex-basis - negative number(width specified)
- The 'flex-basis' property set negative number, the actual width of tested element is same as the value of 'width' property specified.
|
|
flex-basis-005 |
= |
|
flex-basis - 0
- The 'flex-basis' property set '0', the actual width of tested element is same as 0.
|
|
flex-basis-006 |
= |
|
flex-basis - 0%
- The 'flex-basis' property set '0%', the actual width of tested element is same as 0.
|
|
flex-basis-007 |
= |
|
flex-basis - auto
- The 'flex-basis' property set 'auto', the actual width of tested element same as the value which specified by width property.
|
|
flex-basis-008 |
= |
|
flex-basis - 50%
- The 'flex-basis' property set positive percentage, the actual width of tested element same as the percentage of flex container size.
|
|
flex-basis-010 |
= |
|
Indefinite % flex-basis should cause height to be ignored
|
|
flex-basis-011 |
= |
|
% flex-basis should not cause engines to treat items as percentage sized
|
|
flex-basis-composition |
|
Script |
flex-basis composition
- flex-basis supports animation by computed value type
|
|
flex-basis-interpolation |
|
Script |
flex-basis interpolation
- flex-basis supports animation by computed value type
|
|
flexbox_computedstyle_flex-basis-0 |
|
DOM/JSScript |
flexbox | computed style | flex-basis: 0
|
|
flexbox_computedstyle_flex-basis-0percent |
|
DOM/JSScript |
flexbox | computed style | flex-basis: 0%
|
|
flexbox_computedstyle_flex-basis-auto |
|
DOM/JSScript |
flexbox | computed style | flex-basis: auto
|
|
flexbox_computedstyle_flex-basis-percent |
|
DOM/JSScript |
flexbox | computed style | flex-basis: percent
|
|
flexbox_flex-basis |
= |
|
flexbox | flex-basis: percentage
|
|
flexbox_flex-basis-shrink |
= |
|
flexbox | flex-basis: percentage, flex-shrink: +integer
|
|
flexbox_flex-natural-mixed-basis |
= |
|
flexbox | flex: larger integer, mixed basis
|
|
flexbox_flex-natural-mixed-basis-auto |
= |
|
flexbox | flex: larger integer, mixed basis, auto
|
|
flexbox_flex-natural-variable-auto-basis |
= |
|
flexbox | flex: larger integer, auto basis
|
|
flexbox_flex-natural-variable-zero-basis |
= |
|
flexbox | flex: larger integer, zero basis
|
|
flexbox_interactive_flex-basis-transitions |
|
Interact |
flexbox | transitioned flex-basis
|