mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
969 lines
No EOL
38 KiB
HTML
969 lines
No EOL
38 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<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>
|
|
<col id="refs-column"></col>
|
|
<col id="flags-column"></col>
|
|
<col id="info-column"></col>
|
|
<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.xht">flex-flexitem-childmargin</a></td>
|
|
<td><a href="reference/flex-flexitem-childmargin-ref.xht">=</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.xht">flex-flexitem-percentage-prescation</a></td>
|
|
<td><a href="reference/flex-flexitem-percentage-prescation-ref.xht">=</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.xht">flexbox-anonymous-items-001</a></td>
|
|
<td><a href="reference/flexbox-anonymous-items-001-ref.xht">=</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.xht">flexbox-table-fixup-001</a></td>
|
|
<td><a href="reference/flexbox-table-fixup-001-ref.xht">=</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.xht">flexbox-whitespace-handling-001a</a></td>
|
|
<td><a href="reference/flexbox-whitespace-handling-001-ref.xht">=</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.xht">flexbox-whitespace-handling-001b</a></td>
|
|
<td><a href="reference/flexbox-whitespace-handling-001-ref.xht">=</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.xht">flexbox-whitespace-handling-002</a></td>
|
|
<td><a href="reference/flexbox-whitespace-handling-002-ref.xht">=</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.xht">flexbox-with-pseudo-elements-001</a></td>
|
|
<td><a href="reference/flexbox-with-pseudo-elements-001-ref.xht">=</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.xht">flexbox-with-pseudo-elements-002</a></td>
|
|
<td><a href="reference/flexbox-with-pseudo-elements-002-ref.xht">=</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.xht">flexbox-with-pseudo-elements-003</a></td>
|
|
<td><a href="reference/flexbox-with-pseudo-elements-003-ref.xht">=</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.xht">flexbox_inline-float</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | floated inline
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_stf-abspos-4" class="">
|
|
<td>
|
|
<a href="flexbox_stf-abspos.xht">flexbox_stf-abspos</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">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.xht">flexbox_stf-float</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flexbox_stf-inline-block</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flexbox_stf-table</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flexbox_stf-table-caption</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flexbox_stf-table-cell</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flexbox_stf-table-row</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flexbox_stf-table-row-group</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flexbox_stf-table-singleline</a></td>
|
|
<td><a href="reference/flexbox_stf-table-singleline-ref.xht">=</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.xht">flexbox_stf-table-singleline-2</a></td>
|
|
<td><a href="reference/flexbox_stf-table-singleline-ref.xht">=</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.xht">flexbox_table-fixed-layout</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flexbox-abspos-child-001a</a></td>
|
|
<td><a href="reference/flexbox-abspos-child-001-ref.xht">=</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.xht">flexbox-abspos-child-001b</a></td>
|
|
<td><a href="reference/flexbox-abspos-child-001-ref.xht">=</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.xht">flexbox_absolute-atomic</a></td>
|
|
<td><a href="reference/flexbox_absolute-atomic-ref.xht">=</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.xht">flexbox_inline-abspos</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</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.xht">flex-container-margin</a></strong></td>
|
|
<td><a href="reference/flex-container-margin-ref.xht">=</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.xht">flex-margin-no-collapse</a></td>
|
|
<td><a href="reference/flex-margin-no-collapse-ref.xht">=</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.xht">flexbox_margin-left-ex</a></td>
|
|
<td><a href="reference/flexbox_margin-left-ex-ref.xht">=</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.xht">negative-margins-001</a></td>
|
|
<td><a href="reference/negative-margins-001-ref.xht">=</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.xht">flexbox-items-as-stacking-contexts-001</a></td>
|
|
<td><a href="reference/flexbox-items-as-stacking-contexts-001-ref.xht">=</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.xht">flexbox-items-as-stacking-contexts-002</a></td>
|
|
<td><a href="reference/flexbox-items-as-stacking-contexts-002-ref.xht">=</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.xht">flexbox-items-as-stacking-contexts-003</a></td>
|
|
<td><a href="reference/flexbox-items-as-stacking-contexts-003-ref.xht">=</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.xht">flexbox-paint-ordering-001</a></td>
|
|
<td><a href="reference/flexbox-paint-ordering-001-ref.xht">=</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.xht">flexbox-paint-ordering-002</a></td>
|
|
<td><a href="reference/flexbox-paint-ordering-002-ref.xht">=</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.xht">flexbox_margin-collapse</a></td>
|
|
<td><a href="reference/flexbox_margin-collapse-ref.xht">=</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.xht">flexbox_visibility-collapse</a></td>
|
|
<td><a href="reference/flexbox_visibility-collapse-ref.xht">=</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.xht">flexbox_visibility-collapse-line-wrapping</a></td>
|
|
<td><a href="reference/flexbox_visibility-collapse-line-wrapping-ref.xht">=</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.xht">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.xht">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.xht">visibility-regions-in-flexbox</a></td>
|
|
<td><a href="reference/visibility-regions-in-flexbox-ref.xht">=</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.xht">flex-minimum-height-flex-items-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-height-flex-items-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-height-flex-items-003</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-height-flex-items-004</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-height-flex-items-005</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-height-flex-items-006</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-height-flex-items-007</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-height-flex-items-008</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-width-flex-items-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-width-flex-items-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-width-flex-items-003</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-width-flex-items-004</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-width-flex-items-005</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-width-flex-items-006</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-width-flex-items-007</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flex-minimum-width-flex-items-008</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.xht">=</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.xht">flexbox-min-height-auto-001</a></td>
|
|
<td><a href="reference/flexbox-min-height-auto-001-ref.xht">=</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.xht">flexbox-min-height-auto-002a</a></td>
|
|
<td><a href="reference/flexbox-min-height-auto-002-ref.xht">=</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.xht">flexbox-min-height-auto-002b</a></td>
|
|
<td><a href="reference/flexbox-min-height-auto-002-ref.xht">=</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.xht">flexbox-min-height-auto-002c</a></td>
|
|
<td><a href="reference/flexbox-min-height-auto-002-ref.xht">=</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.xht">flexbox-min-height-auto-003</a></td>
|
|
<td><a href="reference/flexbox-min-height-auto-003-ref.xht">=</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.xht">flexbox-min-height-auto-004</a></td>
|
|
<td><a href="reference/flexbox-min-height-auto-004-ref.xht">=</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.xht">flexbox-min-width-auto-001</a></td>
|
|
<td><a href="reference/flexbox-min-width-auto-001-ref.xht">=</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.xht">flexbox-min-width-auto-002a</a></td>
|
|
<td><a href="reference/flexbox-min-width-auto-002-ref.xht">=</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.xht">flexbox-min-width-auto-002b</a></td>
|
|
<td><a href="reference/flexbox-min-width-auto-002-ref.xht">=</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.xht">flexbox-min-width-auto-002c</a></td>
|
|
<td><a href="reference/flexbox-min-width-auto-002-ref.xht">=</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.xht">flexbox-min-width-auto-003</a></td>
|
|
<td><a href="reference/flexbox-min-width-auto-003-ref.xht">=</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.xht">flexbox-min-width-auto-004</a></td>
|
|
<td><a href="reference/flexbox-min-width-auto-004-ref.xht">=</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.xht">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.xht">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> |