|
+
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_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
|
|
autoheight-regions-in-fixed-sized-flexbox-001 |
= |
Ahem |
CSS Regions: Auto-height regions inside fixed sized flexbox
- Test checks that auto-height regions respect the flex grow property when placed inside a fixed sized flexbox with a single row.
|
|
autoheight-regions-in-fixed-sized-flexbox-002 |
= |
Ahem |
CSS Regions: Auto-height regions inside fixed sized flexbox with column flow
- Test checks that auto-height regions placed inside a fixed sized flexbox with column flow have the correct computed height. There are two regions placed inside the same flex container having the same 'grow' value. The space should be distributed evenly between the two.
|
|
css-flexbox-img-expand-evenly |
= |
|
Image Expansion
- 3 square 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.
|
|
flexbox_computedstyle_flex-grow-0 |
|
DOM/JS |
flexbox | computed style | flex-grow: 0
|
|
flexbox_computedstyle_flex-grow-invalid |
|
DOM/JS |
flexbox | computed style | flex-grow: negative
|
|
flexbox_computedstyle_flex-grow-number |
|
DOM/JS |
flexbox | computed style | flex-grow: number
|
|
flexbox_interactive_flex-grow-transitions |
|
Interact |
flexbox | transitioned flex-grow
|
|
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
|
|
flexbox_computedstyle_flex-shrink-0 |
|
DOM/JS |
flexbox | computed style | flex-shrink: 0
|
|
flexbox_computedstyle_flex-shrink-invalid |
|
DOM/JS |
flexbox | computed style | flex-shrink: negative
|
|
flexbox_computedstyle_flex-shrink-number |
|
DOM/JS |
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
|
|
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.
|
|
flexbox_flex-natural-variable-zero-basis |
= |
|
flexbox | flex: larger integer, zero basis
|