diff options
| author | Ms2ger <Ms2ger@gmail.com> | 2015-08-21 17:46:44 +0200 |
|---|---|---|
| committer | Ms2ger <Ms2ger@gmail.com> | 2015-08-21 18:40:37 +0200 |
| commit | f235d49372ba86d6d01530fe1b9ebdf8bea74468 (patch) | |
| tree | 13d3535ee53fcae1b8d61265e3d97adb00dd60eb /tests/wpt/css-tests/css-flexbox-1_dev/xhtml1 | |
| parent | 7c45ff8e05a6ebd21f9aa5c360e997a01d48b1fc (diff) | |
| download | servo-f235d49372ba86d6d01530fe1b9ebdf8bea74468.tar.gz servo-f235d49372ba86d6d01530fe1b9ebdf8bea74468.zip | |
Update CSS tests to revision d674587d6ae7d2e231d632785559f2613d554eb0
Diffstat (limited to 'tests/wpt/css-tests/css-flexbox-1_dev/xhtml1')
43 files changed, 1434 insertions, 42 deletions
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-4.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-4.xht index e3bf234bbb8..4a3dbcb19a6 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-4.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-4.xht @@ -13,7 +13,7 @@ <body> <h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1> - <h2>Flex Items (57 tests)</h2> + <h2>Flex Items (58 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> @@ -288,7 +288,18 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s4.2">+</a> <a href="http://www.w3.org/TR/css-flexbox-1/#item-margins">4.2 Flex Item Margins and Paddings</a></th></tr> - <!-- 2 tests --> + <!-- 3 tests --> + <tr id="flex-container-margin-4.2" class="primary"> + <td><strong> + <a href="flex-container-margin.xht">flex-container-margin</a></strong></td> + <td><a href="reference/flex-container-margin-ref.xht">=</a> </td> + <td></td> + <td>flex-container-margin-not-collapse-with-content-margin + <ul class="assert"> + <li>The margins of adjacent flex items do not collapse.</li> + </ul> + </td> + </tr> <tr id="flex-margin-no-collapse-4.2" class=""> <td> <a href="flex-margin-no-collapse.xht">flex-margin-no-collapse</a></td> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-5.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-5.xht index fbdfd0d712e..ea92f3f636a 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-5.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-5.xht @@ -13,7 +13,7 @@ <body> <h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1> - <h2>Ordering and Orientation (129 tests)</h2> + <h2>Ordering and Orientation (149 tests)</h2> <table width="100%"> <col id="test-column"></col> <col id="refs-column"></col> @@ -1351,7 +1351,7 @@ <tr><th colspan="4" scope="rowgroup"> <a href="#s5.4">+</a> <a href="http://www.w3.org/TR/css-flexbox-1/#order-property">5.4 Display Order: the order property</a></th></tr> - <!-- 1 tests --> + <!-- 21 tests --> <tr id="flex-order-5.4" class="primary"> <td><strong> <a href="flex-order.xht">flex-order</a></strong></td> @@ -1363,6 +1363,166 @@ </ul> </td> </tr> + <tr id="grid-inline-order-property-auto-placement-001-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-auto-placement-001.xht">grid-inline-order-property-auto-placement-001</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-auto-placement-002-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-auto-placement-002.xht">grid-inline-order-property-auto-placement-002</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-auto-placement-003-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-auto-placement-003.xht">grid-inline-order-property-auto-placement-003</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-auto-placement-004-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-auto-placement-004.xht">grid-inline-order-property-auto-placement-004</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-auto-placement-005-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-auto-placement-005.xht">grid-inline-order-property-auto-placement-005</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-painting-001-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-painting-001.xht">grid-inline-order-property-painting-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-painting-002-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-painting-002.xht">grid-inline-order-property-painting-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-painting-003-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-painting-003.xht">grid-inline-order-property-painting-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-painting-004-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-painting-004.xht">grid-inline-order-property-painting-004</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order within an inline grid + </td> + </tr> + <tr id="grid-inline-order-property-painting-005-5.4" class="ahem"> + <td> + <a href="grid-inline-order-property-painting-005.xht">grid-inline-order-property-painting-005</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order within an inline grid + </td> + </tr> + <tr id="grid-order-property-auto-placement-001-5.4" class="ahem"> + <td> + <a href="grid-order-property-auto-placement-001.xht">grid-order-property-auto-placement-001</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position + </td> + </tr> + <tr id="grid-order-property-auto-placement-002-5.4" class="ahem"> + <td> + <a href="grid-order-property-auto-placement-002.xht">grid-order-property-auto-placement-002</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position + </td> + </tr> + <tr id="grid-order-property-auto-placement-003-5.4" class="ahem"> + <td> + <a href="grid-order-property-auto-placement-003.xht">grid-order-property-auto-placement-003</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position + </td> + </tr> + <tr id="grid-order-property-auto-placement-004-5.4" class="ahem"> + <td> + <a href="grid-order-property-auto-placement-004.xht">grid-order-property-auto-placement-004</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position + </td> + </tr> + <tr id="grid-order-property-auto-placement-005-5.4" class="ahem"> + <td> + <a href="grid-order-property-auto-placement-005.xht">grid-order-property-auto-placement-005</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items auto-placement position + </td> + </tr> + <tr id="grid-order-property-painting-001-5.4" class="ahem"> + <td> + <a href="grid-order-property-painting-001.xht">grid-order-property-painting-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order + </td> + </tr> + <tr id="grid-order-property-painting-002-5.4" class="ahem"> + <td> + <a href="grid-order-property-painting-002.xht">grid-order-property-painting-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order + </td> + </tr> + <tr id="grid-order-property-painting-003-5.4" class="ahem"> + <td> + <a href="grid-order-property-painting-003.xht">grid-order-property-painting-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order + </td> + </tr> + <tr id="grid-order-property-painting-004-5.4" class="ahem"> + <td> + <a href="grid-order-property-painting-004.xht">grid-order-property-painting-004</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order + </td> + </tr> + <tr id="grid-order-property-painting-005-5.4" class="ahem"> + <td> + <a href="grid-order-property-painting-005.xht">grid-order-property-painting-005</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + <td>'order' property affects grid items painting order + </td> + </tr> </tbody> <tbody id="s5.4.#example-6155594a"> <!-- 0 tests --> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-9.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-9.xht index 176fa40ff48..c949442c58c 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-9.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/chapter-9.xht @@ -216,7 +216,7 @@ <td>Testing the sizing of a stretched horizontal flex container in a vertical flex container <ul class="assert"> <li>If a stretched flex item's main size is influenced by its cross size, and the flex container has a definite cross size, then the item's cross size should be resolved early so that it can be used when determining the item's main size</li> - <li>http://dev.w3.org/csswg/css-flexbox/issues-cr-2012#issue-23</li> + <li>https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23</li> </ul> </td> </tr> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse-wrap-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse-wrap-reverse.xht index d72f89f0889..f1a5abbf083 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse-wrap-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse-wrap-reverse.xht @@ -9,11 +9,8 @@ <meta content="Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical." name="assert" /> <style type="text/css"> .container { - display: -webkit-flex; display: flex; - -webkit-flex-flow: column-reverse wrap-reverse; flex-flow: column-reverse wrap-reverse; - -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; width: 9em; min-height: 4em; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse-wrap.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse-wrap.xht index 13fd92d10b0..ae756f965fe 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse-wrap.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse-wrap.xht @@ -9,11 +9,8 @@ <meta content="Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical." name="assert" /> <style type="text/css"> .container { - display: -webkit-flex; display: flex; - -webkit-flex-flow: column-reverse wrap; flex-flow: column-reverse wrap; - -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; width: 9em; min-height: 4em; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse.xht index 4452ea4d925..9d7ec41b8d9 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-reverse.xht @@ -9,11 +9,8 @@ <meta content="Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical." name="assert" /> <style type="text/css"> .container { - display: -webkit-flex; display: flex; - -webkit-flex-flow: column-reverse; flex-flow: column-reverse; - -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; width: 9em; color: white; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-wrap-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-wrap-reverse.xht index edb38e97307..d6b2fdb6e71 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-wrap-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-wrap-reverse.xht @@ -9,11 +9,8 @@ <meta content="Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical." name="assert" /> <style type="text/css"> .container { - display: -webkit-flex; display: flex; - -webkit-flex-flow: column wrap-reverse; flex-flow: column wrap-reverse; - -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; width: 9em; min-height: 4em; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-wrap.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-wrap.xht index 3f22f154cab..aeaebe31fc0 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-wrap.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column-wrap.xht @@ -9,11 +9,8 @@ <meta content="Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical." name="assert" /> <style type="text/css"> .container { - display: -webkit-flex; display: flex; - -webkit-flex-flow: column wrap; flex-flow: column wrap; - -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; width: 9em; min-height: 4em; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column.xht index 1c6db2bc660..032fba3e598 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/css-flexbox-column.xht @@ -9,11 +9,8 @@ <meta content="Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical." name="assert" /> <style type="text/css"> .container { - display: -webkit-flex; display: flex; - -webkit-flex-flow: column; flex-flow: column; - -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; width: 9em; color: white; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-container-margin.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-container-margin.xht new file mode 100644 index 00000000000..37786cbc3cc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-container-margin.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> +<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" /> +<link href="https://drafts.csswg.org/css-flexbox-1/#item-margins" rel="help" /> +<link href="reference/flex-container-margin-ref.xht" rel="match" /> +<meta content="The margins of adjacent flex items do not collapse." name="assert" /> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + width:50px; + height:50px; + margin:20px; + background: #eee; + } +</style> +</head> +<body> + <div class="flex-container"> + <div class="flex-item"></div> + <div class="flex-item"></div> + <div class="flex-item"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-flexitem-percentage-prescation.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-flexitem-percentage-prescation.xht index 25f4298cab9..f89a8986b2b 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-flexitem-percentage-prescation.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-flexitem-percentage-prescation.xht @@ -10,16 +10,13 @@ #test { background: blue; - display: -webkit-flex; display: flex; height:300px; width:101px; } p { flex:1; - -webkit-flex:1; background:red; - -webkit-flex-direction:row; flex-direction:row; margin:0 0 0 0; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-order.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-order.xht index b477920f646..759a1009f9a 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-order.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flex-order.xht @@ -7,20 +7,20 @@ <meta content="ordered flex items should ordered properly" name="assert" /> <style> #container { - display: -webkit-flex; + display: flex; } #lowOrdinal { - -webkit-order: 3; + order: 3; background: red; height: 100px; width: 100px; } #highOrdinal { - -webkit-order: 1; + order: 1; background: lime; height: 100px; width: 100px; } #middleOrdinal { - -webkit-order: 2; + order: 2; background: orange; height: 100px; width: 100px; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox-align-self-stretch-vert-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox-align-self-stretch-vert-001.xht index ce7a26d9d54..cb7ab7627c5 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox-align-self-stretch-vert-001.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox-align-self-stretch-vert-001.xht @@ -8,7 +8,7 @@ <link href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm" rel="help" /> <link href="reference/flexbox-align-self-stretch-vert-001-ref.xht" rel="match" /> <meta content="If a stretched flex item's main size is influenced by its cross size, and the flex container has a definite cross size, then the item's cross size should be resolved early so that it can be used when determining the item's main size" name="assert" /> - <meta content="http://dev.w3.org/csswg/css-flexbox/issues-cr-2012#issue-23" name="assert" /> + <meta content="https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23" name="assert" /> <meta charset="utf-8" /> <style> div.fixedWidthWrapper { diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox-baseline-align-self-baseline-vert-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox-baseline-align-self-baseline-vert-001.xht index 4ee5bbc771d..bc2cc79e479 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox-baseline-align-self-baseline-vert-001.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox-baseline-align-self-baseline-vert-001.xht @@ -25,8 +25,6 @@ .flexContainer { display: inline-flex; flex-direction: column; - display: -webkit-inline-flex; - -webkit-flex-direction: column; background: lightblue; align-items: baseline; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox_fbfc2.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox_fbfc2.xht index cd8e95d4968..db1b99940bf 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox_fbfc2.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox_fbfc2.xht @@ -14,9 +14,6 @@ background: #ffcc00; margin-left: -200px; width: 400px; - display: -moz-box; - display: -ms-box; - display: -webkit-box; display: flex; } div div { diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox_flex-formatting-interop.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox_flex-formatting-interop.xht index 060c0248870..03541854e35 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox_flex-formatting-interop.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/flexbox_flex-formatting-interop.xht @@ -17,8 +17,6 @@ width: 200px; display: flex; - display: -ms-flex; - display: -webkit-flex; } div div { border: 2px solid transparent; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-001.xht new file mode 100644 index 00000000000..73c0ec35481 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-001.xht @@ -0,0 +1,57 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + } + + #yellow { + color: yellow; + order: 1; + } + + #lime { + color: lime; + order: 5; + } + + #magenta { + color: magenta; + order: 10; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="inline-grid"> + <div id="magenta">M</div> + <div id="lime">L</div> + <div id="yellow">Y</div> + <div id="blue">B</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-002.xht new file mode 100644 index 00000000000..8b3e9e4fa66 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-002.xht @@ -0,0 +1,57 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -10; + } + + #yellow { + color: yellow; + order: -5; + } + + #lime { + color: lime; + order: -1; + } + + #magenta { + color: magenta; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="inline-grid"> + <div id="magenta">M</div> + <div id="lime">L</div> + <div id="yellow">Y</div> + <div id="blue">B</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-003.xht new file mode 100644 index 00000000000..0283292ec3f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-003.xht @@ -0,0 +1,57 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -5; + } + + #yellow { + color: yellow; + order: -5; + } + + #lime { + color: lime; + } + + #magenta { + color: magenta; + order: 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="inline-grid"> + <div id="lime">L</div> + <div id="magenta">M</div> + <div id="blue">B</div> + <div id="yellow">Y</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-004.xht new file mode 100644 index 00000000000..f97e1062085 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-004.xht @@ -0,0 +1,58 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: 1; + } + + #yellow { + color: yellow; + order: 1; + } + + #lime { + color: lime; + order: 5; + } + + #magenta { + color: magenta; + order: 5; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="inline-grid"> + <div id="blue">B</div> + <div id="lime">L</div> + <div id="magenta">M</div> + <div id="yellow">Y</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-005.xht new file mode 100644 index 00000000000..c8a670021a9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-auto-placement-005.xht @@ -0,0 +1,58 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #inline-grid { + display: inline-grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -5; + } + + #yellow { + color: yellow; + order: -1; + } + + #lime { + color: lime; + order: 1; + } + + #magenta { + color: magenta; + order: 5; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="inline-grid"> + <div id="yellow">Y</div> + <div id="magenta">M</div> + <div id="blue">B</div> + <div id="lime">L</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-001.xht new file mode 100644 index 00000000000..f282d6c857d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-001.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 1; + } + + #reference-item-overlapped-red { + color: red; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-002.xht new file mode 100644 index 00000000000..76152dba23f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-002.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + } + + #reference-item-overlapped-red { + color: red; + order: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-003.xht new file mode 100644 index 00000000000..ae20cc6e3cb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-003.xht @@ -0,0 +1,39 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 10; + } + + #reference-item-overlapped-red { + color: red; + order: 5; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-004.xht new file mode 100644 index 00000000000..6d53a380803 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-004.xht @@ -0,0 +1,39 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: -5; + } + + #reference-item-overlapped-red { + color: red; + order: -10; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-005.xht new file mode 100644 index 00000000000..cdc842304d9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-inline-order-property-painting-005.xht @@ -0,0 +1,39 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #inline-grid { + display: inline-grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 1; + } + + #reference-item-overlapped-red { + color: red; + order: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="inline-grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-001.xht new file mode 100644 index 00000000000..f67510ad5b4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-001.xht @@ -0,0 +1,57 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + } + + #yellow { + color: yellow; + order: 1; + } + + #lime { + color: lime; + order: 5; + } + + #magenta { + color: magenta; + order: 10; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="grid"> + <div id="magenta">M</div> + <div id="lime">L</div> + <div id="yellow">Y</div> + <div id="blue">B</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-002.xht new file mode 100644 index 00000000000..ae8460e87d2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-002.xht @@ -0,0 +1,57 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -10; + } + + #yellow { + color: yellow; + order: -5; + } + + #lime { + color: lime; + order: -1; + } + + #magenta { + color: magenta; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="grid"> + <div id="magenta">M</div> + <div id="lime">L</div> + <div id="yellow">Y</div> + <div id="blue">B</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-003.xht new file mode 100644 index 00000000000..957553d372a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-003.xht @@ -0,0 +1,57 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -5; + } + + #yellow { + color: yellow; + order: -5; + } + + #lime { + color: lime; + } + + #magenta { + color: magenta; + order: 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="grid"> + <div id="lime">L</div> + <div id="magenta">M</div> + <div id="blue">B</div> + <div id="yellow">Y</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-004.xht new file mode 100644 index 00000000000..0a5e4614c83 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-004.xht @@ -0,0 +1,58 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: 1; + } + + #yellow { + color: yellow; + order: 1; + } + + #lime { + color: lime; + order: 5; + } + + #magenta { + color: magenta; + order: 5; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="grid"> + <div id="blue">B</div> + <div id="lime">L</div> + <div id="magenta">M</div> + <div id="yellow">Y</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-005.xht new file mode 100644 index 00000000000..38538b2cc7d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-auto-placement-005.xht @@ -0,0 +1,58 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #grid { + display: grid; + font: 50px/1 Ahem; + grid-template-columns: auto auto; + } + + #blue { + color: blue; + order: -5; + } + + #yellow { + color: yellow; + order: -1; + } + + #lime { + color: lime; + order: 1; + } + + #magenta { + color: magenta; + order: 5; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div id="reference-overlapped-red"></div> + <div id="grid"> + <div id="yellow">Y</div> + <div id="magenta">M</div> + <div id="blue">B</div> + <div id="lime">L</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-001.xht new file mode 100644 index 00000000000..b1f04e77dd5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-001.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 1; + } + + #reference-item-overlapped-red { + color: red; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-002.xht new file mode 100644 index 00000000000..9f59baa8275 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-002.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + } + + #reference-item-overlapped-red { + color: red; + order: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-003.xht new file mode 100644 index 00000000000..77240d490e7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-003.xht @@ -0,0 +1,39 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 10; + } + + #reference-item-overlapped-red { + color: red; + order: 5; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-004.xht new file mode 100644 index 00000000000..dcc912a2578 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-004.xht @@ -0,0 +1,39 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: -5; + } + + #reference-item-overlapped-red { + color: red; + order: -10; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-005.xht new file mode 100644 index 00000000000..81e7466ea86 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/grid-order-property-painting-005.xht @@ -0,0 +1,39 @@ +<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: 'order' property affects grid items painting order</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" /> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" /> + <link rel="match" href="reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + #grid { + display: grid; + font: 100px/1 Ahem; + } + + #test-item-overlapping-green { + color: green; + order: 1; + } + + #reference-item-overlapped-red { + color: red; + order: -1; + } + + .first-row-first-column { + grid-area: 1 / 1; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="grid"> + <div id="test-item-overlapping-green" class="first-row-first-column">G</div> + <div id="reference-item-overlapped-red" class="first-row-first-column">R</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-flexbox-column-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-flexbox-column-ref.xht index 4f4b322478b..3ac0639340b 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-flexbox-column-ref.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-flexbox-column-ref.xht @@ -9,7 +9,6 @@ width: 9em; } .item { - -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; background: green; height: 4em; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flex-container-margin-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flex-container-margin-ref.xht new file mode 100644 index 00000000000..38187fe38ca --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flex-container-margin-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> +<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + } + .flex-item.first{ + margin-left:20px; + } + .flex-item.last{ + margin-right: 20px; + } +</style> +</head> +<body> + <div class="flex-container"> + <div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flex-order-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flex-order-ref.xht index 1ba69136aa2..527604fc061 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flex-order-ref.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flex-order-ref.xht @@ -3,7 +3,7 @@ <title>CSS Reftest Reference: flex order</title> <link href="mailto:mitsuteru.s@gmail.com" rel="author" title="Mitsuteru Sawa" /> <style> - #container { display: -webkit-flex; } + #container { display: flex; } #highOrdinal { background: lime; height: 100px; width: 100px; diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/grid-2x2-blue-yellow-lime-magenta.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/grid-2x2-blue-yellow-lime-magenta.xht new file mode 100644 index 00000000000..8e83cab6f9f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/grid-2x2-blue-yellow-lime-magenta.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title> + <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" /> + <style type="text/css"><![CDATA[ + div { + font: 50px/1 Ahem; + } + + #blue { + color: blue; + } + + #yellow { + color: yellow; + } + + #lime { + color: lime; + } + + #magenta { + color: magenta; + } + ]]></style> + </head> + <body> + <p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p> + <p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p> + + <div> + <span id="blue">B</span><span id="yellow">Y</span> + <br /> + <span id="lime">L</span><span id="magenta">M</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reftest-toc.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reftest-toc.xht index 64653047780..75ac520c053 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reftest-toc.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reftest-toc.xht @@ -584,6 +584,14 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="flex-container-margin" class=""> + <tr> + <td rowspan="1" title="flex-container-margin-not-collapse-with-content-margin"> + <a href="flex-container-margin.xht">flex-container-margin</a></td> + <td><a href="reference/flex-container-margin-ref.xht">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> <tbody id="flex-direction" class=""> <tr> <td rowspan="1" title="flex flow direction"> @@ -3736,6 +3744,166 @@ <td rowspan="1"></td> </tr> </tbody> + <tbody id="grid-inline-order-property-auto-placement-001" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid"> + <a href="grid-inline-order-property-auto-placement-001.xht">grid-inline-order-property-auto-placement-001</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-auto-placement-002" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid"> + <a href="grid-inline-order-property-auto-placement-002.xht">grid-inline-order-property-auto-placement-002</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-auto-placement-003" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid"> + <a href="grid-inline-order-property-auto-placement-003.xht">grid-inline-order-property-auto-placement-003</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-auto-placement-004" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid"> + <a href="grid-inline-order-property-auto-placement-004.xht">grid-inline-order-property-auto-placement-004</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-auto-placement-005" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position within an inline grid"> + <a href="grid-inline-order-property-auto-placement-005.xht">grid-inline-order-property-auto-placement-005</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-painting-001" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order within an inline grid"> + <a href="grid-inline-order-property-painting-001.xht">grid-inline-order-property-painting-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-painting-002" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order within an inline grid"> + <a href="grid-inline-order-property-painting-002.xht">grid-inline-order-property-painting-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-painting-003" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order within an inline grid"> + <a href="grid-inline-order-property-painting-003.xht">grid-inline-order-property-painting-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-painting-004" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order within an inline grid"> + <a href="grid-inline-order-property-painting-004.xht">grid-inline-order-property-painting-004</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-inline-order-property-painting-005" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order within an inline grid"> + <a href="grid-inline-order-property-painting-005.xht">grid-inline-order-property-painting-005</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-auto-placement-001" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position"> + <a href="grid-order-property-auto-placement-001.xht">grid-order-property-auto-placement-001</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-auto-placement-002" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position"> + <a href="grid-order-property-auto-placement-002.xht">grid-order-property-auto-placement-002</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-auto-placement-003" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position"> + <a href="grid-order-property-auto-placement-003.xht">grid-order-property-auto-placement-003</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-auto-placement-004" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position"> + <a href="grid-order-property-auto-placement-004.xht">grid-order-property-auto-placement-004</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-auto-placement-005" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items auto-placement position"> + <a href="grid-order-property-auto-placement-005.xht">grid-order-property-auto-placement-005</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-painting-001" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order"> + <a href="grid-order-property-painting-001.xht">grid-order-property-painting-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-painting-002" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order"> + <a href="grid-order-property-painting-002.xht">grid-order-property-painting-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-painting-003" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order"> + <a href="grid-order-property-painting-003.xht">grid-order-property-painting-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-painting-004" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order"> + <a href="grid-order-property-painting-004.xht">grid-order-property-painting-004</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> + <tbody id="grid-order-property-painting-005" class="ahem"> + <tr> + <td rowspan="1" title="'order' property affects grid items painting order"> + <a href="grid-order-property-painting-005.xht">grid-order-property-painting-005</a></td> + <td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td> + <td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td> + </tr> + </tbody> <tbody id="justify-content-001" class="image"> <tr> <td rowspan="1" title="A flex container with 'justify-content' property set to 'center'"> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reftest.list b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reftest.list index f4687c773ca..d830774b0fa 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reftest.list +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reftest.list @@ -69,6 +69,7 @@ flex-basis-006.xht == reference/ref-filled-green-100px-square.xht flex-basis-007.xht == reference/ref-filled-green-100px-square.xht flex-basis-008.xht == reference/ref-filled-green-100px-square.xht flex-box-wrap.xht == reference/flex-box-wrap-ref.xht +flex-container-margin.xht == reference/flex-container-margin-ref.xht flex-direction.xht == reference/flex-direction.xht flex-direction-modify.xht == reference/flex-direction-modify.xht flex-direction-with-element-insert.xht == reference/flex-direction-with-element-insert.xht @@ -463,6 +464,26 @@ flexbox_wrap-reverse.xht == reference/flexbox_wrap-reverse-ref.xht flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.xht == reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.xht flexible-box-float.xht == reference/flex-box-float-ref.xht Flexible-order.xht == reference/Flexible-order-ref.xht +grid-inline-order-property-auto-placement-001.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-inline-order-property-auto-placement-002.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-inline-order-property-auto-placement-003.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-inline-order-property-auto-placement-004.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-inline-order-property-auto-placement-005.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-inline-order-property-painting-001.xht == reference/ref-filled-green-100px-square.xht +grid-inline-order-property-painting-002.xht == reference/ref-filled-green-100px-square.xht +grid-inline-order-property-painting-003.xht == reference/ref-filled-green-100px-square.xht +grid-inline-order-property-painting-004.xht == reference/ref-filled-green-100px-square.xht +grid-inline-order-property-painting-005.xht == reference/ref-filled-green-100px-square.xht +grid-order-property-auto-placement-001.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-order-property-auto-placement-002.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-order-property-auto-placement-003.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-order-property-auto-placement-004.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-order-property-auto-placement-005.xht == reference/grid-2x2-blue-yellow-lime-magenta.xht +grid-order-property-painting-001.xht == reference/ref-filled-green-100px-square.xht +grid-order-property-painting-002.xht == reference/ref-filled-green-100px-square.xht +grid-order-property-painting-003.xht == reference/ref-filled-green-100px-square.xht +grid-order-property-painting-004.xht == reference/ref-filled-green-100px-square.xht +grid-order-property-painting-005.xht == reference/ref-filled-green-100px-square.xht justify-content-001.xht == reference/justify-content-001-ref.xht justify-content-002.xht == reference/justify-content-001-ref.xht justify-content-003.xht == reference/justify-content-001-ref.xht diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/toc.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/toc.xht index 9823b1c7b97..8da21cf30e1 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/toc.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/toc.xht @@ -37,12 +37,12 @@ <tbody id="s4"> <tr><th><a href="chapter-4.xht">Chapter 4 - Flex Items</a></th> - <td>(57 Tests)</td></tr> + <td>(58 Tests)</td></tr> </tbody> <tbody id="s5"> <tr><th><a href="chapter-5.xht">Chapter 5 - Ordering and Orientation</a></th> - <td>(129 Tests)</td></tr> + <td>(149 Tests)</td></tr> </tbody> <tbody id="s6"> <tr><th><a href="chapter-6.xht">Chapter 6 - |