<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Flex Items - CSS Flexible Box Layout Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Items (72 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4 Flex Items</a></th></tr>
<!-- 23 tests -->
<tr id="flex-flexitem-childmargin-4" class="">
<td>
<a href="flex-flexitem-childmargin.htm">flex-flexitem-childmargin</a></td>
<td><a href="reference/flex-flexitem-childmargin-ref.htm">=</a> </td>
<td></td>
<td>flex item child margin
<ul class="assert">
<li>margin should effect the orange box and green box need to align to bottom.</li>
</ul>
</td>
</tr>
<tr id="flex-flexitem-percentage-prescation-4" class="">
<td>
<a href="flex-flexitem-percentage-prescation.htm">flex-flexitem-percentage-prescation</a></td>
<td><a href="reference/flex-flexitem-percentage-prescation-ref.htm">=</a> </td>
<td></td>
<td>flex item size prescation
<ul class="assert">
<li>no blue color could be seen.</li>
</ul>
</td>
</tr>
<tr id="flexbox-anonymous-items-001-4" class="">
<td>
<a href="flexbox-anonymous-items-001.htm">flexbox-anonymous-items-001</a></td>
<td><a href="reference/flexbox-anonymous-items-001-ref.htm">=</a> </td>
<td></td>
<td>Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering
</td>
</tr>
<tr id="flexbox-table-fixup-001-4" class="">
<td>
<a href="flexbox-table-fixup-001.htm">flexbox-table-fixup-001</a></td>
<td><a href="reference/flexbox-table-fixup-001-ref.htm">=</a> </td>
<td></td>
<td>Testing that table cells in a flex container get blockified and each form their own flex item
</td>
</tr>
<tr id="flexbox-whitespace-handling-001a-4" class="">
<td>
<a href="flexbox-whitespace-handling-001a.htm">flexbox-whitespace-handling-001a</a></td>
<td><a href="reference/flexbox-whitespace-handling-001-ref.htm">=</a> </td>
<td></td>
<td>Test that anonymous flex items aren't created for pure-whitespace inline content
</td>
</tr>
<tr id="flexbox-whitespace-handling-001b-4" class="">
<td>
<a href="flexbox-whitespace-handling-001b.htm">flexbox-whitespace-handling-001b</a></td>
<td><a href="reference/flexbox-whitespace-handling-001-ref.htm">=</a> </td>
<td></td>
<td>Test that flex items are created correctly
</td>
</tr>
<tr id="flexbox-whitespace-handling-002-4" class="">
<td>
<a href="flexbox-whitespace-handling-002.htm">flexbox-whitespace-handling-002</a></td>
<td><a href="reference/flexbox-whitespace-handling-002-ref.htm">=</a> </td>
<td></td>
<td>Test that whitespace is preserved at the edges of anonymous flex items if 'white-space: pre' is set
</td>
</tr>
<tr id="flexbox-with-pseudo-elements-001-4" class="">
<td>
<a href="flexbox-with-pseudo-elements-001.htm">flexbox-with-pseudo-elements-001</a></td>
<td><a href="reference/flexbox-with-pseudo-elements-001-ref.htm">=</a> </td>
<td></td>
<td>Testing that generated content nodes are treated as a flex items
</td>
</tr>
<tr id="flexbox-with-pseudo-elements-002-4" class="">
<td>
<a href="flexbox-with-pseudo-elements-002.htm">flexbox-with-pseudo-elements-002</a></td>
<td><a href="reference/flexbox-with-pseudo-elements-002-ref.htm">=</a> </td>
<td></td>
<td>Testing that generated content nodes are treated as a flex items, and honor 'order'
</td>
</tr>
<tr id="flexbox-with-pseudo-elements-003-4" class="">
<td>
<a href="flexbox-with-pseudo-elements-003.htm">flexbox-with-pseudo-elements-003</a></td>
<td><a href="reference/flexbox-with-pseudo-elements-003-ref.htm">=</a> </td>
<td></td>
<td>Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item
</td>
</tr>
<tr id="flexbox_inline-float-4" class="">
<td>
<a href="flexbox_inline-float.htm">flexbox_inline-float</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | floated inline
</td>
</tr>
<tr id="flexbox_stf-abspos-4" class="">
<td>
<a href="flexbox_stf-abspos.htm">flexbox_stf-abspos</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainer versus stf :: abspos
</td>
</tr>
<tr id="flexbox_stf-fixpos-4" class="">
<td>
<a href="flexbox_stf-fixpos.htm">flexbox_stf-fixpos</a></td>
<td></td>
<td></td>
<td>flexbox | flexcontainer versus stf :: fixed
</td>
</tr>
<tr id="flexbox_stf-float-4" class="">
<td>
<a href="flexbox_stf-float.htm">flexbox_stf-float</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainer versus stf :: float
</td>
</tr>
<tr id="flexbox_stf-inline-block-4" class="">
<td>
<a href="flexbox_stf-inline-block.htm">flexbox_stf-inline-block</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainer versus stf :: inline-block
</td>
</tr>
<tr id="flexbox_stf-table-4" class="">
<td>
<a href="flexbox_stf-table.htm">flexbox_stf-table</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainer versus stf :: table
</td>
</tr>
<tr id="flexbox_stf-table-caption-4" class="">
<td>
<a href="flexbox_stf-table-caption.htm">flexbox_stf-table-caption</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainer versus stf :: table-caption
</td>
</tr>
<tr id="flexbox_stf-table-cell-4" class="">
<td>
<a href="flexbox_stf-table-cell.htm">flexbox_stf-table-cell</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainer versus stf :: table cell
</td>
</tr>
<tr id="flexbox_stf-table-row-4" class="">
<td>
<a href="flexbox_stf-table-row.htm">flexbox_stf-table-row</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainer versus stf :: table row
</td>
</tr>
<tr id="flexbox_stf-table-row-group-4" class="">
<td>
<a href="flexbox_stf-table-row-group.htm">flexbox_stf-table-row-group</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainer versus stf :: table row group
</td>
</tr>
<tr id="flexbox_stf-table-singleline-4" class="">
<td>
<a href="flexbox_stf-table-singleline.htm">flexbox_stf-table-singleline</a></td>
<td><a href="reference/flexbox_stf-table-singleline-ref.htm">=</a> </td>
<td></td>
<td>flexbox | singleline flexcontainer versus stf :: table
</td>
</tr>
<tr id="flexbox_stf-table-singleline-2-4" class="">
<td>
<a href="flexbox_stf-table-singleline-2.htm">flexbox_stf-table-singleline-2</a></td>
<td><a href="reference/flexbox_stf-table-singleline-ref.htm">=</a> </td>
<td></td>
<td>flexbox | singleline flexcontainer versus stf :: table
</td>
</tr>
<tr id="flexbox_table-fixed-layout-4" class="">
<td>
<a href="flexbox_table-fixed-layout.htm">flexbox_table-fixed-layout</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexcontainers in tables
</td>
</tr>
</tbody>
<tbody id="s4.#example-c848375c">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#flex-level">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-container-10">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-container-11">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-container-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-container-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-10">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-11">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-12">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-13">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-14">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#abspos-items">4.1 Absolutely-Positioned Flex Children</a></th></tr>
<!-- 4 tests -->
<tr id="flexbox-abspos-child-001a-4.1" class="">
<td>
<a href="flexbox-abspos-child-001a.htm">flexbox-abspos-child-001a</a></td>
<td><a href="reference/flexbox-abspos-child-001-ref.htm">=</a> </td>
<td></td>
<td>Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a horizontal flex container
</td>
</tr>
<tr id="flexbox-abspos-child-001b-4.1" class="">
<td>
<a href="flexbox-abspos-child-001b.htm">flexbox-abspos-child-001b</a></td>
<td><a href="reference/flexbox-abspos-child-001-ref.htm">=</a> </td>
<td></td>
<td>Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical flex container
</td>
</tr>
<tr id="flexbox_absolute-atomic-4.1" class="">
<td>
<a href="flexbox_absolute-atomic.htm">flexbox_absolute-atomic</a></td>
<td><a href="reference/flexbox_absolute-atomic-ref.htm">=</a> </td>
<td></td>
<td>flexbox | abspos atomic flexitems
</td>
</tr>
<tr id="flexbox_inline-abspos-4.1" class="">
<td>
<a href="flexbox_inline-abspos.htm">flexbox_inline-abspos</a></td>
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
<td></td>
<td>flexbox | absolutely positioned inline
</td>
</tr>
</tbody>
<tbody id="s4.1.#example-62145703">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-cross-axis-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-12">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-13">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-14">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-15">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-16">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-17">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-18">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-item-15">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-propdef-align-content-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-propdef-align-self-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-static-position-rectangle-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-static-position-rectangle-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-valdef-align-items-flex-start-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-valdef-align-items-stretch-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#static-position-rectangle">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#item-margins">4.2 Flex Item Margins and Paddings</a></th></tr>
<!-- 4 tests -->
<tr id="flex-container-margin-4.2" class="primary">
<td><strong>
<a href="flex-container-margin.htm">flex-container-margin</a></strong></td>
<td><a href="reference/flex-container-margin-ref.htm">=</a> </td>
<td></td>
<td>flex-container-margin-not-collapse-with-content-margin
<ul class="assert">
<li>The margins of adjacent flex items do not collapse.</li>
</ul>
</td>
</tr>
<tr id="flex-margin-no-collapse-4.2" class="">
<td>
<a href="flex-margin-no-collapse.htm">flex-margin-no-collapse</a></td>
<td><a href="reference/flex-margin-no-collapse-ref.htm">=</a> </td>
<td></td>
<td>flex item margins
<ul class="assert">
<li>The vertical gap between two green boxs should be 100px.</li>
</ul>
</td>
</tr>
<tr id="flexbox_margin-left-ex-4.2" class="">
<td>
<a href="flexbox_margin-left-ex.htm">flexbox_margin-left-ex</a></td>
<td><a href="reference/flexbox_margin-left-ex-ref.htm">=</a> </td>
<td></td>
<td>flexbox | margin-left: auto
</td>
</tr>
<tr id="negative-margins-001-4.2" class="">
<td>
<a href="negative-margins-001.htm">negative-margins-001</a></td>
<td><a href="reference/negative-margins-001-ref.htm">=</a> </td>
<td></td>
<td>Negative margins
<ul class="assert">
<li>Negative margins get floored at zero for intrinsic size computations</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.2.#ref-for-flex-item-16">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-flex-item-17">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-flex-item-18">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#painting">4.3 Flex Item Z-Ordering</a></th></tr>
<!-- 5 tests -->
<tr id="flexbox-items-as-stacking-contexts-001-4.3" class="">
<td>
<a href="flexbox-items-as-stacking-contexts-001.htm">flexbox-items-as-stacking-contexts-001</a></td>
<td><a href="reference/flexbox-items-as-stacking-contexts-001-ref.htm">=</a> </td>
<td></td>
<td>Testing that 'z-index' property makes flex items form stacking contexts
</td>
</tr>
<tr id="flexbox-items-as-stacking-contexts-002-4.3" class="">
<td>
<a href="flexbox-items-as-stacking-contexts-002.htm">flexbox-items-as-stacking-contexts-002</a></td>
<td><a href="reference/flexbox-items-as-stacking-contexts-002-ref.htm">=</a> </td>
<td></td>
<td>Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants
</td>
</tr>
<tr id="flexbox-items-as-stacking-contexts-003-4.3" class="">
<td>
<a href="flexbox-items-as-stacking-contexts-003.htm">flexbox-items-as-stacking-contexts-003</a></td>
<td><a href="reference/flexbox-items-as-stacking-contexts-003-ref.htm">=</a> </td>
<td></td>
<td>Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave
</td>
</tr>
<tr id="flexbox-paint-ordering-001-4.3" class="">
<td>
<a href="flexbox-paint-ordering-001.htm">flexbox-paint-ordering-001</a></td>
<td><a href="reference/flexbox-paint-ordering-001-ref.htm">=</a> </td>
<td></td>
<td>Testing the paint-order of overlapping flex items, with varying tweaks on the container
</td>
</tr>
<tr id="flexbox-paint-ordering-002-4.3" class="">
<td>
<a href="flexbox-paint-ordering-002.htm">flexbox-paint-ordering-002</a></td>
<td><a href="reference/flexbox-paint-ordering-002-ref.htm">=</a> </td>
<td></td>
<td>Testing the paint-order of overlapping flex items with 'order' and 'z-index' set
</td>
</tr>
</tbody>
<tbody id="s4.3.#ref-for-flex-item-19">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-propdef-order-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">4.4 Collapsed Items</a></th></tr>
<!-- 6 tests -->
<tr id="flexbox_margin-collapse-4.4" class="">
<td>
<a href="flexbox_margin-collapse.htm">flexbox_margin-collapse</a></td>
<td><a href="reference/flexbox_margin-collapse-ref.htm">=</a> </td>
<td></td>
<td>flexbox | flexitem margin collapsing
</td>
</tr>
<tr id="flexbox_visibility-collapse-4.4" class="">
<td>
<a href="flexbox_visibility-collapse.htm">flexbox_visibility-collapse</a></td>
<td><a href="reference/flexbox_visibility-collapse-ref.htm">=</a> </td>
<td></td>
<td>flexbox | visibility: collapse
</td>
</tr>
<tr id="flexbox_visibility-collapse-line-wrapping-4.4" class="">
<td>
<a href="flexbox_visibility-collapse-line-wrapping.htm">flexbox_visibility-collapse-line-wrapping</a></td>
<td><a href="reference/flexbox_visibility-collapse-line-wrapping-ref.htm">=</a> </td>
<td></td>
<td>flexbox | visibility: collapse and line wrapping
</td>
</tr>
<tr id="visibility-collapse-001-4.4" class="">
<td>
<a href="visibility-collapse-001.htm">visibility-collapse-001</a></td>
<td></td>
<td></td>
<td>A flex item with the 'visibility' property set to 'collapse' should not take up space in the main axis
<ul class="assert">
<li>This test checks that a flex item with 'visibility: collapse' doesn't take up space in the main axis.</li>
</ul>
</td>
</tr>
<tr id="visibility-collapse-002-4.4" class="">
<td>
<a href="visibility-collapse-002.htm">visibility-collapse-002</a></td>
<td></td>
<td></td>
<td>A flex item with the 'visibility' property set to 'collapse' should be large enough to fit the collapsed item
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="visibility-regions-in-flexbox-4.4" class="ahem">
<td>
<a href="visibility-regions-in-flexbox.htm">visibility-regions-in-flexbox</a></td>
<td><a href="reference/visibility-regions-in-flexbox-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: collapsed region flex items
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.4.#collapsed-flex-item">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#example-b0742f97">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#nav-about">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#nav-interact">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#nav-projects">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-cross-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-flex-container-19">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-main-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#visibility-collapse-example">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.5">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto">4.5 Implied Minimum Size of Flex Items</a></th></tr>
<!-- 30 tests -->
<tr id="flex-minimum-height-flex-items-001-4.5" class="">
<td>
<a href="flex-minimum-height-flex-items-001.htm">flex-minimum-height-flex-items-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum height of flex items
<ul class="assert">
<li>Checks that minimum height for flex items is the min-content size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-height-flex-items-002-4.5" class="">
<td>
<a href="flex-minimum-height-flex-items-002.htm">flex-minimum-height-flex-items-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum height of flex items
<ul class="assert">
<li>Checks that minimum height for flex items is the specified size if it's smaller than the min-content size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-height-flex-items-003-4.5" class="ahem">
<td>
<a href="flex-minimum-height-flex-items-003.htm">flex-minimum-height-flex-items-003</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Minimum height of flex items
<ul class="assert">
<li>Checks that minimum height for flex items is the min-content size if it's smaller than the specified size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-height-flex-items-004-4.5" class="">
<td>
<a href="flex-minimum-height-flex-items-004.htm">flex-minimum-height-flex-items-004</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum height of flex items
<ul class="assert">
<li>Checks that minimum height for flex items is the min-content size (which corresponds to the image size).</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-height-flex-items-005-4.5" class="">
<td>
<a href="flex-minimum-height-flex-items-005.htm">flex-minimum-height-flex-items-005</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum height of flex items
<ul class="assert">
<li>Checks that minimum height for flex items is the specified size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-height-flex-items-006-4.5" class="">
<td>
<a href="flex-minimum-height-flex-items-006.htm">flex-minimum-height-flex-items-006</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum height of flex items
<ul class="assert">
<li>Checks that minimum height for flex items is the specified size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-height-flex-items-007-4.5" class="">
<td>
<a href="flex-minimum-height-flex-items-007.htm">flex-minimum-height-flex-items-007</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum height of flex items
<ul class="assert">
<li>Checks that minimum height for flex items is the transferred size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-height-flex-items-008-4.5" class="">
<td>
<a href="flex-minimum-height-flex-items-008.htm">flex-minimum-height-flex-items-008</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum height of flex items
<ul class="assert">
<li>Checks that minimum height for flex items is the transferred size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-width-flex-items-001-4.5" class="ahem">
<td>
<a href="flex-minimum-width-flex-items-001.htm">flex-minimum-width-flex-items-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Minimum width of flex items
<ul class="assert">
<li>Checks that minimum width for flex items is the min-content size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-width-flex-items-002-4.5" class="">
<td>
<a href="flex-minimum-width-flex-items-002.htm">flex-minimum-width-flex-items-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum width of flex items
<ul class="assert">
<li>Checks that minimum width for flex items is the specified size if it's smaller than the min-content size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-width-flex-items-003-4.5" class="ahem">
<td>
<a href="flex-minimum-width-flex-items-003.htm">flex-minimum-width-flex-items-003</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Minimum width of flex items
<ul class="assert">
<li>Checks that minimum width for flex items is the min-content size if it's smaller than the specified size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-width-flex-items-004-4.5" class="">
<td>
<a href="flex-minimum-width-flex-items-004.htm">flex-minimum-width-flex-items-004</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum width of flex items
<ul class="assert">
<li>Checks that minimum width for flex items is the min-content size (which corresponds to the image size).</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-width-flex-items-005-4.5" class="">
<td>
<a href="flex-minimum-width-flex-items-005.htm">flex-minimum-width-flex-items-005</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum width of flex items
<ul class="assert">
<li>Checks that minimum width for flex items is the specified size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-width-flex-items-006-4.5" class="">
<td>
<a href="flex-minimum-width-flex-items-006.htm">flex-minimum-width-flex-items-006</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum width of flex items
<ul class="assert">
<li>Checks that minimum width for flex items is the specified size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-width-flex-items-007-4.5" class="">
<td>
<a href="flex-minimum-width-flex-items-007.htm">flex-minimum-width-flex-items-007</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum width of flex items
<ul class="assert">
<li>Checks that minimum width for flex items is the transferred size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimum-width-flex-items-008-4.5" class="">
<td>
<a href="flex-minimum-width-flex-items-008.htm">flex-minimum-width-flex-items-008</a></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
<td></td>
<td>Minimum width of flex items
<ul class="assert">
<li>Checks that minimum width for flex items is the transferred size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flexbox-min-height-auto-001-4.5" class="">
<td>
<a href="flexbox-min-height-auto-001.htm">flexbox-min-height-auto-001</a></td>
<td><a href="reference/flexbox-min-height-auto-001-ref.htm">=</a> </td>
<td></td>
<td>Testing min-height:auto
</td>
</tr>
<tr id="flexbox-min-height-auto-002a-4.5" class="">
<td>
<a href="flexbox-min-height-auto-002a.htm">flexbox-min-height-auto-002a</a></td>
<td><a href="reference/flexbox-min-height-auto-002-ref.htm">=</a> </td>
<td></td>
<td>Testing min-height:auto
</td>
</tr>
<tr id="flexbox-min-height-auto-002b-4.5" class="">
<td>
<a href="flexbox-min-height-auto-002b.htm">flexbox-min-height-auto-002b</a></td>
<td><a href="reference/flexbox-min-height-auto-002-ref.htm">=</a> </td>
<td></td>
<td>Testing min-height:auto
</td>
</tr>
<tr id="flexbox-min-height-auto-002c-4.5" class="">
<td>
<a href="flexbox-min-height-auto-002c.htm">flexbox-min-height-auto-002c</a></td>
<td><a href="reference/flexbox-min-height-auto-002-ref.htm">=</a> </td>
<td></td>
<td>Testing min-height:auto
</td>
</tr>
<tr id="flexbox-min-height-auto-003-4.5" class="">
<td>
<a href="flexbox-min-height-auto-003.htm">flexbox-min-height-auto-003</a></td>
<td><a href="reference/flexbox-min-height-auto-003-ref.htm">=</a> </td>
<td></td>
<td>Testing min-height:auto & 'overflow' interaction
</td>
</tr>
<tr id="flexbox-min-height-auto-004-4.5" class="">
<td>
<a href="flexbox-min-height-auto-004.htm">flexbox-min-height-auto-004</a></td>
<td><a href="reference/flexbox-min-height-auto-004-ref.htm">=</a> </td>
<td></td>
<td>Testing min-height:auto & 'overflow' interaction
</td>
</tr>
<tr id="flexbox-min-width-auto-001-4.5" class="">
<td>
<a href="flexbox-min-width-auto-001.htm">flexbox-min-width-auto-001</a></td>
<td><a href="reference/flexbox-min-width-auto-001-ref.htm">=</a> </td>
<td></td>
<td>Testing min-width:auto
</td>
</tr>
<tr id="flexbox-min-width-auto-002a-4.5" class="">
<td>
<a href="flexbox-min-width-auto-002a.htm">flexbox-min-width-auto-002a</a></td>
<td><a href="reference/flexbox-min-width-auto-002-ref.htm">=</a> </td>
<td></td>
<td>Testing min-width:auto
</td>
</tr>
<tr id="flexbox-min-width-auto-002b-4.5" class="">
<td>
<a href="flexbox-min-width-auto-002b.htm">flexbox-min-width-auto-002b</a></td>
<td><a href="reference/flexbox-min-width-auto-002-ref.htm">=</a> </td>
<td></td>
<td>Testing min-width:auto
</td>
</tr>
<tr id="flexbox-min-width-auto-002c-4.5" class="">
<td>
<a href="flexbox-min-width-auto-002c.htm">flexbox-min-width-auto-002c</a></td>
<td><a href="reference/flexbox-min-width-auto-002-ref.htm">=</a> </td>
<td></td>
<td>Testing min-width:auto
</td>
</tr>
<tr id="flexbox-min-width-auto-003-4.5" class="">
<td>
<a href="flexbox-min-width-auto-003.htm">flexbox-min-width-auto-003</a></td>
<td><a href="reference/flexbox-min-width-auto-003-ref.htm">=</a> </td>
<td></td>
<td>Testing min-width:auto & 'overflow' interaction
</td>
</tr>
<tr id="flexbox-min-width-auto-004-4.5" class="">
<td>
<a href="flexbox-min-width-auto-004.htm">flexbox-min-width-auto-004</a></td>
<td><a href="reference/flexbox-min-width-auto-004-ref.htm">=</a> </td>
<td></td>
<td>Testing min-width:auto & 'overflow' interaction
</td>
</tr>
<tr id="flexbox_computedstyle_min-height-auto-4.5" class="dom script">
<td>
<a href="flexbox_computedstyle_min-height-auto.htm">flexbox_computedstyle_min-height-auto</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>flexbox | computed style | min-height: auto
</td>
</tr>
<tr id="flexbox_computedstyle_min-width-auto-4.5" class="dom script">
<td>
<a href="flexbox_computedstyle_min-width-auto.htm">flexbox_computedstyle_min-width-auto</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>flexbox | computed style | min-width: auto
</td>
</tr>
</tbody>
<tbody id="s4.5.#content-size">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#min-size-opt">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#min-width-automatic-minimum-size">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-content-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-content-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-content-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-content-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-cross-size-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-cross-size-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-cross-size-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-flex-item-20">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-flex-item-21">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-flex-item-22">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-axis-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-axis-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-size-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-size-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-size-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-min-width-automatic-minimum-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-min-width-automatic-minimum-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-min-width-automatic-minimum-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-specified-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-specified-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-specified-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-specified-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-transferred-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-transferred-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-transferred-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-valdef-min-width-auto-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#specified-size">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#transferred-size">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#valdef-min-width-auto">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>