CSS Flexible Box Layout Module Level 1 CR Test Suite

Flex Items (74 tests)

Test Refs Flags Info
+ 4 Flex Items
flex-flexitem-childmargin = flex item child margin
  • margin should effect the orange box and green box need to align to bottom.
flex-flexitem-percentage-prescation = flex item size prescation
  • no blue color could be seen.
flexbox-anonymous-items-001 = Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering
flexbox-table-fixup-001a = Testing that table cells in a flex container get an anonymous table wrapper that forms the flex item
flexbox-table-fixup-001b = Testing that the 'flex' shorthand has no effect on table cells in a flex container, since they aren't flex items
flexbox-whitespace-handling-001a = Test that anonymous flex items aren't created for pure-whitespace inline content
flexbox-whitespace-handling-001b = Test that flex items are created correctly
flexbox-whitespace-handling-002 = Test that whitespace is preserved at the edges of anonymous flex items if 'white-space: pre' is set
flexbox-with-pseudo-elements-001 = Testing that generated content nodes are treated as a flex items
flexbox-with-pseudo-elements-002 = Testing that generated content nodes are treated as a flex items, and honor 'order'
flexbox-with-pseudo-elements-003 = Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item
flexbox_inline-float = flexbox | floated inline
flexbox_stf-abspos = flexbox | flexcontainer versus stf :: abspos
flexbox_stf-fixpos flexbox | flexcontainer versus stf :: fixed
flexbox_stf-float = flexbox | flexcontainer versus stf :: float
flexbox_stf-inline-block = flexbox | flexcontainer versus stf :: inline-block
flexbox_stf-table = flexbox | flexcontainer versus stf :: table
flexbox_stf-table-caption = flexbox | flexcontainer versus stf :: table-caption
flexbox_stf-table-cell = flexbox | flexcontainer versus stf :: table cell
flexbox_stf-table-row = flexbox | flexcontainer versus stf :: table row
flexbox_stf-table-row-group = flexbox | flexcontainer versus stf :: table row group
flexbox_stf-table-singleline = flexbox | singleline flexcontainer versus stf :: table
flexbox_stf-table-singleline-2 = flexbox | singleline flexcontainer versus stf :: table
flexbox_table-fixed-layout = flexbox | flexcontainers in tables
+ 4.1 Absolutely-Positioned Flex Children
flexbox-abspos-child-001a = Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a horizontal flex container
flexbox-abspos-child-001b = Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical flex container
flexbox_absolute-atomic = flexbox | abspos atomic flexitems
flexbox_inline-abspos = flexbox | absolutely positioned inline
+ 4.2 Flex Item Margins and Paddings
flex-container-margin = flex-container-margin-not-collapse-with-content-margin
  • The margins of adjacent flex items do not collapse.
flex-margin-no-collapse = flex item margins
  • The vertical gap between two green boxs should be 100px.
flexbox_margin-left-ex = flexbox | margin-left: auto
+ 4.3 Flex Item Z-Ordering
flexbox-items-as-stacking-contexts-001 = Testing that 'z-index' property makes flex items form stacking contexts
flexbox-items-as-stacking-contexts-002 = Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants
flexbox-items-as-stacking-contexts-003 = Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave
flexbox-paint-ordering-001 = Testing the paint-order of overlapping flex items, with varying tweaks on the container
flexbox-paint-ordering-002 = Testing the paint-order of overlapping flex items with 'order' and 'z-index' set
+ 4.4 Collapsed Items
flexbox_margin-collapse = flexbox | flexitem margin collapsing
flexbox_visibility-collapse = flexbox | visibility: collapse
flexbox_visibility-collapse-line-wrapping = flexbox | visibility: collapse and line wrapping
visibility-collapse-001 A flex item with the 'visibility' property set to 'collapse' should not take up space in the main axis
  • This test checks that a flex item with 'visibility: collapse' doesn't take up space in the main axis.
visibility-collapse-002 A flex item with the 'visibility' property set to 'collapse' should be large enough to fit the collapsed item
  • This test checks that the cross size of a line of flex items containing an item with 'visbility: collapse' is large enough to fit the collapsed item.
visibility-regions-in-flexbox = Ahem CSS Regions: collapsed region flex items
  • Test checks that the flexbox collapsed property works on flex items that are regions. The collapsed region item should not contribute to the flex container's width.
+ 4.5 Implied Minimum Size of Flex Items
flex-minimun-height-flex-items-001 = Minimun height of flex items
  • Checks that minimun height for flex items is the min-content size.
flex-minimun-height-flex-items-002 = Minimun height of flex items
  • Checks that minimun height for flex items is the specified size if it's smaller than the min-content size.
flex-minimun-height-flex-items-003 = Ahem Minimun height of flex items
  • Checks that minimun height for flex items is the min-content size if it's smaller than the specified size.
flex-minimun-height-flex-items-004 = Minimun height of flex items
  • Checks that minimun height for flex items is the min-content size (which corresponds to the image size).
flex-minimun-height-flex-items-005 = Minimun height of flex items
  • Checks that minimun height for flex items is the specified size, as the min-content size of the image corresponds to that.
flex-minimun-height-flex-items-006 = Minimun height of flex items
  • Checks that minimun height for flex items is the specified size, as the min-content size of the image corresponds to that.
flex-minimun-height-flex-items-007 = Minimun height of flex items
  • Checks that minimun height for flex items is the transferred size, as the min-content size of the image corresponds to that.
flex-minimun-height-flex-items-008 = Minimun height of flex items
  • Checks that minimun height for flex items is the transferred size, as the min-content size of the image corresponds to that.
flex-minimun-width-flex-items-001 = Ahem Minimun width of flex items
  • Checks that minimun width for flex items is the min-content size.
flex-minimun-width-flex-items-002 = Minimun width of flex items
  • Checks that minimun width for flex items is the specified size if it's smaller than the min-content size.
flex-minimun-width-flex-items-003 = Ahem Minimun width of flex items
  • Checks that minimun width for flex items is the min-content size if it's smaller than the specified size.
flex-minimun-width-flex-items-004 = Minimun width of flex items
  • Checks that minimun width for flex items is the min-content size (which corresponds to the image size).
flex-minimun-width-flex-items-005 = Minimun width of flex items
  • Checks that minimun width for flex items is the specified size, as the min-content size of the image corresponds to that.
flex-minimun-width-flex-items-006 = Minimun width of flex items
  • Checks that minimun width for flex items is the specified size, as the min-content size of the image corresponds to that.
flex-minimun-width-flex-items-007 = Minimun width of flex items
  • Checks that minimun width for flex items is the transferred size, as the min-content size of the image corresponds to that.
flex-minimun-width-flex-items-008 = Minimun width of flex items
  • Checks that minimun width for flex items is the transferred size, as the min-content size of the image corresponds to that.
flexbox-min-height-auto-001 = Testing min-height:auto
flexbox-min-height-auto-002a = Testing min-height:auto
flexbox-min-height-auto-002b = Testing min-height:auto
flexbox-min-height-auto-002c = Testing min-height:auto
flexbox-min-height-auto-003 = Testing min-height:auto & 'overflow' interaction
flexbox-min-height-auto-004 = Testing min-height:auto & 'overflow' interaction
flexbox-min-width-auto-001 = Testing min-width:auto
flexbox-min-width-auto-002a = Testing min-width:auto
flexbox-min-width-auto-002b = Testing min-width:auto
flexbox-min-width-auto-002c = Testing min-width:auto
flexbox-min-width-auto-003 = Testing min-width:auto & 'overflow' interaction
flexbox-min-width-auto-004 = Testing min-width:auto & 'overflow' interaction
flexbox_computedstyle_min-height-auto DOM/JS flexbox | computed style | min-height: auto
flexbox_computedstyle_min-width-auto DOM/JS flexbox | computed style | min-width: auto
flexbox_min-height-auto = flexbox | min-height: auto
flexbox_min-width-auto = flexbox | min-width: auto