mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8
This commit is contained in:
James Graham
parent
662c00a810
commit
df03062d62
10934 changed files with 428309 additions and 254265 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
background: red;
|
||||
margin: 1em 0;
|
||||
border: 1px solid black;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 -
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue