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.
2207 lines
No EOL
105 KiB
HTML
2207 lines
No EOL
105 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>Ordering and Orientation - 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>Ordering and Orientation (150 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="s5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5">+</a>
|
|
<a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">5 Ordering and Orientation</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-5" class="">
|
|
<td>
|
|
<a href="flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.xht">flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom</a></td>
|
|
<td><a href="reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Align content flex-start with writing mode vertical-rl.
|
|
<ul class="assert">
|
|
<li>In vertical Japanese, for example, a row flexbox lays out its contents from top to bottom.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.#ref-for-propdef-flex-direction-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.#ref-for-propdef-flex-direction-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.#ref-for-propdef-flex-flow-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.#ref-for-propdef-flex-wrap-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.#ref-for-propdef-order-3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.#ref-for-propdef-order-4">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.1">+</a>
|
|
<a href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">5.1 Flex Flow Direction: the flex-direction property</a></th></tr>
|
|
<!-- 22 tests -->
|
|
<tr id="autoheight-regions-in-autoheight-flexbox-001-5.1" class="ahem">
|
|
<td>
|
|
<a href="autoheight-regions-in-autoheight-flexbox-001.xht">autoheight-regions-in-autoheight-flexbox-001</a></td>
|
|
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: Auto-height regions in auto-height flex container
|
|
<ul class="assert">
|
|
<li>Test that auto-height regions placed in a flex container with auto-height and row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on the second row and into the region from the first row, making the left blue rectangle taller than the green rectangle on the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="autoheight-regions-in-autoheight-flexbox-002-5.1" class="ahem">
|
|
<td>
|
|
<a href="autoheight-regions-in-autoheight-flexbox-002.xht">autoheight-regions-in-autoheight-flexbox-002</a></td>
|
|
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-002-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: Auto-height regions with vertical writing mode in auto-height flexbox
|
|
<ul class="assert">
|
|
<li>Test checks that auto-height regions having content with vertical writing mode are sized correctly when placed inside a flex container. The flowed content should be displayed as a horizontal green stripe.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="column-flexbox-break-5.1" class="ahem">
|
|
<td>
|
|
<a href="column-flexbox-break.xht">column-flexbox-break</a></td>
|
|
<td><a href="reference/column-flexbox-break-ref.xht">=</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="flex-direction_column-5.1" class="">
|
|
<td>
|
|
<a href="flex-direction_column.xht">flex-direction_column</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>flex-direction_column
|
|
<ul class="assert">
|
|
<li>Check if the web engine can identify the flex-direction value column.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-direction_column-reverse-5.1" class="">
|
|
<td>
|
|
<a href="flex-direction_column-reverse.xht">flex-direction_column-reverse</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>flex-direction_column-reverse
|
|
<ul class="assert">
|
|
<li>Check if the web engine can identify the flex-direction value column-reverse.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-direction_row-5.1" class="">
|
|
<td>
|
|
<a href="flex-direction_row.xht">flex-direction_row</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>flex-direction_row
|
|
<ul class="assert">
|
|
<li>Check if the web engine can identify the flex-direction value row.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-direction_row-reverse-5.1" class="">
|
|
<td>
|
|
<a href="flex-direction_row-reverse.xht">flex-direction_row-reverse</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>flex-direction_row-reverse
|
|
<ul class="assert">
|
|
<li>Check if the web engine can identify the flex-direction value row-reverse.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-direction-column-5.1" class="">
|
|
<td>
|
|
<a href="flexbox-flex-direction-column.xht">flexbox-flex-direction-column</a></td>
|
|
<td><a href="reference/flexbox-flex-direction-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-direction = column
|
|
<ul class="assert">
|
|
<li>Test checks that flex container's main axis has the same orientation as the block axis of the current writing mode, when flex-direction = column. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-direction-column-reverse-5.1" class="">
|
|
<td>
|
|
<a href="flexbox-flex-direction-column-reverse.xht">flexbox-flex-direction-column-reverse</a></td>
|
|
<td><a href="reference/flexbox-flex-direction-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-direction = column-reverse
|
|
<ul class="assert">
|
|
<li>Test checks that flex container's main axis has the same orientation as the block axis of the current writing mode, and main-start and main-end are swapped, when flex-direction = column-reverse. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-direction-default-5.1" class="">
|
|
<td>
|
|
<a href="flexbox-flex-direction-default.xht">flexbox-flex-direction-default</a></td>
|
|
<td><a href="reference/flexbox-flex-direction-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-direction = row by default
|
|
<ul class="assert">
|
|
<li>Test checks that flex container's main axis has the same orientation as the inline axis of the current writing mode by default. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-direction-row-5.1" class="">
|
|
<td>
|
|
<a href="flexbox-flex-direction-row.xht">flexbox-flex-direction-row</a></td>
|
|
<td><a href="reference/flexbox-flex-direction-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-direction = row
|
|
<ul class="assert">
|
|
<li>Test checks that flex container's main axis has the same orientation as the inline axis of the current writing mode, when flex-direction = row. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-direction-row-reverse-5.1" class="">
|
|
<td>
|
|
<a href="flexbox-flex-direction-row-reverse.xht">flexbox-flex-direction-row-reverse</a></td>
|
|
<td><a href="reference/flexbox-flex-direction-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-direction = row-reverse
|
|
<ul class="assert">
|
|
<li>Test checks that flex container's main axis has the opposite orientation as the inline axis of the current writing mode, when flex-direction = row-reverse. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_direction-column-5.1" class="">
|
|
<td>
|
|
<a href="flexbox_direction-column.xht">flexbox_direction-column</a></td>
|
|
<td><a href="reference/flexbox_direction-column-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-direction: column
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_direction-column-reverse-5.1" class="">
|
|
<td>
|
|
<a href="flexbox_direction-column-reverse.xht">flexbox_direction-column-reverse</a></td>
|
|
<td><a href="reference/flexbox_direction-column-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-direction: column-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_direction-row-reverse-5.1" class="">
|
|
<td>
|
|
<a href="flexbox_direction-row-reverse.xht">flexbox_direction-row-reverse</a></td>
|
|
<td><a href="reference/flexbox_direction-row-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-direction: row-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="multi-line-wrap-reverse-column-reverse-5.1" class="">
|
|
<td>
|
|
<a href="multi-line-wrap-reverse-column-reverse.xht">multi-line-wrap-reverse-column-reverse</a></td>
|
|
<td><a href="reference/multi-line-wrap-reverse-column-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container multiline wrapping-reverse in column-reverse direction.
|
|
<ul class="assert">
|
|
<li>This test check that a flex container reverse-wraps blocks multiline in column-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multi-line-wrap-reverse-row-reverse-5.1" class="">
|
|
<td>
|
|
<a href="multi-line-wrap-reverse-row-reverse.xht">multi-line-wrap-reverse-row-reverse</a></td>
|
|
<td><a href="reference/multi-line-wrap-reverse-row-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container multiline wrapping-reverse in row-reverse direction.
|
|
<ul class="assert">
|
|
<li>This test check that a flex container reverse-wraps blocks multiline in row-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multi-line-wrap-with-column-reverse-5.1" class="">
|
|
<td>
|
|
<a href="multi-line-wrap-with-column-reverse.xht">multi-line-wrap-with-column-reverse</a></td>
|
|
<td><a href="reference/multi-line-wrap-with-column-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container multiline wrapping in column-reverse direction
|
|
<ul class="assert">
|
|
<li>This test check that a flex container wraps blocks multiline in column-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multi-line-wrap-with-row-reverse-5.1" class="">
|
|
<td>
|
|
<a href="multi-line-wrap-with-row-reverse.xht">multi-line-wrap-with-row-reverse</a></td>
|
|
<td><a href="reference/multi-line-wrap-with-row-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container multiline wrapping in row-reverse direction
|
|
<ul class="assert">
|
|
<li>This test check that a flex container wraps blocks multiline in row-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-flex-direction-column-5.1" class="">
|
|
<td>
|
|
<a href="ttwf-reftest-flex-direction-column.xht">ttwf-reftest-flex-direction-column</a></td>
|
|
<td><a href="reference/ttwf-reftest-flex-direction-column-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-direction proprety - column
|
|
<ul class="assert">
|
|
<li>Statement describing what the test case is asserting</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-flex-direction-column-reverse-5.1" class="">
|
|
<td>
|
|
<a href="ttwf-reftest-flex-direction-column-reverse.xht">ttwf-reftest-flex-direction-column-reverse</a></td>
|
|
<td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-direction proprety - column-reverse
|
|
<ul class="assert">
|
|
<li>Statement describing what the test case is asserting</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-flex-direction-row-reverse-5.1" class="">
|
|
<td>
|
|
<a href="ttwf-reftest-flex-direction-row-reverse.xht">ttwf-reftest-flex-direction-row-reverse</a></td>
|
|
<td><a href="reference/ttwf-reftest-flex-direction-row-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-direction proprety - row-reverse
|
|
<ul class="assert">
|
|
<li>Statement describing what the test case is asserting</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.1.#propdef-flex-direction">
|
|
<!-- 7 tests -->
|
|
<tr id="flex-margin-no-collapse-5.1.#propdef-flex-direction" 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-writing-mode-001-5.1.#propdef-flex-direction" class="">
|
|
<td>
|
|
<a href="flexbox-writing-mode-001.xht">flexbox-writing-mode-001</a></td>
|
|
<td><a href="reference/flexbox-writing-mode-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-writing-mode-002-5.1.#propdef-flex-direction" class="">
|
|
<td>
|
|
<a href="flexbox-writing-mode-002.xht">flexbox-writing-mode-002</a></td>
|
|
<td><a href="reference/flexbox-writing-mode-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-writing-mode-003-5.1.#propdef-flex-direction" class="">
|
|
<td>
|
|
<a href="flexbox-writing-mode-003.xht">flexbox-writing-mode-003</a></td>
|
|
<td><a href="reference/flexbox-writing-mode-003-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-writing-mode-004-5.1.#propdef-flex-direction" class="">
|
|
<td>
|
|
<a href="flexbox-writing-mode-004.xht">flexbox-writing-mode-004</a></td>
|
|
<td><a href="reference/flexbox-writing-mode-004-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-writing-mode-005-5.1.#propdef-flex-direction" class="">
|
|
<td>
|
|
<a href="flexbox-writing-mode-005.xht">flexbox-writing-mode-005</a></td>
|
|
<td><a href="reference/flexbox-writing-mode-005-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-writing-mode-006-5.1.#propdef-flex-direction" class="">
|
|
<td>
|
|
<a href="flexbox-writing-mode-006.xht">flexbox-writing-mode-006</a></td>
|
|
<td><a href="reference/flexbox-writing-mode-006-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-flex-container-20">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-flex-item-23">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-axis-6">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-axis-7">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-axis-8">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-end-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-end-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-end-3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-end-4">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-start-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-start-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-start-3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-main-start-4">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-propdef-flex-direction-3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-propdef-flex-direction-4">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-valdef-flex-direction-column-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#ref-for-valdef-flex-direction-row-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.1.#valdef-flex-direction-column">
|
|
<!-- 6 tests -->
|
|
<tr id="flexbox_computedstyle_flex-flow-column-5.1.#valdef-flex-direction-column" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column.xht">flexbox_computedstyle_flex-flow-column</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 | flex-flow: column
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-nowrap-5.1.#valdef-flex-direction-column" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-nowrap.xht">flexbox_computedstyle_flex-flow-column-nowrap</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 | flex-flow: column nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-wrap-5.1.#valdef-flex-direction-column" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-wrap.xht">flexbox_computedstyle_flex-flow-column-wrap</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 | flex-flow: column wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-wrap-reverse-5.1.#valdef-flex-direction-column" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-wrap-reverse.xht">flexbox_computedstyle_flex-flow-column-wrap-reverse</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 | flex-flow: column wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-flow-5.1.#valdef-flex-direction-column" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-flow.xht">flexbox_rtl-flow</a></td>
|
|
<td><a href="reference/flexbox_rtl-flow-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column wrap | rtl
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-flow-reverse-5.1.#valdef-flex-direction-column" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-flow-reverse.xht">flexbox_rtl-flow-reverse</a></td>
|
|
<td><a href="reference/flexbox_rtl-flow-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column wrap-reverse | rtl
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.1.#valdef-flex-direction-column-reverse">
|
|
<!-- 5 tests -->
|
|
<tr id="flexbox_computedstyle_flex-flow-column-reverse-5.1.#valdef-flex-direction-column-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-reverse.xht">flexbox_computedstyle_flex-flow-column-reverse</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 | flex-flow: column-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-reverse-nowrap-5.1.#valdef-flex-direction-column-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-reverse-nowrap.xht">flexbox_computedstyle_flex-flow-column-reverse-nowrap</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 | flex-flow: column-reverse nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-reverse-wrap-5.1.#valdef-flex-direction-column-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-reverse-wrap.xht">flexbox_computedstyle_flex-flow-column-reverse-wrap</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 | flex-flow: column-reverse wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-direction-5.1.#valdef-flex-direction-column-reverse" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-direction.xht">flexbox_rtl-direction</a></td>
|
|
<td><a href="reference/flexbox_rtl-direction-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-direction: column-reverse | rtl
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-order-5.1.#valdef-flex-direction-column-reverse" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-order.xht">flexbox_rtl-order</a></td>
|
|
<td><a href="reference/flexbox_rtl-order-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.1.#valdef-flex-direction-row">
|
|
<!-- 4 tests -->
|
|
<tr id="flexbox_computedstyle_flex-flow-row-5.1.#valdef-flex-direction-row" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row.xht">flexbox_computedstyle_flex-flow-row</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 | flex-flow: row
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-nowrap-5.1.#valdef-flex-direction-row" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-nowrap.xht">flexbox_computedstyle_flex-flow-row-nowrap</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 | flex-flow: row nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-wrap-5.1.#valdef-flex-direction-row" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-wrap.xht">flexbox_computedstyle_flex-flow-row-wrap</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 | flex-flow: row wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-wrap-reverse-5.1.#valdef-flex-direction-row" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-wrap-reverse.xht">flexbox_computedstyle_flex-flow-row-wrap-reverse</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 | flex-flow: row wrap-reverse
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.1.#valdef-flex-direction-row-reverse">
|
|
<!-- 4 tests -->
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-5.1.#valdef-flex-direction-row-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse.xht">flexbox_computedstyle_flex-flow-row-reverse</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 | flex-flow: row-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-nowrap-5.1.#valdef-flex-direction-row-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-nowrap.xht">flexbox_computedstyle_flex-flow-row-reverse-nowrap</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 | flex-flow: row-reverse nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-5.1.#valdef-flex-direction-row-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap.xht">flexbox_computedstyle_flex-flow-row-reverse-wrap</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 | flex-flow: row-reverse wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse-5.1.#valdef-flex-direction-row-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.xht">flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse</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 | flex-flow: row-reverse wrap-reverse
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.2">+</a>
|
|
<a href="https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">5.2 Flex Line Wrapping: the flex-wrap property</a></th></tr>
|
|
<!-- 6 tests -->
|
|
<tr id="flexbox-flex-wrap-horiz-001-5.2" class="">
|
|
<td>
|
|
<a href="flexbox-flex-wrap-horiz-001.xht">flexbox-flex-wrap-horiz-001</a></td>
|
|
<td><a href="reference/flexbox-flex-wrap-horiz-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Testing flex-wrap in horizontal flex containers
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-wrap-horiz-002-5.2" class="">
|
|
<td>
|
|
<a href="flexbox-flex-wrap-horiz-002.xht">flexbox-flex-wrap-horiz-002</a></td>
|
|
<td><a href="reference/flexbox-flex-wrap-horiz-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Ensure that min-width is honored for horizontal multi-line flex containers
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-wrap-vert-001-5.2" class="">
|
|
<td>
|
|
<a href="flexbox-flex-wrap-vert-001.xht">flexbox-flex-wrap-vert-001</a></td>
|
|
<td><a href="reference/flexbox-flex-wrap-vert-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Testing flex-wrap in vertical flex containers
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-wrap-vert-002-5.2" class="">
|
|
<td>
|
|
<a href="flexbox-flex-wrap-vert-002.xht">flexbox-flex-wrap-vert-002</a></td>
|
|
<td><a href="reference/flexbox-flex-wrap-vert-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Ensure that min-height is honored for vertical multi-line flex containers
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-horiz-004-5.2" class="">
|
|
<td>
|
|
<a href="flexbox-overflow-horiz-004.xht">flexbox-overflow-horiz-004</a></td>
|
|
<td><a href="reference/flexbox-overflow-horiz-004-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'overflow' property on a horizontal flex container, with 'flex-wrap: wrap'
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-vert-004-5.2" class="">
|
|
<td>
|
|
<a href="flexbox-overflow-vert-004.xht">flexbox-overflow-vert-004</a></td>
|
|
<td><a href="reference/flexbox-overflow-vert-004-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'overflow' property on a vertical flex container, with 'flex-wrap: wrap'
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.2.#propdef-flex-wrap">
|
|
<!-- 38 tests -->
|
|
<tr id="autoheight-regions-in-autoheight-flexbox-001-5.2.#propdef-flex-wrap" class="ahem">
|
|
<td>
|
|
<a href="autoheight-regions-in-autoheight-flexbox-001.xht">autoheight-regions-in-autoheight-flexbox-001</a></td>
|
|
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: Auto-height regions in auto-height flex container
|
|
<ul class="assert">
|
|
<li>Test that auto-height regions placed in a flex container with auto-height and row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on the second row and into the region from the first row, making the left blue rectangle taller than the green rectangle on the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="autoheight-regions-in-fixed-sized-flexbox-003-5.2.#propdef-flex-wrap" class="ahem">
|
|
<td>
|
|
<a href="autoheight-regions-in-fixed-sized-flexbox-003.xht">autoheight-regions-in-fixed-sized-flexbox-003</a></td>
|
|
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: Auto-height regions inside a fixed sized flexbox with column wrap flow
|
|
<ul class="assert">
|
|
<li>Test checks the layout of auto-height regions placed inside a flexbox with a fixed size and column wrap flow. The flex container should have two columns with three regions each.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="autoheight-regions-in-fixed-sized-flexbox-006-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="autoheight-regions-in-fixed-sized-flexbox-006.xht">autoheight-regions-in-fixed-sized-flexbox-006</a></td>
|
|
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Regions: auto-height regions inside a flex container with fixed size
|
|
<ul class="assert">
|
|
<li>Test that the flex container stretches a region flex item with a height smaller than the flex container's inner cross size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-box-wrap-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-box-wrap.xht">flex-box-wrap</a></td>
|
|
<td><a href="reference/flex-box-wrap-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-wrap: wrap
|
|
<ul class="assert">
|
|
<li>the test passes if you see green box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-001-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-001.xht">flex-flow-001</a></td>
|
|
<td><a href="reference/flex-flow-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row nowrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row nowrap' controls the flex container is single-line</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-002-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-002.xht">flex-flow-002</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row wrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row wrap' controls the flex container is multi-line</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-003-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-003.xht">flex-flow-003</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row wrap-reverse
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row wrap-reverse' controls the flex container is multi-line but the cross-start and cross-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-004-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-004.xht">flex-flow-004</a></td>
|
|
<td><a href="reference/flex-flow-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row-reverse nowrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row-reverse nowrap' controls the flex container is single-line, but the main-start and main-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-005-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-005.xht">flex-flow-005</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row-reverse wrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row-reverse wrap' controls the flex container is multi-line but the main-start and main-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-006-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-006.xht">flex-flow-006</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row-reverse wrap-reverse
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row-reverse wrap-reverse' controls the flex container is multi-line but the main-start and main-end, cross-start and cross-end directions are all swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-007-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-007.xht">flex-flow-007</a></td>
|
|
<td><a href="reference/flex-flow-007-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column nowrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column nowrap' controls the flex container is single-line, but the main axis is vertical</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-008-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-008.xht">flex-flow-008</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column wrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column wrap' controls the flex container is multi-line but the main axis is vertical</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-009-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-009.xht">flex-flow-009</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column wrap-reverse
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column wrap-reverse' controls the flex container is multi-line but the main axis is vertical, the cross-start and cross-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-010-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-010.xht">flex-flow-010</a></td>
|
|
<td><a href="reference/flex-flow-007-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column-reverse nowrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column-reverse nowrap' controls the flex container is single-line, but the main axis is vertical, the main-start and main-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-011-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-011.xht">flex-flow-011</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column-reverse wrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column-reverse wrap' controls the flex container is multi-line but the main axis is vertical, the main-start and main-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-012-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-flow-012.xht">flex-flow-012</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column-reverse wrap-reverse
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column-reverse wrap-reverse' controls the flex container is multi-line but the main axis is vertical, the 'cross-start/cross-end' and 'main-start/main-end' directions are all swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-wrap-001-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-wrap-001.xht">flex-wrap-001</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>A flex container with 'flex-flow' set to 'wrap'
|
|
<ul class="assert">
|
|
<li>This test checks that the flex container with 'flex-flow: wrap' is a multi-line flex container.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-wrap_nowrap-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-wrap_nowrap.xht">flex-wrap_nowrap</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>flex-wrap_nowrap
|
|
<ul class="assert">
|
|
<li>Check if the web engine can identify the flex-wrap value nowrap.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-wrap_wrap-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-wrap_wrap.xht">flex-wrap_wrap</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>flex-wrap_wrap
|
|
<ul class="assert">
|
|
<li>Check if the display can recognize inline-flex value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-wrap_wrap-reverse-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flex-wrap_wrap-reverse.xht">flex-wrap_wrap-reverse</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>flex-wrap_wrap-reverse
|
|
<ul class="assert">
|
|
<li>Check if the web engine can identify the flex-wrap value wrap-reverse.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-wrap-default-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flexbox-flex-wrap-default.xht">flexbox-flex-wrap-default</a></td>
|
|
<td><a href="reference/flexbox-flex-wrap-nowrap-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-wrap defaults to nowrap
|
|
<ul class="assert">
|
|
<li>Test checks that flex elements default to flex-wrap: nowrap if flex-wrap is not set. With wrapping disabled, the .green flex item should extend outside the bounds of its container, as it is set to flex:none.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-wrap-nowrap-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flexbox-flex-wrap-nowrap.xht">flexbox-flex-wrap-nowrap</a></td>
|
|
<td><a href="reference/flexbox-flex-wrap-nowrap-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-wrap = nowrap
|
|
<ul class="assert">
|
|
<li>Test checks that flex elements set to flex-wrap: nowrap will not wrap their flex items. With wrapping disabled, the .green flex item should extend outside the bounds of its container, as it is set to flex:none.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-wrap-wrap-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flexbox-flex-wrap-wrap.xht">flexbox-flex-wrap-wrap</a></td>
|
|
<td><a href="reference/flexbox-flex-direction-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-wrap = wrap
|
|
<ul class="assert">
|
|
<li>Test checks that flex elements wrap left-to-right within their flex container when flex-wrap = 'wrap', matching the writing direction. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-wrap-wrap-reverse-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flexbox-flex-wrap-wrap-reverse.xht">flexbox-flex-wrap-wrap-reverse</a></td>
|
|
<td><a href="reference/flexbox-flex-direction-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Flex-wrap = wrap-reverse
|
|
<ul class="assert">
|
|
<li>Test checks that flex elements wrap left-to-right and bottom-to-top within their flex container when flex-wrap = 'wrap-reverse'. This assumes writing-direction = horizontal-tb', and direction = 'ltr'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-wrap-invalid-5.2.#propdef-flex-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-wrap-invalid.xht">flexbox_computedstyle_flex-wrap-invalid</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 | flex-wrap: wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-wrap-nowrap-5.2.#propdef-flex-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-wrap-nowrap.xht">flexbox_computedstyle_flex-wrap-nowrap</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 | flex-wrap: nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-wrap-wrap-5.2.#propdef-flex-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-wrap-wrap.xht">flexbox_computedstyle_flex-wrap-wrap</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 | flex-wrap: wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-wrap-wrap-reverse-5.2.#propdef-flex-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-wrap-wrap-reverse.xht">flexbox_computedstyle_flex-wrap-wrap-reverse</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 | flex-wrap: wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rowspan-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flexbox_rowspan.xht">flexbox_rowspan</a></td>
|
|
<td><a href="reference/flexbox_rowspan-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flexcontainers in cells with rowspan
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_wrap-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flexbox_wrap.xht">flexbox_wrap</a></td>
|
|
<td><a href="reference/flexbox_wrap-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-wrap: wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_wrap-long-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flexbox_wrap-long.xht">flexbox_wrap-long</a></td>
|
|
<td><a href="reference/flexbox_wrap-long-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-wrap: wrap / long items
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_wrap-reverse-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="flexbox_wrap-reverse.xht">flexbox_wrap-reverse</a></td>
|
|
<td><a href="reference/flexbox_wrap-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-wrap: wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="multi-line-wrap-reverse-column-reverse-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="multi-line-wrap-reverse-column-reverse.xht">multi-line-wrap-reverse-column-reverse</a></td>
|
|
<td><a href="reference/multi-line-wrap-reverse-column-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container multiline wrapping-reverse in column-reverse direction.
|
|
<ul class="assert">
|
|
<li>This test check that a flex container reverse-wraps blocks multiline in column-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multi-line-wrap-reverse-row-reverse-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="multi-line-wrap-reverse-row-reverse.xht">multi-line-wrap-reverse-row-reverse</a></td>
|
|
<td><a href="reference/multi-line-wrap-reverse-row-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container multiline wrapping-reverse in row-reverse direction.
|
|
<ul class="assert">
|
|
<li>This test check that a flex container reverse-wraps blocks multiline in row-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multi-line-wrap-with-column-reverse-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="multi-line-wrap-with-column-reverse.xht">multi-line-wrap-with-column-reverse</a></td>
|
|
<td><a href="reference/multi-line-wrap-with-column-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container multiline wrapping in column-reverse direction
|
|
<ul class="assert">
|
|
<li>This test check that a flex container wraps blocks multiline in column-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multi-line-wrap-with-row-reverse-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="multi-line-wrap-with-row-reverse.xht">multi-line-wrap-with-row-reverse</a></td>
|
|
<td><a href="reference/multi-line-wrap-with-row-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container multiline wrapping in row-reverse direction
|
|
<ul class="assert">
|
|
<li>This test check that a flex container wraps blocks multiline in row-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-flex-wrap-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="ttwf-reftest-flex-wrap.xht">ttwf-reftest-flex-wrap</a></td>
|
|
<td><a href="reference/ttwf-reftest-flex-wrap-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-wrap proprety - wrap
|
|
<ul class="assert">
|
|
<li>Statement describing what the test case is asserting</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-flex-wrap-reverse-5.2.#propdef-flex-wrap" class="">
|
|
<td>
|
|
<a href="ttwf-reftest-flex-wrap-reverse.xht">ttwf-reftest-flex-wrap-reverse</a></td>
|
|
<td><a href="reference/ttwf-reftest-flex-wrap-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-wrap proprety - wrap-reverse
|
|
<ul class="assert">
|
|
<li>Statement describing what the test case is asserting</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-cross-axis-4">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-cross-axis-5">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-cross-end-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-cross-end-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-cross-start-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-cross-start-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-cross-start-3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-flex-container-21">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-multi-line-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-multi-line-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-propdef-flex-wrap-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-propdef-flex-wrap-3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-propdef-flex-wrap-4">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-single-line-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-single-line-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-valdef-flex-wrap-wrap-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-valdef-flex-wrap-wrap-reverse-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#ref-for-valdef-flex-wrap-wrap-reverse-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.2.#valdef-flex-wrap-nowrap">
|
|
<!-- 5 tests -->
|
|
<tr id="flexbox_computedstyle_flex-flow-column-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-nowrap.xht">flexbox_computedstyle_flex-flow-column-nowrap</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 | flex-flow: column nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-reverse-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-reverse-nowrap.xht">flexbox_computedstyle_flex-flow-column-reverse-nowrap</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 | flex-flow: column-reverse nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-nowrap.xht">flexbox_computedstyle_flex-flow-nowrap</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 | flex-flow: nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-nowrap.xht">flexbox_computedstyle_flex-flow-row-nowrap</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 | flex-flow: row nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-nowrap.xht">flexbox_computedstyle_flex-flow-row-reverse-nowrap</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 | flex-flow: row-reverse nowrap
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.2.#valdef-flex-wrap-wrap">
|
|
<!-- 6 tests -->
|
|
<tr id="flexbox_computedstyle_flex-flow-column-reverse-wrap-5.2.#valdef-flex-wrap-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-reverse-wrap.xht">flexbox_computedstyle_flex-flow-column-reverse-wrap</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 | flex-flow: column-reverse wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-wrap-5.2.#valdef-flex-wrap-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-wrap.xht">flexbox_computedstyle_flex-flow-column-wrap</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 | flex-flow: column wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-5.2.#valdef-flex-wrap-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap.xht">flexbox_computedstyle_flex-flow-row-reverse-wrap</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 | flex-flow: row-reverse wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-wrap-5.2.#valdef-flex-wrap-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-wrap.xht">flexbox_computedstyle_flex-flow-row-wrap</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 | flex-flow: row wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-wrap-5.2.#valdef-flex-wrap-wrap" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-wrap.xht">flexbox_computedstyle_flex-flow-wrap</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 | flex-flow: wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-flow-5.2.#valdef-flex-wrap-wrap" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-flow.xht">flexbox_rtl-flow</a></td>
|
|
<td><a href="reference/flexbox_rtl-flow-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column wrap | rtl
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.2.#valdef-flex-wrap-wrap-reverse">
|
|
<!-- 5 tests -->
|
|
<tr id="flexbox_computedstyle_flex-flow-column-wrap-reverse-5.2.#valdef-flex-wrap-wrap-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-wrap-reverse.xht">flexbox_computedstyle_flex-flow-column-wrap-reverse</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 | flex-flow: column wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse-5.2.#valdef-flex-wrap-wrap-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.xht">flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse</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 | flex-flow: row-reverse wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-wrap-reverse-5.2.#valdef-flex-wrap-wrap-reverse" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-wrap-reverse.xht">flexbox_computedstyle_flex-flow-row-wrap-reverse</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 | flex-flow: row wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-flow-reverse-5.2.#valdef-flex-wrap-wrap-reverse" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-flow-reverse.xht">flexbox_rtl-flow-reverse</a></td>
|
|
<td><a href="reference/flexbox_rtl-flow-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column wrap-reverse | rtl
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-order-5.2.#valdef-flex-wrap-wrap-reverse" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-order.xht">flexbox_rtl-order</a></td>
|
|
<td><a href="reference/flexbox_rtl-order-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.3">+</a>
|
|
<a href="https://www.w3.org/TR/css-flexbox-1/#flex-flow-property">5.3 Flex Direction and Wrap: the flex-flow shorthand</a></th></tr>
|
|
<!-- 3 tests -->
|
|
<tr id="autoheight-regions-in-autoheight-flexbox-001-5.3" class="ahem">
|
|
<td>
|
|
<a href="autoheight-regions-in-autoheight-flexbox-001.xht">autoheight-regions-in-autoheight-flexbox-001</a></td>
|
|
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-001-ref.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>CSS Regions: Auto-height regions in auto-height flex container
|
|
<ul class="assert">
|
|
<li>Test that auto-height regions placed in a flex container with auto-height and row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on the second row and into the region from the first row, making the left blue rectangle taller than the green rectangle on the right.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-flow-001-5.3" class="">
|
|
<td>
|
|
<a href="flexbox-flex-flow-001.xht">flexbox-flex-flow-001</a></td>
|
|
<td><a href="reference/flexbox-flex-flow-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each container
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-flex-flow-002-5.3" class="">
|
|
<td>
|
|
<a href="flexbox-flex-flow-002.xht">flexbox-flex-flow-002</a></td>
|
|
<td><a href="reference/flexbox-flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Testing all the values of the "flex-flow" shorthand property, with 3 flex items in each container
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.3.#example-e030b2cc">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#propdef-flex-flow">
|
|
<!-- 52 tests -->
|
|
<tr id="css-box-justify-content-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-box-justify-content.xht">css-box-justify-content</a></td>
|
|
<td><a href="reference/css-box-justify-content-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox |css-box-justify-content
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-column-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-column.xht">css-flexbox-column</a></td>
|
|
<td><a href="reference/css-flexbox-column-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-column-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-column-reverse.xht">css-flexbox-column-reverse</a></td>
|
|
<td><a href="reference/css-flexbox-column-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-column-reverse-wrap-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-column-reverse-wrap.xht">css-flexbox-column-reverse-wrap</a></td>
|
|
<td><a href="reference/css-flexbox-column-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-column-reverse-wrap-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-column-reverse-wrap-reverse.xht">css-flexbox-column-reverse-wrap-reverse</a></td>
|
|
<td><a href="reference/css-flexbox-column-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-column-wrap-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-column-wrap.xht">css-flexbox-column-wrap</a></td>
|
|
<td><a href="reference/css-flexbox-column-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-column-wrap-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-column-wrap-reverse.xht">css-flexbox-column-wrap-reverse</a></td>
|
|
<td><a href="reference/css-flexbox-column-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-row-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-row.xht">css-flexbox-row</a></td>
|
|
<td><a href="reference/css-flexbox-row-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row, writing mode vertical
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-row-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-row-reverse.xht">css-flexbox-row-reverse</a></td>
|
|
<td><a href="reference/css-flexbox-row-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row, writing mode vertical
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: row-reverse, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-row-reverse-wrap-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-row-reverse-wrap.xht">css-flexbox-row-reverse-wrap</a></td>
|
|
<td><a href="reference/css-flexbox-row-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row, writing mode vertical
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: row-reverse wrap, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-row-reverse-wrap-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-row-reverse-wrap-reverse.xht">css-flexbox-row-reverse-wrap-reverse</a></td>
|
|
<td><a href="reference/css-flexbox-row-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row, writing mode vertical
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: row-reverse wrap-reverse, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-row-wrap-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-row-wrap.xht">css-flexbox-row-wrap</a></td>
|
|
<td><a href="reference/css-flexbox-row-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row, writing mode vertical
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: row wrap, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-row-wrap-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-row-wrap-reverse.xht">css-flexbox-row-wrap-reverse</a></td>
|
|
<td><a href="reference/css-flexbox-row-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row, writing mode vertical
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: row wrap-reverse, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css-flexbox-test1-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="css-flexbox-test1.xht">css-flexbox-test1</a></td>
|
|
<td><a href="reference/css-flexbox-test1-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex direction: row, writing mode vertical
|
|
<ul class="assert">
|
|
<li>Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-001-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-001.xht">flex-flow-001</a></td>
|
|
<td><a href="reference/flex-flow-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row nowrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row nowrap' controls the flex container is single-line</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-002-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-002.xht">flex-flow-002</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row wrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row wrap' controls the flex container is multi-line</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-003-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-003.xht">flex-flow-003</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row wrap-reverse
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row wrap-reverse' controls the flex container is multi-line but the cross-start and cross-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-004-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-004.xht">flex-flow-004</a></td>
|
|
<td><a href="reference/flex-flow-001-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row-reverse nowrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row-reverse nowrap' controls the flex container is single-line, but the main-start and main-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-005-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-005.xht">flex-flow-005</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row-reverse wrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row-reverse wrap' controls the flex container is multi-line but the main-start and main-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-006-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-006.xht">flex-flow-006</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - row-reverse wrap-reverse
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'row-reverse wrap-reverse' controls the flex container is multi-line but the main-start and main-end, cross-start and cross-end directions are all swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-007-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-007.xht">flex-flow-007</a></td>
|
|
<td><a href="reference/flex-flow-007-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column nowrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column nowrap' controls the flex container is single-line, but the main axis is vertical</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-008-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-008.xht">flex-flow-008</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column wrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column wrap' controls the flex container is multi-line but the main axis is vertical</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-009-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-009.xht">flex-flow-009</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column wrap-reverse
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column wrap-reverse' controls the flex container is multi-line but the main axis is vertical, the cross-start and cross-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-010-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-010.xht">flex-flow-010</a></td>
|
|
<td><a href="reference/flex-flow-007-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column-reverse nowrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column-reverse nowrap' controls the flex container is single-line, but the main axis is vertical, the main-start and main-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-011-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-011.xht">flex-flow-011</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column-reverse wrap
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column-reverse wrap' controls the flex container is multi-line but the main axis is vertical, the main-start and main-end directions are swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flex-flow-012-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flex-flow-012.xht">flex-flow-012</a></td>
|
|
<td><a href="reference/flex-flow-002-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex-flow - column-reverse wrap-reverse
|
|
<ul class="assert">
|
|
<li>The 'flex-flow' property set 'column-reverse wrap-reverse' controls the flex container is multi-line but the main axis is vertical, the 'cross-start/cross-end' and 'main-start/main-end' directions are all swapped</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column.xht">flexbox_computedstyle_flex-flow-column</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 | flex-flow: column
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-nowrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-nowrap.xht">flexbox_computedstyle_flex-flow-column-nowrap</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 | flex-flow: column nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-reverse-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-reverse.xht">flexbox_computedstyle_flex-flow-column-reverse</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 | flex-flow: column-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-reverse-nowrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-reverse-nowrap.xht">flexbox_computedstyle_flex-flow-column-reverse-nowrap</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 | flex-flow: column-reverse nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-reverse-wrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-reverse-wrap.xht">flexbox_computedstyle_flex-flow-column-reverse-wrap</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 | flex-flow: column-reverse wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-wrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-wrap.xht">flexbox_computedstyle_flex-flow-column-wrap</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 | flex-flow: column wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-column-wrap-reverse-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-column-wrap-reverse.xht">flexbox_computedstyle_flex-flow-column-wrap-reverse</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 | flex-flow: column wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-nowrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-nowrap.xht">flexbox_computedstyle_flex-flow-nowrap</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 | flex-flow: nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row.xht">flexbox_computedstyle_flex-flow-row</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 | flex-flow: row
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-nowrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-nowrap.xht">flexbox_computedstyle_flex-flow-row-nowrap</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 | flex-flow: row nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse.xht">flexbox_computedstyle_flex-flow-row-reverse</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 | flex-flow: row-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-nowrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-nowrap.xht">flexbox_computedstyle_flex-flow-row-reverse-nowrap</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 | flex-flow: row-reverse nowrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap.xht">flexbox_computedstyle_flex-flow-row-reverse-wrap</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 | flex-flow: row-reverse wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.xht">flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse</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 | flex-flow: row-reverse wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-wrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-wrap.xht">flexbox_computedstyle_flex-flow-row-wrap</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 | flex-flow: row wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-row-wrap-reverse-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-row-wrap-reverse.xht">flexbox_computedstyle_flex-flow-row-wrap-reverse</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 | flex-flow: row wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_flex-flow-wrap-5.3.#propdef-flex-flow" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_flex-flow-wrap.xht">flexbox_computedstyle_flex-flow-wrap</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 | flex-flow: wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_flow-column-reverse-wrap-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_flow-column-reverse-wrap.xht">flexbox_flow-column-reverse-wrap</a></td>
|
|
<td><a href="reference/flexbox_flow-column-reverse-wrap-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column-reverse wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_flow-column-reverse-wrap-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_flow-column-reverse-wrap-reverse.xht">flexbox_flow-column-reverse-wrap-reverse</a></td>
|
|
<td><a href="reference/flexbox_flow-column-reverse-wrap-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column-reverse wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_flow-column-wrap-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_flow-column-wrap.xht">flexbox_flow-column-wrap</a></td>
|
|
<td><a href="reference/flexbox_flow-column-wrap-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_flow-column-wrap-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_flow-column-wrap-reverse.xht">flexbox_flow-column-wrap-reverse</a></td>
|
|
<td><a href="reference/flexbox_flow-column-wrap-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_flow-row-wrap-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_flow-row-wrap.xht">flexbox_flow-row-wrap</a></td>
|
|
<td><a href="reference/flexbox_flow-row-wrap-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: row wrap
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_flow-row-wrap-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_flow-row-wrap-reverse.xht">flexbox_flow-row-wrap-reverse</a></td>
|
|
<td><a href="reference/flexbox_flow-row-wrap-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: row wrap-reverse
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-flow-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-flow.xht">flexbox_rtl-flow</a></td>
|
|
<td><a href="reference/flexbox_rtl-flow-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column wrap | rtl
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-flow-reverse-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-flow-reverse.xht">flexbox_rtl-flow-reverse</a></td>
|
|
<td><a href="reference/flexbox_rtl-flow-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column wrap-reverse | rtl
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_rtl-order-5.3.#propdef-flex-flow" class="">
|
|
<td>
|
|
<a href="flexbox_rtl-order.xht">flexbox_rtl-order</a></td>
|
|
<td><a href="reference/flexbox_rtl-order-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-flex-container-22">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-propdef-flex-direction-5">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-propdef-flex-direction-6">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-propdef-flex-flow-3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-propdef-flex-flow-4">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-propdef-flex-flow-5">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-propdef-flex-wrap-5">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-propdef-flex-wrap-6">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.3.#ref-for-valdef-flex-direction-row-3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.4">+</a>
|
|
<a href="https://www.w3.org/TR/css-flexbox-1/#order-property">5.4 Display Order: the order property</a></th></tr>
|
|
<!-- 21 tests -->
|
|
<tr id="flex-order-5.4" class="">
|
|
<td>
|
|
<a href="flex-order.xht">flex-order</a></td>
|
|
<td><a href="reference/flex-order-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex order
|
|
<ul class="assert">
|
|
<li>ordered flex items should ordered properly</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-001-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-001.xht">grid-inline-order-property-auto-placement-001</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-002-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-002.xht">grid-inline-order-property-auto-placement-002</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-003-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-003.xht">grid-inline-order-property-auto-placement-003</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-004-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-004.xht">grid-inline-order-property-auto-placement-004</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-005-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-005.xht">grid-inline-order-property-auto-placement-005</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-001-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-001.xht">grid-inline-order-property-painting-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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-002-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-002.xht">grid-inline-order-property-painting-002</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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-003-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-003.xht">grid-inline-order-property-painting-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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-004-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-004.xht">grid-inline-order-property-painting-004</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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-005-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-005.xht">grid-inline-order-property-painting-005</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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-001-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-001.xht">grid-order-property-auto-placement-001</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-002-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-002.xht">grid-order-property-auto-placement-002</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-003-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-003.xht">grid-order-property-auto-placement-003</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-004-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-004.xht">grid-order-property-auto-placement-004</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-005-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-005.xht">grid-order-property-auto-placement-005</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-001-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-001.xht">grid-order-property-painting-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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-002-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-002.xht">grid-order-property-painting-002</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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-003-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-003.xht">grid-order-property-painting-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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-004-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-004.xht">grid-order-property-painting-004</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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-005-5.4" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-005.xht">grid-order-property-painting-005</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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.4.#example-acefdb57">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#order-modified-document-order">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#propdef-order">
|
|
<!-- 17 tests -->
|
|
<tr id="flexbox-order-from-lowest-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="flexbox-order-from-lowest.xht">flexbox-order-from-lowest</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>flex container layout starts with lowest order item
|
|
<ul class="assert">
|
|
<li>This test check that a flex container layous out its content starting with the lowest numbered ordinal group and going up</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-order-only-flexitems-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="flexbox-order-only-flexitems.xht">flexbox-order-only-flexitems</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>order only affects flex items
|
|
<ul class="assert">
|
|
<li>This test check that the order property has no effect on elements that are not flex items</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_order-5.4.#propdef-order" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_order.xht">flexbox_computedstyle_order</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 | order: 0
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_order-inherit-5.4.#propdef-order" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_order-inherit.xht">flexbox_computedstyle_order-inherit</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 | order: -1
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_order-integer-5.4.#propdef-order" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_order-integer.xht">flexbox_computedstyle_order-integer</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 | order: integer
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_order-invalid-5.4.#propdef-order" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_order-invalid.xht">flexbox_computedstyle_order-invalid</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 | order: noninteger
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_order-negative-5.4.#propdef-order" class="dom script">
|
|
<td>
|
|
<a href="flexbox_computedstyle_order-negative.xht">flexbox_computedstyle_order-negative</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 | order: -1
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_order-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="flexbox_order.xht">flexbox_order</a></td>
|
|
<td><a href="reference/flexbox_order-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column-reverse wrap-reverse; order
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_order-abspos-space-around-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="flexbox_order-abspos-space-around.xht">flexbox_order-abspos-space-around</a></td>
|
|
<td><a href="reference/flexbox_order-abspos-space-around-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | order; justify-content: space-around
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_order-box-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="flexbox_order-box.xht">flexbox_order-box</a></td>
|
|
<td><a href="reference/flexbox_order-box-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column-reverse wrap-reverse; order
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_order-noninteger-invalid-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="flexbox_order-noninteger-invalid.xht">flexbox_order-noninteger-invalid</a></td>
|
|
<td><a href="reference/flexbox_empty-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | flex-flow: column-reverse wrap-reverse; order
|
|
</td>
|
|
</tr>
|
|
<tr id="flexible-order-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="Flexible-order.xht">flexible-order</a></td>
|
|
<td><a href="reference/Flexible-order-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>Change the value of 'order' property
|
|
<ul class="assert">
|
|
<li>The order of three should be blue-red-black</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="order-001-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="order-001.xht">order-001</a></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>The 'order' property on flex items set to a value of '-1'
|
|
<ul class="assert">
|
|
<li>This test checks that a flex container will lay out its content in the order specified by the ordinal groups.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="order-with-column-reverse-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="order-with-column-reverse.xht">order-with-column-reverse</a></td>
|
|
<td><a href="reference/order-with-column-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container layout lowest order with column-reverse direction
|
|
<ul class="assert">
|
|
<li>This test check that a flex container layouts out its content starting with the lowest numbered ordinal group and going up with column-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="order-with-row-reverse-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="order-with-row-reverse.xht">order-with-row-reverse</a></td>
|
|
<td><a href="reference/order-with-row-reverse-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>flex container layout lowest order with row-reverse direction
|
|
<ul class="assert">
|
|
<li>This test check that a flex container layouts out its content starting with the lowest numbered ordinal group and going up with row-reverse direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="order_value-5.4.#propdef-order" class="script">
|
|
<td>
|
|
<a href="order_value.xht">order_value</a></td>
|
|
<td></td>
|
|
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>order_check
|
|
<ul class="assert">
|
|
<li>Check if the web engine can indentify order property.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-flex-order-5.4.#propdef-order" class="">
|
|
<td>
|
|
<a href="ttwf-reftest-flex-order.xht">ttwf-reftest-flex-order</a></td>
|
|
<td><a href="reference/ttwf-reftest-flex-order-ref.xht">=</a> </td>
|
|
<td></td>
|
|
<td>order proprety - value
|
|
<ul class="assert">
|
|
<li>Statement describing what the test case is asserting</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s5.4.#ref-for-flex-container-23">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#ref-for-flex-container-24">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#ref-for-flex-item-24">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#ref-for-flex-item-25">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#ref-for-flex-item-26">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#ref-for-propdef-order-5">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#ref-for-propdef-order-6">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#ref-for-propdef-order-7">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.#valdef-order-integer">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s5.4.1">+</a>
|
|
<a href="https://www.w3.org/TR/css-flexbox-1/#order-accessibility">5.4.1 Reordering and Accessibility</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#example-93473bb9">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#example-e1d8dda6">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-10">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-11">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-12">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-13">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-14">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-15">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-16">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-17">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-18">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-19">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-8">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-propdef-order-9">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s5.4.1.#ref-for-valdef-align-items-stretch-2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |