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/xhtml1print/chapter-8.xht
Ms2ger 296fa2512b Update web-platform-tests and CSS tests. 
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2017-02-06 22:38:29 +01:00

2259 lines
No EOL
96 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>Alignment - 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>Alignment (164 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="s8">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#alignment">8 Alignment</a></th></tr>
<!-- 1 tests -->
<tr id="flex-align-items-center-8" class="">
<td>
<a href="flex-align-items-center.xht">flex-align-items-center</a></td>
<td><a href="reference/flex-align-items-center-ref.xht">=</a> </td>
<td></td>
<td>CSS Flex-basis Test
<ul class="assert">
<li>flex items center</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s8.#ref-for-cross-axis-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.#ref-for-flex-item-46">
<!-- 0 tests -->
</tbody>
<tbody id="s8.#ref-for-main-axis-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.1">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#auto-margins">8.1 Aligning with auto margins</a></th></tr>
<!-- 6 tests -->
<tr id="flexbox-align-self-horiz-005-8.1" class="">
<td>
<a href="flexbox-align-self-horiz-005.xht">flexbox-align-self-horiz-005</a></td>
<td><a href="reference/flexbox-align-self-horiz-005-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with auto margins in play, in a horizontal flex container
</td>
</tr>
<tr id="flexbox-margin-auto-horiz-001-8.1" class="">
<td>
<a href="flexbox-margin-auto-horiz-001.xht">flexbox-margin-auto-horiz-001</a></td>
<td><a href="reference/flexbox-margin-auto-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing horizontal auto margins on flex items in a horizontal flex container
</td>
</tr>
<tr id="flexbox-margin-auto-horiz-002-8.1" class="">
<td>
<a href="flexbox-margin-auto-horiz-002.xht">flexbox-margin-auto-horiz-002</a></td>
<td><a href="reference/flexbox-margin-auto-horiz-002-ref.xht">=</a> </td>
<td></td>
<td>Testing vertical auto margins on flex items in a horizontal flex container
</td>
</tr>
<tr id="flexbox_margin-auto-8.1" class="">
<td>
<a href="flexbox_margin-auto.xht">flexbox_margin-auto</a></td>
<td><a href="reference/flexbox_margin-auto-ref.xht">=</a> </td>
<td></td>
<td>flexbox | margin: auto
</td>
</tr>
<tr id="flexbox_margin-auto-overflow-8.1" class="">
<td>
<a href="flexbox_margin-auto-overflow.xht">flexbox_margin-auto-overflow</a></td>
<td><a href="reference/flexbox_margin-auto-overflow-ref.xht">=</a> </td>
<td></td>
<td>flexbox | margin: auto in overflow
</td>
</tr>
<tr id="flexbox_margin-auto-overflow-2-8.1" class="">
<td>
<a href="flexbox_margin-auto-overflow-2.xht">flexbox_margin-auto-overflow-2</a></td>
<td><a href="reference/flexbox_margin-auto-overflow-2-ref.xht">=</a> </td>
<td></td>
<td>flexbox | margin: auto in overflow
</td>
</tr>
</tbody>
<tbody id="s8.1.#auto-bar">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-30f9440a">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-f1650544">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#login">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-propdef-align-items-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-propdef-align-self-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-propdef-align-self-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#ref-for-propdef-justify-content-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.2">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#justify-content-property">8.2 Axis Alignment: the justify-content property</a></th></tr>
<!-- 12 tests -->
<tr id="flexbox-justify-content-horiz-001a-8.2" class="">
<td>
<a href="flexbox-justify-content-horiz-001a.xht">flexbox-justify-content-horiz-001a</a></td>
<td><a href="reference/flexbox-justify-content-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a horizontal flex container
</td>
</tr>
<tr id="flexbox-justify-content-horiz-001b-8.2" class="">
<td>
<a href="flexbox-justify-content-horiz-001b.xht">flexbox-justify-content-horiz-001b</a></td>
<td><a href="reference/flexbox-justify-content-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a horizontal flex container with &quot;min-width&quot;
</td>
</tr>
<tr id="flexbox-justify-content-horiz-002-8.2" class="">
<td>
<a href="flexbox-justify-content-horiz-002.xht">flexbox-justify-content-horiz-002</a></td>
<td><a href="reference/flexbox-justify-content-horiz-002-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a horizontal flex container, with margins/border/padding on flex items
</td>
</tr>
<tr id="flexbox-justify-content-horiz-003-8.2" class="">
<td>
<a href="flexbox-justify-content-horiz-003.xht">flexbox-justify-content-horiz-003</a></td>
<td><a href="reference/flexbox-justify-content-horiz-003-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow
</td>
</tr>
<tr id="flexbox-justify-content-horiz-004-8.2" class="">
<td>
<a href="flexbox-justify-content-horiz-004.xht">flexbox-justify-content-horiz-004</a></td>
<td><a href="reference/flexbox-justify-content-horiz-004-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow, with margins/border/padding on flex items
</td>
</tr>
<tr id="flexbox-justify-content-horiz-005-8.2" class="">
<td>
<a href="flexbox-justify-content-horiz-005.xht">flexbox-justify-content-horiz-005</a></td>
<td><a href="reference/flexbox-justify-content-horiz-005-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in an auto-sized horizontal flex container
</td>
</tr>
<tr id="flexbox-justify-content-vert-001a-8.2" class="">
<td>
<a href="flexbox-justify-content-vert-001a.xht">flexbox-justify-content-vert-001a</a></td>
<td><a href="reference/flexbox-justify-content-vert-001-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a vertical flex container
</td>
</tr>
<tr id="flexbox-justify-content-vert-001b-8.2" class="">
<td>
<a href="flexbox-justify-content-vert-001b.xht">flexbox-justify-content-vert-001b</a></td>
<td><a href="reference/flexbox-justify-content-vert-001-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a vertical flex container with &quot;min-height&quot;
</td>
</tr>
<tr id="flexbox-justify-content-vert-002-8.2" class="">
<td>
<a href="flexbox-justify-content-vert-002.xht">flexbox-justify-content-vert-002</a></td>
<td><a href="reference/flexbox-justify-content-vert-002-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a vertical flex container, with margins/border/padding on flex items
</td>
</tr>
<tr id="flexbox-justify-content-vert-003-8.2" class="">
<td>
<a href="flexbox-justify-content-vert-003.xht">flexbox-justify-content-vert-003</a></td>
<td><a href="reference/flexbox-justify-content-vert-003-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow
</td>
</tr>
<tr id="flexbox-justify-content-vert-004-8.2" class="">
<td>
<a href="flexbox-justify-content-vert-004.xht">flexbox-justify-content-vert-004</a></td>
<td><a href="reference/flexbox-justify-content-vert-004-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow, with margins/border/padding on flex items
</td>
</tr>
<tr id="flexbox-justify-content-vert-005-8.2" class="">
<td>
<a href="flexbox-justify-content-vert-005.xht">flexbox-justify-content-vert-005</a></td>
<td><a href="reference/flexbox-justify-content-vert-005-ref.xht">=</a> </td>
<td></td>
<td>Testing 'justify-content' in an auto-sized vertical flex container
</td>
</tr>
</tbody>
<tbody id="s8.2.#propdef-justify-content">
<!-- 28 tests -->
<tr id="css-box-justify-content-8.2.#propdef-justify-content" 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="flexbox_computedstyle_justify-content-center-8.2.#propdef-justify-content" class="dom script">
<td>
<a href="flexbox_computedstyle_justify-content-center.xht">flexbox_computedstyle_justify-content-center</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 | justify-content: center
</td>
</tr>
<tr id="flexbox_computedstyle_justify-content-flex-end-8.2.#propdef-justify-content" class="dom script">
<td>
<a href="flexbox_computedstyle_justify-content-flex-end.xht">flexbox_computedstyle_justify-content-flex-end</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 | justify-content: flex-end
</td>
</tr>
<tr id="flexbox_computedstyle_justify-content-flex-start-8.2.#propdef-justify-content" class="dom script">
<td>
<a href="flexbox_computedstyle_justify-content-flex-start.xht">flexbox_computedstyle_justify-content-flex-start</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 | justify-content: flex-start
</td>
</tr>
<tr id="flexbox_computedstyle_justify-content-space-around-8.2.#propdef-justify-content" class="dom script">
<td>
<a href="flexbox_computedstyle_justify-content-space-around.xht">flexbox_computedstyle_justify-content-space-around</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 | justify-content: space-around
</td>
</tr>
<tr id="flexbox_computedstyle_justify-content-space-between-8.2.#propdef-justify-content" class="dom script">
<td>
<a href="flexbox_computedstyle_justify-content-space-between.xht">flexbox_computedstyle_justify-content-space-between</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 | justify-content: space-between
</td>
</tr>
<tr id="flexbox_justifycontent-center-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-center.xht">flexbox_justifycontent-center</a></td>
<td><a href="reference/flexbox_justifycontent-center-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: center
</td>
</tr>
<tr id="flexbox_justifycontent-center-overflow-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-center-overflow.xht">flexbox_justifycontent-center-overflow</a></td>
<td><a href="reference/flexbox_justifycontent-center-overflow-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: center / overflow
</td>
</tr>
<tr id="flexbox_justifycontent-flex-end-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-flex-end.xht">flexbox_justifycontent-flex-end</a></td>
<td><a href="reference/flexbox_justifycontent-flex-end-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: flex-end
</td>
</tr>
<tr id="flexbox_justifycontent-flex-start-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-flex-start.xht">flexbox_justifycontent-flex-start</a></td>
<td><a href="reference/flexbox_justifycontent-flex-start-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: flex-start
</td>
</tr>
<tr id="flexbox_justifycontent-spacearound-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-spacearound.xht">flexbox_justifycontent-spacearound</a></td>
<td><a href="reference/flexbox_justifycontent-spacearound-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: space-around
</td>
</tr>
<tr id="flexbox_justifycontent-spacearound-negative-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-spacearound-negative.xht">flexbox_justifycontent-spacearound-negative</a></td>
<td><a href="reference/flexbox_justifycontent-spacearound-negative-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: space-around / negative
</td>
</tr>
<tr id="flexbox_justifycontent-spacearound-only-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-spacearound-only.xht">flexbox_justifycontent-spacearound-only</a></td>
<td><a href="reference/flexbox_justifycontent-spacearound-only-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: space-around | single item
</td>
</tr>
<tr id="flexbox_justifycontent-spacebetween-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-spacebetween.xht">flexbox_justifycontent-spacebetween</a></td>
<td><a href="reference/flexbox_justifycontent-spacebetween-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: space-between
</td>
</tr>
<tr id="flexbox_justifycontent-spacebetween-negative-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-spacebetween-negative.xht">flexbox_justifycontent-spacebetween-negative</a></td>
<td><a href="reference/flexbox_justifycontent-spacebetween-negative-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: space-between / negative
</td>
</tr>
<tr id="flexbox_justifycontent-spacebetween-only-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_justifycontent-spacebetween-only.xht">flexbox_justifycontent-spacebetween-only</a></td>
<td><a href="reference/flexbox_justifycontent-spacebetween-only-ref.xht">=</a> </td>
<td></td>
<td>flexbox | justify-content: space-between | single item
</td>
</tr>
<tr id="flexbox_object-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_object.xht">flexbox_object</a></td>
<td><a href="reference/flexbox_object-ref.xht">=</a> </td>
<td></td>
<td>flexbox | object fallback as a flex item
</td>
</tr>
<tr id="flexbox_width-overflow-8.2.#propdef-justify-content" class="">
<td>
<a href="flexbox_width-overflow.xht">flexbox_width-overflow</a></td>
<td><a href="reference/flexbox_empty-ref.xht">=</a> </td>
<td></td>
<td>flexbox | overflow
</td>
</tr>
<tr id="justify-content-001-8.2.#propdef-justify-content" class="image">
<td>
<a href="justify-content-001.xht">justify-content-001</a></td>
<td><a href="reference/justify-content-001-ref.xht">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>A flex container with 'justify-content' property set to 'center'
<ul class="assert">
<li>This test checks that the flex container with 'justify-content: center' centers flex items in the main axis of each line.</li>
</ul>
</td>
</tr>
<tr id="justify-content-002-8.2.#propdef-justify-content" class="image">
<td>
<a href="justify-content-002.xht">justify-content-002</a></td>
<td><a href="reference/justify-content-001-ref.xht">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>A flex container with the 'justify-content' property set to 'flex-start'
<ul class="assert">
<li>This test checks that the flex container with 'justify-content: flex-start' packs flex items toward the start of the main axis of each line.</li>
</ul>
</td>
</tr>
<tr id="justify-content-003-8.2.#propdef-justify-content" class="image">
<td>
<a href="justify-content-003.xht">justify-content-003</a></td>
<td><a href="reference/justify-content-001-ref.xht">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>A flex container with the 'justify-content' property set to 'flex-end'
<ul class="assert">
<li>This test checks that the flex container with 'justify-content: flex-end' packs flex items toward the end of the main axis of each line.</li>
</ul>
</td>
</tr>
<tr id="justify-content-004-8.2.#propdef-justify-content" class="image">
<td>
<a href="justify-content-004.xht">justify-content-004</a></td>
<td><a href="reference/justify-content-001-ref.xht">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>A flex container with the 'justify-content' property set to 'space-between'
<ul class="assert">
<li>This test checks that the flex container with 'justify-content: space-between' evenly distributes flex items in the main axis of each line.</li>
</ul>
</td>
</tr>
<tr id="justify-content-005-8.2.#propdef-justify-content" class="image">
<td>
<a href="justify-content-005.xht">justify-content-005</a></td>
<td><a href="reference/justify-content-001-ref.xht">=</a> </td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>A flex container with the 'justify-content' property set to 'space-around'
<ul class="assert">
<li>This test checks that the flex container with 'justify-content: space-around' evenly distributes flex items in the main axis of each line, with half-size spaces on either end.</li>
</ul>
</td>
</tr>
<tr id="justify-content_center-8.2.#propdef-justify-content" class="">
<td>
<a href="justify-content_center.xht">justify-content_center</a></td>
<td></td>
<td></td>
<td>justify-content_center
<ul class="assert">
<li>Check if the web engine can identify the justify-content value center.</li>
</ul>
</td>
</tr>
<tr id="justify-content_flex-end-8.2.#propdef-justify-content" class="">
<td>
<a href="justify-content_flex-end.xht">justify-content_flex-end</a></td>
<td></td>
<td></td>
<td>justify-content_flex-end
<ul class="assert">
<li>Check if the web engine can indentify the justify-content value flex-end.</li>
</ul>
</td>
</tr>
<tr id="justify-content_flex-start-8.2.#propdef-justify-content" class="">
<td>
<a href="justify-content_flex-start.xht">justify-content_flex-start</a></td>
<td></td>
<td></td>
<td>justify-content_flex-start
<ul class="assert">
<li>Check if the web engine can indentify the justify-content value flex-start.</li>
</ul>
</td>
</tr>
<tr id="justify-content_space-around-8.2.#propdef-justify-content" class="">
<td>
<a href="justify-content_space-around.xht">justify-content_space-around</a></td>
<td></td>
<td></td>
<td>justify-content_space-around
<ul class="assert">
<li>Check if the web engine can indentify the justy-content value space-around.</li>
</ul>
</td>
</tr>
<tr id="justify-content_space-between-8.2.#propdef-justify-content" class="">
<td>
<a href="justify-content_space-between.xht">justify-content_space-between</a></td>
<td></td>
<td></td>
<td>justify-content_space-between
<ul class="assert">
<li>Check if the web engine can indentify the justify-content value space-between.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s8.2.#ref-for-flex-container-30">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-container-31">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-47">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-48">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-49">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-50">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-51">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-52">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-53">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-54">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-55">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-56">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-57">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-58">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-59">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-60">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-61">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-62">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-63">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-64">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-65">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-66">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-67">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-flex-item-68">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-axis-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-end-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-end-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-end-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-end-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-end-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-start-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-start-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-start-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-start-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-main-start-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-propdef-justify-content-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-propdef-justify-content-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-propdef-justify-content-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-valdef-justify-content-center-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#ref-for-valdef-justify-content-flex-start-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#valdef-justify-content-center">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#valdef-justify-content-flex-end">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#valdef-justify-content-flex-start">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#valdef-justify-content-space-around">
<!-- 0 tests -->
</tbody>
<tbody id="s8.2.#valdef-justify-content-space-between">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.3">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#align-items-property">8.3 Cross-axis Alignment: the align-items and align-self properties</a></th></tr>
<!-- 31 tests -->
<tr id="align-items-001-8.3" class="">
<td>
<a href="align-items-001.xht">align-items-001</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A flex container with the 'align-items' property set to 'center'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: center' centers each flex item's margin box in the cross-axis of its line.</li>
</ul>
</td>
</tr>
<tr id="align-items-002-8.3" class="">
<td>
<a href="align-items-002.xht">align-items-002</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A flex container with the 'align-items' property set to 'flex-start'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: flex-start' places each flex item's margin box flush with the cross-start edge of line.</li>
</ul>
</td>
</tr>
<tr id="align-items-003-8.3" class="">
<td>
<a href="align-items-003.xht">align-items-003</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A flex container with the 'align-items' property set to 'flex-end'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: flex-end' places each flex item's margin box flush with the cross-end edge of line.</li>
</ul>
</td>
</tr>
<tr id="align-items-004-8.3" class="ahem">
<td>
<a href="align-items-004.xht">align-items-004</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>A flex container with the 'align-items' property set to 'baseline'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align.</li>
</ul>
</td>
</tr>
<tr id="align-items-005-8.3" class="">
<td>
<a href="align-items-005.xht">align-items-005</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A flex container with the 'align-items' property set to 'stretch'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: stretch' places each flex item's margin box so that its cross size is the same as the cross size of the line.</li>
</ul>
</td>
</tr>
<tr id="align-self-001-8.3" class="">
<td>
<a href="align-self-001.xht">align-self-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - flex-start
<ul class="assert">
<li>The 'align-self' property set 'flex-start' aligns the flex items to the start edge of cross axis</li>
</ul>
</td>
</tr>
<tr id="align-self-002-8.3" class="">
<td>
<a href="align-self-002.xht">align-self-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - flex-end
<ul class="assert">
<li>The 'align-self' property set 'flex-end' aligns the flex items to the end edge of cross axis</li>
</ul>
</td>
</tr>
<tr id="align-self-003-8.3" class="">
<td>
<a href="align-self-003.xht">align-self-003</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - center
<ul class="assert">
<li>The 'align-self' property set 'center' centered the flex items in the cross axis within the line</li>
</ul>
</td>
</tr>
<tr id="align-self-004-8.3" class="">
<td>
<a href="align-self-004.xht">align-self-004</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - stretch
<ul class="assert">
<li>The 'align-self' property set 'stretch' makes the cross size of the item's margin box as close to the same size as the line as possible</li>
</ul>
</td>
</tr>
<tr id="align-self-005-8.3" class="">
<td>
<a href="align-self-005.xht">align-self-005</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - stretch (height: number)
<ul class="assert">
<li>The 'align-self' property set 'stretch' will be invalid while cross size of the flex item set exact number</li>
</ul>
</td>
</tr>
<tr id="align-self-006-8.3" class="">
<td>
<a href="align-self-006.xht">align-self-006</a></td>
<td></td>
<td></td>
<td>align-self - baseline
<ul class="assert">
<li>The 'align-self' property set 'baseline' aligns the flex items to the baseline of content</li>
</ul>
</td>
</tr>
<tr id="align-self-007-8.3" class="">
<td>
<a href="align-self-007.xht">align-self-007</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - flex-start
<ul class="assert">
<li>The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'</li>
</ul>
</td>
</tr>
<tr id="align-self-008-8.3" class="">
<td>
<a href="align-self-008.xht">align-self-008</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - flex-end
<ul class="assert">
<li>The 'align-self' property set 'auto' aligns flex items to end edge of cross-axis when 'align-items' set 'flex-end'</li>
</ul>
</td>
</tr>
<tr id="align-self-009-8.3" class="">
<td>
<a href="align-self-009.xht">align-self-009</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - center
<ul class="assert">
<li>The 'align-self' property set 'auto' will center flex items the flex items in the cross axis when 'align-items' set 'center'</li>
</ul>
</td>
</tr>
<tr id="align-self-010-8.3" class="">
<td>
<a href="align-self-010.xht">align-self-010</a></td>
<td></td>
<td></td>
<td>align-self - auto and align-items - baseline
<ul class="assert">
<li>The 'align-self' property set 'auto' aligns the flex items to the baseline of content when 'align-items' set 'baseline'</li>
</ul>
</td>
</tr>
<tr id="align-self-011-8.3" class="">
<td>
<a href="align-self-011.xht">align-self-011</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - stretch
<ul class="assert">
<li>The 'align-self' property set 'auto' makes the cross size of the item's margin box as close to the same size as the line as possible when 'align-items' set 'stretch'</li>
</ul>
</td>
</tr>
<tr id="align-self-012-8.3" class="">
<td>
<a href="align-self-012.xht">align-self-012</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto (initial value)
<ul class="assert">
<li>The initial value of 'align-self' property is 'auto'</li>
</ul>
</td>
</tr>
<tr id="align-self-013-8.3" class="">
<td>
<a href="align-self-013.xht">align-self-013</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - invalid if applied to flex container
<ul class="assert">
<li>The 'align-self' property is invalid if applied to flex container</li>
</ul>
</td>
</tr>
<tr id="flexbox-align-self-horiz-001-block-8.3" class="">
<td>
<a href="flexbox-align-self-horiz-001-block.xht">flexbox-align-self-horiz-001-block</a></td>
<td><a href="reference/flexbox-align-self-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal flex container
</td>
</tr>
<tr id="flexbox-align-self-horiz-001-table-8.3" class="">
<td>
<a href="flexbox-align-self-horiz-001-table.xht">flexbox-align-self-horiz-001-table</a></td>
<td><a href="reference/flexbox-align-self-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the various 'align-self' property values on flex items that are tables
</td>
</tr>
<tr id="flexbox-align-self-horiz-002-8.3" class="">
<td>
<a href="flexbox-align-self-horiz-002.xht">flexbox-align-self-horiz-002</a></td>
<td><a href="reference/flexbox-align-self-horiz-002-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a horizontal flex container, with margin/padding/border on the items
</td>
</tr>
<tr id="flexbox-align-self-horiz-003-8.3" class="">
<td>
<a href="flexbox-align-self-horiz-003.xht">flexbox-align-self-horiz-003</a></td>
<td><a href="reference/flexbox-align-self-horiz-003-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items
</td>
</tr>
<tr id="flexbox-align-self-horiz-004-8.3" class="">
<td>
<a href="flexbox-align-self-horiz-004.xht">flexbox-align-self-horiz-004</a></td>
<td><a href="reference/flexbox-align-self-horiz-004-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items
</td>
</tr>
<tr id="flexbox-align-self-vert-001-8.3" class="">
<td>
<a href="flexbox-align-self-vert-001.xht">flexbox-align-self-vert-001</a></td>
<td><a href="reference/flexbox-align-self-vert-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container
</td>
</tr>
<tr id="flexbox-align-self-vert-002-8.3" class="">
<td>
<a href="flexbox-align-self-vert-002.xht">flexbox-align-self-vert-002</a></td>
<td><a href="reference/flexbox-align-self-vert-002-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items
</td>
</tr>
<tr id="flexbox-align-self-vert-003-8.3" class="">
<td>
<a href="flexbox-align-self-vert-003.xht">flexbox-align-self-vert-003</a></td>
<td><a href="reference/flexbox-align-self-vert-003-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items
</td>
</tr>
<tr id="flexbox-align-self-vert-004-8.3" class="">
<td>
<a href="flexbox-align-self-vert-004.xht">flexbox-align-self-vert-004</a></td>
<td><a href="reference/flexbox-align-self-vert-004-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items
</td>
</tr>
<tr id="flexbox-align-self-vert-rtl-001-8.3" class="">
<td>
<a href="flexbox-align-self-vert-rtl-001.xht">flexbox-align-self-vert-rtl-001</a></td>
<td><a href="reference/flexbox-align-self-vert-rtl-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl'
</td>
</tr>
<tr id="flexbox-align-self-vert-rtl-002-8.3" class="">
<td>
<a href="flexbox-align-self-vert-rtl-002.xht">flexbox-align-self-vert-rtl-002</a></td>
<td><a href="reference/flexbox-align-self-vert-rtl-002-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl'
</td>
</tr>
<tr id="flexbox-align-self-vert-rtl-003-8.3" class="">
<td>
<a href="flexbox-align-self-vert-rtl-003.xht">flexbox-align-self-vert-rtl-003</a></td>
<td><a href="reference/flexbox-align-self-vert-rtl-003-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items and with 'direction: rtl'
</td>
</tr>
<tr id="flexbox-align-self-vert-rtl-004-8.3" class="">
<td>
<a href="flexbox-align-self-vert-rtl-004.xht">flexbox-align-self-vert-rtl-004</a></td>
<td><a href="reference/flexbox-align-self-vert-rtl-004-ref.xht">=</a> </td>
<td></td>
<td>Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl'
</td>
</tr>
</tbody>
<tbody id="s8.3.#baseline-participation">
<!-- 8 tests -->
<tr id="flexbox-align-self-baseline-horiz-001a-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-001a.xht">flexbox-align-self-baseline-horiz-001a</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'
</td>
</tr>
<tr id="flexbox-align-self-baseline-horiz-001b-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-001b.xht">flexbox-align-self-baseline-horiz-001b</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse flex container
</td>
</tr>
<tr id="flexbox-align-self-baseline-horiz-002-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-002.xht">flexbox-align-self-baseline-horiz-002</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-002-ref.xht">=</a> </td>
<td></td>
<td>Baseline alignment of flex items in fixed-size single-line flex container
</td>
</tr>
<tr id="flexbox-align-self-baseline-horiz-003-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-003.xht">flexbox-align-self-baseline-horiz-003</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-003-ref.xht">=</a> </td>
<td></td>
<td>Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed
</td>
</tr>
<tr id="flexbox-align-self-baseline-horiz-004-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-004.xht">flexbox-align-self-baseline-horiz-004</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-004-ref.xht">=</a> </td>
<td></td>
<td>Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container
</td>
</tr>
<tr id="flexbox-align-self-baseline-horiz-005-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-005.xht">flexbox-align-self-baseline-horiz-005</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-005-ref.xht">=</a> </td>
<td></td>
<td>Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container
</td>
</tr>
<tr id="flexbox-align-self-baseline-horiz-006-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-006.xht">flexbox-align-self-baseline-horiz-006</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-006-ref.xht">=</a> </td>
<td></td>
<td>Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.
</td>
</tr>
<tr id="flexbox-align-self-baseline-horiz-007-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-007.xht">flexbox-align-self-baseline-horiz-007</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-007-ref.xht">=</a> </td>
<td></td>
<td>Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.
</td>
</tr>
</tbody>
<tbody id="s8.3.#propdef-align-items">
<!-- 29 tests -->
<tr id="align-items-001-8.3.#propdef-align-items" class="">
<td>
<a href="align-items-001.xht">align-items-001</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A flex container with the 'align-items' property set to 'center'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: center' centers each flex item's margin box in the cross-axis of its line.</li>
</ul>
</td>
</tr>
<tr id="align-items-002-8.3.#propdef-align-items" class="">
<td>
<a href="align-items-002.xht">align-items-002</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A flex container with the 'align-items' property set to 'flex-start'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: flex-start' places each flex item's margin box flush with the cross-start edge of line.</li>
</ul>
</td>
</tr>
<tr id="align-items-003-8.3.#propdef-align-items" class="">
<td>
<a href="align-items-003.xht">align-items-003</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A flex container with the 'align-items' property set to 'flex-end'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: flex-end' places each flex item's margin box flush with the cross-end edge of line.</li>
</ul>
</td>
</tr>
<tr id="align-items-004-8.3.#propdef-align-items" class="ahem">
<td>
<a href="align-items-004.xht">align-items-004</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>A flex container with the 'align-items' property set to 'baseline'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: baseline' places each flex item's margin box so that their baselines align.</li>
</ul>
</td>
</tr>
<tr id="align-items-005-8.3.#propdef-align-items" class="">
<td>
<a href="align-items-005.xht">align-items-005</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A flex container with the 'align-items' property set to 'stretch'
<ul class="assert">
<li>This test checks that the flex container with 'align-items: stretch' places each flex item's margin box so that its cross size is the same as the cross size of the line.</li>
</ul>
</td>
</tr>
<tr id="align-self-007-8.3.#propdef-align-items" class="">
<td>
<a href="align-self-007.xht">align-self-007</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - flex-start
<ul class="assert">
<li>The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'</li>
</ul>
</td>
</tr>
<tr id="css-flexbox-height-animation-stretch-8.3.#propdef-align-items" class="">
<td>
<a href="css-flexbox-height-animation-stretch.xht">css-flexbox-height-animation-stretch</a></td>
<td><a href="reference/css-flexbox-height-animation-stretch-ref.xht">=</a> </td>
<td></td>
<td>Items stretch correctly while content is animating
<ul class="assert">
<li>Items should stretch vertically in all time</li>
</ul>
</td>
</tr>
<tr id="flexbox_align-items-baseline-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-baseline.xht">flexbox_align-items-baseline</a></td>
<td><a href="reference/flexbox_align-items-baseline-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: baseline
</td>
</tr>
<tr id="flexbox_align-items-center-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-center.xht">flexbox_align-items-center</a></td>
<td><a href="reference/flexbox_align-items-center-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: center
</td>
</tr>
<tr id="flexbox_align-items-center-2-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-center-2.xht">flexbox_align-items-center-2</a></td>
<td><a href="reference/flexbox_align-items-center-2-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: center
</td>
</tr>
<tr id="flexbox_align-items-flexend-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-flexend.xht">flexbox_align-items-flexend</a></td>
<td><a href="reference/flexbox_align-items-flexend-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: flex-end
</td>
</tr>
<tr id="flexbox_align-items-flexend-2-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-flexend-2.xht">flexbox_align-items-flexend-2</a></td>
<td><a href="reference/flexbox_align-items-flexend-2-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: flex-end
</td>
</tr>
<tr id="flexbox_align-items-flexstart-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-flexstart.xht">flexbox_align-items-flexstart</a></td>
<td><a href="reference/flexbox_align-items-flexstart-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: flex-start
</td>
</tr>
<tr id="flexbox_align-items-flexstart-2-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-flexstart-2.xht">flexbox_align-items-flexstart-2</a></td>
<td><a href="reference/flexbox_align-items-flexstart-2-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: flex-start
</td>
</tr>
<tr id="flexbox_align-items-stretch-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-stretch.xht">flexbox_align-items-stretch</a></td>
<td><a href="reference/flexbox_align-items-stretch-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: stretch
</td>
</tr>
<tr id="flexbox_align-items-stretch-2-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-stretch-2.xht">flexbox_align-items-stretch-2</a></td>
<td><a href="reference/flexbox_align-items-stretch-2-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-items: stretch
</td>
</tr>
<tr id="flexbox_align-items-stretch-writing-modes-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-items-stretch-writing-modes.xht">flexbox_align-items-stretch-writing-modes</a></td>
<td><a href="reference/flexbox_align-items-stretch-writing-modes-ref.xht">=</a> </td>
<td></td>
<td>Flexbox align-items: stretch with writing-mode vertical-lr and vertical-rl
<ul class="assert">
<li>vertical-writing-mode flex items should stretch</li>
</ul>
</td>
</tr>
<tr id="flexbox_align-self-auto-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-self-auto.xht">flexbox_align-self-auto</a></td>
<td><a href="reference/flexbox_align-self-auto-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-self: auto
</td>
</tr>
<tr id="flexbox_align-self-baseline-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-self-baseline.xht">flexbox_align-self-baseline</a></td>
<td><a href="reference/flexbox_align-self-baseline-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-self: baseline
</td>
</tr>
<tr id="flexbox_align-self-center-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-self-center.xht">flexbox_align-self-center</a></td>
<td><a href="reference/flexbox_align-self-center-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-self: center
</td>
</tr>
<tr id="flexbox_align-self-flexend-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-self-flexend.xht">flexbox_align-self-flexend</a></td>
<td><a href="reference/flexbox_align-self-flexend-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-self: flex-end
</td>
</tr>
<tr id="flexbox_align-self-flexstart-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-self-flexstart.xht">flexbox_align-self-flexstart</a></td>
<td><a href="reference/flexbox_align-self-flexstart-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-self: flex-start
</td>
</tr>
<tr id="flexbox_align-self-stretch-8.3.#propdef-align-items" class="">
<td>
<a href="flexbox_align-self-stretch.xht">flexbox_align-self-stretch</a></td>
<td><a href="reference/flexbox_align-self-stretch-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-self: stretch
</td>
</tr>
<tr id="flexbox_computedstyle_align-items-baseline-8.3.#propdef-align-items" class="dom script">
<td>
<a href="flexbox_computedstyle_align-items-baseline.xht">flexbox_computedstyle_align-items-baseline</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 | align-items: baseline
</td>
</tr>
<tr id="flexbox_computedstyle_align-items-center-8.3.#propdef-align-items" class="dom script">
<td>
<a href="flexbox_computedstyle_align-items-center.xht">flexbox_computedstyle_align-items-center</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 | align-items: center
</td>
</tr>
<tr id="flexbox_computedstyle_align-items-flex-end-8.3.#propdef-align-items" class="dom script">
<td>
<a href="flexbox_computedstyle_align-items-flex-end.xht">flexbox_computedstyle_align-items-flex-end</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 | align-items: flex-end
</td>
</tr>
<tr id="flexbox_computedstyle_align-items-flex-start-8.3.#propdef-align-items" class="dom script">
<td>
<a href="flexbox_computedstyle_align-items-flex-start.xht">flexbox_computedstyle_align-items-flex-start</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 | align-items: flex-start
</td>
</tr>
<tr id="flexbox_computedstyle_align-items-invalid-8.3.#propdef-align-items" class="dom script">
<td>
<a href="flexbox_computedstyle_align-items-invalid.xht">flexbox_computedstyle_align-items-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 | align-items: invalid
</td>
</tr>
<tr id="flexbox_computedstyle_align-items-stretch-8.3.#propdef-align-items" class="dom script">
<td>
<a href="flexbox_computedstyle_align-items-stretch.xht">flexbox_computedstyle_align-items-stretch</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 | align-items: stretch
</td>
</tr>
</tbody>
<tbody id="s8.3.#propdef-align-self">
<!-- 19 tests -->
<tr id="align-self-001-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-001.xht">align-self-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - flex-start
<ul class="assert">
<li>The 'align-self' property set 'flex-start' aligns the flex items to the start edge of cross axis</li>
</ul>
</td>
</tr>
<tr id="align-self-002-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-002.xht">align-self-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - flex-end
<ul class="assert">
<li>The 'align-self' property set 'flex-end' aligns the flex items to the end edge of cross axis</li>
</ul>
</td>
</tr>
<tr id="align-self-003-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-003.xht">align-self-003</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - center
<ul class="assert">
<li>The 'align-self' property set 'center' centered the flex items in the cross axis within the line</li>
</ul>
</td>
</tr>
<tr id="align-self-004-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-004.xht">align-self-004</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - stretch
<ul class="assert">
<li>The 'align-self' property set 'stretch' makes the cross size of the item's margin box as close to the same size as the line as possible</li>
</ul>
</td>
</tr>
<tr id="align-self-005-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-005.xht">align-self-005</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - stretch (height: number)
<ul class="assert">
<li>The 'align-self' property set 'stretch' will be invalid while cross size of the flex item set exact number</li>
</ul>
</td>
</tr>
<tr id="align-self-006-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-006.xht">align-self-006</a></td>
<td></td>
<td></td>
<td>align-self - baseline
<ul class="assert">
<li>The 'align-self' property set 'baseline' aligns the flex items to the baseline of content</li>
</ul>
</td>
</tr>
<tr id="align-self-007-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-007.xht">align-self-007</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - flex-start
<ul class="assert">
<li>The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'</li>
</ul>
</td>
</tr>
<tr id="align-self-008-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-008.xht">align-self-008</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - flex-end
<ul class="assert">
<li>The 'align-self' property set 'auto' aligns flex items to end edge of cross-axis when 'align-items' set 'flex-end'</li>
</ul>
</td>
</tr>
<tr id="align-self-009-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-009.xht">align-self-009</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - center
<ul class="assert">
<li>The 'align-self' property set 'auto' will center flex items the flex items in the cross axis when 'align-items' set 'center'</li>
</ul>
</td>
</tr>
<tr id="align-self-010-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-010.xht">align-self-010</a></td>
<td></td>
<td></td>
<td>align-self - auto and align-items - baseline
<ul class="assert">
<li>The 'align-self' property set 'auto' aligns the flex items to the baseline of content when 'align-items' set 'baseline'</li>
</ul>
</td>
</tr>
<tr id="align-self-011-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-011.xht">align-self-011</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto and align-items - stretch
<ul class="assert">
<li>The 'align-self' property set 'auto' makes the cross size of the item's margin box as close to the same size as the line as possible when 'align-items' set 'stretch'</li>
</ul>
</td>
</tr>
<tr id="align-self-012-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-012.xht">align-self-012</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - auto (initial value)
<ul class="assert">
<li>The initial value of 'align-self' property is 'auto'</li>
</ul>
</td>
</tr>
<tr id="align-self-013-8.3.#propdef-align-self" class="">
<td>
<a href="align-self-013.xht">align-self-013</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>align-self - invalid if applied to flex container
<ul class="assert">
<li>The 'align-self' property is invalid if applied to flex container</li>
</ul>
</td>
</tr>
<tr id="flexbox_computedstyle_align-self-baseline-8.3.#propdef-align-self" class="dom script">
<td>
<a href="flexbox_computedstyle_align-self-baseline.xht">flexbox_computedstyle_align-self-baseline</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 | align-self: baseline
</td>
</tr>
<tr id="flexbox_computedstyle_align-self-center-8.3.#propdef-align-self" class="dom script">
<td>
<a href="flexbox_computedstyle_align-self-center.xht">flexbox_computedstyle_align-self-center</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 | align-self: center
</td>
</tr>
<tr id="flexbox_computedstyle_align-self-flex-end-8.3.#propdef-align-self" class="dom script">
<td>
<a href="flexbox_computedstyle_align-self-flex-end.xht">flexbox_computedstyle_align-self-flex-end</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 | align-self: flex-end
</td>
</tr>
<tr id="flexbox_computedstyle_align-self-flex-start-8.3.#propdef-align-self" class="dom script">
<td>
<a href="flexbox_computedstyle_align-self-flex-start.xht">flexbox_computedstyle_align-self-flex-start</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 | align-self: flex-start
</td>
</tr>
<tr id="flexbox_computedstyle_align-self-invalid-8.3.#propdef-align-self" class="dom script">
<td>
<a href="flexbox_computedstyle_align-self-invalid.xht">flexbox_computedstyle_align-self-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 | align-self: invalid
</td>
</tr>
<tr id="flexbox_computedstyle_align-self-stretch-8.3.#propdef-align-self" class="dom script">
<td>
<a href="flexbox_computedstyle_align-self-stretch.xht">flexbox_computedstyle_align-self-stretch</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 | align-self: stretch
</td>
</tr>
</tbody>
<tbody id="s8.3.#ref-for-cross-axis-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-axis-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-axis-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-axis-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-end-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-end-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-size-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-size-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-size-property-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-start-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-start-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-start-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-start-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-start-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-cross-start-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-container-32">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-69">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-70">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-71">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-72">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-73">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-74">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-75">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-76">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-77">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-78">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-79">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-80">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-81">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-82">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-83">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-flex-item-84">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-items-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-items-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-items-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-items-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-items-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-items-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-self-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-self-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-self-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-self-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-align-self-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-propdef-justify-content-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-valdef-align-items-flex-start-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-valdef-align-items-stretch-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-valdef-align-self-auto-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#ref-for-valdef-align-self-auto-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#stretched">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-baseline">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-center">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-flex-end">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-flex-start">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-stretch">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-self-auto">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.4">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#align-content-property">8.4 Packing Flex Lines: the align-content property</a></th></tr>
<!-- 35 tests -->
<tr id="align-content-001-8.4" class="">
<td>
<a href="align-content-001.xht">align-content-001</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A multi-line flex container with the 'align-content' property set to 'center'
<ul class="assert">
<li>This test checks that a multi-line flex container with 'align-content: center' centers lines in the flex container.</li>
</ul>
</td>
</tr>
<tr id="align-content-002-8.4" class="">
<td>
<a href="align-content-002.xht">align-content-002</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A multi-line flex container with the 'align-content' property set to 'flex-start'
<ul class="assert">
<li>This test checks that a multi-line flex container with 'align-content: flex-start' packs lines toward the start of the flex container.</li>
</ul>
</td>
</tr>
<tr id="align-content-003-8.4" class="">
<td>
<a href="align-content-003.xht">align-content-003</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A multi-line flex container with the 'align-content' property set to 'flex-end'
<ul class="assert">
<li>This test checks that a multi-line flex container with 'align-content: flex-end' packs lines toward the end of the flex container.</li>
</ul>
</td>
</tr>
<tr id="align-content-004-8.4" class="">
<td>
<a href="align-content-004.xht">align-content-004</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A multi-line flex container with the 'align-content' property set to 'space-between'
<ul class="assert">
<li>This test checks that a multi-line flex container with 'align-content: space-between' distributes lines evenly in the flex container.</li>
</ul>
</td>
</tr>
<tr id="align-content-005-8.4" class="">
<td>
<a href="align-content-005.xht">align-content-005</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A multi-line flex container with the 'align-content' property set to 'space-around'
<ul class="assert">
<li>This test checks that a multi-line flex container with 'align-content: space-around' distributes lines evenly in the flex container, with half-size spaces on either end.</li>
</ul>
</td>
</tr>
<tr id="align-content-006-8.4" class="">
<td>
<a href="align-content-006.xht">align-content-006</a></td>
<td><a href="reference/align-content-001-ref.xht">=</a> </td>
<td></td>
<td>A multi-line flex container with the 'align-content' property set to 'stretch'
<ul class="assert">
<li>This test checks that a multi-line flex container with 'align-content: stretch' stretches lines to take up the remaining space.</li>
</ul>
</td>
</tr>
<tr id="align-content_center-8.4" class="">
<td>
<a href="align-content_center.xht">align-content_center</a></td>
<td></td>
<td></td>
<td>align-content_center
<ul class="assert">
<li>Check if the web engine can identify the align-content value center.</li>
</ul>
</td>
</tr>
<tr id="align-content_flex-end-8.4" class="">
<td>
<a href="align-content_flex-end.xht">align-content_flex-end</a></td>
<td></td>
<td></td>
<td>align-content_flex-end
<ul class="assert">
<li>Check if the web engine can identify the align-content value flex-end.</li>
</ul>
</td>
</tr>
<tr id="align-content_flex-start-8.4" class="">
<td>
<a href="align-content_flex-start.xht">align-content_flex-start</a></td>
<td></td>
<td></td>
<td>align-content_flex-start
<ul class="assert">
<li>Check if the web engine can identify the align-content value flex-start.</li>
</ul>
</td>
</tr>
<tr id="align-content_space-around-8.4" class="">
<td>
<a href="align-content_space-around.xht">align-content_space-around</a></td>
<td></td>
<td></td>
<td>align-content_space-around
<ul class="assert">
<li>Check if the web engine can identify align-content value space-around.</li>
</ul>
</td>
</tr>
<tr id="align-content_space-between-8.4" class="">
<td>
<a href="align-content_space-between.xht">align-content_space-between</a></td>
<td></td>
<td></td>
<td>align-content_space-between
<ul class="assert">
<li>Check if the display can recognize inline-flex value.</li>
</ul>
</td>
</tr>
<tr id="align-content_stretch-8.4" class="">
<td>
<a href="align-content_stretch.xht">align-content_stretch</a></td>
<td></td>
<td></td>
<td>align-content_stretch
<ul class="assert">
<li>Check if the web engine can identify the align-content value stretch.</li>
</ul>
</td>
</tr>
<tr id="flexbox-align-content-horiz-001a-8.4" class="">
<td>
<a href="flexbox-align-content-horiz-001a.xht">flexbox-align-content-horiz-001a</a></td>
<td><a href="reference/flexbox-align-content-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing 'align-content' in a horizontal flex container
</td>
</tr>
<tr id="flexbox-align-content-horiz-001b-8.4" class="">
<td>
<a href="flexbox-align-content-horiz-001b.xht">flexbox-align-content-horiz-001b</a></td>
<td><a href="reference/flexbox-align-content-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing 'align-content' in a horizontal flex container
</td>
</tr>
<tr id="flexbox-align-content-vert-001a-8.4" class="">
<td>
<a href="flexbox-align-content-vert-001a.xht">flexbox-align-content-vert-001a</a></td>
<td><a href="reference/flexbox-align-content-vert-001-ref.xht">=</a> </td>
<td></td>
<td>Testing 'align-content' in a vertical flex container
</td>
</tr>
<tr id="flexbox-align-content-vert-001b-8.4" class="">
<td>
<a href="flexbox-align-content-vert-001b.xht">flexbox-align-content-vert-001b</a></td>
<td><a href="reference/flexbox-align-content-vert-001-ref.xht">=</a> </td>
<td></td>
<td>Testing 'align-content' in a vertical flex container
</td>
</tr>
<tr id="flexbox-overflow-horiz-005-8.4" class="">
<td>
<a href="flexbox-overflow-horiz-005.xht">flexbox-overflow-horiz-005</a></td>
<td><a href="reference/flexbox-overflow-horiz-005-ref.xht">=</a> </td>
<td></td>
<td>Testing 'overflow' property on a horizontal flex container, with 'align-content: space-around'
</td>
</tr>
<tr id="flexbox-overflow-vert-005-8.4" class="">
<td>
<a href="flexbox-overflow-vert-005.xht">flexbox-overflow-vert-005</a></td>
<td><a href="reference/flexbox-overflow-vert-005-ref.xht">=</a> </td>
<td></td>
<td>Testing 'overflow' property on a vertical flex container, with 'align-content: space-around'
</td>
</tr>
<tr id="flexbox_align-content-center-8.4" class="">
<td>
<a href="flexbox_align-content-center.xht">flexbox_align-content-center</a></td>
<td><a href="reference/flexbox_align-content-center-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-content: center
</td>
</tr>
<tr id="flexbox_align-content-flexend-8.4" class="">
<td>
<a href="flexbox_align-content-flexend.xht">flexbox_align-content-flexend</a></td>
<td><a href="reference/flexbox_align-content-flexend-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-content: flex-end
</td>
</tr>
<tr id="flexbox_align-content-flexstart-8.4" class="">
<td>
<a href="flexbox_align-content-flexstart.xht">flexbox_align-content-flexstart</a></td>
<td><a href="reference/flexbox_align-content-flexstart-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-content: flex-start
</td>
</tr>
<tr id="flexbox_align-content-spacearound-8.4" class="">
<td>
<a href="flexbox_align-content-spacearound.xht">flexbox_align-content-spacearound</a></td>
<td><a href="reference/flexbox_align-content-spacearound-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-content: space-around
</td>
</tr>
<tr id="flexbox_align-content-spacebetween-8.4" class="">
<td>
<a href="flexbox_align-content-spacebetween.xht">flexbox_align-content-spacebetween</a></td>
<td><a href="reference/flexbox_align-content-spacebetween-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-content: space-between
</td>
</tr>
<tr id="flexbox_align-content-stretch-8.4" class="">
<td>
<a href="flexbox_align-content-stretch.xht">flexbox_align-content-stretch</a></td>
<td><a href="reference/flexbox_align-content-stretch-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-content: stretch
</td>
</tr>
<tr id="flexbox_align-content-stretch-2-8.4" class="">
<td>
<a href="flexbox_align-content-stretch-2.xht">flexbox_align-content-stretch-2</a></td>
<td><a href="reference/flexbox_align-content-stretch-2-ref.xht">=</a> </td>
<td></td>
<td>flexbox | align-content: stretch
</td>
</tr>
<tr id="flexbox_computedstyle_align-content-center-8.4" class="dom script">
<td>
<a href="flexbox_computedstyle_align-content-center.xht">flexbox_computedstyle_align-content-center</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 | align-content: center
</td>
</tr>
<tr id="flexbox_computedstyle_align-content-flex-end-8.4" class="dom script">
<td>
<a href="flexbox_computedstyle_align-content-flex-end.xht">flexbox_computedstyle_align-content-flex-end</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 | align-content: flex-end
</td>
</tr>
<tr id="flexbox_computedstyle_align-content-flex-start-8.4" class="dom script">
<td>
<a href="flexbox_computedstyle_align-content-flex-start.xht">flexbox_computedstyle_align-content-flex-start</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 | align-content: flex-start
</td>
</tr>
<tr id="flexbox_computedstyle_align-content-space-around-8.4" class="dom script">
<td>
<a href="flexbox_computedstyle_align-content-space-around.xht">flexbox_computedstyle_align-content-space-around</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 | align-content: space-around
</td>
</tr>
<tr id="flexbox_computedstyle_align-content-space-between-8.4" class="dom script">
<td>
<a href="flexbox_computedstyle_align-content-space-between.xht">flexbox_computedstyle_align-content-space-between</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 | align-content: space-between
</td>
</tr>
<tr id="ttwf-reftest-flex-align-content-center-8.4" class="">
<td>
<a href="ttwf-reftest-flex-align-content-center.xht">ttwf-reftest-flex-align-content-center</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-center-ref.xht">=</a> </td>
<td></td>
<td>align-content property - center
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
</td>
</tr>
<tr id="ttwf-reftest-flex-align-content-end-8.4" class="">
<td>
<a href="ttwf-reftest-flex-align-content-end.xht">ttwf-reftest-flex-align-content-end</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td></td>
<td>align-content property - flex-end
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
</td>
</tr>
<tr id="ttwf-reftest-flex-align-content-space-around-8.4" class="">
<td>
<a href="ttwf-reftest-flex-align-content-space-around.xht">ttwf-reftest-flex-align-content-space-around</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.xht">=</a> </td>
<td></td>
<td>align-content property - space-around
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
</td>
</tr>
<tr id="ttwf-reftest-flex-align-content-space-between-8.4" class="">
<td>
<a href="ttwf-reftest-flex-align-content-space-between.xht">ttwf-reftest-flex-align-content-space-between</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.xht">=</a> </td>
<td></td>
<td>align-content property - space-between
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
</td>
</tr>
<tr id="ttwf-reftest-flex-align-content-start-8.4" class="">
<td>
<a href="ttwf-reftest-flex-align-content-start.xht">ttwf-reftest-flex-align-content-start</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-start-ref.xht">=</a> </td>
<td></td>
<td>align-content property - flex-start
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s8.4.#propdef-align-content">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-axis-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-axis-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-end-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-end-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-end-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-end-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-end-9">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-start-10">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-start-11">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-start-12">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-start-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-cross-start-14">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-flex-container-33">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-flex-container-34">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-flex-container-35">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-flex-container-36">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-flex-line-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-main-axis-13">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-multi-line-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-multi-line-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-multi-line-8">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-propdef-align-content-4">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-propdef-align-content-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-propdef-align-content-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-propdef-justify-content-7">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-single-line-5">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-single-line-6">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-valdef-align-content-center-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-valdef-align-content-flex-start-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#ref-for-valdef-align-content-flex-start-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#valdef-align-content-center">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#valdef-align-content-flex-end">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#valdef-align-content-flex-start">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#valdef-align-content-space-around">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#valdef-align-content-space-between">
<!-- 0 tests -->
</tbody>
<tbody id="s8.4.#valdef-align-content-stretch">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8.5">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#flex-baselines">8.5 Flex Container Baselines</a></th></tr>
<!-- 14 tests -->
<tr id="flexbox-baseline-align-self-baseline-horiz-001-8.5" class="">
<td>
<a href="flexbox-baseline-align-self-baseline-horiz-001.xht">flexbox-baseline-align-self-baseline-horiz-001</a></td>
<td><a href="reference/flexbox-baseline-align-self-baseline-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a horizontal flex container with baseline-aligned flex items
</td>
</tr>
<tr id="flexbox-baseline-align-self-baseline-vert-001-8.5" class="">
<td>
<a href="flexbox-baseline-align-self-baseline-vert-001.xht">flexbox-baseline-align-self-baseline-vert-001</a></td>
<td><a href="reference/flexbox-baseline-align-self-baseline-vert-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a vertical flex container with baseline-aligned flex items
</td>
</tr>
<tr id="flexbox-baseline-empty-001a-8.5" class="">
<td>
<a href="flexbox-baseline-empty-001a.xht">flexbox-baseline-empty-001a</a></td>
<td><a href="reference/flexbox-baseline-empty-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of an empty horizontal flex container
</td>
</tr>
<tr id="flexbox-baseline-empty-001b-8.5" class="">
<td>
<a href="flexbox-baseline-empty-001b.xht">flexbox-baseline-empty-001b</a></td>
<td><a href="reference/flexbox-baseline-empty-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of an empty vertical flex container
</td>
</tr>
<tr id="flexbox-baseline-multi-item-horiz-001-8.5" class="">
<td>
<a href="flexbox-baseline-multi-item-horiz-001.xht">flexbox-baseline-multi-item-horiz-001</a></td>
<td><a href="reference/flexbox-baseline-multi-item-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned
</td>
</tr>
<tr id="flexbox-baseline-multi-item-vert-001-8.5" class="">
<td>
<a href="flexbox-baseline-multi-item-vert-001.xht">flexbox-baseline-multi-item-vert-001</a></td>
<td><a href="reference/flexbox-baseline-multi-item-vert-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a vertical flex container whose flex items are not baseline-aligned
</td>
</tr>
<tr id="flexbox-baseline-multi-line-horiz-001-8.5" class="">
<td>
<a href="flexbox-baseline-multi-line-horiz-001.xht">flexbox-baseline-multi-line-horiz-001</a></td>
<td><a href="reference/flexbox-baseline-multi-line-horiz-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a horizontal flex container with multiple flex lines
</td>
</tr>
<tr id="flexbox-baseline-multi-line-horiz-002-8.5" class="">
<td>
<a href="flexbox-baseline-multi-line-horiz-002.xht">flexbox-baseline-multi-line-horiz-002</a></td>
<td><a href="reference/flexbox-baseline-multi-line-horiz-002-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a horizontal flex container with multiple flex lines
</td>
</tr>
<tr id="flexbox-baseline-multi-line-horiz-003-8.5" class="">
<td>
<a href="flexbox-baseline-multi-line-horiz-003.xht">flexbox-baseline-multi-line-horiz-003</a></td>
<td><a href="reference/flexbox-baseline-multi-line-horiz-003-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line
</td>
</tr>
<tr id="flexbox-baseline-multi-line-horiz-004-8.5" class="">
<td>
<a href="flexbox-baseline-multi-line-horiz-004.xht">flexbox-baseline-multi-line-horiz-004</a></td>
<td><a href="reference/flexbox-baseline-multi-line-horiz-004-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a horizontal multi-line (wrap-reverse) flex container with baseline-aligned items on first line
</td>
</tr>
<tr id="flexbox-baseline-multi-line-vert-001-8.5" class="">
<td>
<a href="flexbox-baseline-multi-line-vert-001.xht">flexbox-baseline-multi-line-vert-001</a></td>
<td><a href="reference/flexbox-baseline-multi-line-vert-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a vertical flex container with multiple flex lines
</td>
</tr>
<tr id="flexbox-baseline-multi-line-vert-002-8.5" class="">
<td>
<a href="flexbox-baseline-multi-line-vert-002.xht">flexbox-baseline-multi-line-vert-002</a></td>
<td><a href="reference/flexbox-baseline-multi-line-vert-002-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a vertical flex container with multiple flex lines
</td>
</tr>
<tr id="flexbox-baseline-single-item-001a-8.5" class="">
<td>
<a href="flexbox-baseline-single-item-001a.xht">flexbox-baseline-single-item-001a</a></td>
<td><a href="reference/flexbox-baseline-single-item-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a horizontal flex container with one flex item
</td>
</tr>
<tr id="flexbox-baseline-single-item-001b-8.5" class="">
<td>
<a href="flexbox-baseline-single-item-001b.xht">flexbox-baseline-single-item-001b</a></td>
<td><a href="reference/flexbox-baseline-single-item-001-ref.xht">=</a> </td>
<td></td>
<td>Testing the baseline of a vertical flex container with one flex item
</td>
</tr>
</tbody>
<tbody id="s8.5.#cross-axis-baseline">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#main-axis-baseline">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-baseline-participation-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-baseline-participation-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-cross-axis-14">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-cross-axis-baseline-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-cross-axis-baseline-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-container-37">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-container-38">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-container-39">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-item-85">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-item-86">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-item-87">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-item-88">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-item-89">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-item-90">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-item-91">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-flex-line-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-main-axis-14">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-main-axis-baseline-1">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-main-axis-baseline-2">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-main-axis-baseline-3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#ref-for-propdef-order-20">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>
Reference in a new issue View git blame Copy permalink