mirror of
https://github.com/servo/servo
synced 2026-05-01 03:47:53 +02:00
Update CSS tests to revision 7a87ef71fc579e52d3438e009107aa442bc4021b
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
<style type="text/css">
|
||||
#flexbox
|
||||
{
|
||||
background: linear-gradient(to bottom, green 0, green 16px, red 16px, red 35px, green 35px, green 66px, red 66px, red 85px, green 85px, green 100px);
|
||||
background: linear-gradient(to bottom, green 0, green 16px, red 17px, red 35px, green 36px, green 66px, red 67px, red 85px, green 86px, green 100px);
|
||||
align-items: flex-start;
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<body>
|
||||
|
||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
||||
<h2>Flex Layout Box Model and Terminology (30 tests)</h2>
|
||||
<h2>Flex Layout Box Model and Terminology (29 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
@@ -55,7 +55,7 @@
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#flex-container">
|
||||
<!-- 4 tests -->
|
||||
<!-- 3 tests -->
|
||||
<tr id="flexbox_generated-2.#flex-container" class="primary">
|
||||
<td><strong>
|
||||
<a href="flexbox_generated.htm">flexbox_generated</a></strong></td>
|
||||
@@ -64,14 +64,6 @@
|
||||
<td>flexbox | flexcontainer vs generated content
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_generated-container-2.#flex-container" class="primary">
|
||||
<td><strong>
|
||||
<a href="flexbox_generated-container.htm">flexbox_generated-container</a></strong></td>
|
||||
<td><a href="reference/flexbox_generated-container-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | flexcontainer vs generated content
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_generated-flex-2.#flex-container" class="primary">
|
||||
<td><strong>
|
||||
<a href="flexbox_generated-flex.htm">flexbox_generated-flex</a></strong></td>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<body>
|
||||
|
||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
||||
<h2>Flex Containers: the flex and inline-flex display values (35 tests)</h2>
|
||||
<h2>Flex Containers: the flex and inline-flex display values (36 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
@@ -350,7 +350,18 @@
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#valdef-display-inline-flex">
|
||||
<!-- 0 tests -->
|
||||
<!-- 1 tests -->
|
||||
<tr id="ttwf-reftest-flex-inline-3.#valdef-display-inline-flex" class="primary">
|
||||
<td><strong>
|
||||
<a href="ttwf-reftest-flex-inline.htm">ttwf-reftest-flex-inline</a></strong></td>
|
||||
<td><a href="reference/ttwf-reftest-flex-inline-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>display proprety - inline-flex
|
||||
<ul class="assert">
|
||||
<li>Statement describing what the test case is asserting</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<body>
|
||||
|
||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
||||
<h2>Flex Items (74 tests)</h2>
|
||||
<h2>Flex Items (72 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
@@ -451,7 +451,7 @@
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">4.5 Implied Minimum Size of Flex Items</a></th></tr>
|
||||
<!-- 32 tests -->
|
||||
<!-- 30 tests -->
|
||||
<tr id="flex-minimun-height-flex-items-001-4.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="flex-minimun-height-flex-items-001.htm">flex-minimun-height-flex-items-001</a></strong></td>
|
||||
@@ -740,22 +740,6 @@
|
||||
<td>flexbox | computed style | min-width: auto
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_min-height-auto-4.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="flexbox_min-height-auto.htm">flexbox_min-height-auto</a></strong></td>
|
||||
<td><a href="reference/flexbox_min-height-auto-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | min-height: auto
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_min-width-auto-4.5" class="primary">
|
||||
<td><strong>
|
||||
<a href="flexbox_min-width-auto.htm">flexbox_min-width-auto</a></strong></td>
|
||||
<td><a href="reference/flexbox_min-width-auto-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | min-width: auto
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s4.5.#min-size-opt">
|
||||
<!-- 0 tests -->
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<body>
|
||||
|
||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
||||
<h2>Ordering and Orientation (149 tests)</h2>
|
||||
<h2>Ordering and Orientation (150 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
@@ -346,16 +346,168 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.#valdef-flex-direction-column">
|
||||
<!-- 0 tests -->
|
||||
<!-- 6 tests -->
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-5.1.#valdef-flex-direction-column" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column.htm">flexbox_computedstyle_flex-flow-column</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-nowrap-5.1.#valdef-flex-direction-column" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-nowrap.htm">flexbox_computedstyle_flex-flow-column-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column nowrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-wrap-5.1.#valdef-flex-direction-column" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-wrap.htm">flexbox_computedstyle_flex-flow-column-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-wrap-reverse-5.1.#valdef-flex-direction-column" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-wrap-reverse.htm">flexbox_computedstyle_flex-flow-column-wrap-reverse</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column wrap-reverse
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_rtl-flow-5.1.#valdef-flex-direction-column" class="">
|
||||
<td>
|
||||
<a href="flexbox_rtl-flow.htm">flexbox_rtl-flow</a></td>
|
||||
<td><a href="reference/flexbox_rtl-flow-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | flex-flow: column wrap | rtl
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_rtl-flow-reverse-5.1.#valdef-flex-direction-column" class="">
|
||||
<td>
|
||||
<a href="flexbox_rtl-flow-reverse.htm">flexbox_rtl-flow-reverse</a></td>
|
||||
<td><a href="reference/flexbox_rtl-flow-reverse-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | flex-flow: column wrap-reverse | rtl
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.#valdef-flex-direction-column-reverse">
|
||||
<!-- 0 tests -->
|
||||
<!-- 5 tests -->
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-reverse-5.1.#valdef-flex-direction-column-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-reverse.htm">flexbox_computedstyle_flex-flow-column-reverse</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column-reverse
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-reverse-nowrap-5.1.#valdef-flex-direction-column-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-reverse-nowrap.htm">flexbox_computedstyle_flex-flow-column-reverse-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column-reverse nowrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-reverse-wrap-5.1.#valdef-flex-direction-column-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-reverse-wrap.htm">flexbox_computedstyle_flex-flow-column-reverse-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column-reverse wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_rtl-direction-5.1.#valdef-flex-direction-column-reverse" class="">
|
||||
<td>
|
||||
<a href="flexbox_rtl-direction.htm">flexbox_rtl-direction</a></td>
|
||||
<td><a href="reference/flexbox_rtl-direction-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | flex-direction: column-reverse | rtl
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_rtl-order-5.1.#valdef-flex-direction-column-reverse" class="">
|
||||
<td>
|
||||
<a href="flexbox_rtl-order.htm">flexbox_rtl-order</a></td>
|
||||
<td><a href="reference/flexbox_rtl-order-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.#valdef-flex-direction-row">
|
||||
<!-- 0 tests -->
|
||||
<!-- 4 tests -->
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-5.1.#valdef-flex-direction-row" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row.htm">flexbox_computedstyle_flex-flow-row</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-nowrap-5.1.#valdef-flex-direction-row" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-nowrap.htm">flexbox_computedstyle_flex-flow-row-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row nowrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-wrap-5.1.#valdef-flex-direction-row" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-wrap.htm">flexbox_computedstyle_flex-flow-row-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-wrap-reverse-5.1.#valdef-flex-direction-row" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-wrap-reverse.htm">flexbox_computedstyle_flex-flow-row-wrap-reverse</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row wrap-reverse
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.1.#valdef-flex-direction-row-reverse">
|
||||
<!-- 0 tests -->
|
||||
<!-- 4 tests -->
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-reverse-5.1.#valdef-flex-direction-row-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-reverse.htm">flexbox_computedstyle_flex-flow-row-reverse</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row-reverse
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-reverse-nowrap-5.1.#valdef-flex-direction-row-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-reverse-nowrap.htm">flexbox_computedstyle_flex-flow-row-reverse-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row-reverse nowrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-5.1.#valdef-flex-direction-row-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap.htm">flexbox_computedstyle_flex-flow-row-reverse-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row-reverse wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse-5.1.#valdef-flex-direction-row-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.htm">flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row-reverse wrap-reverse
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
@@ -809,13 +961,141 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.2.#valdef-flex-wrap-nowrap">
|
||||
<!-- 0 tests -->
|
||||
<!-- 5 tests -->
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-nowrap.htm">flexbox_computedstyle_flex-flow-column-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column nowrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-reverse-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-reverse-nowrap.htm">flexbox_computedstyle_flex-flow-column-reverse-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column-reverse nowrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-nowrap.htm">flexbox_computedstyle_flex-flow-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: nowrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-nowrap.htm">flexbox_computedstyle_flex-flow-row-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row nowrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-reverse-nowrap-5.2.#valdef-flex-wrap-nowrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-reverse-nowrap.htm">flexbox_computedstyle_flex-flow-row-reverse-nowrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row-reverse nowrap
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.2.#valdef-flex-wrap-wrap">
|
||||
<!-- 0 tests -->
|
||||
<!-- 6 tests -->
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-reverse-wrap-5.2.#valdef-flex-wrap-wrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-reverse-wrap.htm">flexbox_computedstyle_flex-flow-column-reverse-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column-reverse wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-wrap-5.2.#valdef-flex-wrap-wrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-wrap.htm">flexbox_computedstyle_flex-flow-column-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-5.2.#valdef-flex-wrap-wrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap.htm">flexbox_computedstyle_flex-flow-row-reverse-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row-reverse wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-wrap-5.2.#valdef-flex-wrap-wrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-wrap.htm">flexbox_computedstyle_flex-flow-row-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-wrap-5.2.#valdef-flex-wrap-wrap" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-wrap.htm">flexbox_computedstyle_flex-flow-wrap</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: wrap
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_rtl-flow-5.2.#valdef-flex-wrap-wrap" class="">
|
||||
<td>
|
||||
<a href="flexbox_rtl-flow.htm">flexbox_rtl-flow</a></td>
|
||||
<td><a href="reference/flexbox_rtl-flow-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | flex-flow: column wrap | rtl
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.2.#valdef-flex-wrap-wrap-reverse">
|
||||
<!-- 0 tests -->
|
||||
<!-- 5 tests -->
|
||||
<tr id="flexbox_computedstyle_flex-flow-column-wrap-reverse-5.2.#valdef-flex-wrap-wrap-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-column-wrap-reverse.htm">flexbox_computedstyle_flex-flow-column-wrap-reverse</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: column wrap-reverse
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse-5.2.#valdef-flex-wrap-wrap-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.htm">flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row-reverse wrap-reverse
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_flex-flow-row-wrap-reverse-5.2.#valdef-flex-wrap-wrap-reverse" class="dom">
|
||||
<td>
|
||||
<a href="flexbox_computedstyle_flex-flow-row-wrap-reverse.htm">flexbox_computedstyle_flex-flow-row-wrap-reverse</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
||||
<td>flexbox | computed style | flex-flow: row wrap-reverse
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_rtl-flow-reverse-5.2.#valdef-flex-wrap-wrap-reverse" class="">
|
||||
<td>
|
||||
<a href="flexbox_rtl-flow-reverse.htm">flexbox_rtl-flow-reverse</a></td>
|
||||
<td><a href="reference/flexbox_rtl-flow-reverse-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | flex-flow: column wrap-reverse | rtl
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_rtl-order-5.2.#valdef-flex-wrap-wrap-reverse" class="">
|
||||
<td>
|
||||
<a href="flexbox_rtl-order.htm">flexbox_rtl-order</a></td>
|
||||
<td><a href="reference/flexbox_rtl-order-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s5.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
@@ -860,7 +1140,7 @@
|
||||
<a href="css-box-justify-content.htm">css-box-justify-content</a></td>
|
||||
<td><a href="reference/css-box-justify-content-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox |css-box-justufy-content
|
||||
<td>flexbox |css-box-justify-content
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-flexbox-column-5.3.#propdef-flex-flow" class="primary">
|
||||
|
||||
@@ -1035,7 +1035,7 @@
|
||||
<td></td>
|
||||
<td>Image Expansion
|
||||
<ul class="assert">
|
||||
<li>3 square images fill out border.</li>
|
||||
<li>3 rectangular images fill out border.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -219,7 +219,7 @@
|
||||
<a href="css-box-justify-content.htm">css-box-justify-content</a></strong></td>
|
||||
<td><a href="reference/css-box-justify-content-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>flexbox |css-box-justufy-content
|
||||
<td>flexbox |css-box-justify-content
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="flexbox_computedstyle_justify-content-center-8.2.#propdef-justify-content" class="primary dom">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox |css-box-justufy-content</title>
|
||||
<html><head><title>flexbox |css-box-justify-content</title>
|
||||
<link href="ava656094@gmail.com" rel="author" title="xiaoxia">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
@@ -14,7 +14,6 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.item{
|
||||
margin-left:2px;
|
||||
width:50px;
|
||||
height: 30px;
|
||||
}
|
||||
@@ -23,8 +22,13 @@
|
||||
</head><body><p>This test passes if the DIV5's position in the end and the div is Horizontal layout</p>
|
||||
<div id="flexbox">
|
||||
<div style="background-color: rgb(242, 210, 80); color: rgb(41, 119, 248);" class="item">DIV1</div>
|
||||
|
||||
<div style="background-color: rgb(110, 8, 7); color: rgb(162, 152, 22);" class="item">DIV2</div>
|
||||
|
||||
<div style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);" class="item">DIV3</div>
|
||||
|
||||
<div style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);" class="item">DIV4</div>
|
||||
|
||||
<div style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);" class="item">DIV5</div>
|
||||
</div></body></html>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -15,7 +15,7 @@
|
||||
width: 9em;
|
||||
min-height: 4em;
|
||||
color: white;
|
||||
align-content: flex-start;
|
||||
align-content: flex-end;
|
||||
background: green;
|
||||
}
|
||||
.item {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
width: 9em;
|
||||
min-height: 4em;
|
||||
color: white;
|
||||
align-content: flex-start;
|
||||
align-content: flex-end;
|
||||
background: green;
|
||||
}
|
||||
.item {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<!-- The match link is only required if this is a reftest -->
|
||||
<link href="reference/css-flexbox-img-expand-evenly-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="3 square images fill out border." name="assert">
|
||||
<meta content="3 rectangular images fill out border." name="assert">
|
||||
<style type="text/css">
|
||||
|
||||
/* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */
|
||||
@@ -28,7 +28,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>3 square images fill out border.</p>
|
||||
<p>3 rectangular images fill out border.</p>
|
||||
|
||||
<!-- PAGE CONTENT -->
|
||||
<div class="flexbox">
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 1.5em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
line-height: 1.5em;
|
||||
|
||||
/* make sure UA that doesn't support writing mode and flexbox fails. */
|
||||
float: right;
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: column nowrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-nowrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: column-reverse nowrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-nowrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: column-reverse wrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: column-reverse</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: column wrap-reverse</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: column wrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: column</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: nowrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-nowrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: row nowrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-row" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-nowrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: row-reverse nowrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-row-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-nowrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-nowrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: row-reverse wrap-reverse</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-row-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: row-reverse wrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-row-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: row-reverse</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-row-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row-reverse" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: row wrap-reverse</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-row" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: row wrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-row" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: row</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-row" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-row" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html><head><title>flexbox | computed style | flex-flow: wrap</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap" rel="help">
|
||||
<meta content="dom" name="flags">
|
||||
<style>
|
||||
body {
|
||||
|
||||
@@ -9,7 +9,7 @@ div {
|
||||
font-family: ahem;
|
||||
background: blue;
|
||||
height: 8em;
|
||||
width: 35ex;
|
||||
width: 35em;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | flexcontainer vs generated content</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-container" rel="help">
|
||||
<link href="reference/flexbox_generated-container-ref.htm" rel="match">
|
||||
<style>
|
||||
div {
|
||||
background: red;
|
||||
}
|
||||
div div {
|
||||
content: "xxx";
|
||||
background: blue;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
p {
|
||||
background: yellow;
|
||||
margin: 1em;
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div id="test">
|
||||
<div>
|
||||
<p>FAIL</p>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | min-height: auto</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" rel="help">
|
||||
<link href="reference/flexbox_min-height-auto-ref.htm" rel="match">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
width: 602px;
|
||||
}
|
||||
div {
|
||||
background: #3366cc;
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
p {
|
||||
background: yellow;
|
||||
margin: 1em;
|
||||
height: 0;
|
||||
min-height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | min-width: auto</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" rel="help">
|
||||
<link href="reference/flexbox_min-width-auto-ref.htm" rel="match">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
width: 602px;
|
||||
}
|
||||
div {
|
||||
background: #3366cc;
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
p {
|
||||
background: yellow;
|
||||
margin: 1em;
|
||||
width: 0;
|
||||
min-width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -16,7 +16,7 @@ span {
|
||||
flex: 1 0 0%;
|
||||
}
|
||||
span+span {
|
||||
background: yellow;
|
||||
background: white;
|
||||
order: 0;
|
||||
}
|
||||
/* irrelevant */
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html><head><title>flexbox | flex-direction: column-reverse | rtl</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse" rel="help">
|
||||
<link href="reference/flexbox_rtl-direction-ref.htm" rel="match">
|
||||
<style>
|
||||
div {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | flex-flow: column wrap-reverse | rtl</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse" rel="help">
|
||||
<link href="reference/flexbox_rtl-flow-reverse-ref.htm" rel="match">
|
||||
<style>
|
||||
div {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | flex-flow: column wrap | rtl</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap" rel="help">
|
||||
<link href="reference/flexbox_rtl-flow-ref.htm" rel="match">
|
||||
<style>
|
||||
div {
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<html><head><title>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-column-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valuedef-wrap-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse" rel="help">
|
||||
<link href="reference/flexbox_rtl-order-ref.htm" rel="match">
|
||||
<style>
|
||||
div {
|
||||
|
||||
@@ -23,6 +23,9 @@
|
||||
#third {
|
||||
order: 1;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox |css-box-justufy-content</title>
|
||||
<html><head><title>flexbox |css-box-justify-content</title>
|
||||
<link href="ava656094@gmail.com" rel="author" title="xiaoxia">
|
||||
<style>
|
||||
#flexbox {
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
align:right;
|
||||
text-align:left;
|
||||
width:50px;
|
||||
height: 30px;
|
||||
}
|
||||
@@ -24,4 +24,5 @@
|
||||
<div style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);" class="item">DIV3</div>
|
||||
<div style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);" class="item">DIV4</div>
|
||||
<div style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);" class="item">DIV5</div>
|
||||
</div></body></html>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -20,13 +20,14 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>3 square images fill out border.</p>
|
||||
<p>3 rectangular images fill out border.</p>
|
||||
|
||||
<!-- PAGE CONTENT -->
|
||||
<div class="flexbox">
|
||||
<img src="support/solidblue.png">
|
||||
<img src="support/solidblue.png">
|
||||
<img src="support/solidblue.png">
|
||||
<!-- It is important that there is no linebreak between the <img> tags.
|
||||
The line break would be rendered as whitespace, breaking the test.
|
||||
-->
|
||||
<img src="../support/solidblue.png"><img src="../support/solidblue.png"><img src="../support/solidblue.png">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
background: green;
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
left: 10px;
|
||||
}
|
||||
#a {
|
||||
top: 150px;
|
||||
left: 230px;
|
||||
top: 148px;
|
||||
left: 239px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
@@ -29,8 +29,8 @@
|
||||
flex: none;
|
||||
}
|
||||
#b {
|
||||
top: 150px;
|
||||
left: 283px;
|
||||
top: 148px;
|
||||
left: 293px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
@@ -41,8 +41,8 @@
|
||||
flex: none;
|
||||
}
|
||||
#c {
|
||||
top: 150px;
|
||||
left: 336px;
|
||||
top: 148px;
|
||||
left: 347px;
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
@@ -63,4 +63,5 @@
|
||||
<div style="position:absolute" id="b"></div>
|
||||
<div style="position:absolute" id="c"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -22,8 +22,8 @@
|
||||
<body>
|
||||
<div id="test">
|
||||
<div id="test">
|
||||
<p style="background:green;top:0px;height:300px;left:0px;height:300px;width:50px;">damer</p>
|
||||
<p style="top:0px;left:50px;height:300px;background:Red;width:51px;">damer</p>
|
||||
<p style="background:green;top:0px;height:300px;left:0px;height:300px;width:50.5px;">damer</p>
|
||||
<p style="top:0px;left:50.5px;height:300px;background:Red;width:50.5px;">damer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,9 +4,6 @@
|
||||
<link href="mailto:zhangcs_423@163.com" rel="author" title="Chunsheng Zhang">
|
||||
<style type="text/css">
|
||||
#container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 5px solid green;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
@@ -16,22 +13,16 @@
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
}
|
||||
div {
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
#flex {
|
||||
border: 2px dotted blue;
|
||||
background: green;
|
||||
border-radius: 3px;
|
||||
flex: 2 0 auto;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 160px;
|
||||
width: 254px;
|
||||
top: 73px;
|
||||
left: 166.5px;
|
||||
width: 253px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -39,9 +30,8 @@
|
||||
<p>This case tests that flex items flexibility</p>
|
||||
<p>The test passes if there is no red</p>
|
||||
<section id="container">
|
||||
<div></div>
|
||||
<div id="flex"></div>
|
||||
<div></div>
|
||||
</section>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -14,14 +14,13 @@ ul {
|
||||
}
|
||||
li {
|
||||
color: white;
|
||||
margin: 0 3px 0 0;
|
||||
margin: 0;
|
||||
width: 3.3333em;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><ul>
|
||||
<li>EFGH</li>
|
||||
<li>ABCD</li>
|
||||
<li>IJKL</li>
|
||||
<li>EFGH</li><li>ABCD</li><li>IJKL</li>
|
||||
</ul>
|
||||
</body></html>
|
||||
@@ -1,12 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | flexcontainer vs generated content</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<style>
|
||||
div {
|
||||
content: "xxx";
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div></div>
|
||||
</body></html>
|
||||
@@ -1,30 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | min-height: auto</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
width: 602px;
|
||||
}
|
||||
div {
|
||||
background: #3366cc;
|
||||
border: 1px solid black;
|
||||
}
|
||||
p {
|
||||
background: yellow;
|
||||
margin: 1em 1em 2em;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -1,33 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head><title>flexbox | min-width: auto</title>
|
||||
<link href="http://opera.com" rel="author" title="Opera Software">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
width: 602px;
|
||||
}
|
||||
div {
|
||||
background: #3366cc;
|
||||
border: 1px solid black;
|
||||
}
|
||||
div::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
background: yellow;
|
||||
margin: 1em;
|
||||
min-width: auto;
|
||||
width: auto;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body><div>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
<p>damer</p>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -9,7 +9,7 @@
|
||||
.test {
|
||||
width: 300px;
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
.test {
|
||||
width: 300px;
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
@@ -4,6 +4,9 @@
|
||||
<link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk">
|
||||
<link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins">
|
||||
<style>
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
span {
|
||||
height: 2em;
|
||||
display: inline-block;
|
||||
background: green;
|
||||
color: white;
|
||||
margin: 2.5em 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 bottom of container.</p>
|
||||
<div class="container">
|
||||
<span>first</span>
|
||||
<span>second</span>
|
||||
<span>third</span>
|
||||
<span>forth</span>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -5,10 +5,10 @@
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background: red;
|
||||
margin: 1em 0;
|
||||
border: 1px solid black;
|
||||
text-align: right;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
@@ -16,16 +16,14 @@
|
||||
color: white;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you see all the cells are arraged horizontally and the order of cells are reversed.</p>
|
||||
<p>The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.</p>
|
||||
<div class="container">
|
||||
<span>forth</span>
|
||||
<span>third</span>
|
||||
<span>second</span>
|
||||
<span>first</span>
|
||||
<span>forth</span><span>third</span><span>second</span><span>first</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Flexible Box Test: display proprety - inline-flex</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;
|
||||
}
|
||||
.greenSquare {
|
||||
display: inline-block;
|
||||
margin-top: -200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you see a green block which its text is 'Success!'.</p>
|
||||
<div class="container">
|
||||
<!-- This is the square that should not be visible if the test passes -->
|
||||
<div class="greenSquare">Success!</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -23,10 +23,7 @@
|
||||
<body>
|
||||
<p>The test passed if all the cells are reversed.</p>
|
||||
<div class="container">
|
||||
<span class="first">forth</span>
|
||||
<span class="second">third</span>
|
||||
<span class="third">second</span>
|
||||
<span class="forth">first</span>
|
||||
<span class="first">forth</span><span class="second">third</span><span class="third">second</span><span class="forth">first</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -338,7 +338,7 @@
|
||||
</tbody>
|
||||
<tbody id="css-box-justify-content" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="flexbox |css-box-justufy-content">
|
||||
<td rowspan="1" title="flexbox |css-box-justify-content">
|
||||
<a href="css-box-justify-content.htm">css-box-justify-content</a></td>
|
||||
<td><a href="reference/css-box-justify-content-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
@@ -3376,14 +3376,6 @@
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="flexbox_generated-container" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="flexbox | flexcontainer vs generated content">
|
||||
<a href="flexbox_generated-container.htm">flexbox_generated-container</a></td>
|
||||
<td><a href="reference/flexbox_generated-container-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="flexbox_generated-flex" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="flexbox | flexcontainer via generated content">
|
||||
@@ -3592,22 +3584,6 @@
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="flexbox_min-height-auto" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="flexbox | min-height: auto">
|
||||
<a href="flexbox_min-height-auto.htm">flexbox_min-height-auto</a></td>
|
||||
<td><a href="reference/flexbox_min-height-auto-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="flexbox_min-width-auto" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="flexbox | min-width: auto">
|
||||
<a href="flexbox_min-width-auto.htm">flexbox_min-width-auto</a></td>
|
||||
<td><a href="reference/flexbox_min-width-auto-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="flexbox_nested-flex" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="flexbox | nested flexcontainer">
|
||||
@@ -4232,6 +4208,14 @@
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="ttwf-reftest-flex-inline" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="display proprety - inline-flex">
|
||||
<a href="ttwf-reftest-flex-inline.htm">ttwf-reftest-flex-inline</a></td>
|
||||
<td><a href="reference/ttwf-reftest-flex-inline-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="ttwf-reftest-flex-order" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="order proprety - value">
|
||||
|
||||
@@ -418,7 +418,6 @@ flexbox_flow-column-wrap-reverse.htm == reference/flexbox_flow-column-wrap-rever
|
||||
flexbox_flow-row-wrap.htm == reference/flexbox_flow-row-wrap-ref.htm
|
||||
flexbox_flow-row-wrap-reverse.htm == reference/flexbox_flow-row-wrap-reverse-ref.htm
|
||||
flexbox_generated.htm == reference/flexbox_generated-ref.htm
|
||||
flexbox_generated-container.htm == reference/flexbox_generated-container-ref.htm
|
||||
flexbox_generated-flex.htm == reference/flexbox_generated-flex-ref.htm
|
||||
flexbox_generated-nested-flex.htm == reference/flexbox_generated-flex-ref.htm
|
||||
flexbox_inline.htm == reference/flexbox_inline-ref.htm
|
||||
@@ -445,8 +444,6 @@ flexbox_margin-auto-overflow.htm == reference/flexbox_margin-auto-overflow-ref.h
|
||||
flexbox_margin-auto-overflow-2.htm == reference/flexbox_margin-auto-overflow-2-ref.htm
|
||||
flexbox_margin-collapse.htm == reference/flexbox_margin-collapse-ref.htm
|
||||
flexbox_margin-left-ex.htm == reference/flexbox_margin-left-ex-ref.htm
|
||||
flexbox_min-height-auto.htm == reference/flexbox_min-height-auto-ref.htm
|
||||
flexbox_min-width-auto.htm == reference/flexbox_min-width-auto-ref.htm
|
||||
flexbox_nested-flex.htm == reference/flexbox_generated-flex-ref.htm
|
||||
flexbox_object.htm == reference/flexbox_object-ref.htm
|
||||
flexbox_order.htm == reference/flexbox_order-ref.htm
|
||||
@@ -525,6 +522,7 @@ 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-reverse-ref.htm
|
||||
ttwf-reftest-flex-direction-row-reverse.htm == reference/ttwf-reftest-flex-direction-row-reverse-ref.htm
|
||||
ttwf-reftest-flex-inline.htm == reference/ttwf-reftest-flex-inline-ref.htm
|
||||
ttwf-reftest-flex-order.htm == reference/ttwf-reftest-flex-order-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
|
||||
|
||||
@@ -27,22 +27,22 @@
|
||||
<tbody id="s2">
|
||||
<tr><th><a href="chapter-2.htm">Chapter 2 -
|
||||
Flex Layout Box Model and Terminology</a></th>
|
||||
<td>(30 Tests)</td></tr>
|
||||
<td>(29 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||
Flex Containers: the flex and inline-flex display values</a></th>
|
||||
<td>(35 Tests)</td></tr>
|
||||
<td>(36 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||
Flex Items</a></th>
|
||||
<td>(74 Tests)</td></tr>
|
||||
<td>(72 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s5">
|
||||
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
||||
Ordering and Orientation</a></th>
|
||||
<td>(149 Tests)</td></tr>
|
||||
<td>(150 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s6">
|
||||
<tr><th><a href="chapter-6.htm">Chapter 6 -
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you see all the cells are arraged horizontally and the order of cells are reversed.</p>
|
||||
<p>The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.</p>
|
||||
<div class="container">
|
||||
<span>first</span>
|
||||
<span>second</span>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Flexible Box Test: display proprety - inline-flex</title>
|
||||
<link href="mailto:haosdent@gmail.com" rel="author" title="haosdent">
|
||||
<link href="http://www.w3.org/TR/css-flexbox-1/#valdef-display-inline-flex" rel="help">
|
||||
<link href="reference/ttwf-reftest-flex-inline-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
|
||||
be visible in the case of failure */
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.greenSquare {
|
||||
display: inline-flex;
|
||||
margin-top: -200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passed if you see a green block which its text is 'Success!'.</p>
|
||||
<div class="container">
|
||||
<!-- This is the square that should not be visible if the test passes -->
|
||||
<div class="greenSquare">Success!</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user