CSS Flexible Box Layout Module Level 1 CR Test Suite

Ordering and Orientation (129 tests)

Test Refs Flags Info
+ 5 Ordering and Orientation
flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom = Align content flex-start with writing mode vertical-rl.
  • In vertical Japanese, for example, a row flexbox lays out its contents from top to bottom.
+ 5.1 Flex Flow Direction: the flex-direction property
autoheight-regions-in-autoheight-flexbox-001 = Ahem CSS Regions: Auto-height regions in auto-height flex container
  • Test that auto-height regions placed in a flex container with auto-height and row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on the second row and into the region from the first row, making the left blue rectangle taller than the green rectangle on the right.
autoheight-regions-in-autoheight-flexbox-002 = Ahem CSS Regions: Auto-height regions with vertical writing mode in auto-height flexbox
  • Test checks that auto-height regions having content with vertical writing mode are sized correctly when placed inside a flex container. The flowed content should be displayed as a horizontal green stripe.
column-flexbox-break = Ahem CSS Regions: fragmenting a flex container with column flow
  • Test checks that a flex container with column flow is fragmented between regions.
flex-direction_column flex-direction_column
  • Check if the web engine can identify the flex-direction value column.
flex-direction_column-reverse flex-direction_column-reverse
  • Check if the web engine can identify the flex-direction value column-reverse.
flex-direction_row flex-direction_row
  • Check if the web engine can identify the flex-direction value row.
flex-direction_row-reverse flex-direction_row-reverse
  • Check if the web engine can identify the flex-direction value row-reverse.
flexbox-flex-direction-column = Flex-direction = column
  • Test checks that flex container's main axis has the same orientation as the block axis of the current writing mode, when flex-direction = column. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.
flexbox-flex-direction-column-reverse = Flex-direction = column-reverse
  • Test checks that flex container's main axis has the same orientation as the block axis of the current writing mode, and main-start and main-end are swapped, when flex-direction = column-reverse. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.
flexbox-flex-direction-default = Flex-direction = row by default
  • Test checks that flex container's main axis has the same orientation as the inline axis of the current writing mode by default. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.
flexbox-flex-direction-row = Flex-direction = row
  • Test checks that flex container's main axis has the same orientation as the inline axis of the current writing mode, when flex-direction = row. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.
flexbox-flex-direction-row-reverse = Flex-direction = row-reverse
  • Test checks that flex container's main axis has the opposite orientation as the inline axis of the current writing mode, when flex-direction = row-reverse. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.
flexbox_direction-column = flexbox | flex-direction: column
flexbox_direction-column-reverse = flexbox | flex-direction: column-reverse
flexbox_direction-row-reverse = flexbox | flex-direction: row-reverse
multi-line-wrap-reverse-column-reverse = flex container multiline wrapping-reverse in column-reverse direction.
  • This test check that a flex container reverse-wraps blocks multiline in column-reverse direction.
multi-line-wrap-reverse-row-reverse = flex container multiline wrapping-reverse in row-reverse direction.
  • This test check that a flex container reverse-wraps blocks multiline in row-reverse direction.
multi-line-wrap-with-column-reverse = flex container multiline wrapping in column-reverse direction
  • This test check that a flex container wraps blocks multiline in column-reverse direction.
multi-line-wrap-with-row-reverse = flex container multiline wrapping in row-reverse direction
  • This test check that a flex container wraps blocks multiline in row-reverse direction.
ttwf-reftest-flex-direction-column = flex-direction proprety - column
  • Statement describing what the test case is asserting
ttwf-reftest-flex-direction-column-reverse = flex-direction proprety - column-reverse
  • Statement describing what the test case is asserting
ttwf-reftest-flex-direction-row-reverse = flex-direction proprety - row-reverse
  • Statement describing what the test case is asserting
flex-margin-no-collapse = flex item margins
  • The vertical gap between two green boxs should be 100px.
