CSS Flexible Box Layout Module Level 1 CR Test Suite

Flex Items (96 tests)

Test Refs Flags Info
+ 4 Flex Items
anonymous-block = CSS Flexbox: anonymous block
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 red 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-001 = Testing that table cells in a flex container get blockified and each form their own flex item
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
percentage-size-subitems-001 = Percentage size on child of a flex item with margin, border, padding and scrollbar
  • Checks that flex items children resolve properly their percentage sizes, even when the flex item has margin, border, padding and scrollbar.
+ 4.1 Absolutely-Positioned Flex Children
abspos-autopos-htb-ltr = Absolutely positioned child with auto position in vertical-rl ltr flexbox
abspos-autopos-htb-rtl = Absolutely positioned child with auto position in vertical-rl ltr flexbox
abspos-autopos-vlr-ltr = Absolutely positioned child with auto position in vertical-rl ltr flexbox
abspos-autopos-vlr-rtl = Absolutely positioned child with auto position in vertical-rl ltr flexbox
abspos-autopos-vrl-ltr = Absolutely positioned child with auto position in vertical-rl ltr flexbox
abspos-autopos-vrl-rtl = Absolutely positioned child with auto position in vertical-rl ltr flexbox
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-abspos-child-002 = Test that "flex-basis" doesn't affect layout of abspos flex child
flexbox-paint-ordering-003 = Testing that paint order isn't influenced by "order" for absolutely positioned flex children
flexbox_absolute-atomic = flexbox | abspos atomic flexitems
flexbox_inline-abspos = flexbox | absolutely positioned inline
+ 4.2 Flex Item Margins and Paddings
flex-column-relayout-assert Script CSS Flexbox: Column height with padding
  • This test checks that height of flex container works with padding
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-mbp-horiz-004 = Testing percent-valued padding and margin on flex items
negative-margins-001 = Negative margins
  • Tests that for intrinsic size computations, an item may take up less than zero space when it has negative margins.
+ 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
flexbox-paint-ordering-003 = Testing that paint order isn't influenced by "order" for absolutely positioned flex children
hittest-overlapping-margin Script
hittest-overlapping-order Script
hittest-overlapping-relative Script
+ 4.4 Collapsed Items
flexbox_visibility-collapse = flexbox | visibility: collapse
flexbox_visibility-collapse-line-wrapping = flexbox | visibility: collapse and line wrapping
+ 4.5 Automatic Minimum Size of Flex Items
content-height-with-scrollbars = Ensure flexbox content-size excludes scrollbar.
  • This test ensures that content-size of a flexbox with scrollbars looks correct.
flex-aspect-ratio-img-column-016 = Aspect-ratio items with undefined specified size suggestion
  • Flex item with auto height and fixed max-height (in a column-oriented flex container) should have an undefined specified size suggestion.
flex-aspect-ratio-img-row-012 = Aspect-ratio items with undefined specified size suggestion
  • Flex item with auto width and fixed max-width (in a row-oriented flex container) should have an undefined specified size suggestion.
flex-item-compressible-001 Script Testing automatic minimun size of <input> flex items in a row flex container
  • This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion.
flex-item-compressible-002 Script Testing automatic minimun size of <input> flex items in a column flex container
  • This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion.
flex-minimum-height-flex-items-001 = Minimum height of flex items
  • Checks that minimum height for flex items is the min-content size.
flex-minimum-height-flex-items-002 = Minimum height of flex items
  • Checks that minimum height for flex items is the specified size if it's smaller than the min-content size.
flex-minimum-height-flex-items-003 = Ahem Minimum height of flex items
  • Checks that minimum height for flex items is the min-content size if it's smaller than the specified size.
flex-minimum-height-flex-items-004 = Minimum height of flex items
  • Checks that minimum height for flex items is the min-content size (which corresponds to the image size).
flex-minimum-height-flex-items-005 = Minimum height of flex items
  • Checks that automatic minimum height for flex items is the specified size suggestion, when that is the smallest of the available suggestions.
flex-minimum-height-flex-items-006 = Minimum height of flex items
  • Checks that minimum height for flex items is the specified size, as the min-content size of the image corresponds to that.
flex-minimum-height-flex-items-007 = Minimum height of flex items
  • Checks that minimum height for flex items is the transferred size, as the min-content size of the image corresponds to that.
flex-minimum-height-flex-items-008 = Minimum height of flex items
  • Checks that minimum height for flex items is the transferred size, as the min-content size of the image corresponds to that.
flex-minimum-height-flex-items-009 Script auto with dynamic changes
flex-minimum-height-flex-items-011 = Minimum height of flex items
  • Checks that minimum height for flex items is the min-content size.
flex-minimum-height-flex-items-022 = Minimum height of a replaced element with borders
flex-minimum-width-flex-items-001 = Ahem Minimum width of flex items
  • Checks that minimum width for flex items is the min-content size.
flex-minimum-width-flex-items-002 = Minimum width of flex items
  • Checks that minimum width for flex items is the specified size if it's smaller than the min-content size.
flex-minimum-width-flex-items-003 = Ahem Minimum width of flex items
  • Checks that minimum width for flex items is the min-content size if it's smaller than the specified size.
flex-minimum-width-flex-items-004 = Minimum width of flex items
  • Checks that minimum width for flex items is the min-content size (which corresponds to the image size).
flex-minimum-width-flex-items-005 = Minimum width of flex items
  • Checks that automatic minimum width for flex items is the specified size suggestion, when that is the smallest of the available suggestions.
flex-minimum-width-flex-items-006 = Minimum width of flex items
  • Checks that minimum width for flex items is the specified size, as the min-content size of the image corresponds to that.
flex-minimum-width-flex-items-007 = Minimum width of flex items
  • Checks that minimum width for flex items is the transferred size, as the min-content size of the image corresponds to that.
flex-minimum-width-flex-items-008 = Minimum width of flex items
  • Checks that minimum width for flex items is the transferred size, as the min-content size of the image corresponds to that.
flex-minimum-width-flex-items-009 = Minimum width of flex items
  • Implied minimum main content suggestion accounts for minimum cross size when items have an aspect ratio.
flex-minimum-width-flex-items-010 = Minimum width of flex items
  • Implied minimum main content suggestion accounts for maximum cross size when items have an aspect ratio.
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-min-width-auto-005 = Aspect ratio handling of images
  • Test that min-width:auto does not incorrectly stretch items with aspect ratio
flexbox-min-width-auto-006 = Aspect ratio handling of images
  • Test that min-width:auto does not incorrectly stretch items with aspect ratio
flexbox_computedstyle_min-height-auto DOM/JSScript flexbox | computed style | min-height: auto
flexbox_computedstyle_min-width-auto DOM/JSScript flexbox | computed style | min-width: auto
min-block-size-computed Script CSS Logical Properties and Values: getComputedStyle().minBlockSize
  • Computed min-block-size is the specified keyword, or the length-percentage made absolute.
min-inline-size-computed Script CSS Logical Properties and Values: getComputedStyle().minInlineSize
  • Computed min-inline-size is the specified keyword, or the length-percentage made absolute.