Update CSS tests to revision 7a87ef71fc579e52d3438e009107aa442bc4021b

This commit is contained in:
Ms2ger 2015-10-06 12:33:05 +02:00
parent ad94ef5a96
commit 145aea3eeb
1196 changed files with 14344 additions and 6221 deletions

View file

@ -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;

View file

@ -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>
<col id="refs-column"></col>
@ -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.xht">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.xht">flexbox_generated-container</a></strong></td>
<td><a href="reference/flexbox_generated-container-ref.xht">=</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.xht">flexbox_generated-flex</a></strong></td>

View file

@ -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>
<col id="refs-column"></col>
@ -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.xht">ttwf-reftest-flex-inline</a></strong></td>
<td><a href="reference/ttwf-reftest-flex-inline-ref.xht">=</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>

View file

@ -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>
<col id="refs-column"></col>
@ -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.xht">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.xht">flexbox_min-height-auto</a></strong></td>
<td><a href="reference/flexbox_min-height-auto-ref.xht">=</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.xht">flexbox_min-width-auto</a></strong></td>
<td><a href="reference/flexbox_min-width-auto-ref.xht">=</a> </td>
<td></td>
<td>flexbox | min-width: auto
</td>
</tr>
</tbody>
<tbody id="s4.5.#min-size-opt">
<!-- 0 tests -->

View file

@ -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>
<col id="refs-column"></col>
@ -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.xht">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.xht">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.xht">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.xht">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.xht">flexbox_rtl-flow</a></td>
<td><a href="reference/flexbox_rtl-flow-ref.xht">=</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.xht">flexbox_rtl-flow-reverse</a></td>
<td><a href="reference/flexbox_rtl-flow-reverse-ref.xht">=</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.xht">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.xht">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.xht">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.xht">flexbox_rtl-direction</a></td>
<td><a href="reference/flexbox_rtl-direction-ref.xht">=</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.xht">flexbox_rtl-order</a></td>
<td><a href="reference/flexbox_rtl-order-ref.xht">=</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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">flexbox_rtl-flow</a></td>
<td><a href="reference/flexbox_rtl-flow-ref.xht">=</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.xht">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.xht">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.xht">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.xht">flexbox_rtl-flow-reverse</a></td>
<td><a href="reference/flexbox_rtl-flow-reverse-ref.xht">=</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.xht">flexbox_rtl-order</a></td>
<td><a href="reference/flexbox_rtl-order-ref.xht">=</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.xht">css-box-justify-content</a></td>
<td><a href="reference/css-box-justify-content-ref.xht">=</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">

View file

@ -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>

View file

@ -219,7 +219,7 @@
<a href="css-box-justify-content.xht">css-box-justify-content</a></strong></td>
<td><a href="reference/css-box-justify-content-ref.xht">=</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">

View file

@ -1,5 +1,5 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox |css-box-justufy-content</title>
<html xmlns="http://www.w3.org/1999/xhtml"><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>
&#xA0;
<div style="background-color: rgb(110, 8, 7); color: rgb(162, 152, 22);" class="item">DIV2</div>
&#xA0;
<div style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);" class="item">DIV3</div>
&#xA0;
<div style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);" class="item">DIV4</div>
&#xA0;
<div style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);" class="item">DIV5</div>
</div></body></html>
</div>
</body></html>

View file

@ -15,7 +15,7 @@
width: 9em;
min-height: 4em;
color: white;
align-content: flex-start;
align-content: flex-end;
background: green;
}
.item {

View file

@ -15,7 +15,7 @@
width: 9em;
min-height: 4em;
color: white;
align-content: flex-start;
align-content: flex-end;
background: green;
}
.item {

View file

@ -8,7 +8,7 @@
<!-- The match link is only required if this is a reftest -->
<link href="reference/css-flexbox-img-expand-evenly-ref.xht" 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">

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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 {

View file

@ -9,7 +9,7 @@ div {
font-family: ahem;
background: blue;
height: 8em;
width: 35ex;
width: 35em;
display: flex;
}

View file

@ -1,29 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>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.xht" 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>

View file

@ -1,32 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>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.xht" 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>

View file

@ -1,31 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>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.xht" 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>

View file

@ -16,7 +16,7 @@ span {
flex: 1 0 0%;
}
span+span {
background: yellow;
background: white;
order: 0;
}
/* irrelevant */

View file

@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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.xht" rel="match" />
<style>
div {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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.xht" rel="match" />
<style>
div {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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.xht" rel="match" />
<style>
div {

View file

@ -2,8 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml"><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.xht" rel="match" />
<style>
div {

View file

@ -23,6 +23,9 @@
#third {
order: 1;
}
p {
margin: 0;
}
</style>
</head>
<body>

View file

@ -1,5 +1,5 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox |css-box-justufy-content</title>
<html xmlns="http://www.w3.org/1999/xhtml"><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>

View file

@ -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>

View file

@ -12,6 +12,7 @@
background: green;
height: 3em;
width: 3em;
line-height: 1.5em;
}
</style>
</head>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -1,12 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>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>

View file

@ -1,30 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>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>

View file

@ -1,33 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>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>

View file

@ -9,7 +9,7 @@
.test {
width: 300px;
float: left;
width: 33.3%;
width: 33.3333%;
}
p {

View file

@ -9,7 +9,7 @@
.test {
width: 300px;
float: left;
width: 33.3%;
width: 33.3333%;
}
p {

View file

@ -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>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: 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>

View file

@ -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>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: display proprety - inline-flex</title>
<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>

View file

@ -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>

View file

@ -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.xht">css-box-justify-content</a></td>
<td><a href="reference/css-box-justify-content-ref.xht">=</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.xht">flexbox_generated-container</a></td>
<td><a href="reference/flexbox_generated-container-ref.xht">=</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.xht">flexbox_min-height-auto</a></td>
<td><a href="reference/flexbox_min-height-auto-ref.xht">=</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.xht">flexbox_min-width-auto</a></td>
<td><a href="reference/flexbox_min-width-auto-ref.xht">=</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.xht">ttwf-reftest-flex-inline</a></td>
<td><a href="reference/ttwf-reftest-flex-inline-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="ttwf-reftest-flex-order" class="">
<tr>
<td rowspan="1" title="order proprety - value">

View file

@ -418,7 +418,6 @@ flexbox_flow-column-wrap-reverse.xht == reference/flexbox_flow-column-wrap-rever
flexbox_flow-row-wrap.xht == reference/flexbox_flow-row-wrap-ref.xht
flexbox_flow-row-wrap-reverse.xht == reference/flexbox_flow-row-wrap-reverse-ref.xht
flexbox_generated.xht == reference/flexbox_generated-ref.xht
flexbox_generated-container.xht == reference/flexbox_generated-container-ref.xht
flexbox_generated-flex.xht == reference/flexbox_generated-flex-ref.xht
flexbox_generated-nested-flex.xht == reference/flexbox_generated-flex-ref.xht
flexbox_inline.xht == reference/flexbox_inline-ref.xht
@ -445,8 +444,6 @@ flexbox_margin-auto-overflow.xht == reference/flexbox_margin-auto-overflow-ref.x
flexbox_margin-auto-overflow-2.xht == reference/flexbox_margin-auto-overflow-2-ref.xht
flexbox_margin-collapse.xht == reference/flexbox_margin-collapse-ref.xht
flexbox_margin-left-ex.xht == reference/flexbox_margin-left-ex-ref.xht
flexbox_min-height-auto.xht == reference/flexbox_min-height-auto-ref.xht
flexbox_min-width-auto.xht == reference/flexbox_min-width-auto-ref.xht
flexbox_nested-flex.xht == reference/flexbox_generated-flex-ref.xht
flexbox_object.xht == reference/flexbox_object-ref.xht
flexbox_order.xht == reference/flexbox_order-ref.xht
@ -525,6 +522,7 @@ ttwf-reftest-flex-base.xht == reference/ttwf-reftest-flex-base-ref.xht
ttwf-reftest-flex-direction-column.xht == reference/ttwf-reftest-flex-direction-column-ref.xht
ttwf-reftest-flex-direction-column-reverse.xht == reference/ttwf-reftest-flex-direction-column-reverse-ref.xht
ttwf-reftest-flex-direction-row-reverse.xht == reference/ttwf-reftest-flex-direction-row-reverse-ref.xht
ttwf-reftest-flex-inline.xht == reference/ttwf-reftest-flex-inline-ref.xht
ttwf-reftest-flex-order.xht == reference/ttwf-reftest-flex-order-ref.xht
ttwf-reftest-flex-wrap.xht == reference/ttwf-reftest-flex-wrap-ref.xht
ttwf-reftest-flex-wrap-reverse.xht == reference/ttwf-reftest-flex-wrap-reverse-ref.xht

View file

@ -27,22 +27,22 @@
<tbody id="s2">
<tr><th><a href="chapter-2.xht">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.xht">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.xht">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.xht">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.xht">Chapter 6 -

View file

@ -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>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Flexible Box Test: display proprety - inline-flex</title>
<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.xht" rel="match" />
<meta content="Statement describing what the test case is asserting" name="assert" />
<style type="text/css">
/* Positioned container allows for the self-describing statement to still
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>