mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
358 lines
No EOL
15 KiB
HTML
358 lines
No EOL
15 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<title>Flex Containers: the flex and inline-flex display values - 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 Containers: the flex and inline-flex display values (35 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="s3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3">+</a>
|
|
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">3 Flex Containers: the flex and inline-flex display values</a></th></tr>
|
|
<!-- 35 tests -->
|
|
<tr id="column-flexbox-break-3" class="ahem">
|
|
<td>
|
|
<a href="column-flexbox-break.htm">column-flexbox-break</a></td>
|
|
<td><a href="reference/column-flexbox-break-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: fragmenting a flex container with column flow
|
|
<ul class="assert">
|
|
<li>Test checks that a flex container with column flow is fragmented between regions.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="display-flex-001-3" class="primary">
|
|
<td><strong>
|
|
<a href="display-flex-001.htm">display-flex-001</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>An element with the 'display' property set to 'flex' establishes a new block-level flex container
|
|
<ul class="assert">
|
|
<li>This test checks that an element with 'display' property set to 'flex' establishes a new block-level flex container.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="display_flex_exist-3" class="primary dom script">
|
|
<td><strong>
|
|
<a href="display_flex_exist.htm">display_flex_exist</a></strong></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>display_flex
|
|
<ul class="assert">
|
|
<li>Check if the web engine can indenfy the display value flex.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="display_inline-flex_exist-3" class="primary dom script">
|
|
<td><strong>
|
|
<a href="display_inline-flex_exist.htm">display_inline-flex_exist</a></strong></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>display_inline-flex
|
|
<ul class="assert">
|
|
<li>Check if the web engine can identify the display value inline-flex.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-horiz-001-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-overflow-horiz-001.htm">flexbox-overflow-horiz-001</a></strong></td>
|
|
<td><a href="reference/flexbox-overflow-horiz-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'overflow' property on a horizontal flex container, with contents not overflowing
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-horiz-002-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-overflow-horiz-002.htm">flexbox-overflow-horiz-002</a></strong></td>
|
|
<td><a href="reference/flexbox-overflow-horiz-002-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'overflow' property on a horizontal flex container, with 'align-items: center'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-horiz-003-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-overflow-horiz-003.htm">flexbox-overflow-horiz-003</a></strong></td>
|
|
<td><a href="reference/flexbox-overflow-horiz-003-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'overflow' property on a horizontal flex container, with 'justify-content: space-around'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-vert-001-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-overflow-vert-001.htm">flexbox-overflow-vert-001</a></strong></td>
|
|
<td><a href="reference/flexbox-overflow-vert-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'overflow' property on a vertical flex container
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-vert-002-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-overflow-vert-002.htm">flexbox-overflow-vert-002</a></strong></td>
|
|
<td><a href="reference/flexbox-overflow-vert-002-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'overflow' property on a vertical flex container, with 'align-items: center'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-vert-003-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-overflow-vert-003.htm">flexbox-overflow-vert-003</a></strong></td>
|
|
<td><a href="reference/flexbox-overflow-vert-003-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-root-node-001a-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-root-node-001a.htm">flexbox-root-node-001a</a></strong></td>
|
|
<td><a href="reference/flexbox-root-node-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'display:flex' on root node
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-root-node-001b-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-root-node-001b.htm">flexbox-root-node-001b</a></strong></td>
|
|
<td><a href="reference/flexbox-root-node-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'display:flex' on root node
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_block-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_block.htm">flexbox_block</a></strong></td>
|
|
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | block
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_box-clear-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_box-clear.htm">flexbox_box-clear</a></strong></td>
|
|
<td><a href="reference/flexbox_box-clear-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | cleared box
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_columns-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_columns.htm">flexbox_columns</a></strong></td>
|
|
<td><a href="reference/flexbox_columns-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | multicol
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_columns-flexitems-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_columns-flexitems.htm">flexbox_columns-flexitems</a></strong></td>
|
|
<td><a href="reference/flexbox_columns-flexitems-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | multicol on flexbox items
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_columns-flexitems-2-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_columns-flexitems-2.htm">flexbox_columns-flexitems-2</a></strong></td>
|
|
<td><a href="reference/flexbox_columns-flexitems-2-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | multicol on flexbox items
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_display-3" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_display.htm">flexbox_computedstyle_display</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | display: flex
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_display-inline-3" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_display-inline.htm">flexbox_computedstyle_display-inline</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | display: inline-flex
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_display-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_display.htm">flexbox_display</a></strong></td>
|
|
<td><a href="reference/flexbox_display-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | display error-handling
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_fbfc-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_fbfc.htm">flexbox_fbfc</a></strong></td>
|
|
<td><a href="reference/flexbox_fbfc-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex formatting context :: float intrusion
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_fbfc2-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_fbfc2.htm">flexbox_fbfc2</a></strong></td>
|
|
<td><a href="reference/flexbox_fbfc2-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex formatting context :: float intrusion
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_flex-formatting-interop-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_flex-formatting-interop.htm">flexbox_flex-formatting-interop</a></strong></td>
|
|
<td><a href="reference/flexbox_flex-formatting-interop-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex formatting context :: negative margins and border box
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_inline-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_inline.htm">flexbox_inline</a></strong></td>
|
|
<td><a href="reference/flexbox_inline-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | inline
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_item-clear-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_item-clear.htm">flexbox_item-clear</a></strong></td>
|
|
<td><a href="reference/flexbox_item-clear-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | cleared item
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_item-float-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_item-float.htm">flexbox_item-float</a></strong></td>
|
|
<td><a href="reference/flexbox_item-float-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | floated item
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_item-vertical-align-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_item-vertical-align.htm">flexbox_item-vertical-align</a></strong></td>
|
|
<td><a href="reference/flexbox_item-vertical-align-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | vertical-align
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_margin-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_margin.htm">flexbox_margin</a></strong></td>
|
|
<td><a href="reference/flexbox_margin-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | margins
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_nested-flex-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_nested-flex.htm">flexbox_nested-flex</a></strong></td>
|
|
<td><a href="reference/flexbox_generated-flex-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | nested flexcontainer
|
|
</td>
|
|
</tr>
|
|
<tr id="flexible-box-float-3" class="primary">
|
|
<td><strong>
|
|
<a href="flexible-box-float.htm">flexible-box-float</a></strong></td>
|
|
<td><a href="reference/flex-box-float-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexible box flex item float effect
|
|
<ul class="assert">
|
|
<li>float has no effect on flex items</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-flexbox-001-3" class="">
|
|
<td>
|
|
<a href="regions-flexbox-001.htm">regions-flexbox-001</a></td>
|
|
<td><a href="reference/regions-flexbox-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Regions: flowing flexbox elements in region
|
|
<ul class="assert">
|
|
<li>Test that flex containers are flowed inside a namedflow.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-flexbox-002-3" class="ahem">
|
|
<td>
|
|
<a href="regions-flexbox-002.htm">regions-flexbox-002</a></td>
|
|
<td><a href="reference/regions-flexbox-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: flowing auto-height flexbox elements in region
|
|
<ul class="assert">
|
|
<li>Test that flex containers with auto height are flowed inside a namedflow.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-flexbox-003-3" class="ahem">
|
|
<td>
|
|
<a href="regions-flexbox-003.htm">regions-flexbox-003</a></td>
|
|
<td><a href="reference/regions-flexbox-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: fixed sized region inside a fixed sized flexbox
|
|
<ul class="assert">
|
|
<li>Test that content is flowed in a region placed inside a flexbox.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-flexbox-004-3" class="ahem">
|
|
<td>
|
|
<a href="regions-flexbox-004.htm">regions-flexbox-004</a></td>
|
|
<td><a href="reference/regions-flexbox-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: fixed sized region inside an auto height flexbox
|
|
<ul class="assert">
|
|
<li>Test that content is flowed in a region placed inside a flexbox with auto-height.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-flex-base-3" class="primary">
|
|
<td><strong>
|
|
<a href="ttwf-reftest-flex-base.htm">ttwf-reftest-flex-base</a></strong></td>
|
|
<td><a href="reference/ttwf-reftest-flex-base-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>display proprety - flex
|
|
<ul class="assert">
|
|
<li>Statement describing what the test case is asserting</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.#flex-formatting-context">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.#valdef-display-flex">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.#valdef-display-inline-flex">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |