Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-23 16:44:33 +01:00
Code Issues Projects Releases Packages Wiki Activity
servo/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-2.xht

382 lines
No EOL
16 KiB
HTML
Raw Blame History

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flex Layout Box Model and Terminology - CSS Flexible Box Layout Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Layout Box Model and Terminology (29 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="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#box-model">2 Flex Layout Box Model and Terminology</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-axis">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-dimension">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-size">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-size-property">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-start">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#flex-container">
<!-- 3 tests -->
<tr id="flexbox_generated-2.#flex-container" class="">
<td>
<a href="flexbox_generated.xht">flexbox_generated</a></td>
<td><a href="reference/flexbox_generated-ref.xht">=</a> </td>
<td></td>
<td>flexbox | flexcontainer vs generated content
</td>
</tr>
<tr id="flexbox_generated-flex-2.#flex-container" class="">
<td>
<a href="flexbox_generated-flex.xht">flexbox_generated-flex</a></td>
<td><a href="reference/flexbox_generated-flex-ref.xht">=</a> </td>
<td></td>
<td>flexbox | flexcontainer via generated content
</td>
</tr>
<tr id="flexbox_generated-nested-flex-2.#flex-container" class="">
<td>
<a href="flexbox_generated-nested-flex.xht">flexbox_generated-nested-flex</a></td>
<td><a href="reference/flexbox_generated-flex-ref.xht">=</a> </td>
<td></td>
<td>flexbox | flexcontainer via generated content
</td>
</tr>
</tbody>
<tbody id="s2.#flex-direction">
<!-- 26 tests -->
<tr id="autoheight-regions-in-autoheight-flexbox-004-2.#flex-direction" class="ahem">
<td>
<a href="autoheight-regions-in-autoheight-flexbox-004.xht">autoheight-regions-in-autoheight-flexbox-004</a></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: nested regions in flexbox
<ul class="assert">
<li>Test checks that nested regions placed in flex containers are laid out properly. The first flow (blue content) is nested inside the second flow (green content). The user should see three horizontal stripes with the following colors: green, blue, green.</li>
</ul>
</td>
</tr>
<tr id="flex-direction-2.#flex-direction" class="">
<td>
<a href="flex-direction.xht">flex-direction</a></td>
<td><a href="reference/flex-direction.xht">=</a> </td>
<td></td>
<td>flex flow direction
<ul class="assert">
<li>The flow of flex items in the the flex container should observe the flex-direction property.</li>
</ul>
</td>
</tr>
<tr id="flex-direction-column-reverse-2.#flex-direction" class="">
<td>
<a href="flex-direction-column-reverse.xht">flex-direction-column-reverse</a></td>
<td></td>
<td></td>
<td>flex-direction: column-reverse swaps main start and end directions
<ul class="assert">
<li>This test checks that column-reverse flex-direction swaps the main start and main end directions</li>
</ul>
</td>
</tr>
<tr id="flex-direction-modify-2.#flex-direction" class="">
<td>
<a href="flex-direction-modify.xht">flex-direction-modify</a></td>
<td><a href="reference/flex-direction-modify.xht">=</a> </td>
<td></td>
<td>flex flow direction
<ul class="assert">
<li>Changing 'flex-direction' with JavaScript and then changing it back should returns to the original look.</li>
</ul>
</td>
</tr>
<tr id="flex-direction-row-2.#flex-direction" class="">
<td>
<a href="flex-direction-row.xht">flex-direction-row</a></td>
<td></td>
<td></td>
<td>flex-direction:row axis matches that of writing mode inline axis
<ul class="assert">
<li>This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current writing mode</li>
</ul>
</td>
</tr>
<tr id="flex-direction-row-reverse-2.#flex-direction" class="">
<td>
<a href="flex-direction-row-reverse.xht">flex-direction-row-reverse</a></td>
<td></td>
<td></td>
<td>flow-direction:row-reverse swaps main start and end directions
<ul class="assert">
<li>This test checks that row-reverse flex-direction swaps the main start and main end directions</li>
</ul>
</td>
</tr>
<tr id="flex-direction-row-vertical-2.#flex-direction" class="">
<td>
<a href="flex-direction-row-vertical.xht">flex-direction-row-vertical</a></td>
<td></td>
<td></td>
<td>flex-direction:row has the same orientation as inline axis
<ul class="assert">
<li>This test checks that the main axis of the row flex-direction has the same orientation as the inline axis of the current vertical writing mode</li>
</ul>
</td>
</tr>
<tr id="flex-direction-with-element-insert-2.#flex-direction" class="">
<td>
<a href="flex-direction-with-element-insert.xht">flex-direction-with-element-insert</a></td>
<td><a href="reference/flex-direction-with-element-insert.xht">=</a> </td>
<td></td>
<td>flex flow direction
<ul class="assert">
<li>The flex items inserted by script shuould follow the right direction what the flex-direction property directives.</li>
</ul>
</td>
</tr>
<tr id="flex-flow-001-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-2.#flex-direction" 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-direction-column-2.#flex-direction" class="dom">
<td>
<a href="flexbox_computedstyle_flex-direction-column.xht">flexbox_computedstyle_flex-direction-column</a></td>
<td><a href="reference/ref-pass-body.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flexbox | computed style | flex-direction: column
</td>
</tr>
<tr id="flexbox_computedstyle_flex-direction-column-reverse-2.#flex-direction" class="dom">
<td>
<a href="flexbox_computedstyle_flex-direction-column-reverse.xht">flexbox_computedstyle_flex-direction-column-reverse</a></td>
<td><a href="reference/ref-pass-body.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flexbox | computed style | flex-direction: column-reverse
</td>
</tr>
<tr id="flexbox_computedstyle_flex-direction-invalid-2.#flex-direction" class="dom">
<td>
<a href="flexbox_computedstyle_flex-direction-invalid.xht">flexbox_computedstyle_flex-direction-invalid</a></td>
<td><a href="reference/ref-pass-body.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flexbox | computed style | flex-direction: row
</td>
</tr>
<tr id="flexbox_computedstyle_flex-direction-row-2.#flex-direction" class="dom">
<td>
<a href="flexbox_computedstyle_flex-direction-row.xht">flexbox_computedstyle_flex-direction-row</a></td>
<td><a href="reference/ref-pass-body.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flexbox | computed style | flex-direction: row
</td>
</tr>
<tr id="flexbox_computedstyle_flex-direction-row-reverse-2.#flex-direction" class="dom">
<td>
<a href="flexbox_computedstyle_flex-direction-row-reverse.xht">flexbox_computedstyle_flex-direction-row-reverse</a></td>
<td><a href="reference/ref-pass-body.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flexbox | computed style | flex-direction: row-reverse
</td>
</tr>
<tr id="flexbox_rtl-direction-2.#flex-direction" 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>
</tbody>
<tbody id="s2.#flex-item">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-axis">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-dimension">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-size">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-size-property">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-start">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>
Reference in a new issue View git blame Copy permalink