CSS Flexible Box Layout Module Level 1 CR Test Suite

Flex Layout Algorithm (117 tests)

Test Refs Flags Info
+ 9 Flex Layout Algorithm
flexbox-align-self-stretch-vert-001 = Testing the sizing of a stretched horizontal flex container in a vertical flex container
  • If a stretched flex item's main size is influenced by its cross size, and the flex container has a definite cross size, then the item's cross size should be resolved early so that it can be used when determining the item's main size
  • https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23
flexbox-align-self-stretch-vert-002 = Testing the sizing of stretched flex items in a vertical multi-line flex container
  • In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed.
flexbox-basic-block-horiz-001 = Testing flexbox layout algorithm property on block flex items in a horizontal flex container
flexbox-basic-block-horiz-001v = Testing flexbox layout algorithm property on block flex items in a horizontal flex container (with various writing-modes on the flex items).
flexbox-basic-block-vert-001 = Testing flexbox layout algorithm property on block flex items in a vertical flex container
flexbox-basic-block-vert-001v = Testing flexbox layout algorithm property on block flex items in a vertical flex container (with various writing-modes on the flex items).
flexbox-basic-canvas-horiz-001 = Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container
flexbox-basic-canvas-horiz-001v = Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container (with a vertical writing-mode on the canvas flex items).
flexbox-basic-canvas-vert-001 = Testing flexbox layout algorithm property on canvas flex items in a vertical flex container
flexbox-basic-canvas-vert-001v = Testing flexbox layout algorithm property on canvas flex items in a vertical flex container (with a vertical writing-mode on the canvas flex items).
flexbox-basic-fieldset-horiz-001 = Testing flexbox layout algorithm property on fieldset flex items in a horizontal flex container
flexbox-basic-fieldset-vert-001 = Testing flexbox layout algorithm property on fieldset flex items in a vertical flex container
flexbox-basic-iframe-horiz-001 = Testing flexbox layout algorithm property on iframe flex items in a horizontal flex container
flexbox-basic-iframe-vert-001 = Testing flexbox layout algorithm property on iframe flex items in a vertical flex container
flexbox-basic-img-horiz-001 = Testing flexbox layout algorithm property on img flex items in a horizontal flex container
flexbox-basic-img-vert-001 = Testing flexbox layout algorithm property on img flex items in a vertical flex container
flexbox-basic-textarea-horiz-001 = Testing flexbox layout algorithm property on textarea flex items in a horizontal flex container
flexbox-basic-textarea-vert-001 = Testing flexbox layout algorithm property on textarea flex items in a vertical flex container
flexbox-basic-video-horiz-001 = Testing flexbox layout algorithm property on video flex items in a horizontal flex container
flexbox-basic-video-vert-001 = Testing flexbox layout algorithm property on video flex items in a vertical flex container
flexbox-dyn-resize-001 = Testing how a sizing change to one flex item impacts its sibling
flexbox-mbp-horiz-001 = Testing borders on flex items in a horizontal flex container
flexbox-mbp-horiz-001-reverse = Testing borders on flex items in a row-reverse horizontal flex container
flexbox-mbp-horiz-001-rtl = Testing borders on flex items in a horizontal flex container with 'direction: rtl'
flexbox-mbp-horiz-001-rtl-reverse = Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl'
flexbox-mbp-horiz-002a = Testing margins and borders on flex items in a horizontal flex container
flexbox-mbp-horiz-002b = Testing margins, borders, and padding on flex items in a horizontal flex container
flexbox-mbp-horiz-002v = Testing margins, borders, and padding on flex items in a horizontal flex container (with a vertical writing-mode on the flex items).
flexbox-mbp-horiz-003 = Testing borders and padding on a horizontal flex container and its flex items
flexbox-mbp-horiz-003-reverse = Testing borders and padding on a row-reverse horizontal flex container and its flex items
flexbox-mbp-horiz-003v = Testing borders and padding on a horizontal flex container and its flex items (with a vertical writing-mode on the flex items).
flexbox-sizing-horiz-001 = Testing sizing of an auto-sized horizontal flex container with min-width and max-width constraints
flexbox-sizing-horiz-002 = Testing sizing of an auto-sized horizontal flex container with min-height and max-height constraints
flexbox-sizing-vert-001 = Testing sizing of an auto-sized vertical flex container with min-height and max-height constraints
flexbox-sizing-vert-002 = Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints
flexbox-writing-mode-007 = Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
flexbox-writing-mode-008 = Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
flexbox-writing-mode-009 = Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
padding-overflow-crash =
  • Item's size includes padding even when there is overflow:hidden. Chrome crashed on this.
percentage-max-height-001 =
table-as-item-auto-min-width = Flex item as table, specified width less than minimum intrinsic width
table-as-item-change-cell = Flex item as table, change contents of cell
table-as-item-fixed-min-width = Flex item as table, specified width and min-width less than minimum intrinsic width
  • Flex item table's min-content width takes precedence over used max-width.
table-as-item-fixed-min-width-2 = table is flex item
  • Flex item table's min-width is honored when it is larger than the table's min-content width
table-as-item-fixed-min-width-3 = table is flex item
  • Flex item table's min-content width is honored when it is larger than the table's specified min-width, and the sum of the flex base sizes are greater than the container's available size.
table-as-item-narrow-content = Flex item as table with narrow content
  • A flex item as a table uses the sizing algorithm of the flexbox
table-as-item-narrow-content-2 = Flex item as table with narrow content
  • A flex item as a table uses the sizing algorithm of the flexbox
table-as-item-specified-height = table is flex item
  • Table's specified height does not count as another min-height for the purposes of the flexbox algorithm.
table-as-item-specified-width = table is flex item
  • Table's specified width does not count as another min-width for the purposes of the flexbox algorithm.
+ 9.1 Initial Setup
+ 9.2 Line Length Determination
flex-aspect-ratio-019 = CSS aspect-ratio: Row flexbox main size with flex-basis:content
flex-aspect-ratio-020 = CSS aspect-ratio: Flex item main size with flex-basis:content in Column flex container
flex-aspect-ratio-021 = CSS aspect-ratio: Flex item main size with flex-basis:content and width in Row flex container
flex-aspect-ratio-022 = CSS aspect-ratio: Column flexbox main size with flex-basis:content and height
item-with-table-with-infinite-max-intrinsic-width = Flex item with table with infinite max intrinsic inline size
table-with-infinite-max-intrinsic-width = Table flex item with infinite max intrinsic inline size
flexbox-flex-basis-content-003a = Testing that explicit "flex-basis: content" is treated as "max-content" when calculating flex base size
flexbox-flex-basis-content-003b = Testing that used "flex-basis: content" is treated as "max-content" when calculating flex base size
flexbox-flex-basis-content-004a = Testing that explicit "flex-basis: content" is treated as "max-content" when calculating flex base size
flexbox-flex-basis-content-004b = Testing that used "flex-basis: content" is treated as "max-content" when calculating flex base size
flex-aspect-ratio-img-column-001 = Aspect ratio handling of images
flex-aspect-ratio-img-row-001 = Aspect ratio handling of images
image-as-flexitem-size-001 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio.
image-as-flexitem-size-001v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-002 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio.
image-as-flexitem-size-002v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-003 Script Testing how explicit main-size & cross-size constraints influence sizing on stretched flex item w/ intrinsic ratio.
image-as-flexitem-size-003v Script Testing how explicit main-size & cross-size constraints influence sizing on stretched flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-004 Script Testing how explicit main-size & cross-size constraints influence sizing on stretched flex item w/ intrinsic ratio.
image-as-flexitem-size-004v Script Testing how explicit main-size & cross-size constraints influence sizing on stretched flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-005 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
image-as-flexitem-size-005v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flexible flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-006 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
image-as-flexitem-size-006v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flexible flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-007 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio, some padding, and box-sizing:border-box.
image-as-flexitem-size-007v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio, some padding, box-sizing:border-box, and a vertical writing-mode.
+ 9.3 Main Size Determination
flexbox_quirks_body = Flex body in quirks mode
percentage-heights-000 DOM/JSScript CSS Flexbox: Basic percentage heights
  • This test checks that percentage heights on a flex item correctly resolve against the container.
flexbox-break-request-horiz-001a = Testing page-break-before in horizontal multi-line flex containers
flexbox-break-request-horiz-001b = Testing page-break-after in horizontal multi-line flex containers
flexbox-break-request-horiz-002a = Testing page-break-before in horizontal single-line flex containers (should have no effect)
flexbox-break-request-horiz-002b = Testing page-break-after in horizontal single-line flex containers (should have no effect)
flexbox-break-request-vert-001a = Testing page-break-before in vertical multi-line flex containers
flexbox-break-request-vert-001b = Testing page-break-after in vertical multi-line flex containers
flexbox-break-request-vert-002a = Testing page-break-before in vertical single-line flex containers (should have no effect)
flexbox-break-request-vert-002b = Testing page-break-after in vertical single-line flex containers (should have no effect)
+ 9.4 Cross Size Determination
flex-aspect-ratio-023 = CSS aspect-ratio: Row flex container cross size with the replaced-element item
flex-aspect-ratio-024 = CSS aspect-ratio: Column flex container cross size with the replaced-element item
flex-aspect-ratio-img-column-002 = Aspect ratio handling of images
  • Test that we compute the correct aspect-ratio based cross size when a height is specified
flex-aspect-ratio-img-column-003 = Aspect ratio handling of images
  • Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified
flex-aspect-ratio-img-row-002 = Aspect ratio handling of images
  • Test that we compute the correct aspect-ratio based cross size when a width is specified
flex-aspect-ratio-img-row-003 = Aspect ratio handling of images
  • Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified
flex-aspect-ratio-img-row-014 = Aspect ratio handling of images
  • Test that we compute the correct aspect-ratio based cross size when a percentage main size is specified
flexbox-single-line-clamp-1 = Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.
flexbox-single-line-clamp-2 = Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.
flexbox-single-line-clamp-3 = Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.
layout-algorithm_algo-cross-line-001 = cross size determination with overflow:scroll
  • This test checks that correct height is applied if overflow: scroll is set
layout-algorithm_algo-cross-line-002 = cross size determination with overflow:scroll
  • This test checks that correct width is applied if overflow: scroll is set
flexbox-collapsed-item-baseline-001 = Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size
flexbox-collapsed-item-horiz-001 = Testing that visibility:collapse on a flex item in a single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout
flexbox-collapsed-item-horiz-002 = Testing that visibility:collapse on a flex item in a multi-line flex container creates struts, and that they can migrate between lines
flexbox-collapsed-item-horiz-003 = Testing that strut formation (from visibility:collapse) happens *after* lines have been stretched
image-as-flexitem-size-001 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio.
image-as-flexitem-size-001v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-002 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio.
image-as-flexitem-size-002v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-003 Script Testing how explicit main-size & cross-size constraints influence sizing on stretched flex item w/ intrinsic ratio.
image-as-flexitem-size-003v Script Testing how explicit main-size & cross-size constraints influence sizing on stretched flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-004 Script Testing how explicit main-size & cross-size constraints influence sizing on stretched flex item w/ intrinsic ratio.
image-as-flexitem-size-004v Script Testing how explicit main-size & cross-size constraints influence sizing on stretched flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-005 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
image-as-flexitem-size-005v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flexible flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-006 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
image-as-flexitem-size-006v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flexible flex item w/ intrinsic ratio (with a vertical writing-mode on the flex items).
image-as-flexitem-size-007 Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio, some padding, and box-sizing:border-box.
image-as-flexitem-size-007v Script Testing how explicit main-size & cross-size constraints influence sizing on non-stretched flex item w/ intrinsic ratio, some padding, box-sizing:border-box, and a vertical writing-mode.
+ 9.5 Main-Axis Alignment
+ 9.6 Cross-Axis Alignment
+ 9.7 Resolving Flexible Lengths
flex-minimum-height-flex-items-010 Script min-content with dynamic changes
table-as-item-flex-cross-size =
  • The table's main-axis (block-size) size is flex to consume the available space.
table-as-item-inflexible-in-column-1 = Table as a flex item in column-oriented flex container
  • Inflexible table flex item's flex base size is its final main size.
table-as-item-inflexible-in-column-2 = Table as a flex item in column-oriented flex container
  • Inflexible table flex item's flex base size is its final main size.
table-as-item-inflexible-in-row-1 = Table as a flex item in row-oriented flex container
  • Inflexible table flex item's flex base size is its final main size.
table-as-item-inflexible-in-row-2 = Table as a flex item in row-oriented flex container
  • Inflexible table flex item's flex base size is its final main size.
+ 9.8 Definite and Indefinite Sizes
percentage-heights-001 DOM/JSScript CSS Flexbox: Definite cross sizes
percentage-heights-003 Script CSS Flexbox: Resolving relative height content within a flex container against flexed size
  • This test checks that percentage heights of content within a flex item are resolved against the flexed item
percentage-heights-004 = CSS Flexbox: Percentages in stretched container
percentage-heights-006 = Definite cross sizes
  • In a column flexbox, the height of a fully inflexible item with fixed flex-basis is definite, and percent children resolve against the flex basis, not the specified height.
percentage-heights-007 = Definite sizes with fixed flex-basis
  • In a column flexbox, the height of a fully inflexible item with fixed flex-basis is definite even when the heights of the item and the container are indefinite.
percentage-heights-008 = Fixed indefinite heights
  • Percent height flex items in a nested column flexbox have height resolved to auto.
percentage-heights-009 = height: 100% should not be considered indefinite on a second flex item (triggers an obscure bug in Blink)
percentage-heights-010 = A height: 100% descendant should trigger a relayout when stretching.
+ 9.9 Intrinsic Sizes
flexbox-gap-position-absolute = Test flexbox intrinsic inline-size, gap, and absolute-positioned children
  • This test verifies the absolute-positioned children do not contribute the gap size to the flexbox's intrinsic inline-size.
multiline-shrink-to-fit = CSS Flexbox: multiline column flexboxes and shrink-to-fit.
  • This test ensures that multiline column flexboxes shrink-to-fit works properly.
+ 9.9.1 Flex Container Intrinsic Main Sizes
+ 9.9.2 Flex Container Intrinsic Cross Sizes
+ 9.9.3 Flex Item Intrinsic Size Contributions