CSS Flexible Box Layout Module Level 1 CR Test Suite

Flexibility (170 tests)

Test Refs Flags Info
+ 7 Flexibility
+ 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.
flex-basis-009 Script
  • flex-basis:auto on orthogonal item in horizontal column flexbox is calculated correctly
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.1.1 Basic Values of flex
flexbox_flex-auto = flexbox | flex: auto
flexbox_flex-initial = flexbox | flex: initial
flexbox_flex-initial-2 = flexbox | flex: initial
flexbox_flex-natural = flexbox | flex: larger integer
flexbox_flex-none = flexbox | flex: none
flexbox_flex-none-wrappable-content = Specifying flex:none on wrappable content should give content its full width
  • When content has flex:none, it should be given its full width
+ 7.2 Components of Flexibility
+ 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
flex-factor-less-than-one Script CSS Flexbox: flex factors less than one
  • flex-grow and flex-shrink factors less than 1 work
+ 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
flex-factor-less-than-one Script CSS Flexbox: flex factors less than one
  • flex-grow and flex-shrink factors less than 1 work
+ 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
flexbox-flex-basis-content-001a = Testing "flex-basis: content" in a row-oriented flex container
flexbox-flex-basis-content-001b = Testing "flex-basis: content" (set via the "flex" shorthand) in a row-oriented flex container.
flexbox-flex-basis-content-002a = Testing "flex-basis: content" in a column-oriented flex container
flexbox-flex-basis-content-002b = Testing "flex-basis: content" (set via the "flex" shorthand) in a column-oriented flex container.