CSS Flexible Box Layout Module Level 1 CR Test Suite

Flex Layout Box Model and Terminology (27 tests)

Test Refs Flags Info
+ 2 Flex Layout Box Model and Terminology
negative-flex-margins-crash CSS Flexbox: Crash caused by negative width in flex box
  • Check that crash doesn't happen in flex box with negative margin.
position-relative-with-scrollable-with-abspos-crash CSS Flexbox: Crash for flex box with relpos with scrollable with abspos
  • Check that crash doesn't happen in flex box with descendents that include relpos, overflow:auto scrollbars, and abspos.
flex-direction = flex flow direction
  • The flow of flex items in the the flex container should observe the flex-direction property.
flex-direction-column-reverse-002-visual flex-direction: column-reverse swaps main start and end directions
  • This test checks that column-reverse flex-direction swaps the main start and main end directions
flex-direction-modify = flex flow direction
  • Changing 'flex-direction' with JavaScript and then changing it back should returns to the original look.
flex-direction-row-002-visual flex-direction:row axis matches that of writing mode inline axis
  • This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current writing mode
flex-direction-row-reverse-002-visual flow-direction:row-reverse swaps main start and end directions
  • This test checks that row-reverse flex-direction swaps the main start and main end directions
flex-direction-row-vertical = flex-direction:row has the same orientation as inline axis
  • This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current vertical writing mode
flex-direction-with-element-insert = flex flow direction
  • The flex items inserted by script shuould follow the right direction what the flex-direction property directives.
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-direction-column DOM/JSScript flexbox | computed style | flex-direction: column
flexbox_computedstyle_flex-direction-column-reverse DOM/JSScript flexbox | computed style | flex-direction: column-reverse
flexbox_computedstyle_flex-direction-invalid DOM/JSScript flexbox | computed style | flex-direction: row
flexbox_computedstyle_flex-direction-row DOM/JSScript flexbox | computed style | flex-direction: row
flexbox_computedstyle_flex-direction-row-reverse DOM/JSScript flexbox | computed style | flex-direction: row-reverse
flexbox_rtl-direction = flexbox | flex-direction: column-reverse | rtl