Update web-platform-tests and CSS tests.

- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger 2017-02-06 11:06:12 +01:00
parent fb4f421c8b
commit 296fa2512b
21852 changed files with 2080936 additions and 892894 deletions

View file

@ -42,6 +42,24 @@
<a href="https://www.w3.org/TR/css-flexbox-1/#overview">1.1 Overview</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.1.#ref-for-cross-axis-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.1.#ref-for-cross-axis-2">
<!-- 0 tests -->
</tbody>
<tbody id="s1.1.#ref-for-cross-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.1.#ref-for-main-axis-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.1.#ref-for-main-axis-2">
<!-- 0 tests -->
</tbody>
<tbody id="s1.1.#ref-for-valdef-flex-direction-row-reverse-1">
<!-- 0 tests -->
</tbody>
<tbody id="s1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.2">+</a>

View file

@ -164,6 +164,21 @@
</td>
</tr>
</tbody>
<tbody id="s10.#ref-for-flex-container-61">
<!-- 0 tests -->
</tbody>
<tbody id="s10.#ref-for-flex-container-62">
<!-- 0 tests -->
</tbody>
<tbody id="s10.#ref-for-flex-item-112">
<!-- 0 tests -->
</tbody>
<tbody id="s10.#ref-for-multi-line-11">
<!-- 0 tests -->
</tbody>
<tbody id="s10.#ref-for-multi-line-12">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10.1">+</a>
@ -173,6 +188,51 @@
<tbody id="s10.1.#example-bb213bd3">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-cross-size-22">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-multi-line-13">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-multi-line-14">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-multi-line-15">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-propdef-align-content-9">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-propdef-align-self-18">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-propdef-align-self-19">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-propdef-align-self-20">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-single-line-13">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-single-line-14">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-single-line-15">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-valdef-align-items-baseline-2">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-valdef-align-items-flex-start-3">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-valdef-align-items-flex-start-4">
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#ref-for-valdef-align-items-flex-start-5">
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -66,6 +66,18 @@
<tbody id="s.#quiet-pubrules-2">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-for-propdef-align-self-1">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-for-propdef-align-self-2">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-for-propdef-align-self-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-for-propdef-order-1">
<!-- 0 tests -->
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>

View file

@ -376,6 +376,51 @@
<tbody id="s2.#main-start">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-cross-dimension-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-cross-dimension-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-flex-item-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-flex-item-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-flex-item-3">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-flex-item-4">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-flex-item-5">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-flex-line-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-main-axis-3">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-main-dimension-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-main-dimension-2">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-propdef-flex-flow-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-valdef-display-flex-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-valdef-display-inline-flex-1">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#ref-for-valdef-flex-direction-row-1">
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -346,6 +346,48 @@
<tbody id="s3.#flex-formatting-context">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-flex-container-1">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-flex-container-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-flex-container-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-flex-container-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-flex-container-5">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-flex-container-6">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-flex-container-7">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-flex-item-6">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-valdef-display-flex-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-valdef-display-flex-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-valdef-display-flex-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-valdef-display-inline-flex-2">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-valdef-display-inline-flex-3">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#ref-for-valdef-display-inline-flex-4">
<!-- 0 tests -->
</tbody>
<tbody id="s3.#valdef-display-flex">
<!-- 0 tests -->
</tbody>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Items (71 tests)</h2>
<h2>Flex Items (72 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -229,6 +229,42 @@
<tbody id="s4.#flex-level">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-container-10">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-container-11">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-container-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-container-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-10">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-11">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-12">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-13">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-14">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-8">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#ref-for-flex-item-9">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
@ -267,7 +303,52 @@
</td>
</tr>
</tbody>
<tbody id="s4.1.#example-5860ae02">
<tbody id="s4.1.#example-62145703">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-cross-axis-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-12">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-13">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-14">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-15">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-16">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-17">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-container-18">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-flex-item-15">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-propdef-align-content-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-propdef-align-self-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-static-position-rectangle-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-static-position-rectangle-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-valdef-align-items-flex-start-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#ref-for-valdef-align-items-stretch-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#static-position-rectangle">
@ -277,7 +358,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#item-margins">4.2 Flex Item Margins and Paddings</a></th></tr>
<!-- 3 tests -->
<!-- 4 tests -->
<tr id="flex-container-margin-4.2" class="primary">
<td><strong>
<a href="flex-container-margin.htm">flex-container-margin</a></strong></td>
@ -308,6 +389,26 @@
<td>flexbox | margin-left: auto
</td>
</tr>
<tr id="negative-margins-001-4.2" class="">
<td>
<a href="negative-margins-001.htm">negative-margins-001</a></td>
<td><a href="reference/negative-margins-001-ref.htm">=</a> </td>
<td></td>
<td>Negative margins
<ul class="assert">
<li>Negative margins get floored at zero for intrinsic size computations</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.2.#ref-for-flex-item-16">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-flex-item-17">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#ref-for-flex-item-18">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
@ -355,6 +456,12 @@
</td>
</tr>
</tbody>
<tbody id="s4.3.#ref-for-flex-item-19">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#ref-for-propdef-order-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
@ -421,7 +528,7 @@
<tbody id="s4.4.#collapsed-flex-item">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#example-292b3351">
<tbody id="s4.4.#example-b0742f97">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#nav-about">
@ -433,6 +540,15 @@
<tbody id="s4.4.#nav-projects">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-cross-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-flex-container-19">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#ref-for-main-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#visibility-collapse-example">
<!-- 0 tests -->
</tbody>
@ -730,9 +846,120 @@
</td>
</tr>
</tbody>
<tbody id="s4.5.#content-size">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#min-size-opt">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#min-width-automatic-minimum-size">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-content-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-content-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-content-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-content-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-cross-size-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-cross-size-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-cross-size-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-6">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-definite-7">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-flex-item-20">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-flex-item-21">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-flex-item-22">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-axis-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-axis-5">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-size-property-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-size-property-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-main-size-property-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-min-width-automatic-minimum-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-min-width-automatic-minimum-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-min-width-automatic-minimum-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-specified-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-specified-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-specified-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-specified-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-transferred-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-transferred-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-transferred-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#ref-for-valdef-min-width-auto-1">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#specified-size">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#transferred-size">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#valdef-min-width-auto">
<!-- 0 tests -->
</tbody>

View file

@ -44,6 +44,24 @@
</td>
</tr>
</tbody>
<tbody id="s5.#ref-for-propdef-flex-direction-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-propdef-flex-direction-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-propdef-flex-flow-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-propdef-flex-wrap-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-propdef-order-3">
<!-- 0 tests -->
</tbody>
<tbody id="s5.#ref-for-propdef-order-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1">+</a>
@ -345,6 +363,57 @@
</td>
</tr>
</tbody>
<tbody id="s5.1.#ref-for-flex-container-20">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-flex-item-23">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-axis-6">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-axis-7">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-axis-8">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-end-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-end-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-end-3">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-end-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-start-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-start-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-start-3">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-main-start-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-propdef-flex-direction-3">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-propdef-flex-direction-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-valdef-flex-direction-column-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#ref-for-valdef-flex-direction-row-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-flex-direction-column">
<!-- 6 tests -->
<tr id="flexbox_computedstyle_flex-flow-column-5.1.#valdef-flex-direction-column" class="dom script">
@ -960,6 +1029,60 @@
</td>
</tr>
</tbody>
<tbody id="s5.2.#ref-for-cross-axis-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-cross-axis-5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-cross-end-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-cross-end-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-cross-start-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-cross-start-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-cross-start-3">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-flex-container-21">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-multi-line-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-multi-line-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-propdef-flex-wrap-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-propdef-flex-wrap-3">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-propdef-flex-wrap-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-single-line-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-single-line-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-valdef-flex-wrap-wrap-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-valdef-flex-wrap-wrap-reverse-1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#ref-for-valdef-flex-wrap-wrap-reverse-2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#valdef-flex-wrap-nowrap">
<!-- 5 tests -->
<tr id="flexbox_computedstyle_flex-flow-column-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom script">
@ -1627,6 +1750,33 @@
</td>
</tr>
</tbody>
<tbody id="s5.3.#ref-for-flex-container-22">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#ref-for-propdef-flex-direction-5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#ref-for-propdef-flex-direction-6">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#ref-for-propdef-flex-flow-3">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#ref-for-propdef-flex-flow-4">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#ref-for-propdef-flex-flow-5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#ref-for-propdef-flex-wrap-5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#ref-for-propdef-flex-wrap-6">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#ref-for-valdef-flex-direction-row-3">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.4">+</a>
@ -1973,6 +2123,30 @@
</td>
</tr>
</tbody>
<tbody id="s5.4.#ref-for-flex-container-23">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#ref-for-flex-container-24">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#ref-for-flex-item-24">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#ref-for-flex-item-25">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#ref-for-flex-item-26">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#ref-for-propdef-order-5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#ref-for-propdef-order-6">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#ref-for-propdef-order-7">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#valdef-order-integer">
<!-- 0 tests -->
</tbody>
@ -1988,6 +2162,45 @@
<tbody id="s5.4.1.#example-e1d8dda6">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-10">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-11">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-12">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-13">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-14">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-15">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-16">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-17">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-18">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-19">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-8">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-propdef-order-9">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#ref-for-valdef-align-items-stretch-2">
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -58,6 +58,102 @@
<tbody id="s6.#multi-line">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-cross-axis-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-cross-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-cross-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-cross-size-5">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-flex-container-25">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-flex-container-26">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-flex-container-27">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-flex-item-27">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-flex-item-28">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-flex-item-29">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-flex-item-30">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-main-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-main-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-multi-line-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-multi-line-4">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-multi-line-5">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-align-content-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-align-content-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-align-self-5">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-align-self-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-flex-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-flex-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-flex-flow-6">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-flex-wrap-10">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-flex-wrap-11">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-flex-wrap-7">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-flex-wrap-8">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-flex-wrap-9">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-propdef-justify-content-1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-single-line-3">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-single-line-4">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#ref-for-valdef-flex-wrap-wrap-2">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#single-line">
<!-- 0 tests -->
</tbody>

View file

@ -44,6 +44,36 @@
</td>
</tr>
</tbody>
<tbody id="s7.#flexible">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#fully-inflexible">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-flex-flex-grow-factor-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-flex-flex-shrink-factor-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-flex-item-31">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-flex-item-32">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-main-dimension-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-propdef-flex-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-propdef-flex-grow-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.#ref-for-propdef-flex-shrink-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a>
@ -920,6 +950,150 @@
</td>
</tr>
</tbody>
<tbody id="s7.1.#ref-for-flex-base-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-flex-basis-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-flex-grow-factor-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-flex-shrink-factor-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-flex-shrink-factor-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-33">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-34">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-35">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-36">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-37">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-38">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-39">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-40">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-41">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-flex-item-42">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-main-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-main-size-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-main-size-property-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-main-size-property-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-11">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-7">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-basis-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-basis-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-basis-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-basis-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-basis-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-basis-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-basis-7">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-basis-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-grow-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-grow-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-grow-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-grow-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-shrink-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-shrink-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-propdef-flex-shrink-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-valdef-flex-basis-auto-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-valdef-flex-basis-auto-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-valdef-flex-basis-content-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-valdef-flex-basis-content-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-valdef-flex-none-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#ref-for-valdef-min-width-auto-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#valdef-flex-basis-auto">
<!-- 0 tests -->
</tbody>
@ -987,12 +1161,72 @@
<tbody id="s7.1.1.#flex-initial">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-flex-flex-basis-2">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-fully-inflexible-1">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-main-axis-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-main-axis-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-main-size-property-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-12">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-13">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-14">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-15">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-16">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-17">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-18">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-19">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-20">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-21">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-22">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-23">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-24">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.1.#ref-for-propdef-flex-25">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#flex-components">7.2 Components of Flexibility</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#ref-for-propdef-flex-26">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2.1">+</a>
@ -1133,6 +1367,24 @@
</td>
</tr>
</tbody>
<tbody id="s7.2.1.#ref-for-flex-flex-grow-factor-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1.#ref-for-flex-item-43">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1.#ref-for-propdef-flex-27">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1.#ref-for-propdef-flex-grow-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1.#ref-for-propdef-flex-grow-7">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1.#ref-for-propdef-flex-grow-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1.#valdef-flex-grow-number">
<!-- 0 tests -->
</tbody>
@ -1262,6 +1514,24 @@
</td>
</tr>
</tbody>
<tbody id="s7.2.2.#ref-for-flex-flex-shrink-factor-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.2.#ref-for-flex-item-44">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.2.#ref-for-propdef-flex-28">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.2.#ref-for-propdef-flex-shrink-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.2.#ref-for-propdef-flex-shrink-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.2.#ref-for-propdef-flex-shrink-7">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.2.#valdef-flex-shrink-number">
<!-- 0 tests -->
</tbody>
@ -1450,6 +1720,66 @@
</td>
</tr>
</tbody>
<tbody id="s7.2.3.#ref-for-definite-8">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-flex-container-28">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-flex-container-29">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-flex-flex-basis-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-flex-item-45">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-main-size-6">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-29">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-basis-10">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-basis-11">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-basis-12">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-basis-13">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-basis-14">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-basis-15">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-basis-16">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-propdef-flex-basis-9">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-valdef-flex-basis-auto-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-valdef-flex-basis-content-3">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-valdef-flex-basis-content-4">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-valdef-flex-basis-content-5">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#ref-for-valdef-flex-basis-content-6">
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Alignment (162 tests)</h2>
<h2>Alignment (164 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -44,6 +44,15 @@
</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>
@ -110,6 +119,18 @@
<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>
@ -469,6 +490,126 @@
</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>
@ -793,7 +934,7 @@
</tr>
</tbody>
<tbody id="s8.3.#baseline-participation">
<!-- 6 tests -->
<!-- 8 tests -->
<tr id="flexbox-align-self-baseline-horiz-001a-8.3.#baseline-participation" class="">
<td>
<a href="flexbox-align-self-baseline-horiz-001a.htm">flexbox-align-self-baseline-horiz-001a</a></td>
@ -842,6 +983,22 @@
<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.htm">flexbox-align-self-baseline-horiz-006</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-006-ref.htm">=</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.htm">flexbox-align-self-baseline-horiz-007</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-007-ref.htm">=</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 -->
@ -1296,6 +1453,150 @@
</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>
@ -1657,6 +1958,96 @@
<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>
@ -1678,7 +2069,7 @@
<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 Baselines</a></th></tr>
<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>
@ -1799,6 +2190,69 @@
<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>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Layout Algorithm (74 tests)</h2>
<h2>Flex Layout Algorithm (79 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -483,6 +483,12 @@
</td>
</tr>
</tbody>
<tbody id="s9.#ref-for-flex-item-92">
<!-- 0 tests -->
</tbody>
<tbody id="s9.#ref-for-order-modified-document-order-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.1">+</a>
@ -492,9 +498,6 @@
<tbody id="s9.1.#algo-anon-box">
<!-- 0 tests -->
</tbody>
<tbody id="s9.1.#algo-flex-order">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.2">+</a>
@ -583,6 +586,138 @@
</td>
</tr>
</tbody>
<tbody id="s9.2.#ref-for-cross-size-10">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-cross-size-11">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-cross-size-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-cross-size-9">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-definite-10">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-definite-11">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-definite-12">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-definite-9">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-base-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-base-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-base-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-base-size-5">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-base-size-6">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-base-size-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-base-size-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-container-40">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-container-41">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-container-42">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-container-43">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-container-44">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-container-45">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-flex-basis-4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-flex-basis-5">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-flex-basis-6">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-flex-basis-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-flex-basis-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-item-93">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-item-94">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-item-95">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-item-96">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-flex-item-97">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-hypothetical-main-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-main-size-10">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-main-size-11">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-main-size-12">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-main-size-13">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-main-size-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-main-size-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-main-size-9">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-valdef-flex-basis-content-10">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-valdef-flex-basis-content-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-valdef-flex-basis-content-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-valdef-flex-basis-content-9">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#ref-for-valdef-min-width-auto-3">
<!-- 0 tests -->
</tbody>
<tbody id="s9.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.3">+</a>
@ -670,6 +805,15 @@
</td>
</tr>
</tbody>
<tbody id="s9.3.#ref-for-hypothetical-main-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.3.#ref-for-main-size-14">
<!-- 0 tests -->
</tbody>
<tbody id="s9.3.#ref-for-single-line-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.4">+</a>
@ -724,7 +868,53 @@
</tr>
</tbody>
<tbody id="s9.4.#algo-cross-line">
<!-- 0 tests -->
<!-- 5 tests -->
<tr id="flexbox-single-line-clamp-1-9.4.#algo-cross-line" class="primary">
<td><strong>
<a href="flexbox-single-line-clamp-1.htm">flexbox-single-line-clamp-1</a></strong></td>
<td><a href="reference/flexbox-single-line-clamp-1-ref.htm">=</a> </td>
<td></td>
<td>Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.
</td>
</tr>
<tr id="flexbox-single-line-clamp-2-9.4.#algo-cross-line" class="primary">
<td><strong>
<a href="flexbox-single-line-clamp-2.htm">flexbox-single-line-clamp-2</a></strong></td>
<td><a href="reference/flexbox-single-line-clamp-2-ref.htm">=</a> </td>
<td></td>
<td>Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.
</td>
</tr>
<tr id="flexbox-single-line-clamp-3-9.4.#algo-cross-line" class="primary">
<td><strong>
<a href="flexbox-single-line-clamp-3.htm">flexbox-single-line-clamp-3</a></strong></td>
<td><a href="reference/flexbox-single-line-clamp-3-ref.htm">=</a> </td>
<td></td>
<td>Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.
</td>
</tr>
<tr id="layout-algorithm_algo-cross-line-001-9.4.#algo-cross-line" class="primary">
<td><strong>
<a href="layout-algorithm_algo-cross-line-001.htm">layout-algorithm_algo-cross-line-001</a></strong></td>
<td><a href="reference/layout-algorithm_algo-cross-line-001-ref.htm">=</a> </td>
<td></td>
<td>cross size determination with overflow:scroll
<ul class="assert">
<li>This test checks that correct height is applied if overflow: scroll is set</li>
</ul>
</td>
</tr>
<tr id="layout-algorithm_algo-cross-line-002-9.4.#algo-cross-line" class="primary">
<td><strong>
<a href="layout-algorithm_algo-cross-line-002.htm">layout-algorithm_algo-cross-line-002</a></strong></td>
<td><a href="reference/layout-algorithm_algo-cross-line-002-ref.htm">=</a> </td>
<td></td>
<td>cross size determination with overflow:scroll
<ul class="assert">
<li>This test checks that correct width is applied if overflow: scroll is set</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s9.4.#algo-line-stretch">
<!-- 0 tests -->
@ -818,6 +1008,69 @@
</td>
</tr>
</tbody>
<tbody id="s9.4.#ref-for-cross-size-12">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-cross-size-13">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-cross-size-14">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-definite-13">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-definite-14">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-flex-container-46">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-flex-line-4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-flex-line-5">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-hypothetical-cross-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-hypothetical-cross-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-main-size-15">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-main-size-16">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-main-size-17">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-propdef-align-content-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-propdef-align-self-14">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-propdef-align-self-15">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-propdef-align-self-16">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-single-line-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-single-line-9">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-valdef-align-content-stretch-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#ref-for-valdef-align-items-baseline-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4.#strut-size">
<!-- 0 tests -->
</tbody>
@ -830,6 +1083,9 @@
<tbody id="s9.5.#algo-main-align">
<!-- 0 tests -->
</tbody>
<tbody id="s9.5.#ref-for-propdef-justify-content-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.6">+</a>
@ -848,6 +1104,21 @@
<tbody id="s9.6.#algo-line-align">
<!-- 0 tests -->
</tbody>
<tbody id="s9.6.#ref-for-definite-15">
<!-- 0 tests -->
</tbody>
<tbody id="s9.6.#ref-for-flex-container-47">
<!-- 0 tests -->
</tbody>
<tbody id="s9.6.#ref-for-flex-container-48">
<!-- 0 tests -->
</tbody>
<tbody id="s9.6.#ref-for-propdef-align-content-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.6.#ref-for-propdef-align-self-17">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.7">+</a>
@ -857,6 +1128,105 @@
<tbody id="s9.7.#initial-free-space">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-base-size-10">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-base-size-11">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-base-size-12">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-base-size-13">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-base-size-14">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-base-size-9">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-flex-grow-factor-4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-flex-grow-factor-5">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-flex-shrink-factor-5">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-flex-flex-shrink-factor-6">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-hypothetical-main-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-hypothetical-main-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-hypothetical-main-size-5">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-initial-free-space-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-initial-free-space-2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-main-size-18">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-main-size-19">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-main-size-20">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-main-size-21">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-remaining-free-space-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-remaining-free-space-2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-remaining-free-space-3">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-remaining-free-space-4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-remaining-free-space-5">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-scaled-flex-shrink-factor-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-scaled-flex-shrink-factor-2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-target-main-size-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-target-main-size-2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-target-main-size-3">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-target-main-size-4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-target-main-size-5">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-target-main-size-6">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#ref-for-target-main-size-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.7.#remaining-free-space">
<!-- 0 tests -->
</tbody>
@ -875,7 +1245,70 @@
<tbody id="s9.8.#definite">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#indefinite">
<tbody id="s9.8.#ref-for-cross-size-15">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-cross-size-16">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-cross-size-17">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-cross-size-18">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-definite-16">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-definite-17">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-definite-18">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-definite-19">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-definite-20">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-definite-21">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-definite-22">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-flex-container-49">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-flex-container-50">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-flex-flex-basis-10">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-flex-flex-basis-9">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-flex-item-100">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-flex-item-98">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-flex-item-99">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-fully-inflexible-2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-main-size-22">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-single-line-10">
<!-- 0 tests -->
</tbody>
<tbody id="s9.8.#ref-for-stretched-1">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9">
@ -884,24 +1317,162 @@
<a href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes">9.9 Intrinsic Sizes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#ref-for-flex-container-51">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.9.1">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes">9.9.1 Flex Container Intrinsic Main Sizes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-base-size-15">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-base-size-16">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-container-52">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-container-53">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-container-54">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-container-55">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-flex-grow-factor-6">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-flex-grow-factor-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-flex-shrink-factor-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-item-101">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-item-102">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-item-103">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-item-104">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-item-105">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-flex-item-106">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-main-size-23">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-main-size-24">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-main-size-25">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-main-size-property-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-multi-line-9">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-scaled-flex-shrink-factor-3">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-scaled-flex-shrink-factor-4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.1.#ref-for-single-line-11">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.9.2">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-cross-sizes">9.9.2 Flex Container Intrinsic Cross Sizes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-cross-axis-15">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-cross-axis-16">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-cross-size-19">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-cross-size-20">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-cross-size-21">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-container-56">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-container-57">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-container-58">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-container-59">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-container-60">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-item-107">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-item-108">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-item-109">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-item-110">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-flex-line-6">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-multi-line-10">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-propdef-flex-flow-7">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.2.#ref-for-single-line-12">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.9.3">+</a>
<a href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-item-contributions">9.9.3 Flex Item Intrinsic Size Contributions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.3.#ref-for-flex-base-size-17">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.3.#ref-for-flex-item-111">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.3.#ref-for-main-size-property-8">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.3.#ref-for-main-size-property-9">
<!-- 0 tests -->
</tbody>
</table>
</body>

File diff suppressed because it is too large Load diff

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html><head><title>flexbox |css-box-justify-content</title>
<link href="ava656094@gmail.com" rel="author" title="xiaoxia">
<link href="mailto:ava656094@gmail.com" rel="author" title="xiaoxia">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
<link href="reference/css-box-justify-content-ref.htm" rel="match">

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexbox Test: flex-basis - positive number</title>
<link href="Intel" rel="author" title="http://www.intel.com">
<link href="Intel" rel="author" title="mailto:shiyoux.tan@intel.com">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help" title="7.3.3. The 'flex-basis' property">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexbox Test: flex-basis - positive number</title>
<link href="Intel" rel="author" title="http://www.intel.com">
<link href="Intel" rel="author" title="mailto:shiyoux.tan@intel.com">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help" title="7.3.3. The 'flex-basis' property">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexbox Test: flex-basis - negative number(width not specified)</title>
<link href="Intel" rel="author" title="http://www.intel.com">
<link href="Intel" rel="author" title="mailto:shiyoux.tan@intel.com">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help" title="7.3.3. The 'flex-basis' property">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexbox Test: flex-basis - negative number(width specified)</title>
<link href="Intel" rel="author" title="http://www.intel.com">
<link href="Intel" rel="author" title="mailto:shiyoux.tan@intel.com">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help" title="7.3.3. The 'flex-basis' property">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexbox Test: flex-basis - 0</title>
<link href="Intel" rel="author" title="http://www.intel.com">
<link href="Intel" rel="author" title="mailto:shiyoux.tan@intel.com">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help" title="7.3.3. The 'flex-basis' property">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexbox Test: flex-basis - 0%</title>
<link href="Intel" rel="author" title="http://www.intel.com">
<link href="Intel" rel="author" title="mailto:shiyoux.tan@intel.com">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help" title="7.3.3. The 'flex-basis' property">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexbox Test: flex-basis - auto</title>
<link href="Intel" rel="author" title="http://www.intel.com">
<link href="Intel" rel="author" title="mailto:shiyoux.tan@intel.com">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help" title="7.3.3. The 'flex-basis' property">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexbox Test: flex-basis - 50%</title>
<link href="Intel" rel="author" title="http://www.intel.com">
<link href="Intel" rel="author" title="mailto:shiyoux.tan@intel.com">
<link href="http://www.intel.com" rel="author" title="Intel">
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Intel">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis" rel="help" title="7.3.3. The 'flex-basis' property">
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>flex item child margin</title>
<link href="csf178@gmail.com" rel="author" title="shaofeic">
<link href="mailto:csf178@gmail.com" rel="author" title="shaofeic">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-items" rel="help">
<link href="reference/flex-flexitem-childmargin-ref.htm" rel="match">
<meta content="" name="flags">

View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html><head>
<title>flex item size prescation</title>
<link href="csf178@gmail.com" rel="author" title="shaofeic">
<link href="mailto:csf178@gmail.com" rel="author" title="shaofeic">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-items" rel="help">
<link href="reference/flex-flexitem-percentage-prescation-ref.htm" rel="match">
<meta content="" name="flags">

View file

@ -20,7 +20,7 @@
width: 25px;
}
#test1 {
flex-grow: 0.5;
flex-grow: 1.5;
}
#test2 {
flex-grow: 2;

View file

@ -132,5 +132,47 @@
<div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="align-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: left">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: left">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="align-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: right">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: right">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
</body>
</html>

View file

@ -133,5 +133,47 @@
<div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="align-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: left">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: left">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="align-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: right">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: right">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
</body>
</html>

View file

@ -132,5 +132,47 @@
<div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="align-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: left">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: left">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="align-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: right">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: right">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
</body>
</html>

View file

@ -133,5 +133,47 @@
<div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: space-evenly">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="align-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: left">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: left">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="align-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="align-content: right">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox" style="align-content: right">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
</body>
</html>

View file

@ -15,10 +15,15 @@
<style>
.flexbox {
display: flex;
align-items: baseline;
border: 1px dashed blue;
font: 14px sans-serif;
}
.base {
align-items: baseline;
}
.lastbase {
align-items: last baseline;
}
.big {
height: 100px;
@ -43,7 +48,15 @@
</style>
</head>
<body>
<div class="flexbox">
<div class="flexbox base">
<div class="lime">blk_1line</div>
<div class="yellow">blk<br>2lines</div>
<div class="orange"><span class="super">super</span></div>
<div class="pink"><span class="sub">sub</span></div>
<div class="aqua big">big<br>text<br>3lines</div>
<i class="tan">ital<br>ic</i>
</div>
<div class="flexbox lastbase">
<div class="lime">blk_1line</div>
<div class="yellow">blk<br>2lines</div>
<div class="orange"><span class="super">super</span></div>

View file

@ -17,11 +17,16 @@
<style>
.flexbox {
display: flex;
align-items: baseline;
flex-wrap: wrap-reverse;
border: 1px dashed blue;
font: 14px sans-serif;
}
.base {
align-items: baseline;
}
.lastbase {
align-items: last baseline;
}
.big {
height: 100px;
@ -46,7 +51,15 @@
</style>
</head>
<body>
<div class="flexbox">
<div class="flexbox base">
<div class="lime">blk_1line</div>
<div class="yellow">blk<br>2lines</div>
<div class="orange"><span class="super">super</span></div>
<div class="pink"><span class="sub">sub</span></div>
<div class="aqua big">big<br>text<br>3lines</div>
<i class="tan">ital<br>ic</i>
</div>
<div class="flexbox lastbase">
<div class="lime">blk_1line</div>
<div class="yellow">blk<br>2lines</div>
<div class="orange"><span class="super">super</span></div>

View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><!-- Testcase for behavior of the 'baseline' value for align-items (and
align-self, implicitly). This test baseline-aligns various types of
content against content that is exempt from alignment due to an
orthognal writing-mode.
--><html>
<head>
<title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</title>
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation">
<link rel="match" href="reference/flexbox-align-self-baseline-horiz-006-ref.htm">
<style>
.container {
display: flex;
border: 1px dashed blue;
font: 14px sans-serif;
height: 50px;
}
.base { align-items: baseline; }
.lastbase { align-items: last baseline; }
.ortho { writing-mode: vertical-rl;
width: 17px;
height: 40px; }
.offset { margin-top: 10px;
margin-bottom: 3px; }
.lime { background: lime; }
.yellow { background: yellow; }
.orange { background: orange; }
.pink { background: pink; }
</style>
</head>
<body>
<div class="container base">
<div class="lime ortho">ortho</div>
<div class="yellow">one line</div>
<div class="orange">two<br>lines</div>
<div class="pink offset">offset</div>
</div>
<div class="container lastbase">
<div class="lime ortho">ortho</div>
<div class="yellow">one line</div>
<div class="orange">two<br>lines</div>
<div class="pink offset">offset</div>
</div>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><!-- Testcase for behavior of 'baseline' and 'last baseline' values
for align-items (and align-self, implicitly). This test confirms
non-interference between the 'baseline' and 'last baseline' items.
--><html>
<head>
<title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title>
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation">
<link rel="match" href="reference/flexbox-align-self-baseline-horiz-007-ref.htm">
<style>
.container {
display: flex;
border: 1px dashed blue;
font: 14px sans-serif;
height: 50px;
}
.base { align-self: baseline; }
.lastbase { align-self: last baseline; }
.offset { margin-top: 10px;
margin-bottom: 3px; }
.lime { background: lime; }
.yellow { background: yellow; }
.orange { background: orange; }
.pink { background: pink; }
</style>
</head>
<body>
<div class="container">
<div class="lime base">one line (first)</div>
<div class="yellow lastbase">one line (last)</div>
<div class="orange offset lastbase">two<br>lines and offset (last)</div>
<div class="pink offset base">offset (first)</div>
</div>
</body>
</html>

View file

@ -72,7 +72,15 @@
background: violet;
align-self: inherit;
}
</style>
.left {
background: tan;
align-self: left;
}
.right {
background: brown;
align-self: right;
}
</style>
</head>
<body>
<div class="flexbox">
@ -90,6 +98,8 @@
<div class="unspecified">unspec</div>
<div class="initial">initial</div>
<div class="inherit">inherit</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

View file

@ -74,6 +74,14 @@
background: violet;
align-self: inherit;
}
.left {
background: tan;
align-self: left;
}
.right {
background: brown;
align-self: right;
}
</style>
</head>
<body>
@ -92,6 +100,8 @@
<div class="unspecified">unspec</div>
<div class="initial">initial</div>
<div class="inherit">inherit</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

View file

@ -67,6 +67,14 @@
background: violet;
align-self: inherit;
}
.left {
background: tan;
align-self: left;
}
.right {
background: brown;
align-self: right;
}
</style>
</head>
<body>
@ -85,6 +93,8 @@
<div class="unspecified">unspec</div>
<div class="initial">initial</div>
<div class="inherit">inherit</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

View file

@ -70,6 +70,14 @@
background: violet;
align-self: inherit;
}
.left {
background: tan;
align-self: left;
}
.right {
background: brown;
align-self: right;
}
</style>
</head>
<body>
@ -88,6 +96,8 @@
<div class="unspecified">unspec</div>
<div class="initial">initial</div>
<div class="inherit">inherit</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

View file

@ -5,11 +5,12 @@
--><!-- Testcase for how we compute the baseline of a horizontal flex container
with no flex items. This is the main-axis baseline. The spec says this
about this case:
https://drafts.csswg.org/css-flexbox/#flex-baselines
"Otherwise, the flex container has no first/last main-axis baseline set,
and one is synthesized if needed according to the rules of its alignment context."
The flex container's main-axis baseline is synthesized
from ... the flex container's content box.
I'm taking that to mean the baseline is the bottom of the content box.
The alignment context in this case is inline-level so the margin-box
should be used to synthesize the baseline.
--><html><head>
<title>CSS Test: Testing the baseline of an empty horizontal flex container</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
@ -38,6 +39,7 @@
<div style="padding: 10px" class="flexContainer"></div>
<div style="border-width: 3px" class="flexContainer"></div>
<div style="border-bottom-width: 4px" class="flexContainer"></div>
<div style="border-bottom-width: 4px; margin: 2px" class="flexContainer"></div>
</body></html>

View file

@ -5,11 +5,12 @@
--><!-- Testcase for how we compute the baseline of a vertical flex container
with no flex items. This is the cross-axis baseline. The spec says this
about this case:
https://drafts.csswg.org/css-flexbox/#flex-baselines
"Otherwise, the flex container has no first/last main-axis baseline set,
and one is synthesized if needed according to the rules of its alignment context."
...the flex container's cross-axis baseline is synthesized
from ... the flex container's content box.
I'm taking that to mean the baseline is the bottom of the content box.
The alignment context in this case is inline-level so the margin-box
should be used to synthesize the baseline.
--><html><head>
<title>CSS Test: Testing the baseline of an empty vertical flex container</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
@ -39,6 +40,7 @@
<div style="padding: 10px" class="flexContainer"></div>
<div style="border-width: 3px" class="flexContainer"></div>
<div style="border-bottom-width: 4px" class="flexContainer"></div>
<div style="border-bottom-width: 4px; margin: 2px" class="flexContainer"></div>
</body></html>

View file

@ -16,14 +16,22 @@
<link href="reference/flexbox-baseline-single-item-001-ref.htm" rel="match">
<meta charset="utf-8">
<style>
body {
font: 14px serif;
}
.flexContainer {
display: inline-flex;
height: 16px;
width: 16px;
background: purple;
background: pink;
border: 0px dotted black;
/* (Elements that want a border will set their border-width.) */
}
.abs {
position: absolute;
top: 0;
font-size: 8px;
}
</style>
</head>
<body>
@ -33,6 +41,11 @@
<div style="padding: 10px" class="flexContainer">a</div>
<div style="border-width: 3px" class="flexContainer">a</div>
<div style="border-bottom-width: 4px" class="flexContainer">a</div>
<div style="padding: 4px" class="flexContainer">
<!-- (An abspos child shouldn't prevent us from getting our baseline from
the first flex item, which happens to be the second child.) -->
<div class="abs">abs</div>
<div style="font: 26px serif">a</div>
</body></html>
</div></body></html>

View file

@ -16,15 +16,23 @@
<link href="reference/flexbox-baseline-single-item-001-ref.htm" rel="match">
<meta charset="utf-8">
<style>
body {
font: 14px serif;
}
.flexContainer {
display: inline-flex;
flex-direction: column;
height: 16px;
width: 16px;
background: purple;
background: pink;
border: 0px dotted black;
/* (Elements that want a border will set their border-width.) */
}
.abs {
position: absolute;
top: 0;
font-size: 8px;
}
</style>
</head>
<body>
@ -34,6 +42,11 @@
<div style="padding: 10px" class="flexContainer">a</div>
<div style="border-width: 3px" class="flexContainer">a</div>
<div style="border-bottom-width: 4px" class="flexContainer">a</div>
<div style="padding: 4px" class="flexContainer">
<!-- (An abspos child shouldn't prevent us from getting our baseline from
the first flex item, which happens to be the second child.) -->
<div class="abs">abs</div>
<div style="font: 26px serif">a</div>
</body></html>
</div></body></html>

View file

@ -27,6 +27,7 @@
border-radius: 0;
border: 1px dotted green;
padding: 0;
margin: 0;
}
</style>
</head>

View file

@ -100,5 +100,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -106,5 +106,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -113,5 +113,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -108,5 +108,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -119,5 +119,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -97,5 +97,40 @@
<div class="flexbox" style="justify-content: space-around">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -102,5 +102,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -103,5 +103,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -115,5 +115,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -111,5 +111,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -122,5 +122,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -105,5 +105,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: space-evenly">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="justify-content: left">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: left">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="justify-content: right">
<div class="a"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="justify-content: right">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head><meta charset="utf-8">
<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title>
<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez">
<link href="reference/flexbox-single-line-clamp-1-ref.htm" rel="match">
<link href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line" rel="help">
<style>
.container {
display: flex;
background: gray;
max-height: 200px;
}
.panel {
background: lightblue;
width: 150px;
border: 1px solid purple;
box-sizing: border-box;
}
.tall-child {
width: 50px;
height: 400px;
}
</style>
</head><body><div class="container">
<div class="panel">
<div class="tall-child"></div>
</div>
</div>
</body></html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head><meta charset="utf-8">
<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title>
<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez">
<link href="reference/flexbox-single-line-clamp-2-ref.htm" rel="match">
<link href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line" rel="help">
<style>
.container {
display: flex;
background: gray;
height: 500px;
flex-direction: column;
max-width: 250px;
}
.panel {
background: lightblue;
border: 1px solid purple;
}
.small-box {
width: 100px;
height: 100px;
}
.big-box {
width: 500px;
height: 100px;
}
</style>
</head><body><div class="container">
<div class="panel">
<div class="small-box"></div>
</div>
<div class="panel">
<div class="big-box"></div>
</div>
</div>
</body></html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head><meta charset="utf-8">
<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="reference/flexbox-single-line-clamp-3-ref.htm" rel="match">
<link href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line" rel="help">
<style>
.container {
display: flex;
background: gray;
min-height: 80px;
/* Don't let (default) align-content:stretch save us
by stretching the line to fit the container! The point
here is that the line should already be clamped to the
container's min-height. */
align-content: flex-start;
}
.panel {
background: lightblue;
width: 150px;
}
.contents {
height: 10px;
width: 10px;
background: purple;
}
</style>
</head>
<body><div class="container">
<div class="panel">
<div class="contents"></div>
</div>
</div>
</body></html>

View file

@ -48,7 +48,7 @@
<div class="flexbox"> <div class="a"></div><div class="b"></div></div>
<!-- newline & whitespace between flex items -->
<div class="flexbox"><img src="solidblue.png">
<img src="solidblue.png"></div>
<div class="flexbox"><img src="support/solidblue.png">
<img src="support/solidblue.png"></div>
</body>
</html>

View file

@ -37,6 +37,6 @@
<div class="flexbox"><div class="a"></div><div class="b"></div></div>
<div class="flexbox"><img src="solidblue.png"><img src="solidblue.png"></div>
<div class="flexbox"><img src="support/solidblue.png"><img src="support/solidblue.png"></div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html><head>
<title>CSS Grid Layout Test: cross size determination with overflow:scroll</title>
<link href="mailto:tomalecpub+github@gmail.com" rel="author" title="Tomek Wytrebowicz">
<link href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line" rel="help" title="9.4. Cross Size Determination">
<link href="reference/layout-algorithm_algo-cross-line-001-ref.htm" rel="match">
<meta content="This test checks that correct height is applied if overflow: scroll is set" name="assert">
<style type="text/css">
.flex {
width: 200px;
display: flex;
background: red;
}
.flex>* {
background: green;
height: 200px;
flex: 1;
overflow: scroll;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
<div class="flex">
<div></div>
<div></div>
</div>
</body></html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html><head>
<title>CSS Grid Layout Test: cross size determination with overflow:scroll</title>
<link href="mailto:tomalecpub+github@gmail.com" rel="author" title="Tomek Wytrebowicz">
<link href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line" rel="help" title="9.4. Cross Size Determination">
<link href="reference/layout-algorithm_algo-cross-line-002-ref.htm" rel="match">
<meta content="This test checks that correct width is applied if overflow: scroll is set" name="assert">
<style type="text/css">
.flex {
width: 200px;
height: 200px;
display: flex;
background: red;
flex-direction: column;
}
.flex>* {
background: green;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
<div class="flex">
<div></div><div></div>
</div>
</body></html>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Flexible Box Test: Negative margins</title>
<link href="https://www.google.com/" rel="author" title="Google Inc.">
<link href="http://www.w3.org/TR/css-flexbox-1/#item-margins" rel="help">
<link href="reference/negative-margins-001-ref.htm" rel="match">
<meta content="Negative margins get floored at zero for intrinsic size computations" name="assert">
<style>
.container {
width: 60px;
background-color: red;
line-height: 0px;
border: 3px black solid;
}
.flex {
display: inline-flex;
background-color: green;
}
.item {
width: 20px;
height: 10px;
background-color: green;
}
.first {
width: 40px;
}
.neg-marg {
margin-left: -40px;
}
</style>
</head><body>
<p>You should see a green rectangle with a black border, 60px wide. You should see no red.</p>
<div class="container">
<div class="flex">
<div class="item first"></div>
<div class="item neg-marg"></div>
<div class="item"></div>
</div>
</div>
</body></html>

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flex container layout lowest order with row-reverse direction</title>
<link href="tmtysk@gmail.com" rel="author" title="tmtysk">
<link href="jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr.">
<link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk">
<link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr.">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-order" rel="help">
<meta content="" name="flags">
<link href="reference/order-with-row-reverse-ref.htm" rel="match">

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html><head><title>flexbox |css-box-justify-content</title>
<link href="ava656094@gmail.com" rel="author" title="xiaoxia">
<link href="mailto:ava656094@gmail.com" rel="author" title="xiaoxia">
<style>
#flexbox {
background: green;

View file

@ -70,7 +70,7 @@
<!-- flex-end -->
<div class="flexbox">
<div class="a"></div>
<div class="a" style="margin-top: 190px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 160px"></div>
@ -84,7 +84,7 @@
<!-- center -->
<div class="flexbox">
<div class="a"></div>
<div class="a" style="margin-top: 95px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 80px"></div>
@ -112,7 +112,7 @@
<!-- space-around -->
<div class="flexbox">
<div class="a"></div>
<div class="a" style="margin-top: 95px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 40px"></div>
@ -124,5 +124,47 @@
<div class="c" style="margin-top: 40px"></div>
</div>
<!-- space-evenly -->
<div class="flexbox">
<div class="a" style="margin-top: 95px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: calc(160px / 3)"></div>
<div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 30px"></div>
<div class="b" style="margin-top: 30px"><div class="fixedSizeChild"></div></div>
<div class="c" style="margin-top: 30px"></div>
</div>
<!-- left -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- right -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
</body>
</html>

View file

@ -73,7 +73,7 @@
<!-- flex-end -->
<div class="flexbox">
<div class="a"></div>
<div class="a" style="margin-left: 190px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 160px"></div>
@ -87,7 +87,7 @@
<!-- center -->
<div class="flexbox">
<div class="a"></div>
<div class="a" style="margin-left: 95px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 80px"></div>
@ -115,7 +115,7 @@
<!-- space-around -->
<div class="flexbox">
<div class="a"></div>
<div class="a" style="margin-left: 95px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 40px"></div>
@ -127,5 +127,47 @@
<div class="c" style="margin-left: 40px"></div>
</div>
<!-- space-evenly -->
<div class="flexbox">
<div class="a" style="margin-left: 95px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: calc(160px / 3)"></div>
<div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 30px"></div>
<div class="b" style="margin-left: 30px"><div class="fixedSizeChild"></div></div>
<div class="c" style="margin-left: 30px"></div>
</div>
<!-- left -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox">
<div class="a"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
<!-- right -->
<div class="flexbox">
<div class="a" style="margin-left: 190px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 160px"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 120px"></div>
<div class="b"><div class="fixedSizeChild"></div></div>
<div class="c"></div>
</div>
</body>
</html>

View file

@ -52,5 +52,8 @@
<i>ital<br>ic</i>
</table>
</div>
<div class="flexbox">
<div class="lime">blk_1line</div><div class="yellow">blk<br>2lines</div><div class="orange"><span class="super">super</span></div><div class="pink"><span class="sub">sub</span></div><div class="aqua big">big<br>text<br>3lines</div><div class="tan"><i>ital<br>ic</i></div>
</div>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><!-- Reference case for behavior of the 'baseline' value for align-items and
align-self when tested against content with an orthogonal writing-mode.
--><html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
<style>
.container {
display: flex;
border: 1px dashed blue;
font: 14px sans-serif;
height: 50px;
}
.ortho { writing-mode: vertical-rl;
width: 17px;
height: 40px;
float: left; }
.offset { margin-top: 10px;
margin-bottom: 3px; }
.start { align-self: flex-start; }
.end { align-self: flex-end; }
.lime { background: lime; }
.yellow { background: yellow; }
.orange { background: orange; }
.pink { background: pink; }
</style>
</head>
<body>
<div class="container">
<div class="lime ortho start">ortho</div><div class="yellow offset start">one line</div><div class="orange offset start">two<br>lines</div><div class="pink offset start">offset</div>
</div>
<div class="container">
<div class="lime ortho end">ortho</div><div class="yellow offset end">one line</div><div class="orange offset end">two<br>lines</div><div class="pink offset end">offset</div>
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><!-- Reference case for behavior of 'baseline' and 'last baseline' values
for align-items and align-self.
--><html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com">
<style>
.container {
display: flex;
border: 1px dashed blue;
font: 14px sans-serif;
height: 50px;
}
.start { align-self: flex-start; }
.end { align-self: flex-end; }
.offset { margin-top: 10px;
margin-bottom: 3px; }
.lime { background: lime; }
.yellow { background: yellow; }
.orange { background: orange; }
.pink { background: pink; }
</style>
</head>
<body>
<div class="container">
<div class="lime offset start">one line (first)</div><div class="yellow offset end">one line (last)</div><div class="orange offset end">two<br>lines and offset (last)</div><div class="pink offset start">offset (first)</div>
</div>
</body>
</html>

View file

@ -12,7 +12,7 @@
.flexbox {
border: 1px dashed blue;
height: 200px;
width: 560px;
width: 640px;
font-size: 10px;
line-height: 10px;
}
@ -56,6 +56,12 @@
.inherit {
background: violet;
}
.left {
background: tan;
}
.right {
background: brown;
}
</style>
</head>
<body>
@ -81,6 +87,8 @@
<div class="unspecified" style="margin-top: 95px">unspec</div>
<div class="initial" style="margin-top: 95px">initial</div>
<div class="inherit" style="margin-top: 190px">inherit</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

View file

@ -61,6 +61,14 @@
background: violet;
float: right;
}
.left {
background: tan;
float: left;
}
.right {
background: brown;
float: right;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
@ -98,10 +106,12 @@
<div class="initial">initial</div>
</div>
<div class="inherit">inherit</div>
<!-- Since that last div is floated right, the container doesn't include
its height by default. So we add some invisible hacky text (of the
<div class="left">left</div>
<div class="right">right</div>
<!-- Since the last three divs are floated, the container doesn't include
their heights by default. So we add some invisible hacky text (of the
same font) to make sure our container is tall enough. -->
<span style="visibility:hidden">hacky text</span>
<span style="visibility:hidden">hacky text<br>(line 2)<br>(line 3)</span>
</div>
</body>
</html>

View file

@ -64,6 +64,14 @@
background: violet;
float: left;
}
.left {
background: tan;
float: left;
}
.right {
background: brown;
float: right;
}
<!-- We center shrinkwrapped text by putting it into an inline-block, and
then wrapping that inline-block in a helper-div that has
@ -101,10 +109,12 @@
<div class="initial">initial</div>
</div>
<div class="inherit">inherit</div>
<!-- Since that last div is floated right, the container doesn't include
its height by default. So we add some invisible hacky text (of the
<div class="left">left</div>
<div class="right">right</div>
<!-- Since the last three divs are floated, the container doesn't include
their heights by default. So we add some invisible hacky text (of the
same font) to make sure our container is tall enough. -->
<span style="visibility:hidden">hacky text</span>
<span style="visibility:hidden">hacky text<br>(line 2)<br>(line 3)</span>
</div>
</body>
</html>

View file

@ -3,9 +3,7 @@
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><!-- In this reference case, we have inline-blocks instead of inline
flex containers. We stick an Ahem whitespace character in each
inline-block, with a customized line-height to make the baseline
end up at the bottom of the inline-block's content-box. --><html><head>
flex containers. Otherwise it's the same. --><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
@ -18,13 +16,6 @@
display: inline-block;
height: 16px;
width: 16px;
/* Each inline-block's baseline will be the baseline of the single Ahem
character that it contains. We want to set up that char such that its
baseline is at the bottom of the container's content box (since that's
the corresponding flex container's baseline). So, we use a line-height
of 20px, which gives us a baseline of 20px * 0.8 = 16px, which is the
bottom of the container's content-box -- awesome. */
line-height: 20px;
background: purple;
border: 0px dotted black;
/* (Elements that want a border will set their border-width.) */
@ -33,14 +24,12 @@
</head>
<body>
A
<!-- We have to include a character in the inline-blocks in order for them
to baseline-align; otherwise, they align the bottom of their
border-boxes. -->
<div class="flexContainer">&nbsp;</div>
<div style="padding-bottom: 20px" class="flexContainer">&nbsp;</div>
<div style="padding: 10px" class="flexContainer">&nbsp;</div>
<div style="border-width: 3px" class="flexContainer">&nbsp;</div>
<div style="border-bottom-width: 4px" class="flexContainer">&nbsp;</div>
<div class="flexContainer"></div>
<div style="padding-bottom: 20px" class="flexContainer"></div>
<div style="padding: 10px" class="flexContainer"></div>
<div style="border-width: 3px" class="flexContainer"></div>
<div style="border-bottom-width: 4px" class="flexContainer"></div>
<div style="border-bottom-width: 4px; margin: 2px" class="flexContainer"></div>
</body></html>

View file

@ -7,14 +7,22 @@
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
body {
font: 14px serif;
}
.flexContainer {
display: inline-block;
height: 16px;
width: 16px;
background: purple;
background: pink;
border: 0px dotted black;
/* (Elements that want a border will set their border-width.) */
}
.abs {
position: absolute;
top: 0;
font-size: 8px;
}
</style>
</head>
<body>
@ -24,6 +32,11 @@
<div style="padding: 10px" class="flexContainer">a</div>
<div style="border-width: 3px" class="flexContainer">a</div>
<div style="border-bottom-width: 4px" class="flexContainer">a</div>
<div style="padding: 4px" class="flexContainer">
<!-- (An abspos child shouldn't prevent us from getting our baseline from
the first flex item, which happens to be the second child.) -->
<div class="abs">abs</div>
<div style="font: 26px serif">a</div>
</body></html>
</div></body></html>

View file

@ -20,6 +20,7 @@
border-radius: 0;
border: 1px dotted green;
padding: 0;
margin: 0;
}
</style>
</head>
@ -28,7 +29,7 @@
<textarea></textarea>
</div>
<div class="flexbox" style="height: 24px">
<div class="flexbox" style="height: 22px"><!-- height of textarea's border-box -->
some words
<textarea style="float:right"></textarea>
</div>

View file

@ -99,5 +99,38 @@
<div class="a" style="margin-left: calc(40px / 6)"></div><div class="b" style="margin-left: calc(40px / 3)"></div><div class="c" style="margin-left: calc(40px / 3)"></div>
</div>
<!-- space-evenly -->
<div class="flexbox">
<div class="a" style="margin-left: 95px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: calc(140px / 3)"></div><div class="b" style="margin-left: calc(140px / 3)"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 10px"></div><div class="b" style="margin-left: 10px"></div><div class="c" style="margin-left: 10px"></div>
</div>
<!-- left -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox">
<div class="a" style="margin-left: 190px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 140px"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 40px"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -113,5 +113,38 @@
<div class="a" style="margin-left: calc(8px / 6)"></div><div style="margin-left: calc(8px / 3)"><div class="b"></div></div><div style="margin-left: calc(8px / 3)"><div class="c"></div></div>
</div>
<!-- space-evenly -->
<div class="flexbox">
<div class="a" style="margin-left: 90px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: calc(118px / 3)"></div><div style="margin-left: calc(118px / 3)"><div class="b"></div></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 2px"></div><div style="margin-left: 2px"><div class="b"></div></div><div style="margin-left: 2px"><div class="c"></div></div>
</div>
<!-- left -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox">
<div class="a" style="margin-left: 180px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 118px"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 8px"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -100,5 +100,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="margin-left: 97.5px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-left: 77.5px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-left: 55px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="margin-left: 100px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-left: 100px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-left: 100px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="margin-left: 95px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-left: 55px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-left: 10px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -112,5 +112,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="margin-left: 92.5px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-left: 66.5px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-left: 39px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="margin-left: 100px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-left: 100px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-left: 100px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="margin-left: 85px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-left: 33px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-left: -22px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -133,5 +133,56 @@
<div class="c"></div>
<div style="flex: 0.5"></div>
</div>
<!-- space-evenly -->
<!-- Center "a" here just as we did above in the "center" case. -->
<div class="centerParent">
<div class="flexbox center">
<div class="a"></div>
</div>
</div>
<!-- As above with space-around, we'll use a flex container with invisible
flexible items instead of packing space. -->
<div class="flexbox" style="display: flex">
<div style="flex: 1"></div>
<div class="a"></div>
<div style="flex: 1"></div>
<div class="b"></div>
<div style="flex: 1"></div>
</div>
<div class="flexbox" style="display: flex">
<div style="flex: 1"></div>
<div class="a"></div>
<div style="flex: 1"></div>
<div class="b"></div>
<div style="flex: 1"></div>
<div class="c"></div>
<div style="flex: 1"></div>
</div>
<!-- left -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="float:right; clear:right;">
<div class="a"></div>
</div>
<div class="flexbox" style="float:right; clear:right;">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="float:right; clear:right;">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<div style="clear:right;"></div>
</body>
</html>

View file

@ -97,5 +97,38 @@
<div class="a" style="margin-top: calc(40px / 6)"></div><div class="b" style="margin-top: calc(40px / 3)"></div><div class="c" style="margin-top: calc(40px / 3)"></div>
</div>
<!-- space-evenly -->
<div class="flexbox">
<div class="a" style="margin-top: 95px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: calc(140px / 3)"></div><div class="b" style="margin-top: calc(140px / 3)"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 10px"></div><div class="b" style="margin-top: 10px"></div><div class="c" style="margin-top: 10px"></div>
</div>
<!-- left -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -110,5 +110,38 @@
<div class="a" style="margin-top: calc(8px / 6)"></div><div style="margin-top: calc(5px + 8px / 3)"><div class="b"></div></div><div style="margin-top: calc(6px + 8px / 3)"><div class="c"></div></div>
</div>
<!-- space-evenly -->
<div class="flexbox">
<div class="a" style="margin-top: 90px"></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: calc(118px / 3)"></div><div style="margin-top: calc(5px + 118px / 3)"><div class="b"></div></div>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 2px"></div><div style="margin-top: 7px"><div class="b"></div></div><div style="margin-top: 8px"><div class="c"></div></div>
</div>
<!-- left -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -98,5 +98,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="margin-top: 97.5px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-top: 77.5px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-top: 55px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -109,5 +109,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox" style="margin-top: 92.5px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-top: 66.5px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-top: 39px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div>
</div>
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox" style="margin-top: 100px">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -97,5 +97,38 @@
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- space-evenly -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- left -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
<!-- right -->
<div class="flexbox">
<div class="a"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div>
</div>
<div class="flexbox">
<div class="a"></div><div class="b"></div><div class="c"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head><meta charset="utf-8">
<title>CSS Test Reference</title>
<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez">
<style>
.container {
display: block;
background: gray;
max-height: 200px;
}
.panel {
background: lightblue;
width: 150px;
height: 200px;
border: 1px solid purple;
box-sizing: border-box;
}
</style>
</head><body><div class="container">
<div class="panel">
</div>
</div>
</body></html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head><meta charset="utf-8">
<title>CSS Test Reference</title>
<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez">
<style>
.container {
background: gray;
height: 500px;
width: 250px;
}
.panel {
background: lightblue;
border: 1px solid purple;
height: 100px;
}
</style>
</head><body><div class="container">
<div class="panel">
</div>
<div class="panel">
</div>
</div>
</body></html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head><meta charset="utf-8">
<title>CSS Test Reference</title>
<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez">
<style>
.container {
background: gray;
height: 80px;
}
.panel {
background: lightblue;
width: 150px;
height: 80px;
}
.contents {
height: 10px;
width: 10px;
background: purple;
}
</style>
</head>
<body><div class="container">
<div class="panel">
<div class="contents"></div>
</div>
</div>
</body></html>

View file

@ -41,7 +41,7 @@
</div>
<div class="flexbox">
<img src="solidblue.png" style="margin-left: 30px"><img src="solidblue.png" style="margin-left: 60px">
<img src="support/solidblue.png" style="margin-left: 30px"><img src="support/solidblue.png" style="margin-left: 60px">
</div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flex-basis Test</title>
<link href="mailto:tomalecpub+github@gmail.com" rel="author" title="Tomek Wytrebowicz">
<style type="text/css">
.flex {
width: 200px;
height: 200px;
}
.flex > * {
background: green;
height: 200px;
width: 100px;
overflow: scroll;
display: inline-block;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
<div class="flex">
<div></div><div></div>
</div>
</body></html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flex-basis Test</title>
<link href="mailto:tomalecpub+github@gmail.com" rel="author" title="Tomek Wytrebowicz">
<style type="text/css">
.flex {
width: 200px;
height: 200px;
}
.flex > * {
background: green;
height: 100px;
width: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
<div class="flex">
<div></div><div></div>
</div>
</body></html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>Reference for negative margins</title>
<link href="https://www.google.com/" rel="author" title="Google Inc.">
<style>
.container {
width: 60px;
height: 10px;
background-color: green;
border: 3px black solid;
}
</style>
</head><body>
<p>You should see a green rectangle with a black border, 60px wide. You should see no red.</p>
<div class="container">
</div>
</body></html>

View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test Reference: flex container layout lowest order with row-reverse direction</title>
<link href="tmtysk@gmail.com" rel="author" title="tmtysk">
<link href="jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr.">
<link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk">
<link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr.">
<style>
#leftmost {
float: right;

View file

@ -1,8 +0,0 @@
<!DOCTYPE html>
<html><head><title>PASS in body, black</title>
<link href="mailto:me@gsnedders.com" rel="author" title="Geoffrey Sneddon">
<style>
.PASS {color: black;}
</style>
</head><body class="PASS">PASS
</body></html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -1136,6 +1136,22 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-align-self-baseline-horiz-006" class="">
<tr>
<td rowspan="1" title="Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.">
<a href="flexbox-align-self-baseline-horiz-006.htm">flexbox-align-self-baseline-horiz-006</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-006-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-align-self-baseline-horiz-007" class="">
<tr>
<td rowspan="1" title="Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.">
<a href="flexbox-align-self-baseline-horiz-007.htm">flexbox-align-self-baseline-horiz-007</a></td>
<td><a href="reference/flexbox-align-self-baseline-horiz-007-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-align-self-horiz-001-block" class="">
<tr>
<td rowspan="1" title="Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal flex container">
@ -2184,6 +2200,30 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-single-line-clamp-1" class="">
<tr>
<td rowspan="1" title="Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.">
<a href="flexbox-single-line-clamp-1.htm">flexbox-single-line-clamp-1</a></td>
<td><a href="reference/flexbox-single-line-clamp-1-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-single-line-clamp-2" class="">
<tr>
<td rowspan="1" title="Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.">
<a href="flexbox-single-line-clamp-2.htm">flexbox-single-line-clamp-2</a></td>
<td><a href="reference/flexbox-single-line-clamp-2-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-single-line-clamp-3" class="">
<tr>
<td rowspan="1" title="Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.">
<a href="flexbox-single-line-clamp-3.htm">flexbox-single-line-clamp-3</a></td>
<td><a href="reference/flexbox-single-line-clamp-3-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-sizing-horiz-001" class="">
<tr>
<td rowspan="1" title="Testing sizing of an auto-sized horizontal flex container with min-width and max-width constraints">
@ -4144,6 +4184,22 @@
<td rowspan="1"><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
</tr>
</tbody>
<tbody id="layout-algorithm_algo-cross-line-001" class="">
<tr>
<td rowspan="1" title="cross size determination with overflow:scroll">
<a href="layout-algorithm_algo-cross-line-001.htm">layout-algorithm_algo-cross-line-001</a></td>
<td><a href="reference/layout-algorithm_algo-cross-line-001-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="layout-algorithm_algo-cross-line-002" class="">
<tr>
<td rowspan="1" title="cross size determination with overflow:scroll">
<a href="layout-algorithm_algo-cross-line-002.htm">layout-algorithm_algo-cross-line-002</a></td>
<td><a href="reference/layout-algorithm_algo-cross-line-002-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="multi-line-wrap-reverse-column-reverse" class="">
<tr>
<td rowspan="1" title="flex container multiline wrapping-reverse in column-reverse direction.">
@ -4176,6 +4232,14 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="negative-margins-001" class="">
<tr>
<td rowspan="1" title="Negative margins">
<a href="negative-margins-001.htm">negative-margins-001</a></td>
<td><a href="reference/negative-margins-001-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="order-with-column-reverse" class="">
<tr>
<td rowspan="1" title="flex container layout lowest order with column-reverse direction">

View file

@ -138,6 +138,8 @@ flexbox-align-self-baseline-horiz-002.htm == reference/flexbox-align-self-baseli
flexbox-align-self-baseline-horiz-003.htm == reference/flexbox-align-self-baseline-horiz-003-ref.htm
flexbox-align-self-baseline-horiz-004.htm == reference/flexbox-align-self-baseline-horiz-004-ref.htm
flexbox-align-self-baseline-horiz-005.htm == reference/flexbox-align-self-baseline-horiz-005-ref.htm
flexbox-align-self-baseline-horiz-006.htm == reference/flexbox-align-self-baseline-horiz-006-ref.htm
flexbox-align-self-baseline-horiz-007.htm == reference/flexbox-align-self-baseline-horiz-007-ref.htm
flexbox-align-self-horiz-001-block.htm == reference/flexbox-align-self-horiz-001-ref.htm
flexbox-align-self-horiz-001-table.htm == reference/flexbox-align-self-horiz-001-ref.htm
flexbox-align-self-horiz-002.htm == reference/flexbox-align-self-horiz-002-ref.htm
@ -269,6 +271,9 @@ flexbox-paint-ordering-001.htm == reference/flexbox-paint-ordering-001-ref.htm
flexbox-paint-ordering-002.htm == reference/flexbox-paint-ordering-002-ref.htm
flexbox-root-node-001a.htm == reference/flexbox-root-node-001-ref.htm
flexbox-root-node-001b.htm == reference/flexbox-root-node-001-ref.htm
flexbox-single-line-clamp-1.htm == reference/flexbox-single-line-clamp-1-ref.htm
flexbox-single-line-clamp-2.htm == reference/flexbox-single-line-clamp-2-ref.htm
flexbox-single-line-clamp-3.htm == reference/flexbox-single-line-clamp-3-ref.htm
flexbox-sizing-horiz-001.htm == reference/flexbox-sizing-horiz-001-ref.htm
flexbox-sizing-horiz-002.htm == reference/flexbox-sizing-horiz-002-ref.htm
flexbox-sizing-vert-001.htm == reference/flexbox-sizing-vert-001-ref.htm
@ -514,10 +519,13 @@ justify-content-002.htm == reference/justify-content-001-ref.htm
justify-content-003.htm == reference/justify-content-001-ref.htm
justify-content-004.htm == reference/justify-content-001-ref.htm
justify-content-005.htm == reference/justify-content-001-ref.htm
layout-algorithm_algo-cross-line-001.htm == reference/layout-algorithm_algo-cross-line-001-ref.htm
layout-algorithm_algo-cross-line-002.htm == reference/layout-algorithm_algo-cross-line-002-ref.htm
multi-line-wrap-reverse-column-reverse.htm == reference/multi-line-wrap-reverse-column-reverse-ref.htm
multi-line-wrap-reverse-row-reverse.htm == reference/multi-line-wrap-reverse-row-reverse-ref.htm
multi-line-wrap-with-column-reverse.htm == reference/multi-line-wrap-with-column-reverse-ref.htm
multi-line-wrap-with-row-reverse.htm == reference/multi-line-wrap-with-row-reverse-ref.htm
negative-margins-001.htm == reference/negative-margins-001-ref.htm
order-with-column-reverse.htm == reference/order-with-column-reverse-ref.htm
order-with-row-reverse.htm == reference/order-with-row-reverse-ref.htm
regions-flexbox-001.htm == reference/regions-flexbox-001-ref.htm

Some files were not shown because too many files have changed in this diff Show more