flexbox-writing-mode-001 = Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'
flexbox-writing-mode-002 = Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'
flexbox-writing-mode-003 = Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'
flexbox-writing-mode-004 = Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'
flexbox-writing-mode-005 = Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'
flexbox-writing-mode-006 = Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'
+ 5.2 Flex Line Wrapping: the flex-wrap property
flexbox-flex-wrap-horiz-001 = Testing flex-wrap in horizontal flex containers
flexbox-flex-wrap-horiz-002 = Ensure that min-width is honored for horizontal multi-line flex containers
flexbox-flex-wrap-vert-001 = Testing flex-wrap in vertical flex containers
flexbox-flex-wrap-vert-002 = Ensure that min-height is honored for vertical multi-line flex containers
flexbox-overflow-horiz-004 = Testing 'overflow' property on a horizontal flex container, with 'flex-wrap: wrap'
flexbox-overflow-vert-004 = Testing 'overflow' property on a vertical flex container, with 'flex-wrap: wrap'
autoheight-regions-in-autoheight-flexbox-001 = Ahem CSS Regions: Auto-height regions in auto-height flex container
  • Test that auto-height regions placed in a flex container with auto-height and row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on the second row and into the region from the first row, making the left blue rectangle taller than the green rectangle on the right.
autoheight-regions-in-fixed-sized-flexbox-003 = Ahem CSS Regions: Auto-height regions inside a fixed sized flexbox with column wrap flow
  • Test checks the layout of auto-height regions placed inside a flexbox with a fixed size and column wrap flow. The flex container should have two columns with three regions each.
autoheight-regions-in-fixed-sized-flexbox-006 = CSS Regions: auto-height regions inside a flex container with fixed size
  • Test that the flex container stretches a region flex item with a height smaller than the flex container's inner cross size.
flex-box-wrap = flex-wrap: wrap
  • the test passes if you see green box.
flex-flow-001 = flex-flow - row nowrap
  • The 'flex-flow' property set 'row nowrap' controls the flex container is single-line
flex-flow-002 = flex-flow - row wrap
  • The 'flex-flow' property set 'row wrap' controls the flex container is multi-line
flex-flow-003 = flex-flow - row wrap-reverse
  • The 'flex-flow' property set 'row wrap-reverse' controls the flex container is multi-line but the cross-start and cross-end directions are swapped
flex-flow-004 = flex-flow - row-reverse nowrap
  • The 'flex-flow' property set 'row-reverse nowrap' controls the flex container is single-line, but the main-start and main-end directions are swapped
flex-flow-005 = flex-flow - row-reverse wrap
  • The 'flex-flow' property set 'row-reverse wrap' controls the flex container is multi-line but the main-start and main-end directions are swapped
flex-flow-006 = flex-flow - row-reverse wrap-reverse
  • The 'flex-flow' property set 'row-reverse wrap-reverse' controls the flex container is multi-line but the main-start and main-end, cross-start and cross-end directions are all swapped
flex-flow-007 = flex-flow - column nowrap
  • The 'flex-flow' property set 'column nowrap' controls the flex container is single-line, but the main axis is vertical
flex-flow-008 = flex-flow - column wrap
  • The 'flex-flow' property set 'column wrap' controls the flex container is multi-line but the main axis is vertical
flex-flow-009 = flex-flow - column wrap-reverse
  • The 'flex-flow' property set 'column wrap-reverse' controls the flex container is multi-line but the main axis is vertical, the cross-start and cross-end directions are swapped
flex-flow-010 = flex-flow - column-reverse nowrap
  • The 'flex-flow' property set 'column-reverse nowrap' controls the flex container is single-line, but the main axis is vertical, the main-start and main-end directions are swapped
flex-flow-011 = flex-flow - column-reverse wrap
  • The 'flex-flow' property set 'column-reverse wrap' controls the flex container is multi-line but the main axis is vertical, the main-start and main-end directions are swapped
flex-flow-012 = flex-flow - column-reverse wrap-reverse
  • The 'flex-flow' property set 'column-reverse wrap-reverse' controls the flex container is multi-line but the main axis is vertical, the 'cross-start/cross-end' and 'main-start/main-end' directions are all swapped
flex-wrap-001 A flex container with 'flex-flow' set to 'wrap'
  • This test checks that the flex container with 'flex-flow: wrap' is a multi-line flex container.
flex-wrap_nowrap flex-wrap_nowrap
  • Check if the web engine can identify the flex-wrap value nowrap.
flex-wrap_wrap flex-wrap_wrap
  • Check if the display can recognize inline-flex value.
flex-wrap_wrap-reverse flex-wrap_wrap-reverse
  • Check if the web engine can identify the flex-wrap value wrap-reverse.
flexbox-flex-wrap-default = Flex-wrap defaults to nowrap
  • Test checks that flex elements default to flex-wrap: nowrap if flex-wrap is not set. With wrapping disabled, the .green flex item should extend outside the bounds of its container, as it is set to flex:none.
flexbox-flex-wrap-nowrap = Flex-wrap = nowrap
  • Test checks that flex elements set to flex-wrap: nowrap will not wrap their flex items. With wrapping disabled, the .green flex item should extend outside the bounds of its container, as it is set to flex:none.
flexbox-flex-wrap-wrap = Flex-wrap = wrap
  • Test checks that flex elements wrap left-to-right within their flex container when flex-wrap = 'wrap', matching the writing direction. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.
flexbox-flex-wrap-wrap-reverse = Flex-wrap = wrap-reverse
  • Test checks that flex elements wrap left-to-right and bottom-to-top within their flex container when flex-wrap = 'wrap-reverse'. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.
flexbox_computedstyle_flex-wrap-invalid DOM/JS flexbox | computed style | flex-wrap: wrap
flexbox_computedstyle_flex-wrap-nowrap DOM/JS flexbox | computed style | flex-wrap: nowrap
flexbox_computedstyle_flex-wrap-wrap DOM/JS flexbox | computed style | flex-wrap: wrap
flexbox_computedstyle_flex-wrap-wrap-reverse DOM/JS flexbox | computed style | flex-wrap: wrap-reverse
flexbox_rowspan = flexbox | flexcontainers in cells with rowspan
flexbox_wrap = flexbox | flex-wrap: wrap
flexbox_wrap-long = flexbox | flex-wrap: wrap / long items
flexbox_wrap-reverse = flexbox | flex-wrap: wrap
multi-line-wrap-reverse-column-reverse = flex container multiline wrapping-reverse in column-reverse direction.
  • This test check that a flex container reverse-wraps blocks multiline in column-reverse direction.
multi-line-wrap-reverse-row-reverse = flex container multiline wrapping-reverse in row-reverse direction.
  • This test check that a flex container reverse-wraps blocks multiline in row-reverse direction.
multi-line-wrap-with-column-reverse = flex container multiline wrapping in column-reverse direction
  • This test check that a flex container wraps blocks multiline in column-reverse direction.
multi-line-wrap-with-row-reverse = flex container multiline wrapping in row-reverse direction
  • This test check that a flex container wraps blocks multiline in row-reverse direction.
ttwf-reftest-flex-wrap = flex-wrap proprety - wrap
  • Statement describing what the test case is asserting
ttwf-reftest-flex-wrap-reverse = flex-wrap proprety - wrap-reverse
  • Statement describing what the test case is asserting
+ 5.3 Flex Direction and Wrap: the flex-flow shorthand
autoheight-regions-in-autoheight-flexbox-001 = Ahem CSS Regions: Auto-height regions in auto-height flex container
  • Test that auto-height regions placed in a flex container with auto-height and row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on the second row and into the region from the first row, making the left blue rectangle taller than the green rectangle on the right.
flexbox-flex-flow-001 = Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each container
flexbox-flex-flow-002 = Testing all the values of the "flex-flow" shorthand property, with 3 flex items in each container
css-box-justify-content = flexbox |css-box-justufy-content
css-flexbox-column = flex direction: row
  • Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical.
css-flexbox-column-reverse = flex direction: row
  • Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical.
css-flexbox-column-reverse-wrap = flex direction: row
  • Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical.
css-flexbox-column-reverse-wrap-reverse = flex direction: row
  • Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical.
css-flexbox-column-wrap = flex direction: row
  • Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical.
css-flexbox-column-wrap-reverse = flex direction: row
  • Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical.
css-flexbox-row = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.
css-flexbox-row-reverse = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row-reverse, the flex container is vertical.
css-flexbox-row-reverse-wrap = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row-reverse wrap, the flex container is vertical.
css-flexbox-row-reverse-wrap-reverse = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row-reverse wrap-reverse, the flex container is vertical.
css-flexbox-row-wrap = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row wrap, the flex container is vertical.
css-flexbox-row-wrap-reverse = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row wrap-reverse, the flex container is vertical.
css-flexbox-test1 = flex direction: row, writing mode vertical
  • Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.
flex-flow-001 = flex-flow - row nowrap
  • The 'flex-flow' property set 'row nowrap' controls the flex container is single-line
flex-flow-002 = flex-flow - row wrap
  • The 'flex-flow' property set 'row wrap' controls the flex container is multi-line
flex-flow-003 = flex-flow - row wrap-reverse
  • The 'flex-flow' property set 'row wrap-reverse' controls the flex container is multi-line but the cross-start and cross-end directions are swapped
flex-flow-004 = flex-flow - row-reverse nowrap
  • The 'flex-flow' property set 'row-reverse nowrap' controls the flex container is single-line, but the main-start and main-end directions are swapped
flex-flow-005 = flex-flow - row-reverse wrap
  • The 'flex-flow' property set 'row-reverse wrap' controls the flex container is multi-line but the main-start and main-end directions are swapped
flex-flow-006 = flex-flow - row-reverse wrap-reverse
  • The 'flex-flow' property set 'row-reverse wrap-reverse' controls the flex container is multi-line but the main-start and main-end, cross-start and cross-end directions are all swapped
flex-flow-007 = flex-flow - column nowrap
  • The 'flex-flow' property set 'column nowrap' controls the flex container is single-line, but the main axis is vertical
flex-flow-008 = flex-flow - column wrap
  • The 'flex-flow' property set 'column wrap' controls the flex container is multi-line but the main axis is vertical
flex-flow-009 = flex-flow - column wrap-reverse
  • The 'flex-flow' property set 'column wrap-reverse' controls the flex container is multi-line but the main axis is vertical, the cross-start and cross-end directions are swapped
flex-flow-010 = flex-flow - column-reverse nowrap
  • The 'flex-flow' property set 'column-reverse nowrap' controls the flex container is single-line, but the main axis is vertical, the main-start and main-end directions are swapped
flex-flow-011 = flex-flow - column-reverse wrap
  • The 'flex-flow' property set 'column-reverse wrap' controls the flex container is multi-line but the main axis is vertical, the main-start and main-end directions are swapped
flex-flow-012 = flex-flow - column-reverse wrap-reverse
  • The 'flex-flow' property set 'column-reverse wrap-reverse' controls the flex container is multi-line but the main axis is vertical, the 'cross-start/cross-end' and 'main-start/main-end' directions are all swapped
flexbox_computedstyle_flex-flow-column DOM/JS flexbox | computed style | flex-flow: column
flexbox_computedstyle_flex-flow-column-nowrap DOM/JS flexbox | computed style | flex-flow: column nowrap
flexbox_computedstyle_flex-flow-column-reverse DOM/JS flexbox | computed style | flex-flow: column-reverse
flexbox_computedstyle_flex-flow-column-reverse-nowrap DOM/JS flexbox | computed style | flex-flow: column-reverse nowrap
flexbox_computedstyle_flex-flow-column-reverse-wrap DOM/JS flexbox | computed style | flex-flow: column-reverse wrap
flexbox_computedstyle_flex-flow-column-wrap DOM/JS flexbox | computed style | flex-flow: column wrap
flexbox_computedstyle_flex-flow-column-wrap-reverse DOM/JS flexbox | computed style | flex-flow: column wrap-reverse
flexbox_computedstyle_flex-flow-nowrap DOM/JS flexbox | computed style | flex-flow: nowrap
flexbox_computedstyle_flex-flow-row DOM/JS flexbox | computed style | flex-flow: row
flexbox_computedstyle_flex-flow-row-nowrap DOM/JS flexbox | computed style | flex-flow: row nowrap
flexbox_computedstyle_flex-flow-row-reverse DOM/JS flexbox | computed style | flex-flow: row-reverse
flexbox_computedstyle_flex-flow-row-reverse-nowrap DOM/JS flexbox | computed style | flex-flow: row-reverse nowrap
flexbox_computedstyle_flex-flow-row-reverse-wrap DOM/JS flexbox | computed style | flex-flow: row-reverse wrap
flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse DOM/JS flexbox | computed style | flex-flow: row-reverse wrap-reverse
flexbox_computedstyle_flex-flow-row-wrap DOM/JS flexbox | computed style | flex-flow: row wrap
flexbox_computedstyle_flex-flow-row-wrap-reverse DOM/JS flexbox | computed style | flex-flow: row wrap-reverse
flexbox_computedstyle_flex-flow-wrap DOM/JS flexbox | computed style | flex-flow: wrap
flexbox_flow-column-reverse-wrap = flexbox | flex-flow: column-reverse wrap
flexbox_flow-column-reverse-wrap-reverse = flexbox | flex-flow: column-reverse wrap-reverse
flexbox_flow-column-wrap = flexbox | flex-flow: column wrap
flexbox_flow-column-wrap-reverse = flexbox | flex-flow: column wrap-reverse
flexbox_flow-row-wrap = flexbox | flex-flow: row wrap
flexbox_flow-row-wrap-reverse = flexbox | flex-flow: row wrap-reverse
flexbox_rtl-flow = flexbox | flex-flow: column wrap | rtl
flexbox_rtl-flow-reverse = flexbox | flex-flow: column wrap-reverse | rtl
flexbox_rtl-order = flexbox | flex-flow: column-reverse wrap-reverse; order | rtl
+ 5.4 Display Order: the order property
flex-order = flex order
  • ordered flex items should ordered properly
flexbox-order-from-lowest flex container layout starts with lowest order item
  • This test check that a flex container layous out its content starting with the lowest numbered ordinal group and going up
flexbox-order-only-flexitems order only affects flex items
  • This test check that the order property has no effect on elements that are not flex items
flexbox_computedstyle_order DOM/JS flexbox | computed style | order: 0
flexbox_computedstyle_order-inherit DOM/JS flexbox | computed style | order: -1
flexbox_computedstyle_order-integer DOM/JS flexbox | computed style | order: integer
flexbox_computedstyle_order-invalid DOM/JS flexbox | computed style | order: noninteger
flexbox_computedstyle_order-negative DOM/JS flexbox | computed style | order: -1
flexbox_order = flexbox | flex-flow: column-reverse wrap-reverse; order
flexbox_order-abspos-space-around = flexbox | order; justify-content: space-around
flexbox_order-box = flexbox | flex-flow: column-reverse wrap-reverse; order
flexbox_order-noninteger-invalid = flexbox | flex-flow: column-reverse wrap-reverse; order
flexible-order = Change the value of 'order' property
  • The order of three should be blue-red-black
order-001 The 'order' property on flex items set to a value of '-1'
  • This test checks that a flex container will lay out its content in the order specified by the ordinal groups.
order-with-column-reverse = flex container layout lowest order with column-reverse direction
  • This test check that a flex container layouts out its content starting with the lowest numbered ordinal group and going up with column-reverse direction.
order-with-row-reverse = flex container layout lowest order with row-reverse direction
  • This test check that a flex container layouts out its content starting with the lowest numbered ordinal group and going up with row-reverse direction.
order_value Script order_check
  • Check if the web engine can indentify order property.
ttwf-reftest-flex-order = order proprety - value
  • Statement describing what the test case is asserting
+ 5.4.1 Reordering and Accessibility