Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8

This commit is contained in:
James Graham 2015-07-27 17:47:31 +01:00
parent 662c00a810
commit df03062d62
10934 changed files with 428309 additions and 254265 deletions

View file

@ -56,12 +56,6 @@
</td>
</tr>
</tbody>
<tbody id="s1.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#values">1.3 Values</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -170,12 +170,54 @@
<a href="http://www.w3.org/TR/css-flexbox-1/#pagination-algo">10.1 Sample Flex Fragmentation Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#example-bb213bd3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-align-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-break-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-cascade-4">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-display-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-images-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-overflow-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-position-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-pseudo-4">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-sizing-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-text-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-ui-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-values-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-writing-modes-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css21">
<!-- 0 tests -->
</tbody>
@ -185,16 +227,19 @@
<tbody id="s.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-display">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-sizing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3ui">
<tbody id="s.#biblio-css3col">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3val">
<tbody id="s.#biblio-css3ui">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-html40">
@ -290,6 +335,48 @@
<tbody id="s.#change-201403-substantive">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-algo-breaks">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-align-content-wrapping">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-clamped-specified">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-clarify">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-content">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-display-longhands">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-flexed-definite-container">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-inner-base-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-layout-vs-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-min-auto-specified-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-neither">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-substantive">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-table-wrappers">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-unclamped-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes">
<!-- 0 tests -->
</tbody>
@ -305,6 +392,9 @@
<tbody id="s.#changes-201403">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes-201409">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-abspos-items">
<!-- 0 tests -->
</tbody>
@ -353,16 +443,28 @@
<tbody id="s.#conventions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-0401c357">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-cd819179">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-f839f6c8">
<!-- 0 tests -->
</tbody>
<tbody id="s.#experimental">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<tbody id="s.#index-defined-elsewhere">
<!-- 0 tests -->
</tbody>
<tbody id="s.#issues-index">
<tbody id="s.#index-defined-here">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative">

View file

@ -42,16 +42,16 @@
<tbody id="s2.#cross-dimension">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-size">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-size-property">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-start">
<tbody id="s2.#cross_end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross_start">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#flex-container">
@ -372,16 +372,16 @@
<tbody id="s2.#main-dimension">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-size">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-size-property">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-start">
<tbody id="s2.#main_end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main_start">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Items (58 tests)</h2>
<h2>Flex Items (57 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -231,6 +231,12 @@
</td>
</tr>
</tbody>
<tbody id="s4.#example-f7107939">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#flex_level">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#table-items">
<!-- 0 tests -->
</tbody>
@ -272,25 +278,17 @@
</td>
</tr>
</tbody>
<tbody id="s4.1.#static-position-rectangle">
<tbody id="s4.1.#example-5860ae02">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#static_position-rectangle">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#item-margins">4.2 Flex Item Margins and Paddings</a></th></tr>
<!-- 3 tests -->
<tr id="flex-container-margin-4.2" class="primary">
<td><strong>
<a href="flex-container-margin.htm">flex-container-margin</a></strong></td>
<td><a href="reference/flex-container-margin-ref.htm">=</a> </td>
<td></td>
<td>flex-container-margin-not-collapse-with-content-margin
<ul class="assert">
<li>The margins of adjacent flex items do not collapse.</li>
</ul>
</td>
</tr>
<!-- 2 tests -->
<tr id="flex-margin-no-collapse-4.2" class="">
<td>
<a href="flex-margin-no-collapse.htm">flex-margin-no-collapse</a></td>
@ -423,6 +421,9 @@
<tbody id="s4.4.#collapsed-flex-item">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#example-f6817be4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#nav-about">
<!-- 0 tests -->
</tbody>
@ -572,7 +573,7 @@
<tbody id="s4.5.#min-size-opt">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#valdef-min-width-min-height-auto">
<tbody id="s4.5.#valdef-min-width-auto">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Ordering and Orientation (123 tests)</h2>
<h2>Ordering and Orientation (129 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -263,7 +263,7 @@
<tr id="ttwf-reftest-flex-direction-column-reverse-5.1" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-direction-column-reverse.htm">ttwf-reftest-flex-direction-column-reverse</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-direction-column-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.htm">=</a> </td>
<td></td>
<td>flex-direction proprety - column-reverse
<ul class="assert">
@ -284,7 +284,7 @@
</tr>
</tbody>
<tbody id="s5.1.#propdef-flex-direction">
<!-- 1 tests -->
<!-- 7 tests -->
<tr id="flex-margin-no-collapse-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flex-margin-no-collapse.htm">flex-margin-no-collapse</a></strong></td>
@ -296,6 +296,54 @@
</ul>
</td>
</tr>
<tr id="flexbox-writing-mode-001-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-001.htm">flexbox-writing-mode-001</a></strong></td>
<td><a href="reference/flexbox-writing-mode-001-ref.htm">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'
</td>
</tr>
<tr id="flexbox-writing-mode-002-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-002.htm">flexbox-writing-mode-002</a></strong></td>
<td><a href="reference/flexbox-writing-mode-002-ref.htm">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'
</td>
</tr>
<tr id="flexbox-writing-mode-003-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-003.htm">flexbox-writing-mode-003</a></strong></td>
<td><a href="reference/flexbox-writing-mode-003-ref.htm">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'
</td>
</tr>
<tr id="flexbox-writing-mode-004-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-004.htm">flexbox-writing-mode-004</a></strong></td>
<td><a href="reference/flexbox-writing-mode-004-ref.htm">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'
</td>
</tr>
<tr id="flexbox-writing-mode-005-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-005.htm">flexbox-writing-mode-005</a></strong></td>
<td><a href="reference/flexbox-writing-mode-005-ref.htm">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'
</td>
</tr>
<tr id="flexbox-writing-mode-006-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-006.htm">flexbox-writing-mode-006</a></strong></td>
<td><a href="reference/flexbox-writing-mode-006-ref.htm">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'
</td>
</tr>
</tbody>
<tbody id="s5.1.#valdef-flex-direction-column">
<!-- 0 tests -->
@ -740,7 +788,7 @@
<tr id="ttwf-reftest-flex-wrap-5.2.#propdef-flex-wrap" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-wrap.htm">ttwf-reftest-flex-wrap</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-inline-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-wrap-ref.htm">=</a> </td>
<td></td>
<td>flex-wrap proprety - wrap
<ul class="assert">
@ -802,6 +850,9 @@
</td>
</tr>
</tbody>
<tbody id="s5.3.#example-ce59c06d">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#propdef-flex-flow">
<!-- 52 tests -->
<tr id="css-box-justify-content-5.3.#propdef-flex-flow" class="">
@ -1313,7 +1364,10 @@
</td>
</tr>
</tbody>
<tbody id="s5.4.#order-modified-document-order">
<tbody id="s5.4.#example-6155594a">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#order_modified-document-order">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#propdef-order">
@ -1456,11 +1510,11 @@
</ul>
</td>
</tr>
<tr id="order_value-5.4.#propdef-order" class="primary">
<tr id="order_value-5.4.#propdef-order" class="primary script">
<td><strong>
<a href="order_value.htm">order_value</a></strong></td>
<td></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>order_check
<ul class="assert">
<li>Check if the web engine can indentify order property.</li>
@ -1488,6 +1542,9 @@
<a href="http://www.w3.org/TR/css-flexbox-1/#order-accessibility">5.4.1 Reordering and Accessibility</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#example-465c9ea3">
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -46,13 +46,19 @@
</td>
</tr>
</tbody>
<tbody id="s6.#example-c8b950d1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#example-e4bd6579">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#flex-line">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#multi-line">
<tbody id="s6.#multi_line">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#single-line">
<tbody id="s6.#single_line">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -931,9 +931,6 @@
</td>
</tr>
</tbody>
<tbody id="s7.1.#valdef-flex-auto">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#valdef-flex-flex-basis">
<!-- 0 tests -->
</tbody>
@ -946,12 +943,12 @@
<tbody id="s7.1.#valdef-flex-none">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2">
<tbody id="s7.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-common">7.2 Common Values of flex</a></th></tr>
<a href="#s7.1.1">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-common">7.1.1 Common Values of flex</a></th></tr>
<!-- 5 tests -->
<tr id="flexbox_flex-auto-7.2" class="primary">
<tr id="flexbox_flex-auto-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-auto.htm">flexbox_flex-auto</a></strong></td>
<td><a href="reference/flexbox_flex-auto-ref.htm">=</a> </td>
@ -959,7 +956,7 @@
<td>flexbox | flex: auto
</td>
</tr>
<tr id="flexbox_flex-initial-7.2" class="primary">
<tr id="flexbox_flex-initial-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-initial.htm">flexbox_flex-initial</a></strong></td>
<td><a href="reference/flexbox_flex-initial-ref.htm">=</a> </td>
@ -967,7 +964,7 @@
<td>flexbox | flex: initial
</td>
</tr>
<tr id="flexbox_flex-initial-2-7.2" class="primary">
<tr id="flexbox_flex-initial-2-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-initial-2.htm">flexbox_flex-initial-2</a></strong></td>
<td><a href="reference/flexbox_flex-initial-2-ref.htm">=</a> </td>
@ -975,7 +972,7 @@
<td>flexbox | flex: initial
</td>
</tr>
<tr id="flexbox_flex-natural-7.2" class="primary">
<tr id="flexbox_flex-natural-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-natural.htm">flexbox_flex-natural</a></strong></td>
<td><a href="reference/flexbox_flex-natural-ref.htm">=</a> </td>
@ -983,7 +980,7 @@
<td>flexbox | flex: larger integer
</td>
</tr>
<tr id="flexbox_flex-none-7.2" class="primary">
<tr id="flexbox_flex-none-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-none.htm">flexbox_flex-none</a></strong></td>
<td><a href="reference/flexbox_flex-none-ref.htm">=</a> </td>
@ -992,24 +989,24 @@
</td>
</tr>
</tbody>
<tbody id="s7.2.#flex-initial">
<tbody id="s7.1.1.#flex-initial">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3">
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-components">7.3 Components of Flexibility</a></th></tr>
<a href="#s7.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-components">7.2 Components of Flexibility</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1">
<tbody id="s7.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">7.3.1 The flex-grow property</a></th></tr>
<a href="#s7.2.1">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">7.2.1 The flex-grow property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#propdef-flex-grow">
<tbody id="s7.2.1.#propdef-flex-grow">
<!-- 13 tests -->
<tr id="autoheight-regions-in-fixed-sized-flexbox-001-7.3.1.#propdef-flex-grow" class="ahem">
<tr id="autoheight-regions-in-fixed-sized-flexbox-001-7.2.1.#propdef-flex-grow" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-001.htm">autoheight-regions-in-fixed-sized-flexbox-001</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.htm">=</a> </td>
@ -1020,7 +1017,7 @@
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-002-7.3.1.#propdef-flex-grow" class="ahem">
<tr id="autoheight-regions-in-fixed-sized-flexbox-002-7.2.1.#propdef-flex-grow" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-002.htm">autoheight-regions-in-fixed-sized-flexbox-002</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.htm">=</a> </td>
@ -1031,7 +1028,7 @@
</ul>
</td>
</tr>
<tr id="css-flexbox-img-expand-evenly-7.3.1.#propdef-flex-grow" class="primary">
<tr id="css-flexbox-img-expand-evenly-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="css-flexbox-img-expand-evenly.htm">css-flexbox-img-expand-evenly</a></strong></td>
<td><a href="reference/css-flexbox-img-expand-evenly-ref.htm">=</a> </td>
@ -1042,7 +1039,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-001-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-001-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-001.htm">flex-grow-001</a></strong></td>
<td><a href="reference/flex-grow-001-ref.htm">=</a> </td>
@ -1053,7 +1050,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-002-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-002-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-002.htm">flex-grow-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1064,7 +1061,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-003-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-003-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-003.htm">flex-grow-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1075,7 +1072,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-004-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-004-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-004.htm">flex-grow-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1086,7 +1083,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-005-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-005-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-005.htm">flex-grow-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1097,7 +1094,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-006-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-006-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-006.htm">flex-grow-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1108,7 +1105,7 @@
</ul>
</td>
</tr>
<tr id="flexbox_computedstyle_flex-grow-0-7.3.1.#propdef-flex-grow" class="primary dom">
<tr id="flexbox_computedstyle_flex-grow-0-7.2.1.#propdef-flex-grow" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-grow-0.htm">flexbox_computedstyle_flex-grow-0</a></strong></td>
<td></td>
@ -1116,7 +1113,7 @@
<td>flexbox | computed style | flex-grow: 0
</td>
</tr>
<tr id="flexbox_computedstyle_flex-grow-invalid-7.3.1.#propdef-flex-grow" class="primary dom">
<tr id="flexbox_computedstyle_flex-grow-invalid-7.2.1.#propdef-flex-grow" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-grow-invalid.htm">flexbox_computedstyle_flex-grow-invalid</a></strong></td>
<td></td>
@ -1124,7 +1121,7 @@
<td>flexbox | computed style | flex-grow: negative
</td>
</tr>
<tr id="flexbox_computedstyle_flex-grow-number-7.3.1.#propdef-flex-grow" class="primary dom">
<tr id="flexbox_computedstyle_flex-grow-number-7.2.1.#propdef-flex-grow" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-grow-number.htm">flexbox_computedstyle_flex-grow-number</a></strong></td>
<td></td>
@ -1132,7 +1129,7 @@
<td>flexbox | computed style | flex-grow: number
</td>
</tr>
<tr id="flexbox_interactive_flex-grow-transitions-7.3.1.#propdef-flex-grow" class="primary interact">
<tr id="flexbox_interactive_flex-grow-transitions-7.2.1.#propdef-flex-grow" class="primary interact">
<td><strong>
<a href="flexbox_interactive_flex-grow-transitions.htm">flexbox_interactive_flex-grow-transitions</a></strong></td>
<td></td>
@ -1141,18 +1138,18 @@
</td>
</tr>
</tbody>
<tbody id="s7.3.1.#valdef-flex-grow-number">
<tbody id="s7.2.1.#valdef-flex-grow-number">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2">
<tbody id="s7.2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">7.3.2 The flex-shrink property</a></th></tr>
<a href="#s7.2.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">7.2.2 The flex-shrink property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#propdef-flex-shrink">
<tbody id="s7.2.2.#propdef-flex-shrink">
<!-- 12 tests -->
<tr id="flex-shrink-001-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-001-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-001.htm">flex-shrink-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1163,7 +1160,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-002-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-002-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-002.htm">flex-shrink-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1174,7 +1171,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-003-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-003-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-003.htm">flex-shrink-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1185,7 +1182,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-004-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-004-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-004.htm">flex-shrink-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1196,7 +1193,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-005-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-005-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-005.htm">flex-shrink-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1207,7 +1204,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-006-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-006-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-006.htm">flex-shrink-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1218,7 +1215,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-007-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-007-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-007.htm">flex-shrink-007</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1229,7 +1226,7 @@
</ul>
</td>
</tr>
<tr id="flexbox_computedstyle_flex-shrink-0-7.3.2.#propdef-flex-shrink" class="primary dom">
<tr id="flexbox_computedstyle_flex-shrink-0-7.2.2.#propdef-flex-shrink" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-shrink-0.htm">flexbox_computedstyle_flex-shrink-0</a></strong></td>
<td></td>
@ -1237,7 +1234,7 @@
<td>flexbox | computed style | flex-shrink: 0
</td>
</tr>
<tr id="flexbox_computedstyle_flex-shrink-invalid-7.3.2.#propdef-flex-shrink" class="primary dom">
<tr id="flexbox_computedstyle_flex-shrink-invalid-7.2.2.#propdef-flex-shrink" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-shrink-invalid.htm">flexbox_computedstyle_flex-shrink-invalid</a></strong></td>
<td></td>
@ -1245,7 +1242,7 @@
<td>flexbox | computed style | flex-shrink: negative
</td>
</tr>
<tr id="flexbox_computedstyle_flex-shrink-number-7.3.2.#propdef-flex-shrink" class="primary dom">
<tr id="flexbox_computedstyle_flex-shrink-number-7.2.2.#propdef-flex-shrink" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-shrink-number.htm">flexbox_computedstyle_flex-shrink-number</a></strong></td>
<td></td>
@ -1253,7 +1250,7 @@
<td>flexbox | computed style | flex-shrink: number
</td>
</tr>
<tr id="flexbox_interactive_flex-shrink-transitions-7.3.2.#propdef-flex-shrink" class="primary interact">
<tr id="flexbox_interactive_flex-shrink-transitions-7.2.2.#propdef-flex-shrink" class="primary interact">
<td><strong>
<a href="flexbox_interactive_flex-shrink-transitions.htm">flexbox_interactive_flex-shrink-transitions</a></strong></td>
<td></td>
@ -1261,7 +1258,7 @@
<td>flexbox | transitioned flex-shrink
</td>
</tr>
<tr id="flexbox_interactive_flex-shrink-transitions-invalid-7.3.2.#propdef-flex-shrink" class="primary interact">
<tr id="flexbox_interactive_flex-shrink-transitions-invalid-7.2.2.#propdef-flex-shrink" class="primary interact">
<td><strong>
<a href="flexbox_interactive_flex-shrink-transitions-invalid.htm">flexbox_interactive_flex-shrink-transitions-invalid</a></strong></td>
<td></td>
@ -1270,15 +1267,15 @@
</td>
</tr>
</tbody>
<tbody id="s7.3.2.#valdef-flex-shrink-number">
<tbody id="s7.2.2.#valdef-flex-shrink-number">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3">
<tbody id="s7.2.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">7.3.3 The flex-basis property</a></th></tr>
<a href="#s7.2.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">7.2.3 The flex-basis property</a></th></tr>
<!-- 10 tests -->
<tr id="flexbox_computedstyle_flex-basis-0-7.3.3" class="primary dom">
<tr id="flexbox_computedstyle_flex-basis-0-7.2.3" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-basis-0.htm">flexbox_computedstyle_flex-basis-0</a></strong></td>
<td></td>
@ -1286,7 +1283,7 @@
<td>flexbox | computed style | flex-basis: 0
</td>
</tr>
<tr id="flexbox_computedstyle_flex-basis-0percent-7.3.3" class="primary dom">
<tr id="flexbox_computedstyle_flex-basis-0percent-7.2.3" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-basis-0percent.htm">flexbox_computedstyle_flex-basis-0percent</a></strong></td>
<td></td>
@ -1294,7 +1291,7 @@
<td>flexbox | computed style | flex-basis: 0%
</td>
</tr>
<tr id="flexbox_computedstyle_flex-basis-auto-7.3.3" class="primary dom">
<tr id="flexbox_computedstyle_flex-basis-auto-7.2.3" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-basis-auto.htm">flexbox_computedstyle_flex-basis-auto</a></strong></td>
<td></td>
@ -1302,7 +1299,7 @@
<td>flexbox | computed style | flex-basis: auto
</td>
</tr>
<tr id="flexbox_computedstyle_flex-basis-percent-7.3.3" class="primary dom">
<tr id="flexbox_computedstyle_flex-basis-percent-7.2.3" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-basis-percent.htm">flexbox_computedstyle_flex-basis-percent</a></strong></td>
<td></td>
@ -1310,7 +1307,7 @@
<td>flexbox | computed style | flex-basis: percent
</td>
</tr>
<tr id="flexbox_flex-basis-7.3.3" class="primary">
<tr id="flexbox_flex-basis-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-basis.htm">flexbox_flex-basis</a></strong></td>
<td><a href="reference/flexbox_flex-basis-ref.htm">=</a> </td>
@ -1318,7 +1315,7 @@
<td>flexbox | flex-basis: percentage
</td>
</tr>
<tr id="flexbox_flex-basis-shrink-7.3.3" class="primary">
<tr id="flexbox_flex-basis-shrink-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-basis-shrink.htm">flexbox_flex-basis-shrink</a></strong></td>
<td><a href="reference/flexbox_flex-basis-shrink-ref.htm">=</a> </td>
@ -1326,7 +1323,7 @@
<td>flexbox | flex-basis: percentage, flex-shrink: +integer
</td>
</tr>
<tr id="flexbox_flex-natural-mixed-basis-7.3.3" class="primary">
<tr id="flexbox_flex-natural-mixed-basis-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-natural-mixed-basis.htm">flexbox_flex-natural-mixed-basis</a></strong></td>
<td><a href="reference/flexbox_flex-natural-mixed-basis-ref.htm">=</a> </td>
@ -1334,7 +1331,7 @@
<td>flexbox | flex: larger integer, mixed basis
</td>
</tr>
<tr id="flexbox_flex-natural-mixed-basis-auto-7.3.3" class="primary">
<tr id="flexbox_flex-natural-mixed-basis-auto-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-natural-mixed-basis-auto.htm">flexbox_flex-natural-mixed-basis-auto</a></strong></td>
<td><a href="reference/flexbox_flex-natural-mixed-basis-auto-ref.htm">=</a> </td>
@ -1342,7 +1339,7 @@
<td>flexbox | flex: larger integer, mixed basis, auto
</td>
</tr>
<tr id="flexbox_flex-natural-variable-auto-basis-7.3.3" class="primary">
<tr id="flexbox_flex-natural-variable-auto-basis-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-natural-variable-auto-basis.htm">flexbox_flex-natural-variable-auto-basis</a></strong></td>
<td><a href="reference/flexbox_flex-natural-variable-auto-basis-ref.htm">=</a> </td>
@ -1350,7 +1347,7 @@
<td>flexbox | flex: larger integer, auto basis
</td>
</tr>
<tr id="flexbox_interactive_flex-basis-transitions-7.3.3" class="primary interact">
<tr id="flexbox_interactive_flex-basis-transitions-7.2.3" class="primary interact">
<td><strong>
<a href="flexbox_interactive_flex-basis-transitions.htm">flexbox_interactive_flex-basis-transitions</a></strong></td>
<td></td>
@ -1359,12 +1356,15 @@
</td>
</tr>
</tbody>
<tbody id="s7.3.3.#issue-753aff05">
<tbody id="s7.2.3.#auto">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#propdef-flex-basis">
<tbody id="s7.2.3.#content">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#propdef-flex-basis">
<!-- 9 tests -->
<tr id="flex-basis-001-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-001-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-001.htm">flex-basis-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1375,7 +1375,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-002-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-002-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-002.htm">flex-basis-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1386,7 +1386,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-003-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-003-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-003.htm">flex-basis-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1397,7 +1397,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-004-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-004-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-004.htm">flex-basis-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1408,7 +1408,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-005-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-005-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-005.htm">flex-basis-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1419,7 +1419,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-006-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-006-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-006.htm">flex-basis-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1430,7 +1430,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-007-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-007-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-007.htm">flex-basis-007</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1441,7 +1441,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-008-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-008-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-008.htm">flex-basis-008</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
@ -1452,7 +1452,7 @@
</ul>
</td>
</tr>
<tr id="flexbox_flex-natural-variable-zero-basis-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flexbox_flex-natural-variable-zero-basis-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flexbox_flex-natural-variable-zero-basis.htm">flexbox_flex-natural-variable-zero-basis</a></strong></td>
<td><a href="reference/flexbox_flex-natural-variable-zero-basis-ref.htm">=</a> </td>
@ -1461,9 +1461,6 @@
</td>
</tr>
</tbody>
<tbody id="s7.3.3.#valdef-flex-basis-main-size">
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -101,6 +101,12 @@
<tbody id="s8.1.#auto-bar">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-30f9440a">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-c2f4f7f3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#login">
<!-- 0 tests -->
</tbody>
@ -1282,19 +1288,19 @@
<tbody id="s8.3.#stretched">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-baseline">
<tbody id="s8.3.#valdef-align-items-baseline">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-center">
<tbody id="s8.3.#valdef-align-items-center">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-flex-end">
<tbody id="s8.3.#valdef-align-items-flex-end">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-flex-start">
<tbody id="s8.3.#valdef-align-items-flex-start">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-stretch">
<tbody id="s8.3.#valdef-align-items-stretch">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-self-auto">
@ -1586,7 +1592,7 @@
<a href="ttwf-reftest-flex-align-content-center.htm">ttwf-reftest-flex-align-content-center</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-center-ref.htm">=</a> </td>
<td></td>
<td>align-content proprety - center
<td>align-content property - center
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1597,7 +1603,7 @@
<a href="ttwf-reftest-flex-align-content-end.htm">ttwf-reftest-flex-align-content-end</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
<td></td>
<td>align-content proprety - flex-end
<td>align-content property - flex-end
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1606,9 +1612,9 @@
<tr id="ttwf-reftest-flex-align-content-space-around-8.4" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-align-content-space-around.htm">ttwf-reftest-flex-align-content-space-around</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.htm">=</a> </td>
<td></td>
<td>align-content proprety - flex-end
<td>align-content property - space-around
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1617,9 +1623,9 @@
<tr id="ttwf-reftest-flex-align-content-space-between-8.4" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-align-content-space-between.htm">ttwf-reftest-flex-align-content-space-between</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.htm">=</a> </td>
<td></td>
<td>align-content proprety - flex-end
<td>align-content property - space-between
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1628,9 +1634,9 @@
<tr id="ttwf-reftest-flex-align-content-start-8.4" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-align-content-start.htm">ttwf-reftest-flex-align-content-start</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-start-ref.htm">=</a> </td>
<td></td>
<td>align-content proprety - flex-end
<td>align-content property - flex-start
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1776,10 +1782,10 @@
</td>
</tr>
</tbody>
<tbody id="s8.5.#cross-axis-baseline">
<tbody id="s8.5.#cross_axis-baseline">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#main-axis-baseline">
<tbody id="s8.5.#main_axis-baseline">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Layout Algorithm (58 tests)</h2>
<h2>Flex Layout Algorithm (61 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -31,7 +31,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s9">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">9 Flex Layout Algorithm</a></th></tr>
<!-- 46 tests -->
<!-- 49 tests -->
<tr id="autoheight-flexbox-001-9" class="">
<td>
<a href="autoheight-flexbox-001.htm">autoheight-flexbox-001</a></td>
@ -447,6 +447,30 @@
<td>Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints
</td>
</tr>
<tr id="flexbox-writing-mode-007-9" class="primary">
<td><strong>
<a href="flexbox-writing-mode-007.htm">flexbox-writing-mode-007</a></strong></td>
<td><a href="reference/flexbox-writing-mode-007-ref.htm">=</a> </td>
<td></td>
<td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
</td>
</tr>
<tr id="flexbox-writing-mode-008-9" class="primary">
<td><strong>
<a href="flexbox-writing-mode-008.htm">flexbox-writing-mode-008</a></strong></td>
<td><a href="reference/flexbox-writing-mode-008-ref.htm">=</a> </td>
<td></td>
<td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
</td>
</tr>
<tr id="flexbox-writing-mode-009-9" class="primary">
<td><strong>
<a href="flexbox-writing-mode-009.htm">flexbox-writing-mode-009</a></strong></td>
<td><a href="reference/flexbox-writing-mode-009-ref.htm">=</a> </td>
<td></td>
<td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
</td>
</tr>
<tr id="row-flexbox-break-9" class="ahem">
<td>
<a href="row-flexbox-break.htm">row-flexbox-break</a></td>
@ -486,6 +510,9 @@
<tbody id="s9.2.#algo-main-item">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#example-5ea64ac4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#flex-base-size">
<!-- 0 tests -->
</tbody>
@ -690,16 +717,16 @@
<a href="http://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes">9.9 Intrinsic Sizes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#max-content-cross-size">
<tbody id="s9.9.#max_content-cross-size">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#max-content-main-size">
<tbody id="s9.9.#max_content-main-size">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#min-content-cross-size">
<tbody id="s9.9.#min_content-cross-size">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#min-content-main-size">
<tbody id="s9.9.#min_content-main-size">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu">
<link href="http://dev.w3.org/csswg/css-flexbox-1/#item-margins" rel="help">
<link href="reference/flex-container-margin-ref.htm" rel="match">
<meta content="The margins of adjacent flex items do not collapse." name="assert">
<style>
.flex-container{
display: flex;
margin:20px;
background: #333;
}
.flex-item{
width:50px;
height:50px;
margin:20px;
background: #eee;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body></html>

View file

@ -21,6 +21,7 @@
width: 100px;
height: 100px;
background-color: green;
flex: none;
}
#box1 {
@ -49,4 +50,5 @@
<div class="box" id="box2"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help">
<link href="reference/flexbox-writing-mode-001-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: ltr;
writing-mode: horizontal-tb;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help">
<link href="reference/flexbox-writing-mode-002-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: ltr;
writing-mode: vertical-rl;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help">
<link href="reference/flexbox-writing-mode-003-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: ltr;
writing-mode: vertical-lr;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help">
<link href="reference/flexbox-writing-mode-004-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: horizontal-tb;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help">
<link href="reference/flexbox-writing-mode-005-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: vertical-rl;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help">
<link href="reference/flexbox-writing-mode-006-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: vertical-lr;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help">
<link href="reference/flexbox-writing-mode-007-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
writing-mode: horizontal-tb;
flex-flow: row wrap;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
/* Classes applied to flex container, to customize its children
* (which should not affect their sizing):
*/
.kids_horizontal_tb > * {
writing-mode: horizontal-tb;
}
.kids_vertical_lr > * {
writing-mode: vertical-lr;
}
.kids_vertical_rl > * {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_horizontal_tb">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_lr">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_rl">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help">
<link href="reference/flexbox-writing-mode-008-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
writing-mode: vertical-lr;
flex-flow: row wrap;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
/* Classes applied to flex container, to customize its children
* (which should not affect their sizing):
*/
.kids_horizontal_tb > * {
writing-mode: horizontal-tb;
}
.kids_vertical_lr > * {
writing-mode: vertical-lr;
}
.kids_vertical_rl > * {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_horizontal_tb">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_lr">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_rl">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help">
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help">
<link href="reference/flexbox-writing-mode-009-ref.htm" rel="match">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
writing-mode: vertical-rl;
flex-flow: row wrap;
}
.flexContainer > * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
/* Classes applied to flex container, to customize its children
* (which should not affect their sizing):
*/
.kids_horizontal_tb > * {
writing-mode: horizontal-tb;
}
.kids_vertical_lr > * {
writing-mode: vertical-lr;
}
.kids_vertical_rl > * {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_horizontal_tb">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_lr">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_rl">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -16,8 +16,8 @@
order: -1;
}
</style>
<script src='/resources/testharness.js"'></script>
<script src='/resources/testharnessreport.js"'></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>

View file

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu">
<style>
.flex-container{
display:block;
margin:20px;
background: #333;
line-height: 0px;
}
.flex-item{
display: inline-block;
width:50px;
height:50px;
margin:20px 20px;
background: #eee;
}
.flex-item.first{
margin-left:20px;
}
.flex-item.last{
margin-right: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: horizontal-tb; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: vertical-rl; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: vertical-lr; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: horizontal-tb; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: vertical-rl; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: vertical-lr; */
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
</body></html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<meta charset="utf-8">
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer > * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
</body></html>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - center</title>
<title>CSS Flexible Box Test: align-content property - center</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
.container {
@ -26,7 +26,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table.</p>
<p>The test passed if you see a centered 2*2 table.</p>
<div class="container">
<span>first</span>
<span>second</span>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - flex-end</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
.container {

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content property - space-between</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
.container {
position: relative;
height: 14em;
width: 20em;
background: red;
margin: 1em;
border: 1px solid black;
}
.first, .second {
margin-bottom: 112px;
}
span {
height: 2em;
display: inline-block;
background: green;
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p>
<div class="container">
<span class="first">first</span>
<span class="second">second</span>
<span>third</span>
<span>forth</span>
</div>
</body></html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content property - flex-start</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
.container {
position: relative;
height: 14em;
width: 20em;
background: red;
margin: 1em;
border: 1px solid black;
}
span {
height: 2em;
display: inline-block;
background: green;
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p>
<div class="container">
<span>first</span>
<span>second</span>
<span>third</span>
<span>forth</span>
</div>
</body></html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
be visible in the case of failure */
.container {
position: relative;
background: red;
margin: 1em 0;
border: 1px solid black;
}
span ~ span {
margin: 2em 1em 1em;
}
span {
display: block;
background: green;
color: white;
margin: 1em;
width: 8em;
}
</style>
</head>
<body>
<p>The test passed if you see all the cells are arraged vertically and reversed.</p>
<div class="container">
<span>forth</span>
<span>third</span>
<span>second</span>
<span>first</span>
</div>
</body></html>

View file

@ -6,7 +6,6 @@
.container {
position: relative;
display: flex;
flex-direction: row-reverse;
background: red;
margin: 1em 0;
border: 1px solid black;

View file

@ -1,26 +1,35 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: display proprety - inline-flex</title>
<title>CSS Flexible Box Test: flex-wrap proprety - wrap</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
be visible in the case of failure */
.container {
position: relative;
background: red;
margin: 1em 0;
border: 1px solid black;
width: 20em;
height: 6.5em;
}
.greenSquare {
span {
display: inline-block;
margin-top: -200px;
background: green;
}
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a green block which its text is 'Success!
'.</p>
<p>The test passed if you see a 2 * 2 table on the page.</p>
<div class="container">
<!-- This is the square that should not be visible if the test passes -->
<div class="greenSquare">Success!</div>
<span>first</span>
<span>second</span>
<span>third</span>
<span>forth</span>
</div>

View file

@ -584,14 +584,6 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-container-margin" class="">
<tr>
<td rowspan="1" title="flex-container-margin-not-collapse-with-content-margin">
<a href="flex-container-margin.htm">flex-container-margin</a></td>
<td><a href="reference/flex-container-margin-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-direction" class="">
<tr>
<td rowspan="1" title="flex flow direction">
@ -2056,6 +2048,78 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-001" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'">
<a href="flexbox-writing-mode-001.htm">flexbox-writing-mode-001</a></td>
<td><a href="reference/flexbox-writing-mode-001-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-002" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'">
<a href="flexbox-writing-mode-002.htm">flexbox-writing-mode-002</a></td>
<td><a href="reference/flexbox-writing-mode-002-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-003" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'">
<a href="flexbox-writing-mode-003.htm">flexbox-writing-mode-003</a></td>
<td><a href="reference/flexbox-writing-mode-003-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-004" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'">
<a href="flexbox-writing-mode-004.htm">flexbox-writing-mode-004</a></td>
<td><a href="reference/flexbox-writing-mode-004-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-005" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'">
<a href="flexbox-writing-mode-005.htm">flexbox-writing-mode-005</a></td>
<td><a href="reference/flexbox-writing-mode-005-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-006" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'">
<a href="flexbox-writing-mode-006.htm">flexbox-writing-mode-006</a></td>
<td><a href="reference/flexbox-writing-mode-006-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-007" class="">
<tr>
<td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
<a href="flexbox-writing-mode-007.htm">flexbox-writing-mode-007</a></td>
<td><a href="reference/flexbox-writing-mode-007-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-008" class="">
<tr>
<td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
<a href="flexbox-writing-mode-008.htm">flexbox-writing-mode-008</a></td>
<td><a href="reference/flexbox-writing-mode-008-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-009" class="">
<tr>
<td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
<a href="flexbox-writing-mode-009.htm">flexbox-writing-mode-009</a></td>
<td><a href="reference/flexbox-writing-mode-009-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox_absolute-atomic" class="">
<tr>
<td rowspan="1" title="flexbox | abspos atomic flexitems">
@ -3802,7 +3866,7 @@
</tbody>
<tbody id="ttwf-reftest-flex-align-content-center" class="">
<tr>
<td rowspan="1" title="align-content proprety - center">
<td rowspan="1" title="align-content property - center">
<a href="ttwf-reftest-flex-align-content-center.htm">ttwf-reftest-flex-align-content-center</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-center-ref.htm">=</a> </td>
<td rowspan="1"></td>
@ -3810,7 +3874,7 @@
</tbody>
<tbody id="ttwf-reftest-flex-align-content-end" class="">
<tr>
<td rowspan="1" title="align-content proprety - flex-end">
<td rowspan="1" title="align-content property - flex-end">
<a href="ttwf-reftest-flex-align-content-end.htm">ttwf-reftest-flex-align-content-end</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
<td rowspan="1"></td>
@ -3818,25 +3882,25 @@
</tbody>
<tbody id="ttwf-reftest-flex-align-content-space-around" class="">
<tr>
<td rowspan="1" title="align-content proprety - flex-end">
<td rowspan="1" title="align-content property - space-around">
<a href="ttwf-reftest-flex-align-content-space-around.htm">ttwf-reftest-flex-align-content-space-around</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="ttwf-reftest-flex-align-content-space-between" class="">
<tr>
<td rowspan="1" title="align-content proprety - flex-end">
<td rowspan="1" title="align-content property - space-between">
<a href="ttwf-reftest-flex-align-content-space-between.htm">ttwf-reftest-flex-align-content-space-between</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="ttwf-reftest-flex-align-content-start" class="">
<tr>
<td rowspan="1" title="align-content proprety - flex-end">
<td rowspan="1" title="align-content property - flex-start">
<a href="ttwf-reftest-flex-align-content-start.htm">ttwf-reftest-flex-align-content-start</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-start-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
@ -3860,7 +3924,7 @@
<tr>
<td rowspan="1" title="flex-direction proprety - column-reverse">
<a href="ttwf-reftest-flex-direction-column-reverse.htm">ttwf-reftest-flex-direction-column-reverse</a></td>
<td><a href="reference/ttwf-reftest-flex-direction-column-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
@ -3884,7 +3948,7 @@
<tr>
<td rowspan="1" title="flex-wrap proprety - wrap">
<a href="ttwf-reftest-flex-wrap.htm">ttwf-reftest-flex-wrap</a></td>
<td><a href="reference/ttwf-reftest-flex-inline-ref.htm">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-wrap-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>

View file

@ -69,7 +69,6 @@ flex-basis-006.htm == reference/ref-filled-green-100px-square.htm
flex-basis-007.htm == reference/ref-filled-green-100px-square.htm
flex-basis-008.htm == reference/ref-filled-green-100px-square.htm
flex-box-wrap.htm == reference/flex-box-wrap-ref.htm
flex-container-margin.htm == reference/flex-container-margin-ref.htm
flex-direction.htm == reference/flex-direction.htm
flex-direction-modify.htm == reference/flex-direction-modify.htm
flex-direction-with-element-insert.htm == reference/flex-direction-with-element-insert.htm
@ -253,6 +252,15 @@ flexbox-whitespace-handling-002.htm == reference/flexbox-whitespace-handling-002
flexbox-with-pseudo-elements-001.htm == reference/flexbox-with-pseudo-elements-001-ref.htm
flexbox-with-pseudo-elements-002.htm == reference/flexbox-with-pseudo-elements-002-ref.htm
flexbox-with-pseudo-elements-003.htm == reference/flexbox-with-pseudo-elements-003-ref.htm
flexbox-writing-mode-001.htm == reference/flexbox-writing-mode-001-ref.htm
flexbox-writing-mode-002.htm == reference/flexbox-writing-mode-002-ref.htm
flexbox-writing-mode-003.htm == reference/flexbox-writing-mode-003-ref.htm
flexbox-writing-mode-004.htm == reference/flexbox-writing-mode-004-ref.htm
flexbox-writing-mode-005.htm == reference/flexbox-writing-mode-005-ref.htm
flexbox-writing-mode-006.htm == reference/flexbox-writing-mode-006-ref.htm
flexbox-writing-mode-007.htm == reference/flexbox-writing-mode-007-ref.htm
flexbox-writing-mode-008.htm == reference/flexbox-writing-mode-008-ref.htm
flexbox-writing-mode-009.htm == reference/flexbox-writing-mode-009-ref.htm
flexbox_absolute-atomic.htm == reference/flexbox_absolute-atomic-ref.htm
flexbox_align-content-center.htm == reference/flexbox_align-content-center-ref.htm
flexbox_align-content-flexend.htm == reference/flexbox_align-content-flexend-ref.htm
@ -473,14 +481,14 @@ regions-flexbox-004.htm == reference/regions-flexbox-002-ref.htm
row-flexbox-break.htm == reference/row-flexbox-break-ref.htm
ttwf-reftest-flex-align-content-center.htm == reference/ttwf-reftest-flex-align-content-center-ref.htm
ttwf-reftest-flex-align-content-end.htm == reference/ttwf-reftest-flex-align-content-end-ref.htm
ttwf-reftest-flex-align-content-space-around.htm == reference/ttwf-reftest-flex-align-content-end-ref.htm
ttwf-reftest-flex-align-content-space-between.htm == reference/ttwf-reftest-flex-align-content-end-ref.htm
ttwf-reftest-flex-align-content-start.htm == reference/ttwf-reftest-flex-align-content-end-ref.htm
ttwf-reftest-flex-align-content-space-around.htm == reference/ttwf-reftest-flex-align-content-space-around-ref.htm
ttwf-reftest-flex-align-content-space-between.htm == reference/ttwf-reftest-flex-align-content-space-between-ref.htm
ttwf-reftest-flex-align-content-start.htm == reference/ttwf-reftest-flex-align-content-start-ref.htm
ttwf-reftest-flex-base.htm == reference/ttwf-reftest-flex-base-ref.htm
ttwf-reftest-flex-direction-column.htm == reference/ttwf-reftest-flex-direction-column-ref.htm
ttwf-reftest-flex-direction-column-reverse.htm == reference/ttwf-reftest-flex-direction-column-ref.htm
ttwf-reftest-flex-direction-column-reverse.htm == reference/ttwf-reftest-flex-direction-column-reverse-ref.htm
ttwf-reftest-flex-direction-row-reverse.htm == reference/ttwf-reftest-flex-direction-row-reverse-ref.htm
ttwf-reftest-flex-order.htm == reference/ttwf-reftest-flex-order-ref.htm
ttwf-reftest-flex-wrap.htm == reference/ttwf-reftest-flex-inline-ref.htm
ttwf-reftest-flex-wrap.htm == reference/ttwf-reftest-flex-wrap-ref.htm
ttwf-reftest-flex-wrap-reverse.htm == reference/ttwf-reftest-flex-wrap-reverse-ref.htm
visibility-regions-in-flexbox.htm == reference/visibility-regions-in-flexbox-ref.htm

View file

@ -37,12 +37,12 @@
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
Flex Items</a></th>
<td>(58 Tests)</td></tr>
<td>(57 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.htm">Chapter 5 -
Ordering and Orientation</a></th>
<td>(123 Tests)</td></tr>
<td>(129 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.htm">Chapter 6 -
@ -62,7 +62,7 @@
<tbody id="s9">
<tr><th><a href="chapter-9.htm">Chapter 9 -
Flex Layout Algorithm</a></th>
<td>(58 Tests)</td></tr>
<td>(61 Tests)</td></tr>
</tbody>
<tbody id="s10">
<tr><th><a href="chapter-10.htm">Chapter 10 -

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - center</title>
<title>CSS Flexible Box Test: align-content property - center</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help">
<link href="reference/ttwf-reftest-flex-align-content-center-ref.htm" rel="match">
@ -29,7 +29,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table.</p>
<p>The test passed if you see a centered 2*2 table.</p>
<div class="container">
<span>first</span>
<span>second</span>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - flex-end</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help">
<link href="reference/ttwf-reftest-flex-align-content-end-ref.htm" rel="match">

View file

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - space-around</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help">
<link href="reference/ttwf-reftest-flex-align-content-end-ref.htm" rel="match">
<link href="reference/ttwf-reftest-flex-align-content-space-around-ref.htm" rel="match">
<meta content="Statement describing what the test case is asserting" name="assert">
<style type="text/css">
.container {

View file

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - space-between</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help">
<link href="reference/ttwf-reftest-flex-align-content-end-ref.htm" rel="match">
<link href="reference/ttwf-reftest-flex-align-content-space-between-ref.htm" rel="match">
<meta content="Statement describing what the test case is asserting" name="assert">
<style type="text/css">
.container {
@ -29,7 +29,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p>
<p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p>
<div class="container">
<span>first</span>
<span>second</span>

View file

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - flex-start</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help">
<link href="reference/ttwf-reftest-flex-align-content-end-ref.htm" rel="match">
<link href="reference/ttwf-reftest-flex-align-content-start-ref.htm" rel="match">
<meta content="Statement describing what the test case is asserting" name="assert">
<style type="text/css">
.container {
@ -29,7 +29,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p>
<p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p>
<div class="container">
<span>first</span>
<span>second</span>

View file

@ -3,7 +3,7 @@
<title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help">
<link href="reference/ttwf-reftest-flex-direction-column-ref.htm" rel="match">
<link href="reference/ttwf-reftest-flex-direction-column-reverse-ref.htm" rel="match">
<meta content="Statement describing what the test case is asserting" name="assert">
<style type="text/css">
/* Positioned container allows for the self-describing statement to still

View file

@ -3,7 +3,7 @@
<title>CSS Flexible Box Test: flex-wrap proprety - wrap</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap" rel="help">
<link href="reference/ttwf-reftest-flex-inline-ref.htm" rel="match">
<link href="reference/ttwf-reftest-flex-wrap-ref.htm" rel="match">
<meta content="Statement describing what the test case is asserting" name="assert">
<style type="text/css">
/* Positioned container allows for the self-describing statement to still

View file

@ -79,7 +79,6 @@ flex-basis-006 reference/ref-filled-green-100px-square flex-basis - 0% http://w
flex-basis-007 reference/ref-filled-green-100px-square flex-basis - auto http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis 2d1b30c5b772e87ba0ccb74ab319a3fe20cb2c06 `http://www.intel.com`<Intel>,`mailto:shiyoux.tan@intel.com`<Intel> The 'flex-basis' property set 'auto', the actual width of tested element same as the value which specified by width property.
flex-basis-008 reference/ref-filled-green-100px-square flex-basis - 50% http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis 09979a1d088a61b54658fb8c6c0cf2c5f8fcf23a `http://www.intel.com`<Intel>,`mailto:shiyoux.tan@intel.com`<Intel> The 'flex-basis' property set positive percentage, the actual width of tested element same as the percentage of flex container size.
flex-box-wrap reference/flex-box-wrap-ref flex-wrap: wrap http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap 9d6a4d6440cb23bae63e478580d061d47ffba194 `Tsuyoshi Tokuda`<mailto:tokuda109@gmail.com> the test passes if you see green box.
flex-container-margin reference/flex-container-margin-ref flex-container-margin-not-collapse-with-content-margin http://dev.w3.org/csswg/css-flexbox-1/#item-margins 2fa6965403b2eaad6903e8bd8e8925ac5ed49739 `houzhenyu`<http://www.github.com/sskyy> The margins of adjacent flex items do not collapse.
flex-direction reference/flex-direction flex flow direction http://www.w3.org/TR/css-flexbox-1/#flex-direction a766d53d70193da1a751a9b50c249bdbfad42047 `houzhenyu`<http://www.github.com/sskyy> The flow of flex items in the the flex container should observe the flex-direction property.
flex-direction-column-reverse flex-direction: column-reverse swaps main start and end directions http://www.w3.org/TR/css-flexbox-1/#flex-direction 4e5f9ded45793abc3c57aa37fd7a18a10c394a34 `Sylvain Galineau`<mailto:galineau@adobe.com> This test checks that column-reverse flex-direction swaps the main start and main end directions
flex-direction-modify reference/flex-direction-modify flex flow direction http://www.w3.org/TR/css-flexbox-1/#flex-direction 3b720e9b64459c43328b05d707190079a2faf3d4 `houzhenyu`<http://www.github.com/sskyy> Changing 'flex-direction' with JavaScript and then changing it back should returns to the original look.
@ -112,7 +111,7 @@ flex-grow-004 reference/ref-filled-green-100px-square flex-grow - (invalid when
flex-grow-005 reference/ref-filled-green-100px-square flex-grow - (invalid when applied to flex container) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow 5786ab49011d6f7284919bd24df40f082c55e64d `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The 'flex-grow' property is invalid when the property applied to flex container.
flex-grow-006 reference/ref-filled-green-100px-square flex-grow - positive number(fill all space) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow f8b3290012a57cf47c520f716c3c50a4e02eba55 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> Test checks that all space of flex container will be filled when there is only one flex item and 'flex-grow' set any positive number.
flex-items-flexibility reference/flex-items-flexibility CSS Flex-basis Test http://www.w3.org/TR/css-flexbox-1/#flexibility 6bada7cc61f1b3adac7354992455b59cff76478e `Chunsheng Zhang`<mailto:zhangcs_423@163.com> flex items flexibility
flex-margin-no-collapse reference/flex-margin-no-collapse-ref flex item margins http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction,http://www.w3.org/TR/css-flexbox-1/#item-margins 37bc5797499c028f35865fccd13c80ad82260ced `Ping Huang`<mailto:phuangce@gmail.com> The vertical gap between two green boxs should be 100px.
flex-margin-no-collapse reference/flex-margin-no-collapse-ref flex item margins http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction,http://www.w3.org/TR/css-flexbox-1/#item-margins 96231d68de1fe051b06e793d659a813a53a91ed9 `Ping Huang`<mailto:phuangce@gmail.com> The vertical gap between two green boxs should be 100px.
flex-order reference/flex-order-ref flex order http://www.w3.org/TR/css-flexbox-1/#order-property bf51cba5b8e6bd78dbbf772b53f2a1170abcb6aa `Mitsuteru Sawa`<mailto:mitsuteru.s@gmail.com> ordered flex items should ordered properly
flex-shrink-001 reference/ref-filled-green-100px-square flex-shrink - number(positive) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink f27d600fc7863c3d4c3fc3b4e4bc8cc7f58cdbae `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property set positive number determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed
flex-shrink-002 reference/ref-filled-green-100px-square flex-shrink - number(negative) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink 49884ece59d09eb5cd9a4d9228d62478cdaf3179 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property set negative is invalid to shrink flex items when negative free space is distributed
@ -277,6 +276,15 @@ flexbox-whitespace-handling-002 reference/flexbox-whitespace-handling-002-ref Te
flexbox-with-pseudo-elements-001 reference/flexbox-with-pseudo-elements-001-ref Testing that generated content nodes are treated as a flex items http://www.w3.org/TR/css-flexbox-1/#flex-items 840f23805278348fabc43767fbda8357c1e58b8a `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-with-pseudo-elements-002 reference/flexbox-with-pseudo-elements-002-ref Testing that generated content nodes are treated as a flex items, and honor 'order' http://www.w3.org/TR/css-flexbox-1/#flex-items 1131841b5d5f11eac2b9e81fc6f4358d418a6f2f `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-with-pseudo-elements-003 reference/flexbox-with-pseudo-elements-003-ref Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item http://www.w3.org/TR/css-flexbox-1/#flex-items 58e927b1ff3432b60ab48838cd47f1ec1b3fd0d2 `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-001 reference/flexbox-writing-mode-001-ref Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb' http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction a8724a8de3bd951d06e289fb86dbadc70a885d22 `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-002 reference/flexbox-writing-mode-002-ref Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl' http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction 0952e87b8e95154bbb469d828c79b8c7e02df63b `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-003 reference/flexbox-writing-mode-003-ref Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr' http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction c64a448ab00761be9fc61d430a293f990e0b26ca `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-004 reference/flexbox-writing-mode-004-ref Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb' http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction 7a76373f9e4463a60d455d60458eb4c96228a8a9 `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-005 reference/flexbox-writing-mode-005-ref Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl' http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction c3e3b5768870e7b43b47714a41ea9014831b1f3a `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-006 reference/flexbox-writing-mode-006-ref Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr' http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction f31aad810265610875f37bfd2499c838362e8b87 `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-007 reference/flexbox-writing-mode-007-ref Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode http://www.w3.org/TR/css-flexbox-1/#layout-algorithm,http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode 0557a81af23da4d969bce70f840968a7d5947006 `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-008 reference/flexbox-writing-mode-008-ref Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode http://www.w3.org/TR/css-flexbox-1/#layout-algorithm,http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode aaac3dcddfec40e5c67ae479e0df2184ddec82d2 `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox-writing-mode-009 reference/flexbox-writing-mode-009-ref Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode http://www.w3.org/TR/css-flexbox-1/#layout-algorithm,http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode 931b9d02203e63cacec94a45b450d721c5222706 `Daniel Holbert`<mailto:dholbert@mozilla.com>
flexbox_absolute-atomic reference/flexbox_absolute-atomic-ref flexbox | abspos atomic flexitems http://www.w3.org/TR/css-flexbox-1/#abspos-items 4d9971a3b967bf248f369162f61f772bac64343c `Opera Software`<http://opera.com>
flexbox_align-content-center reference/flexbox_align-content-center-ref flexbox | align-content: center http://www.w3.org/TR/css-flexbox-1/#align-content-property 482657e32368cdcc32e8ea890a7146c06b5e5e8c `Opera Software`<http://opera.com>
flexbox_align-content-flexend reference/flexbox_align-content-flexend-ref flexbox | align-content: flex-end http://www.w3.org/TR/css-flexbox-1/#align-content-property 59391d7952417cd2922c6ef2e31792a17abb4336 `Opera Software`<http://opera.com>
@ -593,23 +601,23 @@ multi-line-wrap-with-row-reverse reference/multi-line-wrap-with-row-reverse-ref
order-001 The 'order' property on flex items set to a value of '-1' http://www.w3.org/TR/css-flexbox-1/#propdef-order 04b5480a5e5ed8d047c97faee2ca8d8d2e450ca5 `Microsoft`<http://www.microsoft.com/> This test checks that a flex container will lay out its content in the order specified by the ordinal groups.
order-with-column-reverse reference/order-with-column-reverse-ref flex container layout lowest order with column-reverse direction http://www.w3.org/TR/css-flexbox-1/#propdef-order 4b46a5ecdd86862155091ee385b111da2246d8b6 `tmtysk`<mailto:tmtysk@gmail.com> This test check that a flex container layouts out its content starting with the lowest numbered ordinal group and going up with column-reverse direction.
order-with-row-reverse reference/order-with-row-reverse-ref flex container layout lowest order with row-reverse direction http://www.w3.org/TR/css-flexbox-1/#propdef-order 379d0daab60067a9fb6157277ec463b4ac66a1f1 `tmtysk`<tmtysk@gmail.com> This test check that a flex container layouts out its content starting with the lowest numbered ordinal group and going up with row-reverse direction.
order_value order_check http://www.w3.org/TR/css-flexbox-1/#propdef-order 0dec65c73fd249e88fdc89f5f02ff285b29bb5a3 `Intel`<http://www.intel.com> Check if the web engine can indentify order property.
order_value order_check script http://www.w3.org/TR/css-flexbox-1/#propdef-order f5d773d782a1400c848d447eab95274ed8b8fbb2 `Intel`<http://www.intel.com> Check if the web engine can indentify order property.
regions-flexbox-001 reference/regions-flexbox-001-ref CSS Regions: flowing flexbox elements in region http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-flexbox-1/#flex-containers 83b83da5bb4c67dc08a884dae60037b691e4d41a `Catalin Badea`<mailto:badea@adobe.com> Test that flex containers are flowed inside a namedflow.
regions-flexbox-002 reference/regions-flexbox-001-ref CSS Regions: flowing auto-height flexbox elements in region ahem http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-flexbox-1/#flex-containers 05d54663ad42f6429f76ada029189b86a5714cbd `Catalin Badea`<mailto:badea@adobe.com> Test that flex containers with auto height are flowed inside a namedflow.
regions-flexbox-003 reference/regions-flexbox-001-ref CSS Regions: fixed sized region inside a fixed sized flexbox ahem http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-flexbox-1/#flex-containers 2736ca78203b295f9fec24c368ea4beadc2ea6ae `Catalin Badea`<mailto:badea@adobe.com> Test that content is flowed in a region placed inside a flexbox.
regions-flexbox-004 reference/regions-flexbox-002-ref CSS Regions: fixed sized region inside an auto height flexbox ahem http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-flexbox-1/#flex-containers b2c866b6178383b319e3f78db28d3dbe2bd40bd3 `Catalin Badea`<mailto:badea@adobe.com> Test that content is flowed in a region placed inside a flexbox with auto-height.
row-flexbox-break reference/row-flexbox-break-ref CSS Regions: row flex container fragmentation ahem http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-flexbox-1/#layout-algorithm,http://www.w3.org/TR/css-flexbox-1/#pagination 6a5465888880560af82a53de8f5d7f4764197ecd `Catalin Badea`<mailto:badea@adobe.com> Test checks that a flex container with row flow is split between regions.
ttwf-reftest-flex-align-content-center reference/ttwf-reftest-flex-align-content-center-ref align-content proprety - center http://www.w3.org/TR/css-flexbox-1/#align-content-property f8ef0062ade6ca83b56604d26dc7b2f6f0b5ba51 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-end reference/ttwf-reftest-flex-align-content-end-ref align-content proprety - flex-end http://www.w3.org/TR/css-flexbox-1/#align-content-property b2c081cf9c951098d26c2c15f0fb495f47a27fb2 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-space-around reference/ttwf-reftest-flex-align-content-end-ref align-content proprety - flex-end http://www.w3.org/TR/css-flexbox-1/#align-content-property 7a36ed9c1c7e84b2617eac6e9368d154d7f947b5 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-space-between reference/ttwf-reftest-flex-align-content-end-ref align-content proprety - flex-end http://www.w3.org/TR/css-flexbox-1/#align-content-property a60b29d1cf293660cffd21ff50af8b21e315d8d7 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-start reference/ttwf-reftest-flex-align-content-end-ref align-content proprety - flex-end http://www.w3.org/TR/css-flexbox-1/#align-content-property 7869f22c9d171cb4ebd06c6b8f94da4d41e827fc `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-center reference/ttwf-reftest-flex-align-content-center-ref align-content property - center http://www.w3.org/TR/css-flexbox-1/#align-content-property 70cf594ac3554827c881644aaa1d282400d9275f `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-end reference/ttwf-reftest-flex-align-content-end-ref align-content property - flex-end http://www.w3.org/TR/css-flexbox-1/#align-content-property e7b3fdf1d85f5ac349d8aad09401290e1f371359 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-space-around reference/ttwf-reftest-flex-align-content-space-around-ref align-content property - space-around http://www.w3.org/TR/css-flexbox-1/#align-content-property 219df9e7930f458af4acceb5e3e99859e033ab85 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-space-between reference/ttwf-reftest-flex-align-content-space-between-ref align-content property - space-between http://www.w3.org/TR/css-flexbox-1/#align-content-property 3913f63bb373edde072e12c44a2211830cd4f1d7 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-align-content-start reference/ttwf-reftest-flex-align-content-start-ref align-content property - flex-start http://www.w3.org/TR/css-flexbox-1/#align-content-property d9579a3b26825e87897486a6e98d115d67e3e56e `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-base reference/ttwf-reftest-flex-base-ref display proprety - flex http://www.w3.org/TR/css-flexbox-1/#flex-containers 09cd8d806fdea0d80f53d47755e6142bc5949bad `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-direction-column reference/ttwf-reftest-flex-direction-column-ref flex-direction proprety - column http://www.w3.org/TR/css-flexbox-1/#flex-direction-property 728c353144e523d1a5a723816705922e0c6c1e76 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-direction-column-reverse reference/ttwf-reftest-flex-direction-column-ref flex-direction proprety - column-reverse http://www.w3.org/TR/css-flexbox-1/#flex-direction-property 88543733285c5dee0643cec088835baf4c36baa7 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-direction-row-reverse reference/ttwf-reftest-flex-direction-row-reverse-ref flex-direction proprety - row-reverse http://www.w3.org/TR/css-flexbox-1/#flex-direction-property 51c38775c9e6a6cdd145a6ee5dbcfbe33b069d59 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-direction-column-reverse reference/ttwf-reftest-flex-direction-column-reverse-ref flex-direction proprety - column-reverse http://www.w3.org/TR/css-flexbox-1/#flex-direction-property dd7661f0825e7ffc18333899ba88a572498717e9 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-direction-row-reverse reference/ttwf-reftest-flex-direction-row-reverse-ref flex-direction proprety - row-reverse http://www.w3.org/TR/css-flexbox-1/#flex-direction-property 5cf3a7c461178c681be521423a82e0878a80c275 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-order reference/ttwf-reftest-flex-order-ref order proprety - value http://www.w3.org/TR/css-flexbox-1/#propdef-order 20966eb34dbe8f0b6a907a7ecb417d8b3cafdbcf `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-wrap reference/ttwf-reftest-flex-inline-ref flex-wrap proprety - wrap http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap c625d8124bcc515404e69241f83277a09dc53442 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-wrap reference/ttwf-reftest-flex-wrap-ref flex-wrap proprety - wrap http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap 6711a164362418be2fcd9c0212837ddd96134a16 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
ttwf-reftest-flex-wrap-reverse reference/ttwf-reftest-flex-wrap-reverse-ref flex-wrap proprety - wrap-reverse http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap ed8cc9b7b77eccf97ceba22b903b26ae3aa38e09 `haosdent`<mailto:haosdent@gmail.com> Statement describing what the test case is asserting
visibility-collapse-001 A flex item with the 'visibility' property set to 'collapse' should not take up space in the main axis http://www.w3.org/TR/css-flexbox-1/#visibility-collapse e3a914d7e3c7ff2a5e898eaf67dff3041dda16fc `Microsoft`<http://www.microsoft.com/> This test checks that a flex item with 'visibility: collapse' doesn't take up space in the main axis.
visibility-collapse-002 A flex item with the 'visibility' property set to 'collapse' should be large enough to fit the collapsed item http://www.w3.org/TR/css-flexbox-1/#visibility-collapse 73a4a6c9327acbd5cdfc39f621a7fdd6c1108d64 `Microsoft`<http://www.microsoft.com/> This test checks that the cross size of a line of flex items containing an item with 'visbility: collapse' is large enough to fit the collapsed item.

View file

@ -56,12 +56,6 @@
</td>
</tr>
</tbody>
<tbody id="s1.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#values">1.3 Values</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -170,12 +170,54 @@
<a href="http://www.w3.org/TR/css-flexbox-1/#pagination-algo">10.1 Sample Flex Fragmentation Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#example-bb213bd3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-align-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-break-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-cascade-4">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-display-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-images-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-overflow-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-position-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-pseudo-4">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-sizing-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-text-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-ui-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-values-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-writing-modes-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css21">
<!-- 0 tests -->
</tbody>
@ -185,16 +227,19 @@
<tbody id="s.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-display">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-sizing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3ui">
<tbody id="s.#biblio-css3col">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3val">
<tbody id="s.#biblio-css3ui">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-html40">
@ -290,6 +335,48 @@
<tbody id="s.#change-201403-substantive">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-algo-breaks">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-align-content-wrapping">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-clamped-specified">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-clarify">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-content">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-display-longhands">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-flexed-definite-container">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-inner-base-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-layout-vs-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-min-auto-specified-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-neither">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-substantive">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-table-wrappers">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-unclamped-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes">
<!-- 0 tests -->
</tbody>
@ -305,6 +392,9 @@
<tbody id="s.#changes-201403">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes-201409">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-abspos-items">
<!-- 0 tests -->
</tbody>
@ -353,16 +443,28 @@
<tbody id="s.#conventions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-0401c357">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-cd819179">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-f839f6c8">
<!-- 0 tests -->
</tbody>
<tbody id="s.#experimental">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<tbody id="s.#index-defined-elsewhere">
<!-- 0 tests -->
</tbody>
<tbody id="s.#issues-index">
<tbody id="s.#index-defined-here">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative">

View file

@ -42,16 +42,16 @@
<tbody id="s2.#cross-dimension">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-size">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-size-property">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross-start">
<tbody id="s2.#cross_end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#cross_start">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#flex-container">
@ -372,16 +372,16 @@
<tbody id="s2.#main-dimension">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-size">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-size-property">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main-start">
<tbody id="s2.#main_end">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#main_start">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Items (58 tests)</h2>
<h2>Flex Items (57 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -231,6 +231,12 @@
</td>
</tr>
</tbody>
<tbody id="s4.#example-f7107939">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#flex_level">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#table-items">
<!-- 0 tests -->
</tbody>
@ -272,25 +278,17 @@
</td>
</tr>
</tbody>
<tbody id="s4.1.#static-position-rectangle">
<tbody id="s4.1.#example-5860ae02">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#static_position-rectangle">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#item-margins">4.2 Flex Item Margins and Paddings</a></th></tr>
<!-- 3 tests -->
<tr id="flex-container-margin-4.2" class="primary">
<td><strong>
<a href="flex-container-margin.xht">flex-container-margin</a></strong></td>
<td><a href="reference/flex-container-margin-ref.xht">=</a> </td>
<td></td>
<td>flex-container-margin-not-collapse-with-content-margin
<ul class="assert">
<li>The margins of adjacent flex items do not collapse.</li>
</ul>
</td>
</tr>
<!-- 2 tests -->
<tr id="flex-margin-no-collapse-4.2" class="">
<td>
<a href="flex-margin-no-collapse.xht">flex-margin-no-collapse</a></td>
@ -423,6 +421,9 @@
<tbody id="s4.4.#collapsed-flex-item">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#example-f6817be4">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#nav-about">
<!-- 0 tests -->
</tbody>
@ -572,7 +573,7 @@
<tbody id="s4.5.#min-size-opt">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#valdef-min-width-min-height-auto">
<tbody id="s4.5.#valdef-min-width-auto">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Ordering and Orientation (123 tests)</h2>
<h2>Ordering and Orientation (129 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -263,7 +263,7 @@
<tr id="ttwf-reftest-flex-direction-column-reverse-5.1" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-direction-column-reverse.xht">ttwf-reftest-flex-direction-column-reverse</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-direction-column-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.xht">=</a> </td>
<td></td>
<td>flex-direction proprety - column-reverse
<ul class="assert">
@ -284,7 +284,7 @@
</tr>
</tbody>
<tbody id="s5.1.#propdef-flex-direction">
<!-- 1 tests -->
<!-- 7 tests -->
<tr id="flex-margin-no-collapse-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flex-margin-no-collapse.xht">flex-margin-no-collapse</a></strong></td>
@ -296,6 +296,54 @@
</ul>
</td>
</tr>
<tr id="flexbox-writing-mode-001-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-001.xht">flexbox-writing-mode-001</a></strong></td>
<td><a href="reference/flexbox-writing-mode-001-ref.xht">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'
</td>
</tr>
<tr id="flexbox-writing-mode-002-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-002.xht">flexbox-writing-mode-002</a></strong></td>
<td><a href="reference/flexbox-writing-mode-002-ref.xht">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'
</td>
</tr>
<tr id="flexbox-writing-mode-003-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-003.xht">flexbox-writing-mode-003</a></strong></td>
<td><a href="reference/flexbox-writing-mode-003-ref.xht">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'
</td>
</tr>
<tr id="flexbox-writing-mode-004-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-004.xht">flexbox-writing-mode-004</a></strong></td>
<td><a href="reference/flexbox-writing-mode-004-ref.xht">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'
</td>
</tr>
<tr id="flexbox-writing-mode-005-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-005.xht">flexbox-writing-mode-005</a></strong></td>
<td><a href="reference/flexbox-writing-mode-005-ref.xht">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'
</td>
</tr>
<tr id="flexbox-writing-mode-006-5.1.#propdef-flex-direction" class="primary">
<td><strong>
<a href="flexbox-writing-mode-006.xht">flexbox-writing-mode-006</a></strong></td>
<td><a href="reference/flexbox-writing-mode-006-ref.xht">=</a> </td>
<td></td>
<td>Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'
</td>
</tr>
</tbody>
<tbody id="s5.1.#valdef-flex-direction-column">
<!-- 0 tests -->
@ -740,7 +788,7 @@
<tr id="ttwf-reftest-flex-wrap-5.2.#propdef-flex-wrap" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-wrap.xht">ttwf-reftest-flex-wrap</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-inline-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-wrap-ref.xht">=</a> </td>
<td></td>
<td>flex-wrap proprety - wrap
<ul class="assert">
@ -802,6 +850,9 @@
</td>
</tr>
</tbody>
<tbody id="s5.3.#example-ce59c06d">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#propdef-flex-flow">
<!-- 52 tests -->
<tr id="css-box-justify-content-5.3.#propdef-flex-flow" class="">
@ -1313,7 +1364,10 @@
</td>
</tr>
</tbody>
<tbody id="s5.4.#order-modified-document-order">
<tbody id="s5.4.#example-6155594a">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#order_modified-document-order">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#propdef-order">
@ -1456,11 +1510,11 @@
</ul>
</td>
</tr>
<tr id="order_value-5.4.#propdef-order" class="primary">
<tr id="order_value-5.4.#propdef-order" class="primary script">
<td><strong>
<a href="order_value.xht">order_value</a></strong></td>
<td></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>order_check
<ul class="assert">
<li>Check if the web engine can indentify order property.</li>
@ -1488,6 +1542,9 @@
<a href="http://www.w3.org/TR/css-flexbox-1/#order-accessibility">5.4.1 Reordering and Accessibility</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1.#example-465c9ea3">
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -46,13 +46,19 @@
</td>
</tr>
</tbody>
<tbody id="s6.#example-c8b950d1">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#example-e4bd6579">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#flex-line">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#multi-line">
<tbody id="s6.#multi_line">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#single-line">
<tbody id="s6.#single_line">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -931,9 +931,6 @@
</td>
</tr>
</tbody>
<tbody id="s7.1.#valdef-flex-auto">
<!-- 0 tests -->
</tbody>
<tbody id="s7.1.#valdef-flex-flex-basis">
<!-- 0 tests -->
</tbody>
@ -946,12 +943,12 @@
<tbody id="s7.1.#valdef-flex-none">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2">
<tbody id="s7.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-common">7.2 Common Values of flex</a></th></tr>
<a href="#s7.1.1">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-common">7.1.1 Common Values of flex</a></th></tr>
<!-- 5 tests -->
<tr id="flexbox_flex-auto-7.2" class="primary">
<tr id="flexbox_flex-auto-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-auto.xht">flexbox_flex-auto</a></strong></td>
<td><a href="reference/flexbox_flex-auto-ref.xht">=</a> </td>
@ -959,7 +956,7 @@
<td>flexbox | flex: auto
</td>
</tr>
<tr id="flexbox_flex-initial-7.2" class="primary">
<tr id="flexbox_flex-initial-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-initial.xht">flexbox_flex-initial</a></strong></td>
<td><a href="reference/flexbox_flex-initial-ref.xht">=</a> </td>
@ -967,7 +964,7 @@
<td>flexbox | flex: initial
</td>
</tr>
<tr id="flexbox_flex-initial-2-7.2" class="primary">
<tr id="flexbox_flex-initial-2-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-initial-2.xht">flexbox_flex-initial-2</a></strong></td>
<td><a href="reference/flexbox_flex-initial-2-ref.xht">=</a> </td>
@ -975,7 +972,7 @@
<td>flexbox | flex: initial
</td>
</tr>
<tr id="flexbox_flex-natural-7.2" class="primary">
<tr id="flexbox_flex-natural-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-natural.xht">flexbox_flex-natural</a></strong></td>
<td><a href="reference/flexbox_flex-natural-ref.xht">=</a> </td>
@ -983,7 +980,7 @@
<td>flexbox | flex: larger integer
</td>
</tr>
<tr id="flexbox_flex-none-7.2" class="primary">
<tr id="flexbox_flex-none-7.1.1" class="primary">
<td><strong>
<a href="flexbox_flex-none.xht">flexbox_flex-none</a></strong></td>
<td><a href="reference/flexbox_flex-none-ref.xht">=</a> </td>
@ -992,24 +989,24 @@
</td>
</tr>
</tbody>
<tbody id="s7.2.#flex-initial">
<tbody id="s7.1.1.#flex-initial">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3">
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-components">7.3 Components of Flexibility</a></th></tr>
<a href="#s7.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-components">7.2 Components of Flexibility</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1">
<tbody id="s7.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">7.3.1 The flex-grow property</a></th></tr>
<a href="#s7.2.1">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-grow-property">7.2.1 The flex-grow property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.#propdef-flex-grow">
<tbody id="s7.2.1.#propdef-flex-grow">
<!-- 13 tests -->
<tr id="autoheight-regions-in-fixed-sized-flexbox-001-7.3.1.#propdef-flex-grow" class="ahem">
<tr id="autoheight-regions-in-fixed-sized-flexbox-001-7.2.1.#propdef-flex-grow" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-001.xht">autoheight-regions-in-fixed-sized-flexbox-001</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.xht">=</a> </td>
@ -1020,7 +1017,7 @@
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-002-7.3.1.#propdef-flex-grow" class="ahem">
<tr id="autoheight-regions-in-fixed-sized-flexbox-002-7.2.1.#propdef-flex-grow" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-002.xht">autoheight-regions-in-fixed-sized-flexbox-002</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.xht">=</a> </td>
@ -1031,7 +1028,7 @@
</ul>
</td>
</tr>
<tr id="css-flexbox-img-expand-evenly-7.3.1.#propdef-flex-grow" class="primary">
<tr id="css-flexbox-img-expand-evenly-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="css-flexbox-img-expand-evenly.xht">css-flexbox-img-expand-evenly</a></strong></td>
<td><a href="reference/css-flexbox-img-expand-evenly-ref.xht">=</a> </td>
@ -1042,7 +1039,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-001-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-001-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-001.xht">flex-grow-001</a></strong></td>
<td><a href="reference/flex-grow-001-ref.xht">=</a> </td>
@ -1053,7 +1050,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-002-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-002-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-002.xht">flex-grow-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1064,7 +1061,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-003-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-003-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-003.xht">flex-grow-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1075,7 +1072,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-004-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-004-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-004.xht">flex-grow-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1086,7 +1083,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-005-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-005-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-005.xht">flex-grow-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1097,7 +1094,7 @@
</ul>
</td>
</tr>
<tr id="flex-grow-006-7.3.1.#propdef-flex-grow" class="primary">
<tr id="flex-grow-006-7.2.1.#propdef-flex-grow" class="primary">
<td><strong>
<a href="flex-grow-006.xht">flex-grow-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1108,7 +1105,7 @@
</ul>
</td>
</tr>
<tr id="flexbox_computedstyle_flex-grow-0-7.3.1.#propdef-flex-grow" class="primary dom">
<tr id="flexbox_computedstyle_flex-grow-0-7.2.1.#propdef-flex-grow" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-grow-0.xht">flexbox_computedstyle_flex-grow-0</a></strong></td>
<td></td>
@ -1116,7 +1113,7 @@
<td>flexbox | computed style | flex-grow: 0
</td>
</tr>
<tr id="flexbox_computedstyle_flex-grow-invalid-7.3.1.#propdef-flex-grow" class="primary dom">
<tr id="flexbox_computedstyle_flex-grow-invalid-7.2.1.#propdef-flex-grow" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-grow-invalid.xht">flexbox_computedstyle_flex-grow-invalid</a></strong></td>
<td></td>
@ -1124,7 +1121,7 @@
<td>flexbox | computed style | flex-grow: negative
</td>
</tr>
<tr id="flexbox_computedstyle_flex-grow-number-7.3.1.#propdef-flex-grow" class="primary dom">
<tr id="flexbox_computedstyle_flex-grow-number-7.2.1.#propdef-flex-grow" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-grow-number.xht">flexbox_computedstyle_flex-grow-number</a></strong></td>
<td></td>
@ -1132,7 +1129,7 @@
<td>flexbox | computed style | flex-grow: number
</td>
</tr>
<tr id="flexbox_interactive_flex-grow-transitions-7.3.1.#propdef-flex-grow" class="primary interact">
<tr id="flexbox_interactive_flex-grow-transitions-7.2.1.#propdef-flex-grow" class="primary interact">
<td><strong>
<a href="flexbox_interactive_flex-grow-transitions.xht">flexbox_interactive_flex-grow-transitions</a></strong></td>
<td></td>
@ -1141,18 +1138,18 @@
</td>
</tr>
</tbody>
<tbody id="s7.3.1.#valdef-flex-grow-number">
<tbody id="s7.2.1.#valdef-flex-grow-number">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2">
<tbody id="s7.2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">7.3.2 The flex-shrink property</a></th></tr>
<a href="#s7.2.2">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">7.2.2 The flex-shrink property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2.#propdef-flex-shrink">
<tbody id="s7.2.2.#propdef-flex-shrink">
<!-- 12 tests -->
<tr id="flex-shrink-001-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-001-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-001.xht">flex-shrink-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1163,7 +1160,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-002-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-002-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-002.xht">flex-shrink-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1174,7 +1171,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-003-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-003-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-003.xht">flex-shrink-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1185,7 +1182,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-004-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-004-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-004.xht">flex-shrink-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1196,7 +1193,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-005-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-005-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-005.xht">flex-shrink-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1207,7 +1204,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-006-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-006-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-006.xht">flex-shrink-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1218,7 +1215,7 @@
</ul>
</td>
</tr>
<tr id="flex-shrink-007-7.3.2.#propdef-flex-shrink" class="primary">
<tr id="flex-shrink-007-7.2.2.#propdef-flex-shrink" class="primary">
<td><strong>
<a href="flex-shrink-007.xht">flex-shrink-007</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1229,7 +1226,7 @@
</ul>
</td>
</tr>
<tr id="flexbox_computedstyle_flex-shrink-0-7.3.2.#propdef-flex-shrink" class="primary dom">
<tr id="flexbox_computedstyle_flex-shrink-0-7.2.2.#propdef-flex-shrink" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-shrink-0.xht">flexbox_computedstyle_flex-shrink-0</a></strong></td>
<td></td>
@ -1237,7 +1234,7 @@
<td>flexbox | computed style | flex-shrink: 0
</td>
</tr>
<tr id="flexbox_computedstyle_flex-shrink-invalid-7.3.2.#propdef-flex-shrink" class="primary dom">
<tr id="flexbox_computedstyle_flex-shrink-invalid-7.2.2.#propdef-flex-shrink" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-shrink-invalid.xht">flexbox_computedstyle_flex-shrink-invalid</a></strong></td>
<td></td>
@ -1245,7 +1242,7 @@
<td>flexbox | computed style | flex-shrink: negative
</td>
</tr>
<tr id="flexbox_computedstyle_flex-shrink-number-7.3.2.#propdef-flex-shrink" class="primary dom">
<tr id="flexbox_computedstyle_flex-shrink-number-7.2.2.#propdef-flex-shrink" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-shrink-number.xht">flexbox_computedstyle_flex-shrink-number</a></strong></td>
<td></td>
@ -1253,7 +1250,7 @@
<td>flexbox | computed style | flex-shrink: number
</td>
</tr>
<tr id="flexbox_interactive_flex-shrink-transitions-7.3.2.#propdef-flex-shrink" class="primary interact">
<tr id="flexbox_interactive_flex-shrink-transitions-7.2.2.#propdef-flex-shrink" class="primary interact">
<td><strong>
<a href="flexbox_interactive_flex-shrink-transitions.xht">flexbox_interactive_flex-shrink-transitions</a></strong></td>
<td></td>
@ -1261,7 +1258,7 @@
<td>flexbox | transitioned flex-shrink
</td>
</tr>
<tr id="flexbox_interactive_flex-shrink-transitions-invalid-7.3.2.#propdef-flex-shrink" class="primary interact">
<tr id="flexbox_interactive_flex-shrink-transitions-invalid-7.2.2.#propdef-flex-shrink" class="primary interact">
<td><strong>
<a href="flexbox_interactive_flex-shrink-transitions-invalid.xht">flexbox_interactive_flex-shrink-transitions-invalid</a></strong></td>
<td></td>
@ -1270,15 +1267,15 @@
</td>
</tr>
</tbody>
<tbody id="s7.3.2.#valdef-flex-shrink-number">
<tbody id="s7.2.2.#valdef-flex-shrink-number">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3">
<tbody id="s7.2.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">7.3.3 The flex-basis property</a></th></tr>
<a href="#s7.2.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#flex-basis-property">7.2.3 The flex-basis property</a></th></tr>
<!-- 10 tests -->
<tr id="flexbox_computedstyle_flex-basis-0-7.3.3" class="primary dom">
<tr id="flexbox_computedstyle_flex-basis-0-7.2.3" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-basis-0.xht">flexbox_computedstyle_flex-basis-0</a></strong></td>
<td></td>
@ -1286,7 +1283,7 @@
<td>flexbox | computed style | flex-basis: 0
</td>
</tr>
<tr id="flexbox_computedstyle_flex-basis-0percent-7.3.3" class="primary dom">
<tr id="flexbox_computedstyle_flex-basis-0percent-7.2.3" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-basis-0percent.xht">flexbox_computedstyle_flex-basis-0percent</a></strong></td>
<td></td>
@ -1294,7 +1291,7 @@
<td>flexbox | computed style | flex-basis: 0%
</td>
</tr>
<tr id="flexbox_computedstyle_flex-basis-auto-7.3.3" class="primary dom">
<tr id="flexbox_computedstyle_flex-basis-auto-7.2.3" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-basis-auto.xht">flexbox_computedstyle_flex-basis-auto</a></strong></td>
<td></td>
@ -1302,7 +1299,7 @@
<td>flexbox | computed style | flex-basis: auto
</td>
</tr>
<tr id="flexbox_computedstyle_flex-basis-percent-7.3.3" class="primary dom">
<tr id="flexbox_computedstyle_flex-basis-percent-7.2.3" class="primary dom">
<td><strong>
<a href="flexbox_computedstyle_flex-basis-percent.xht">flexbox_computedstyle_flex-basis-percent</a></strong></td>
<td></td>
@ -1310,7 +1307,7 @@
<td>flexbox | computed style | flex-basis: percent
</td>
</tr>
<tr id="flexbox_flex-basis-7.3.3" class="primary">
<tr id="flexbox_flex-basis-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-basis.xht">flexbox_flex-basis</a></strong></td>
<td><a href="reference/flexbox_flex-basis-ref.xht">=</a> </td>
@ -1318,7 +1315,7 @@
<td>flexbox | flex-basis: percentage
</td>
</tr>
<tr id="flexbox_flex-basis-shrink-7.3.3" class="primary">
<tr id="flexbox_flex-basis-shrink-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-basis-shrink.xht">flexbox_flex-basis-shrink</a></strong></td>
<td><a href="reference/flexbox_flex-basis-shrink-ref.xht">=</a> </td>
@ -1326,7 +1323,7 @@
<td>flexbox | flex-basis: percentage, flex-shrink: +integer
</td>
</tr>
<tr id="flexbox_flex-natural-mixed-basis-7.3.3" class="primary">
<tr id="flexbox_flex-natural-mixed-basis-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-natural-mixed-basis.xht">flexbox_flex-natural-mixed-basis</a></strong></td>
<td><a href="reference/flexbox_flex-natural-mixed-basis-ref.xht">=</a> </td>
@ -1334,7 +1331,7 @@
<td>flexbox | flex: larger integer, mixed basis
</td>
</tr>
<tr id="flexbox_flex-natural-mixed-basis-auto-7.3.3" class="primary">
<tr id="flexbox_flex-natural-mixed-basis-auto-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-natural-mixed-basis-auto.xht">flexbox_flex-natural-mixed-basis-auto</a></strong></td>
<td><a href="reference/flexbox_flex-natural-mixed-basis-auto-ref.xht">=</a> </td>
@ -1342,7 +1339,7 @@
<td>flexbox | flex: larger integer, mixed basis, auto
</td>
</tr>
<tr id="flexbox_flex-natural-variable-auto-basis-7.3.3" class="primary">
<tr id="flexbox_flex-natural-variable-auto-basis-7.2.3" class="primary">
<td><strong>
<a href="flexbox_flex-natural-variable-auto-basis.xht">flexbox_flex-natural-variable-auto-basis</a></strong></td>
<td><a href="reference/flexbox_flex-natural-variable-auto-basis-ref.xht">=</a> </td>
@ -1350,7 +1347,7 @@
<td>flexbox | flex: larger integer, auto basis
</td>
</tr>
<tr id="flexbox_interactive_flex-basis-transitions-7.3.3" class="primary interact">
<tr id="flexbox_interactive_flex-basis-transitions-7.2.3" class="primary interact">
<td><strong>
<a href="flexbox_interactive_flex-basis-transitions.xht">flexbox_interactive_flex-basis-transitions</a></strong></td>
<td></td>
@ -1359,12 +1356,15 @@
</td>
</tr>
</tbody>
<tbody id="s7.3.3.#issue-753aff05">
<tbody id="s7.2.3.#auto">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3.#propdef-flex-basis">
<tbody id="s7.2.3.#content">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.3.#propdef-flex-basis">
<!-- 9 tests -->
<tr id="flex-basis-001-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-001-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-001.xht">flex-basis-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1375,7 +1375,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-002-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-002-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-002.xht">flex-basis-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1386,7 +1386,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-003-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-003-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-003.xht">flex-basis-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1397,7 +1397,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-004-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-004-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-004.xht">flex-basis-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1408,7 +1408,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-005-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-005-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-005.xht">flex-basis-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1419,7 +1419,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-006-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-006-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-006.xht">flex-basis-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1430,7 +1430,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-007-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-007-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-007.xht">flex-basis-007</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1441,7 +1441,7 @@
</ul>
</td>
</tr>
<tr id="flex-basis-008-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flex-basis-008-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flex-basis-008.xht">flex-basis-008</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
@ -1452,7 +1452,7 @@
</ul>
</td>
</tr>
<tr id="flexbox_flex-natural-variable-zero-basis-7.3.3.#propdef-flex-basis" class="primary">
<tr id="flexbox_flex-natural-variable-zero-basis-7.2.3.#propdef-flex-basis" class="primary">
<td><strong>
<a href="flexbox_flex-natural-variable-zero-basis.xht">flexbox_flex-natural-variable-zero-basis</a></strong></td>
<td><a href="reference/flexbox_flex-natural-variable-zero-basis-ref.xht">=</a> </td>
@ -1461,9 +1461,6 @@
</td>
</tr>
</tbody>
<tbody id="s7.3.3.#valdef-flex-basis-main-size">
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -101,6 +101,12 @@
<tbody id="s8.1.#auto-bar">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-30f9440a">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#example-c2f4f7f3">
<!-- 0 tests -->
</tbody>
<tbody id="s8.1.#login">
<!-- 0 tests -->
</tbody>
@ -1282,19 +1288,19 @@
<tbody id="s8.3.#stretched">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-baseline">
<tbody id="s8.3.#valdef-align-items-baseline">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-center">
<tbody id="s8.3.#valdef-align-items-center">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-flex-end">
<tbody id="s8.3.#valdef-align-items-flex-end">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-flex-start">
<tbody id="s8.3.#valdef-align-items-flex-start">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-items-align-self-stretch">
<tbody id="s8.3.#valdef-align-items-stretch">
<!-- 0 tests -->
</tbody>
<tbody id="s8.3.#valdef-align-self-auto">
@ -1586,7 +1592,7 @@
<a href="ttwf-reftest-flex-align-content-center.xht">ttwf-reftest-flex-align-content-center</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-center-ref.xht">=</a> </td>
<td></td>
<td>align-content proprety - center
<td>align-content property - center
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1597,7 +1603,7 @@
<a href="ttwf-reftest-flex-align-content-end.xht">ttwf-reftest-flex-align-content-end</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td></td>
<td>align-content proprety - flex-end
<td>align-content property - flex-end
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1606,9 +1612,9 @@
<tr id="ttwf-reftest-flex-align-content-space-around-8.4" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-align-content-space-around.xht">ttwf-reftest-flex-align-content-space-around</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.xht">=</a> </td>
<td></td>
<td>align-content proprety - flex-end
<td>align-content property - space-around
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1617,9 +1623,9 @@
<tr id="ttwf-reftest-flex-align-content-space-between-8.4" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-align-content-space-between.xht">ttwf-reftest-flex-align-content-space-between</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.xht">=</a> </td>
<td></td>
<td>align-content proprety - flex-end
<td>align-content property - space-between
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1628,9 +1634,9 @@
<tr id="ttwf-reftest-flex-align-content-start-8.4" class="primary">
<td><strong>
<a href="ttwf-reftest-flex-align-content-start.xht">ttwf-reftest-flex-align-content-start</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-start-ref.xht">=</a> </td>
<td></td>
<td>align-content proprety - flex-end
<td>align-content property - flex-start
<ul class="assert">
<li>Statement describing what the test case is asserting</li>
</ul>
@ -1776,10 +1782,10 @@
</td>
</tr>
</tbody>
<tbody id="s8.5.#cross-axis-baseline">
<tbody id="s8.5.#cross_axis-baseline">
<!-- 0 tests -->
</tbody>
<tbody id="s8.5.#main-axis-baseline">
<tbody id="s8.5.#main_axis-baseline">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Layout Algorithm (58 tests)</h2>
<h2>Flex Layout Algorithm (61 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -31,7 +31,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s9">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">9 Flex Layout Algorithm</a></th></tr>
<!-- 46 tests -->
<!-- 49 tests -->
<tr id="autoheight-flexbox-001-9" class="">
<td>
<a href="autoheight-flexbox-001.xht">autoheight-flexbox-001</a></td>
@ -447,6 +447,30 @@
<td>Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints
</td>
</tr>
<tr id="flexbox-writing-mode-007-9" class="primary">
<td><strong>
<a href="flexbox-writing-mode-007.xht">flexbox-writing-mode-007</a></strong></td>
<td><a href="reference/flexbox-writing-mode-007-ref.xht">=</a> </td>
<td></td>
<td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
</td>
</tr>
<tr id="flexbox-writing-mode-008-9" class="primary">
<td><strong>
<a href="flexbox-writing-mode-008.xht">flexbox-writing-mode-008</a></strong></td>
<td><a href="reference/flexbox-writing-mode-008-ref.xht">=</a> </td>
<td></td>
<td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
</td>
</tr>
<tr id="flexbox-writing-mode-009-9" class="primary">
<td><strong>
<a href="flexbox-writing-mode-009.xht">flexbox-writing-mode-009</a></strong></td>
<td><a href="reference/flexbox-writing-mode-009-ref.xht">=</a> </td>
<td></td>
<td>Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode
</td>
</tr>
<tr id="row-flexbox-break-9" class="ahem">
<td>
<a href="row-flexbox-break.xht">row-flexbox-break</a></td>
@ -486,6 +510,9 @@
<tbody id="s9.2.#algo-main-item">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#example-5ea64ac4">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#flex-base-size">
<!-- 0 tests -->
</tbody>
@ -690,16 +717,16 @@
<a href="http://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes">9.9 Intrinsic Sizes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#max-content-cross-size">
<tbody id="s9.9.#max_content-cross-size">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#max-content-main-size">
<tbody id="s9.9.#max_content-main-size">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#min-content-cross-size">
<tbody id="s9.9.#min_content-cross-size">
<!-- 0 tests -->
</tbody>
<tbody id="s9.9.#min-content-main-size">
<tbody id="s9.9.#min_content-main-size">
<!-- 0 tests -->
</tbody>
</table>

View file

@ -1,30 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" />
<link href="http://dev.w3.org/csswg/css-flexbox-1/#item-margins" rel="help" />
<link href="reference/flex-container-margin-ref.xht" rel="match" />
<meta content="The margins of adjacent flex items do not collapse." name="assert" />
<style>
.flex-container{
display: flex;
margin:20px;
background: #333;
}
.flex-item{
width:50px;
height:50px;
margin:20px;
background: #eee;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body></html>

View file

@ -21,6 +21,7 @@
width: 100px;
height: 100px;
background-color: green;
flex: none;
}
#box1 {
@ -49,4 +50,5 @@
<div class="box" id="box2"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
<link href="reference/flexbox-writing-mode-001-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: ltr;
writing-mode: horizontal-tb;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
<link href="reference/flexbox-writing-mode-002-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: ltr;
writing-mode: vertical-rl;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
<link href="reference/flexbox-writing-mode-003-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: ltr;
writing-mode: vertical-lr;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
<link href="reference/flexbox-writing-mode-004-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: horizontal-tb;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
<link href="reference/flexbox-writing-mode-005-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: vertical-rl;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction" rel="help" />
<link href="reference/flexbox-writing-mode-006-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: vertical-lr;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div style="flex-flow: row wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: row-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div style="flex-flow: column-reverse wrap-reverse" class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help" />
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help" />
<link href="reference/flexbox-writing-mode-007-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
writing-mode: horizontal-tb;
flex-flow: row wrap;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
/* Classes applied to flex container, to customize its children
* (which should not affect their sizing):
*/
.kids_horizontal_tb &gt; * {
writing-mode: horizontal-tb;
}
.kids_vertical_lr &gt; * {
writing-mode: vertical-lr;
}
.kids_vertical_rl &gt; * {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_horizontal_tb">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_lr">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_rl">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help" />
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help" />
<link href="reference/flexbox-writing-mode-008-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
writing-mode: vertical-lr;
flex-flow: row wrap;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
/* Classes applied to flex container, to customize its children
* (which should not affect their sizing):
*/
.kids_horizontal_tb &gt; * {
writing-mode: horizontal-tb;
}
.kids_vertical_lr &gt; * {
writing-mode: vertical-lr;
}
.kids_vertical_rl &gt; * {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_horizontal_tb">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_lr">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_rl">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help" />
<link href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" rel="help" />
<link href="reference/flexbox-writing-mode-009-ref.xht" rel="match" />
<meta charset="utf-8" />
<style>
.flexContainer {
display: flex;
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
writing-mode: vertical-rl;
flex-flow: row wrap;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
/* Classes applied to flex container, to customize its children
* (which should not affect their sizing):
*/
.kids_horizontal_tb &gt; * {
writing-mode: horizontal-tb;
}
.kids_vertical_lr &gt; * {
writing-mode: vertical-lr;
}
.kids_vertical_rl &gt; * {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_horizontal_tb">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_lr">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer kids_vertical_rl">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -16,8 +16,8 @@
order: -1;
}
</style>
<script src='/resources/testharness.js"'></script>
<script src='/resources/testharnessreport.js"'></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>

View file

@ -1,33 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title>
<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" />
<style>
.flex-container{
display:block;
margin:20px;
background: #333;
line-height: 0px;
}
.flex-item{
display: inline-block;
width:50px;
height:50px;
margin:20px 20px;
background: #eee;
}
.flex-item.first{
margin-left:20px;
}
.flex-item.last{
margin-right: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: horizontal-tb; */
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: vertical-rl; */
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: vertical-lr; */
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: horizontal-tb; */
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: vertical-rl; */
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: vertical-lr; */
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
</body></html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer">
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
</body></html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
.flexContainer {
width: 40px;
height: 30px;
border: 1px solid gray;
margin-bottom: 5px;
}
.flexContainer &gt; * {
width: 20px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer">
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
</body></html>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content proprety - center</title>
<title>CSS Flexible Box Test: align-content property - center</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<style type="text/css">
.container {
@ -26,7 +26,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table.</p>
<p>The test passed if you see a centered 2*2 table.</p>
<div class="container">
<span>first</span>
<span>second</span>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - flex-end</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<style type="text/css">
.container {

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content property - space-between</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<style type="text/css">
.container {
position: relative;
height: 14em;
width: 20em;
background: red;
margin: 1em;
border: 1px solid black;
}
.first, .second {
margin-bottom: 112px;
}
span {
height: 2em;
display: inline-block;
background: green;
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p>
<div class="container">
<span class="first">first</span>
<span class="second">second</span>
<span>third</span>
<span>forth</span>
</div>
</body></html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content property - flex-start</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<style type="text/css">
.container {
position: relative;
height: 14em;
width: 20em;
background: red;
margin: 1em;
border: 1px solid black;
}
span {
height: 2em;
display: inline-block;
background: green;
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p>
<div class="container">
<span>first</span>
<span>second</span>
<span>third</span>
<span>forth</span>
</div>
</body></html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
be visible in the case of failure */
.container {
position: relative;
background: red;
margin: 1em 0;
border: 1px solid black;
}
span ~ span {
margin: 2em 1em 1em;
}
span {
display: block;
background: green;
color: white;
margin: 1em;
width: 8em;
}
</style>
</head>
<body>
<p>The test passed if you see all the cells are arraged vertically and reversed.</p>
<div class="container">
<span>forth</span>
<span>third</span>
<span>second</span>
<span>first</span>
</div>
</body></html>

View file

@ -6,7 +6,6 @@
.container {
position: relative;
display: flex;
flex-direction: row-reverse;
background: red;
margin: 1em 0;
border: 1px solid black;

View file

@ -1,26 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: display proprety - inline-flex</title>
<title>CSS Flexible Box Test: flex-wrap proprety - wrap</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
be visible in the case of failure */
.container {
position: relative;
background: red;
margin: 1em 0;
border: 1px solid black;
width: 20em;
height: 6.5em;
}
.greenSquare {
span {
display: inline-block;
margin-top: -200px;
background: green;
}
color: white;
margin: 1em;
width: 8em;
float: left;
}
</style>
</head>
<body>
<p>The test passed if you see a green block which its text is 'Success!
'.</p>
<p>The test passed if you see a 2 * 2 table on the page.</p>
<div class="container">
<!-- This is the square that should not be visible if the test passes -->
<div class="greenSquare">Success!</div>
<span>first</span>
<span>second</span>
<span>third</span>
<span>forth</span>
</div>

View file

@ -584,14 +584,6 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-container-margin" class="">
<tr>
<td rowspan="1" title="flex-container-margin-not-collapse-with-content-margin">
<a href="flex-container-margin.xht">flex-container-margin</a></td>
<td><a href="reference/flex-container-margin-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-direction" class="">
<tr>
<td rowspan="1" title="flex flow direction">
@ -2056,6 +2048,78 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-001" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'">
<a href="flexbox-writing-mode-001.xht">flexbox-writing-mode-001</a></td>
<td><a href="reference/flexbox-writing-mode-001-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-002" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'">
<a href="flexbox-writing-mode-002.xht">flexbox-writing-mode-002</a></td>
<td><a href="reference/flexbox-writing-mode-002-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-003" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'">
<a href="flexbox-writing-mode-003.xht">flexbox-writing-mode-003</a></td>
<td><a href="reference/flexbox-writing-mode-003-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-004" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'">
<a href="flexbox-writing-mode-004.xht">flexbox-writing-mode-004</a></td>
<td><a href="reference/flexbox-writing-mode-004-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-005" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'">
<a href="flexbox-writing-mode-005.xht">flexbox-writing-mode-005</a></td>
<td><a href="reference/flexbox-writing-mode-005-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-006" class="">
<tr>
<td rowspan="1" title="Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'">
<a href="flexbox-writing-mode-006.xht">flexbox-writing-mode-006</a></td>
<td><a href="reference/flexbox-writing-mode-006-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-007" class="">
<tr>
<td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
<a href="flexbox-writing-mode-007.xht">flexbox-writing-mode-007</a></td>
<td><a href="reference/flexbox-writing-mode-007-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-008" class="">
<tr>
<td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
<a href="flexbox-writing-mode-008.xht">flexbox-writing-mode-008</a></td>
<td><a href="reference/flexbox-writing-mode-008-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox-writing-mode-009" class="">
<tr>
<td rowspan="1" title="Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode">
<a href="flexbox-writing-mode-009.xht">flexbox-writing-mode-009</a></td>
<td><a href="reference/flexbox-writing-mode-009-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flexbox_absolute-atomic" class="">
<tr>
<td rowspan="1" title="flexbox | abspos atomic flexitems">
@ -3802,7 +3866,7 @@
</tbody>
<tbody id="ttwf-reftest-flex-align-content-center" class="">
<tr>
<td rowspan="1" title="align-content proprety - center">
<td rowspan="1" title="align-content property - center">
<a href="ttwf-reftest-flex-align-content-center.xht">ttwf-reftest-flex-align-content-center</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-center-ref.xht">=</a> </td>
<td rowspan="1"></td>
@ -3810,7 +3874,7 @@
</tbody>
<tbody id="ttwf-reftest-flex-align-content-end" class="">
<tr>
<td rowspan="1" title="align-content proprety - flex-end">
<td rowspan="1" title="align-content property - flex-end">
<a href="ttwf-reftest-flex-align-content-end.xht">ttwf-reftest-flex-align-content-end</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td rowspan="1"></td>
@ -3818,25 +3882,25 @@
</tbody>
<tbody id="ttwf-reftest-flex-align-content-space-around" class="">
<tr>
<td rowspan="1" title="align-content proprety - flex-end">
<td rowspan="1" title="align-content property - space-around">
<a href="ttwf-reftest-flex-align-content-space-around.xht">ttwf-reftest-flex-align-content-space-around</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-around-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="ttwf-reftest-flex-align-content-space-between" class="">
<tr>
<td rowspan="1" title="align-content proprety - flex-end">
<td rowspan="1" title="align-content property - space-between">
<a href="ttwf-reftest-flex-align-content-space-between.xht">ttwf-reftest-flex-align-content-space-between</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-space-between-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="ttwf-reftest-flex-align-content-start" class="">
<tr>
<td rowspan="1" title="align-content proprety - flex-end">
<td rowspan="1" title="align-content property - flex-start">
<a href="ttwf-reftest-flex-align-content-start.xht">ttwf-reftest-flex-align-content-start</a></td>
<td><a href="reference/ttwf-reftest-flex-align-content-end-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-align-content-start-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
@ -3860,7 +3924,7 @@
<tr>
<td rowspan="1" title="flex-direction proprety - column-reverse">
<a href="ttwf-reftest-flex-direction-column-reverse.xht">ttwf-reftest-flex-direction-column-reverse</a></td>
<td><a href="reference/ttwf-reftest-flex-direction-column-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-direction-column-reverse-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
@ -3884,7 +3948,7 @@
<tr>
<td rowspan="1" title="flex-wrap proprety - wrap">
<a href="ttwf-reftest-flex-wrap.xht">ttwf-reftest-flex-wrap</a></td>
<td><a href="reference/ttwf-reftest-flex-inline-ref.xht">=</a> </td>
<td><a href="reference/ttwf-reftest-flex-wrap-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>

View file

@ -69,7 +69,6 @@ flex-basis-006.xht == reference/ref-filled-green-100px-square.xht
flex-basis-007.xht == reference/ref-filled-green-100px-square.xht
flex-basis-008.xht == reference/ref-filled-green-100px-square.xht
flex-box-wrap.xht == reference/flex-box-wrap-ref.xht
flex-container-margin.xht == reference/flex-container-margin-ref.xht
flex-direction.xht == reference/flex-direction.xht
flex-direction-modify.xht == reference/flex-direction-modify.xht
flex-direction-with-element-insert.xht == reference/flex-direction-with-element-insert.xht
@ -253,6 +252,15 @@ flexbox-whitespace-handling-002.xht == reference/flexbox-whitespace-handling-002
flexbox-with-pseudo-elements-001.xht == reference/flexbox-with-pseudo-elements-001-ref.xht
flexbox-with-pseudo-elements-002.xht == reference/flexbox-with-pseudo-elements-002-ref.xht
flexbox-with-pseudo-elements-003.xht == reference/flexbox-with-pseudo-elements-003-ref.xht
flexbox-writing-mode-001.xht == reference/flexbox-writing-mode-001-ref.xht
flexbox-writing-mode-002.xht == reference/flexbox-writing-mode-002-ref.xht
flexbox-writing-mode-003.xht == reference/flexbox-writing-mode-003-ref.xht
flexbox-writing-mode-004.xht == reference/flexbox-writing-mode-004-ref.xht
flexbox-writing-mode-005.xht == reference/flexbox-writing-mode-005-ref.xht
flexbox-writing-mode-006.xht == reference/flexbox-writing-mode-006-ref.xht
flexbox-writing-mode-007.xht == reference/flexbox-writing-mode-007-ref.xht
flexbox-writing-mode-008.xht == reference/flexbox-writing-mode-008-ref.xht
flexbox-writing-mode-009.xht == reference/flexbox-writing-mode-009-ref.xht
flexbox_absolute-atomic.xht == reference/flexbox_absolute-atomic-ref.xht
flexbox_align-content-center.xht == reference/flexbox_align-content-center-ref.xht
flexbox_align-content-flexend.xht == reference/flexbox_align-content-flexend-ref.xht
@ -473,14 +481,14 @@ regions-flexbox-004.xht == reference/regions-flexbox-002-ref.xht
row-flexbox-break.xht == reference/row-flexbox-break-ref.xht
ttwf-reftest-flex-align-content-center.xht == reference/ttwf-reftest-flex-align-content-center-ref.xht
ttwf-reftest-flex-align-content-end.xht == reference/ttwf-reftest-flex-align-content-end-ref.xht
ttwf-reftest-flex-align-content-space-around.xht == reference/ttwf-reftest-flex-align-content-end-ref.xht
ttwf-reftest-flex-align-content-space-between.xht == reference/ttwf-reftest-flex-align-content-end-ref.xht
ttwf-reftest-flex-align-content-start.xht == reference/ttwf-reftest-flex-align-content-end-ref.xht
ttwf-reftest-flex-align-content-space-around.xht == reference/ttwf-reftest-flex-align-content-space-around-ref.xht
ttwf-reftest-flex-align-content-space-between.xht == reference/ttwf-reftest-flex-align-content-space-between-ref.xht
ttwf-reftest-flex-align-content-start.xht == reference/ttwf-reftest-flex-align-content-start-ref.xht
ttwf-reftest-flex-base.xht == reference/ttwf-reftest-flex-base-ref.xht
ttwf-reftest-flex-direction-column.xht == reference/ttwf-reftest-flex-direction-column-ref.xht
ttwf-reftest-flex-direction-column-reverse.xht == reference/ttwf-reftest-flex-direction-column-ref.xht
ttwf-reftest-flex-direction-column-reverse.xht == reference/ttwf-reftest-flex-direction-column-reverse-ref.xht
ttwf-reftest-flex-direction-row-reverse.xht == reference/ttwf-reftest-flex-direction-row-reverse-ref.xht
ttwf-reftest-flex-order.xht == reference/ttwf-reftest-flex-order-ref.xht
ttwf-reftest-flex-wrap.xht == reference/ttwf-reftest-flex-inline-ref.xht
ttwf-reftest-flex-wrap.xht == reference/ttwf-reftest-flex-wrap-ref.xht
ttwf-reftest-flex-wrap-reverse.xht == reference/ttwf-reftest-flex-wrap-reverse-ref.xht
visibility-regions-in-flexbox.xht == reference/visibility-regions-in-flexbox-ref.xht

View file

@ -37,12 +37,12 @@
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Flex Items</a></th>
<td>(58 Tests)</td></tr>
<td>(57 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.xht">Chapter 5 -
Ordering and Orientation</a></th>
<td>(123 Tests)</td></tr>
<td>(129 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.xht">Chapter 6 -
@ -62,7 +62,7 @@
<tbody id="s9">
<tr><th><a href="chapter-9.xht">Chapter 9 -
Flex Layout Algorithm</a></th>
<td>(58 Tests)</td></tr>
<td>(61 Tests)</td></tr>
</tbody>
<tbody id="s10">
<tr><th><a href="chapter-10.xht">Chapter 10 -

View file

@ -1,6 +1,6 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content proprety - center</title>
<title>CSS Flexible Box Test: align-content property - center</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
<link href="reference/ttwf-reftest-flex-align-content-center-ref.xht" rel="match" />
@ -29,7 +29,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table.</p>
<p>The test passed if you see a centered 2*2 table.</p>
<div class="container">
<span>first</span>
<span>second</span>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - flex-end</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
<link href="reference/ttwf-reftest-flex-align-content-end-ref.xht" rel="match" />

View file

@ -1,9 +1,9 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - space-around</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
<link href="reference/ttwf-reftest-flex-align-content-end-ref.xht" rel="match" />
<link href="reference/ttwf-reftest-flex-align-content-space-around-ref.xht" rel="match" />
<meta content="Statement describing what the test case is asserting" name="assert" />
<style type="text/css">
.container {

View file

@ -1,9 +1,9 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - space-between</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
<link href="reference/ttwf-reftest-flex-align-content-end-ref.xht" rel="match" />
<link href="reference/ttwf-reftest-flex-align-content-space-between-ref.xht" rel="match" />
<meta content="Statement describing what the test case is asserting" name="assert" />
<style type="text/css">
.container {
@ -29,7 +29,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p>
<p>The test passed if you see a 2*2 table and all the cells are spaced equally apart.</p>
<div class="container">
<span>first</span>
<span>second</span>

View file

@ -1,9 +1,9 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: align-content proprety - flex-end</title>
<title>CSS Flexible Box Test: align-content property - flex-start</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<link href="http://www.w3.org/TR/css-flexbox-1/#align-content-property" rel="help" />
<link href="reference/ttwf-reftest-flex-align-content-end-ref.xht" rel="match" />
<link href="reference/ttwf-reftest-flex-align-content-start-ref.xht" rel="match" />
<meta content="Statement describing what the test case is asserting" name="assert" />
<style type="text/css">
.container {
@ -29,7 +29,7 @@
</style>
</head>
<body>
<p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p>
<p>The test passed if you see a 2*2 table and all the cells are at the top of the container.</p>
<div class="container">
<span>first</span>
<span>second</span>

View file

@ -3,7 +3,7 @@
<title>CSS Flexible Box Test: flex-direction proprety - column-reverse</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help" />
<link href="reference/ttwf-reftest-flex-direction-column-ref.xht" rel="match" />
<link href="reference/ttwf-reftest-flex-direction-column-reverse-ref.xht" rel="match" />
<meta content="Statement describing what the test case is asserting" name="assert" />
<style type="text/css">
/* Positioned container allows for the self-describing statement to still

View file

@ -3,7 +3,7 @@
<title>CSS Flexible Box Test: flex-wrap proprety - wrap</title>
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" />
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap" rel="help" />
<link href="reference/ttwf-reftest-flex-inline-ref.xht" rel="match" />
<link href="reference/ttwf-reftest-flex-wrap-ref.xht" rel="match" />
<meta content="Statement describing what the test case is asserting" name="assert" />
<style type="text/css">
/* Positioned container allows for the self-describing statement to still

View file

@ -56,12 +56,6 @@
</td>
</tr>
</tbody>
<tbody id="s1.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.3">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#values">1.3 Values</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>

View file

@ -170,12 +170,54 @@
<a href="http://www.w3.org/TR/css-flexbox-1/#pagination-algo">10.1 Sample Flex Fragmentation Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#example-bb213bd3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-align-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-break-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-cascade-4">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-display-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-images-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-overflow-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-position-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-pseudo-4">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-sizing-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-text-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-ui-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-values-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-writing-modes-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css21">
<!-- 0 tests -->
</tbody>
@ -185,16 +227,19 @@
<tbody id="s.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-display">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-sizing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3ui">
<tbody id="s.#biblio-css3col">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3val">
<tbody id="s.#biblio-css3ui">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-html40">
@ -290,6 +335,48 @@
<tbody id="s.#change-201403-substantive">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-algo-breaks">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-align-content-wrapping">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-clamped-specified">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-clarify">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-content">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-display-longhands">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-flexed-definite-container">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-inner-base-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-layout-vs-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-min-auto-specified-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-neither">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-substantive">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-table-wrappers">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201409-unclamped-size">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes">
<!-- 0 tests -->
</tbody>
@ -305,6 +392,9 @@
<tbody id="s.#changes-201403">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes-201409">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-abspos-items">
<!-- 0 tests -->
</tbody>
@ -353,16 +443,28 @@
<tbody id="s.#conventions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-0401c357">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-cd819179">
<!-- 0 tests -->
</tbody>
<tbody id="s.#example-f839f6c8">
<!-- 0 tests -->
</tbody>
<tbody id="s.#experimental">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<tbody id="s.#index-defined-elsewhere">
<!-- 0 tests -->
</tbody>
<tbody id="s.#issues-index">
<tbody id="s.#index-defined-here">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative">

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