mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
1794 lines
No EOL
85 KiB
HTML
1794 lines
No EOL
85 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<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 (161 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column">
|
|
<col id="refs-column">
|
|
<col id="flags-column">
|
|
<col id="info-column">
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s8">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s8">+</a>
|
|
<a href="http://www.w3.org/TR/css-flexbox-1/#alignment">8 Alignment</a></th></tr>
|
|
<!-- 1 tests -->
|
|
<tr id="flex-align-items-center-8" class="primary">
|
|
<td><strong>
|
|
<a href="flex-align-items-center.htm">flex-align-items-center</a></strong></td>
|
|
<td><a href="reference/flex-align-items-center-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Flex-basis Test
|
|
<ul class="assert">
|
|
<li>flex items center</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s8.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s8.1">+</a>
|
|
<a href="http://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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-horiz-005.htm">flexbox-align-self-horiz-005</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-horiz-005-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-margin-auto-horiz-001.htm">flexbox-margin-auto-horiz-001</a></strong></td>
|
|
<td><a href="reference/flexbox-margin-auto-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-margin-auto-horiz-002.htm">flexbox-margin-auto-horiz-002</a></strong></td>
|
|
<td><a href="reference/flexbox-margin-auto-horiz-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_margin-auto.htm">flexbox_margin-auto</a></strong></td>
|
|
<td><a href="reference/flexbox_margin-auto-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | margin: auto
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_margin-auto-overflow-8.1" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_margin-auto-overflow.htm">flexbox_margin-auto-overflow</a></strong></td>
|
|
<td><a href="reference/flexbox_margin-auto-overflow-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | margin: auto in overflow
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_margin-auto-overflow-2-8.1" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_margin-auto-overflow-2.htm">flexbox_margin-auto-overflow-2</a></strong></td>
|
|
<td><a href="reference/flexbox_margin-auto-overflow-2-ref.htm">=</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-c2f4f7f3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s8.1.#login">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s8.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s8.2">+</a>
|
|
<a href="http://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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-horiz-001a.htm">flexbox-justify-content-horiz-001a</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-horiz-001b.htm">flexbox-justify-content-horiz-001b</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-horiz-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'justify-content' in a horizontal flex container with "min-width"
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-justify-content-horiz-002-8.2" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-horiz-002.htm">flexbox-justify-content-horiz-002</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-horiz-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-horiz-003.htm">flexbox-justify-content-horiz-003</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-horiz-003-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-horiz-004.htm">flexbox-justify-content-horiz-004</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-horiz-004-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-horiz-005.htm">flexbox-justify-content-horiz-005</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-horiz-005-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-vert-001a.htm">flexbox-justify-content-vert-001a</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-vert-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-vert-001b.htm">flexbox-justify-content-vert-001b</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-vert-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'justify-content' in a vertical flex container with "min-height"
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-justify-content-vert-002-8.2" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-vert-002.htm">flexbox-justify-content-vert-002</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-vert-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-vert-003.htm">flexbox-justify-content-vert-003</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-vert-003-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-vert-004.htm">flexbox-justify-content-vert-004</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-vert-004-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-justify-content-vert-005.htm">flexbox-justify-content-vert-005</a></strong></td>
|
|
<td><a href="reference/flexbox-justify-content-vert-005-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="css-box-justify-content.htm">css-box-justify-content</a></strong></td>
|
|
<td><a href="reference/css-box-justify-content-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox |css-box-justufy-content
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_justify-content-center-8.2.#propdef-justify-content" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_justify-content-center.htm">flexbox_computedstyle_justify-content-center</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_justify-content-flex-end.htm">flexbox_computedstyle_justify-content-flex-end</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_justify-content-flex-start.htm">flexbox_computedstyle_justify-content-flex-start</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_justify-content-space-around.htm">flexbox_computedstyle_justify-content-space-around</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_justify-content-space-between.htm">flexbox_computedstyle_justify-content-space-between</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | justify-content: space-between
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_justifycontent-center-8.2.#propdef-justify-content" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-center.htm">flexbox_justifycontent-center</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-center-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | justify-content: center
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_justifycontent-center-overflow-8.2.#propdef-justify-content" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-center-overflow.htm">flexbox_justifycontent-center-overflow</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-center-overflow-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | justify-content: center / overflow
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_justifycontent-flex-end-8.2.#propdef-justify-content" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-flex-end.htm">flexbox_justifycontent-flex-end</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-flex-end-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | justify-content: flex-end
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_justifycontent-flex-start-8.2.#propdef-justify-content" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-flex-start.htm">flexbox_justifycontent-flex-start</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-flex-start-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | justify-content: flex-start
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_justifycontent-spacearound-8.2.#propdef-justify-content" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-spacearound.htm">flexbox_justifycontent-spacearound</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-spacearound-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | justify-content: space-around
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_justifycontent-spacearound-negative-8.2.#propdef-justify-content" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-spacearound-negative.htm">flexbox_justifycontent-spacearound-negative</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-spacearound-negative-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-spacearound-only.htm">flexbox_justifycontent-spacearound-only</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-spacearound-only-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-spacebetween.htm">flexbox_justifycontent-spacebetween</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-spacebetween-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | justify-content: space-between
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_justifycontent-spacebetween-negative-8.2.#propdef-justify-content" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-spacebetween-negative.htm">flexbox_justifycontent-spacebetween-negative</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-spacebetween-negative-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_justifycontent-spacebetween-only.htm">flexbox_justifycontent-spacebetween-only</a></strong></td>
|
|
<td><a href="reference/flexbox_justifycontent-spacebetween-only-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | justify-content: space-between | single item
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_object-8.2.#propdef-justify-content" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_object.htm">flexbox_object</a></strong></td>
|
|
<td><a href="reference/flexbox_object-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_width-overflow.htm">flexbox_width-overflow</a></strong></td>
|
|
<td><a href="reference/flexbox_empty-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | overflow
|
|
</td>
|
|
</tr>
|
|
<tr id="justify-content-001-8.2.#propdef-justify-content" class="primary image">
|
|
<td><strong>
|
|
<a href="justify-content-001.htm">justify-content-001</a></strong></td>
|
|
<td><a href="reference/justify-content-001-ref.htm">=</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="primary image">
|
|
<td><strong>
|
|
<a href="justify-content-002.htm">justify-content-002</a></strong></td>
|
|
<td><a href="reference/justify-content-001-ref.htm">=</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="primary image">
|
|
<td><strong>
|
|
<a href="justify-content-003.htm">justify-content-003</a></strong></td>
|
|
<td><a href="reference/justify-content-001-ref.htm">=</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="primary image">
|
|
<td><strong>
|
|
<a href="justify-content-004.htm">justify-content-004</a></strong></td>
|
|
<td><a href="reference/justify-content-001-ref.htm">=</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="primary image">
|
|
<td><strong>
|
|
<a href="justify-content-005.htm">justify-content-005</a></strong></td>
|
|
<td><a href="reference/justify-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="justify-content_center.htm">justify-content_center</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="justify-content_flex-end.htm">justify-content_flex-end</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="justify-content_flex-start.htm">justify-content_flex-start</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="justify-content_space-around.htm">justify-content_space-around</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="justify-content_space-between.htm">justify-content_space-between</a></strong></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.#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="http://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="primary">
|
|
<td><strong>
|
|
<a href="align-items-001.htm">align-items-001</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-items-002.htm">align-items-002</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-items-003.htm">align-items-003</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary ahem">
|
|
<td><strong>
|
|
<a href="align-items-004.htm">align-items-004</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-items-005.htm">align-items-005</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-001.htm">align-self-001</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-002.htm">align-self-002</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-003.htm">align-self-003</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-004.htm">align-self-004</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-005.htm">align-self-005</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-006.htm">align-self-006</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="align-self-007.htm">align-self-007</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-008.htm">align-self-008</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-009.htm">align-self-009</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-010.htm">align-self-010</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="align-self-011.htm">align-self-011</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-012.htm">align-self-012</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-self-013.htm">align-self-013</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-horiz-001-block.htm">flexbox-align-self-horiz-001-block</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-horiz-001-table.htm">flexbox-align-self-horiz-001-table</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-horiz-002.htm">flexbox-align-self-horiz-002</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-horiz-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-horiz-003.htm">flexbox-align-self-horiz-003</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-horiz-003-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-horiz-004.htm">flexbox-align-self-horiz-004</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-horiz-004-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-vert-001.htm">flexbox-align-self-vert-001</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-vert-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-vert-002.htm">flexbox-align-self-vert-002</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-vert-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-vert-003.htm">flexbox-align-self-vert-003</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-vert-003-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-vert-004.htm">flexbox-align-self-vert-004</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-vert-004-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-vert-rtl-001.htm">flexbox-align-self-vert-rtl-001</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-vert-rtl-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-vert-rtl-002.htm">flexbox-align-self-vert-rtl-002</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-vert-rtl-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-vert-rtl-003.htm">flexbox-align-self-vert-rtl-003</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-vert-rtl-003-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-vert-rtl-004.htm">flexbox-align-self-vert-rtl-004</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-vert-rtl-004-ref.htm">=</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">
|
|
<!-- 6 tests -->
|
|
<tr id="flexbox-align-self-baseline-horiz-001a-8.3.#baseline-participation" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-baseline-horiz-001a.htm">flexbox-align-self-baseline-horiz-001a</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-baseline-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-baseline-horiz-001b.htm">flexbox-align-self-baseline-horiz-001b</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-baseline-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-baseline-horiz-002.htm">flexbox-align-self-baseline-horiz-002</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-baseline-horiz-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-baseline-horiz-003.htm">flexbox-align-self-baseline-horiz-003</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-baseline-horiz-003-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-baseline-horiz-004.htm">flexbox-align-self-baseline-horiz-004</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-baseline-horiz-004-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-self-baseline-horiz-005.htm">flexbox-align-self-baseline-horiz-005</a></strong></td>
|
|
<td><a href="reference/flexbox-align-self-baseline-horiz-005-ref.htm">=</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>
|
|
</tbody>
|
|
<tbody id="s8.3.#propdef-align-items">
|
|
<!-- 28 tests -->
|
|
<tr id="align-items-001-8.3.#propdef-align-items" class="">
|
|
<td>
|
|
<a href="align-items-001.htm">align-items-001</a></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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.htm">align-items-002</a></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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.htm">align-items-003</a></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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.htm">align-items-004</a></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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.htm">align-items-005</a></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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.htm">align-self-007</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="css-flexbox-height-animation-stretch.htm">css-flexbox-height-animation-stretch</a></strong></td>
|
|
<td><a href="reference/css-flexbox-height-animation-stretch-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-baseline.htm">flexbox_align-items-baseline</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-baseline-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-items: baseline
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-items-center-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-center.htm">flexbox_align-items-center</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-center-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-items: center
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-items-center-2-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-center-2.htm">flexbox_align-items-center-2</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-center-2-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-items: center
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-items-flexend-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-flexend.htm">flexbox_align-items-flexend</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-flexend-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-flexend-2.htm">flexbox_align-items-flexend-2</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-flexend-2-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-items: flex-end
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-items-flexstart-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-flexstart.htm">flexbox_align-items-flexstart</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-flexstart-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-flexstart-2.htm">flexbox_align-items-flexstart-2</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-flexstart-2-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-items: flex-start
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-items-stretch-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-stretch.htm">flexbox_align-items-stretch</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-stretch-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-items: stretch
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-items-stretch-2-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-items-stretch-2.htm">flexbox_align-items-stretch-2</a></strong></td>
|
|
<td><a href="reference/flexbox_align-items-stretch-2-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-items: stretch
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-self-auto-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-self-auto.htm">flexbox_align-self-auto</a></strong></td>
|
|
<td><a href="reference/flexbox_align-self-auto-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-self: auto
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-self-baseline-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-self-baseline.htm">flexbox_align-self-baseline</a></strong></td>
|
|
<td><a href="reference/flexbox_align-self-baseline-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-self: baseline
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-self-center-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-self-center.htm">flexbox_align-self-center</a></strong></td>
|
|
<td><a href="reference/flexbox_align-self-center-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-self: center
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-self-flexend-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-self-flexend.htm">flexbox_align-self-flexend</a></strong></td>
|
|
<td><a href="reference/flexbox_align-self-flexend-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-self: flex-end
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-self-flexstart-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-self-flexstart.htm">flexbox_align-self-flexstart</a></strong></td>
|
|
<td><a href="reference/flexbox_align-self-flexstart-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-self: flex-start
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-self-stretch-8.3.#propdef-align-items" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-self-stretch.htm">flexbox_align-self-stretch</a></strong></td>
|
|
<td><a href="reference/flexbox_align-self-stretch-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-self: stretch
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-items-baseline-8.3.#propdef-align-items" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-items-baseline.htm">flexbox_computedstyle_align-items-baseline</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-items: baseline
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-items-center-8.3.#propdef-align-items" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-items-center.htm">flexbox_computedstyle_align-items-center</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-items-flex-end.htm">flexbox_computedstyle_align-items-flex-end</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-items-flex-start.htm">flexbox_computedstyle_align-items-flex-start</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-items-invalid.htm">flexbox_computedstyle_align-items-invalid</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-items: invalid
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-items-stretch-8.3.#propdef-align-items" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-items-stretch.htm">flexbox_computedstyle_align-items-stretch</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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.htm">align-self-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">align-self-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">align-self-003</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">align-self-004</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">align-self-005</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">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.htm">align-self-007</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">align-self-008</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">align-self-009</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">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.htm">align-self-011</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">align-self-012</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">align-self-013</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-self-baseline.htm">flexbox_computedstyle_align-self-baseline</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-self: baseline
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-self-center-8.3.#propdef-align-self" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-self-center.htm">flexbox_computedstyle_align-self-center</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-self-flex-end.htm">flexbox_computedstyle_align-self-flex-end</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-self-flex-start.htm">flexbox_computedstyle_align-self-flex-start</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</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="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-self-invalid.htm">flexbox_computedstyle_align-self-invalid</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-self: invalid
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-self-stretch-8.3.#propdef-align-self" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-self-stretch.htm">flexbox_computedstyle_align-self-stretch</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-self: stretch
|
|
</td>
|
|
</tr>
|
|
</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="http://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="primary">
|
|
<td><strong>
|
|
<a href="align-content-001.htm">align-content-001</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-content-002.htm">align-content-002</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-content-003.htm">align-content-003</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-content-004.htm">align-content-004</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-content-005.htm">align-content-005</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-content-006.htm">align-content-006</a></strong></td>
|
|
<td><a href="reference/align-content-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="align-content_center.htm">align-content_center</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="align-content_flex-end.htm">align-content_flex-end</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="align-content_flex-start.htm">align-content_flex-start</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="align-content_space-around.htm">align-content_space-around</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="align-content_space-between.htm">align-content_space-between</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="align-content_stretch.htm">align-content_stretch</a></strong></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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-content-horiz-001a.htm">flexbox-align-content-horiz-001a</a></strong></td>
|
|
<td><a href="reference/flexbox-align-content-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-content-horiz-001b.htm">flexbox-align-content-horiz-001b</a></strong></td>
|
|
<td><a href="reference/flexbox-align-content-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-content-vert-001a.htm">flexbox-align-content-vert-001a</a></strong></td>
|
|
<td><a href="reference/flexbox-align-content-vert-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-align-content-vert-001b.htm">flexbox-align-content-vert-001b</a></strong></td>
|
|
<td><a href="reference/flexbox-align-content-vert-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Testing 'align-content' in a vertical flex container
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox-overflow-horiz-005-8.4" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-overflow-horiz-005.htm">flexbox-overflow-horiz-005</a></strong></td>
|
|
<td><a href="reference/flexbox-overflow-horiz-005-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-overflow-vert-005.htm">flexbox-overflow-vert-005</a></strong></td>
|
|
<td><a href="reference/flexbox-overflow-vert-005-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-content-center.htm">flexbox_align-content-center</a></strong></td>
|
|
<td><a href="reference/flexbox_align-content-center-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-content: center
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-content-flexend-8.4" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-content-flexend.htm">flexbox_align-content-flexend</a></strong></td>
|
|
<td><a href="reference/flexbox_align-content-flexend-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-content: flex-end
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-content-flexstart-8.4" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-content-flexstart.htm">flexbox_align-content-flexstart</a></strong></td>
|
|
<td><a href="reference/flexbox_align-content-flexstart-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-content: flex-start
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-content-spacearound-8.4" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-content-spacearound.htm">flexbox_align-content-spacearound</a></strong></td>
|
|
<td><a href="reference/flexbox_align-content-spacearound-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-content: space-around
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-content-spacebetween-8.4" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-content-spacebetween.htm">flexbox_align-content-spacebetween</a></strong></td>
|
|
<td><a href="reference/flexbox_align-content-spacebetween-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-content: space-between
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-content-stretch-8.4" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-content-stretch.htm">flexbox_align-content-stretch</a></strong></td>
|
|
<td><a href="reference/flexbox_align-content-stretch-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-content: stretch
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_align-content-stretch-2-8.4" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox_align-content-stretch-2.htm">flexbox_align-content-stretch-2</a></strong></td>
|
|
<td><a href="reference/flexbox_align-content-stretch-2-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>flexbox | align-content: stretch
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-content-center-8.4" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-content-center.htm">flexbox_computedstyle_align-content-center</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-content: center
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-content-flex-end-8.4" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-content-flex-end.htm">flexbox_computedstyle_align-content-flex-end</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-content: flex-end
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-content-flex-start-8.4" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-content-flex-start.htm">flexbox_computedstyle_align-content-flex-start</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-content: flex-start
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-content-space-around-8.4" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-content-space-around.htm">flexbox_computedstyle_align-content-space-around</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-content: space-around
|
|
</td>
|
|
</tr>
|
|
<tr id="flexbox_computedstyle_align-content-space-between-8.4" class="primary dom">
|
|
<td><strong>
|
|
<a href="flexbox_computedstyle_align-content-space-between.htm">flexbox_computedstyle_align-content-space-between</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>flexbox | computed style | align-content: space-between
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-flex-align-content-center-8.4" class="primary">
|
|
<td><strong>
|
|
<a href="ttwf-reftest-flex-align-content-center.htm">ttwf-reftest-flex-align-content-center</a></strong></td>
|
|
<td><a href="reference/ttwf-reftest-flex-align-content-center-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="ttwf-reftest-flex-align-content-end.htm">ttwf-reftest-flex-align-content-end</a></strong></td>
|
|
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="ttwf-reftest-flex-align-content-space-around.htm">ttwf-reftest-flex-align-content-space-around</a></strong></td>
|
|
<td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="ttwf-reftest-flex-align-content-space-between.htm">ttwf-reftest-flex-align-content-space-between</a></strong></td>
|
|
<td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="ttwf-reftest-flex-align-content-start.htm">ttwf-reftest-flex-align-content-start</a></strong></td>
|
|
<td><a href="reference/ttwf-reftest-flex-align-content-start-ref.htm">=</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.#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="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">8.5 Flex Baselines</a></th></tr>
|
|
<!-- 14 tests -->
|
|
<tr id="flexbox-baseline-align-self-baseline-horiz-001-8.5" class="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-align-self-baseline-horiz-001.htm">flexbox-baseline-align-self-baseline-horiz-001</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-align-self-baseline-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-align-self-baseline-vert-001.htm">flexbox-baseline-align-self-baseline-vert-001</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-align-self-baseline-vert-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-empty-001a.htm">flexbox-baseline-empty-001a</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-empty-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-empty-001b.htm">flexbox-baseline-empty-001b</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-empty-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-multi-item-horiz-001.htm">flexbox-baseline-multi-item-horiz-001</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-multi-item-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-multi-item-vert-001.htm">flexbox-baseline-multi-item-vert-001</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-multi-item-vert-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-multi-line-horiz-001.htm">flexbox-baseline-multi-line-horiz-001</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-multi-line-horiz-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-multi-line-horiz-002.htm">flexbox-baseline-multi-line-horiz-002</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-multi-line-horiz-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-multi-line-horiz-003.htm">flexbox-baseline-multi-line-horiz-003</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-multi-line-horiz-003-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-multi-line-horiz-004.htm">flexbox-baseline-multi-line-horiz-004</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-multi-line-horiz-004-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-multi-line-vert-001.htm">flexbox-baseline-multi-line-vert-001</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-multi-line-vert-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-multi-line-vert-002.htm">flexbox-baseline-multi-line-vert-002</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-multi-line-vert-002-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-single-item-001a.htm">flexbox-baseline-single-item-001a</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-single-item-001-ref.htm">=</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="primary">
|
|
<td><strong>
|
|
<a href="flexbox-baseline-single-item-001b.htm">flexbox-baseline-single-item-001b</a></strong></td>
|
|
<td><a href="reference/flexbox-baseline-single-item-001-ref.htm">=</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>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |