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 | |
| 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')
133 files changed, 4592 insertions, 162 deletions
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm index 9ae15820783..e4200a15d85 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm @@ -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 id="refs-column"> @@ -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.htm">flex-container-margin</a></strong></td> + <td><a href="reference/flex-container-margin-ref.htm">=</a> </td> + <td></td> + <td>flex-container-margin-not-collapse-with-content-margin + <ul class="assert"> + <li>The margins of adjacent flex items do not collapse.</li> + </ul> + </td> + </tr> <tr id="flex-margin-no-collapse-4.2" class=""> <td> <a href="flex-margin-no-collapse.htm">flex-margin-no-collapse</a></td> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-5.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-5.htm index 24563ee1354..16f013f8fd7 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-5.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-5.htm @@ -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 id="refs-column"> @@ -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.htm">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.htm">grid-inline-order-property-auto-placement-001</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-auto-placement-002</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-auto-placement-003</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-auto-placement-004</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-auto-placement-005</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-painting-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-inline-order-property-painting-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-inline-order-property-painting-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-inline-order-property-painting-004</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-inline-order-property-painting-005</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-auto-placement-001</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-auto-placement-002</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-auto-placement-003</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-auto-placement-004</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-auto-placement-005</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-painting-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-painting-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-painting-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-painting-004</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-painting-005</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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/html/chapter-9.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm index 4e37168de3d..b3d9e14fcdd 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm @@ -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/html/css-flexbox-column-reverse-wrap-reverse.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap-reverse.htm index 8df0cf3b34d..c9ff7298149 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap-reverse.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap-reverse.htm @@ -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/html/css-flexbox-column-reverse-wrap.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap.htm index 21131ce97e1..160c94d313a 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap.htm @@ -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/html/css-flexbox-column-reverse.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm index e0142dc9064..4a59313016a 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm @@ -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/html/css-flexbox-column-wrap-reverse.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap-reverse.htm index 6a43cecd0d7..63f4ae77739 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap-reverse.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap-reverse.htm @@ -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/html/css-flexbox-column-wrap.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap.htm index 5a6684e9925..014b4279edc 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap.htm @@ -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/html/css-flexbox-column.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column.htm index 1600b8f263e..f1e3353b7c3 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column.htm @@ -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/html/flex-container-margin.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-container-margin.htm new file mode 100644 index 00000000000..9f4aeea2e1b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-container-margin.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><head> +<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> +<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu"> +<link href="https://drafts.csswg.org/css-flexbox-1/#item-margins" rel="help"> +<link href="reference/flex-container-margin-ref.htm" rel="match"> +<meta content="The margins of adjacent flex items do not collapse." name="assert"> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + width:50px; + height:50px; + margin:20px; + background: #eee; + } +</style> +</head> +<body> + <div class="flex-container"> + <div class="flex-item"></div> + <div class="flex-item"></div> + <div class="flex-item"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-flexitem-percentage-prescation.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-flexitem-percentage-prescation.htm index dc1bd5d0885..35583b9ae2e 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-flexitem-percentage-prescation.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-flexitem-percentage-prescation.htm @@ -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/html/flex-order.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-order.htm index abdcc31a5ec..206928afc8b 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-order.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flex-order.htm @@ -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/html/flexbox-align-self-stretch-vert-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-align-self-stretch-vert-001.htm index 18ab57efdb8..bf1a13e268e 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-align-self-stretch-vert-001.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-align-self-stretch-vert-001.htm @@ -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.htm" 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/html/flexbox-baseline-align-self-baseline-vert-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-baseline-align-self-baseline-vert-001.htm index 5964fca2f0e..293a0524545 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-baseline-align-self-baseline-vert-001.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-baseline-align-self-baseline-vert-001.htm @@ -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/html/flexbox_fbfc2.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_fbfc2.htm index 81a41ed5ee4..9560cbd9cce 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_fbfc2.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_fbfc2.htm @@ -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/html/flexbox_flex-formatting-interop.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_flex-formatting-interop.htm index e15d01de357..b06f3792d03 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_flex-formatting-interop.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_flex-formatting-interop.htm @@ -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/html/grid-inline-order-property-auto-placement-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-001.htm new file mode 100644 index 00000000000..13bfc3e027e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-001.htm @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-auto-placement-002.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-002.htm new file mode 100644 index 00000000000..8383b48b775 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-002.htm @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-auto-placement-003.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-003.htm new file mode 100644 index 00000000000..83d4cb72e20 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-003.htm @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-auto-placement-004.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-004.htm new file mode 100644 index 00000000000..8ec0d7d7504 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-004.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-auto-placement-005.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-005.htm new file mode 100644 index 00000000000..98bd6981850 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-005.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-painting-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-001.htm new file mode 100644 index 00000000000..a87466a7525 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-001.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-painting-002.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-002.htm new file mode 100644 index 00000000000..882a7ff7396 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-002.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-painting-003.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-003.htm new file mode 100644 index 00000000000..44d66e11cbc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-003.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-painting-004.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-004.htm new file mode 100644 index 00000000000..cde595fd7d6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-004.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-inline-order-property-painting-005.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-005.htm new file mode 100644 index 00000000000..107738d6a8d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-005.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-auto-placement-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-001.htm new file mode 100644 index 00000000000..905d5982d2e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-001.htm @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-auto-placement-002.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-002.htm new file mode 100644 index 00000000000..55ded02686d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-002.htm @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-auto-placement-003.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-003.htm new file mode 100644 index 00000000000..157c0a92422 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-003.htm @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-auto-placement-004.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-004.htm new file mode 100644 index 00000000000..514ba41b49d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-004.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-auto-placement-005.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-005.htm new file mode 100644 index 00000000000..4fdbf94e11f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-005.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-painting-001.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-001.htm new file mode 100644 index 00000000000..5fb4695f7d4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-001.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-painting-002.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-002.htm new file mode 100644 index 00000000000..bd7241e7209 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-002.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-painting-003.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-003.htm new file mode 100644 index 00000000000..985ad4f1029 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-003.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-painting-004.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-004.htm new file mode 100644 index 00000000000..1811eca22d5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-004.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/grid-order-property-painting-005.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-005.htm new file mode 100644 index 00000000000..a6b60526e66 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-005.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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.htm"> + <meta name="flags" content="ahem"> + <style type="text/css"> + #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/html/reference/css-flexbox-column-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm index a08cbe06cea..adbc1426a62 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm @@ -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/html/reference/flex-container-margin-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-container-margin-ref.htm new file mode 100644 index 00000000000..56a313ef692 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-container-margin-ref.htm @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html><head> +<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> +<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu"> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + } + .flex-item.first{ + margin-left:20px; + } + .flex-item.last{ + margin-right: 20px; + } +</style> +</head> +<body> + <div class="flex-container"> + <div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-order-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-order-ref.htm index d053097f30d..6e24e688486 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-order-ref.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-order-ref.htm @@ -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/html/reference/grid-2x2-blue-yellow-lime-magenta.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm new file mode 100644 index 00000000000..e00b74435c6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <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"> + 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/html/reftest-toc.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm index ce821bae82d..5a75a731ec5 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm @@ -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.htm">flex-container-margin</a></td> + <td><a href="reference/flex-container-margin-ref.htm">=</a> </td> + <td rowspan="1"></td> + </tr> + </tbody> <tbody id="flex-direction" class=""> <tr> <td rowspan="1" title="flex flow direction"> @@ -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.htm">grid-inline-order-property-auto-placement-001</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-auto-placement-002</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-auto-placement-003</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-auto-placement-004</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-auto-placement-005</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-inline-order-property-painting-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-inline-order-property-painting-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-inline-order-property-painting-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-inline-order-property-painting-004</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-inline-order-property-painting-005</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-auto-placement-001</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-auto-placement-002</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-auto-placement-003</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-auto-placement-004</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-auto-placement-005</a></td> + <td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</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.htm">grid-order-property-painting-001</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-painting-002</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-painting-003</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-painting-004</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">grid-order-property-painting-005</a></td> + <td><a href="reference/ref-filled-green-100px-square.htm">=</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/html/reftest.list b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list index 23f8f94a7fd..7bf1d5e6aa8 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list @@ -69,6 +69,7 @@ flex-basis-006.htm == reference/ref-filled-green-100px-square.htm flex-basis-007.htm == reference/ref-filled-green-100px-square.htm flex-basis-008.htm == reference/ref-filled-green-100px-square.htm flex-box-wrap.htm == reference/flex-box-wrap-ref.htm +flex-container-margin.htm == reference/flex-container-margin-ref.htm flex-direction.htm == reference/flex-direction.htm flex-direction-modify.htm == reference/flex-direction-modify.htm flex-direction-with-element-insert.htm == reference/flex-direction-with-element-insert.htm @@ -463,6 +464,26 @@ flexbox_wrap-reverse.htm == reference/flexbox_wrap-reverse-ref.htm flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.htm == reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.htm flexible-box-float.htm == reference/flex-box-float-ref.htm Flexible-order.htm == reference/Flexible-order-ref.htm +grid-inline-order-property-auto-placement-001.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-inline-order-property-auto-placement-002.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-inline-order-property-auto-placement-003.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-inline-order-property-auto-placement-004.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-inline-order-property-auto-placement-005.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-inline-order-property-painting-001.htm == reference/ref-filled-green-100px-square.htm +grid-inline-order-property-painting-002.htm == reference/ref-filled-green-100px-square.htm +grid-inline-order-property-painting-003.htm == reference/ref-filled-green-100px-square.htm +grid-inline-order-property-painting-004.htm == reference/ref-filled-green-100px-square.htm +grid-inline-order-property-painting-005.htm == reference/ref-filled-green-100px-square.htm +grid-order-property-auto-placement-001.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-order-property-auto-placement-002.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-order-property-auto-placement-003.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-order-property-auto-placement-004.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-order-property-auto-placement-005.htm == reference/grid-2x2-blue-yellow-lime-magenta.htm +grid-order-property-painting-001.htm == reference/ref-filled-green-100px-square.htm +grid-order-property-painting-002.htm == reference/ref-filled-green-100px-square.htm +grid-order-property-painting-003.htm == reference/ref-filled-green-100px-square.htm +grid-order-property-painting-004.htm == reference/ref-filled-green-100px-square.htm +grid-order-property-painting-005.htm == reference/ref-filled-green-100px-square.htm justify-content-001.htm == reference/justify-content-001-ref.htm justify-content-002.htm == reference/justify-content-001-ref.htm justify-content-003.htm == reference/justify-content-001-ref.htm diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm index 6871b57b83b..4775bd9db25 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm @@ -37,12 +37,12 @@ <tbody id="s4"> <tr><th><a href="chapter-4.htm">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.htm">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.htm">Chapter 6 - diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/implementation-report-TEMPLATE.data b/tests/wpt/css-tests/css-flexbox-1_dev/implementation-report-TEMPLATE.data index d0744d46c59..9012af639ca 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/implementation-report-TEMPLATE.data +++ b/tests/wpt/css-tests/css-flexbox-1_dev/implementation-report-TEMPLATE.data @@ -99,18 +99,18 @@ html/column-flexbox-break.htm 10eb17e5712519a47d8edc5e72b2f29dc0a0b8bd ? xhtml1/column-flexbox-break.xht 10eb17e5712519a47d8edc5e72b2f29dc0a0b8bd ? html/css-box-justify-content.htm 16dde2bb8fde7d77358127c179586c543fb5441c ? xhtml1/css-box-justify-content.xht 16dde2bb8fde7d77358127c179586c543fb5441c ? -html/css-flexbox-column-reverse-wrap-reverse.htm 763e698dd7ef3f54dc75048a8d5eb33d7190117d ? -xhtml1/css-flexbox-column-reverse-wrap-reverse.xht 763e698dd7ef3f54dc75048a8d5eb33d7190117d ? -html/css-flexbox-column-reverse-wrap.htm 30ae81d71e8177986dd4b0c7fe70124fa5dd4152 ? -xhtml1/css-flexbox-column-reverse-wrap.xht 30ae81d71e8177986dd4b0c7fe70124fa5dd4152 ? -html/css-flexbox-column-reverse.htm b657515bf66bca3bdadf78fa46ff822576173c49 ? -xhtml1/css-flexbox-column-reverse.xht b657515bf66bca3bdadf78fa46ff822576173c49 ? -html/css-flexbox-column-wrap-reverse.htm b488ba457e33fe91a41a01178e60d33f9834e8ae ? -xhtml1/css-flexbox-column-wrap-reverse.xht b488ba457e33fe91a41a01178e60d33f9834e8ae ? -html/css-flexbox-column-wrap.htm 62e25b3e88768d9725a5a4a8a91006c97b71bf5a ? -xhtml1/css-flexbox-column-wrap.xht 62e25b3e88768d9725a5a4a8a91006c97b71bf5a ? -html/css-flexbox-column.htm d1f2b481b20608c5a973aa7e72634000a7badc15 ? -xhtml1/css-flexbox-column.xht d1f2b481b20608c5a973aa7e72634000a7badc15 ? +html/css-flexbox-column-reverse-wrap-reverse.htm d38b70360a7799e70ca707646a606c038c899013 ? +xhtml1/css-flexbox-column-reverse-wrap-reverse.xht d38b70360a7799e70ca707646a606c038c899013 ? +html/css-flexbox-column-reverse-wrap.htm 8c9461d7bb8e46a2173f6651e3596f1ea0650e94 ? +xhtml1/css-flexbox-column-reverse-wrap.xht 8c9461d7bb8e46a2173f6651e3596f1ea0650e94 ? +html/css-flexbox-column-reverse.htm a4226108be2f0af901413339910960676e0aeab3 ? +xhtml1/css-flexbox-column-reverse.xht a4226108be2f0af901413339910960676e0aeab3 ? +html/css-flexbox-column-wrap-reverse.htm 110b7c270b5e15c253d57db831c76009af42141d ? +xhtml1/css-flexbox-column-wrap-reverse.xht 110b7c270b5e15c253d57db831c76009af42141d ? +html/css-flexbox-column-wrap.htm 81bfe00b93f428cb9c18db56c7403d4b3fa8423e ? +xhtml1/css-flexbox-column-wrap.xht 81bfe00b93f428cb9c18db56c7403d4b3fa8423e ? +html/css-flexbox-column.htm 2e5bf4ca2fcfceb11ea7a14828ed53b096385155 ? +xhtml1/css-flexbox-column.xht 2e5bf4ca2fcfceb11ea7a14828ed53b096385155 ? html/css-flexbox-height-animation-stretch.htm c0ec675efc75f1316a44fd2ab919ba9001af8b79 ? xhtml1/css-flexbox-height-animation-stretch.xht c0ec675efc75f1316a44fd2ab919ba9001af8b79 ? html/css-flexbox-img-expand-evenly.htm 5112d07ce834249f41852096719e363804b80059 ? @@ -163,6 +163,8 @@ html/flex-basis-008.htm 09979a1d088a61b54658fb8c6c0cf2c5f8fcf23a ? xhtml1/flex-basis-008.xht 09979a1d088a61b54658fb8c6c0cf2c5f8fcf23a ? html/flex-box-wrap.htm 9d6a4d6440cb23bae63e478580d061d47ffba194 ? xhtml1/flex-box-wrap.xht 9d6a4d6440cb23bae63e478580d061d47ffba194 ? +html/flex-container-margin.htm 5dd8264f765e903c8bd0ef01329e8085ba8eece6 ? +xhtml1/flex-container-margin.xht 5dd8264f765e903c8bd0ef01329e8085ba8eece6 ? html/flex-direction-column-reverse.htm 4e5f9ded45793abc3c57aa37fd7a18a10c394a34 ? xhtml1/flex-direction-column-reverse.xht 4e5f9ded45793abc3c57aa37fd7a18a10c394a34 ? html/flex-direction-modify.htm 3b720e9b64459c43328b05d707190079a2faf3d4 ? @@ -187,8 +189,8 @@ html/flex-direction_row.htm 83c729ef6a0f2fb5c317dd507b2d9fe31316488e ? xhtml1/flex-direction_row.xht 83c729ef6a0f2fb5c317dd507b2d9fe31316488e ? html/flex-flexitem-childmargin.htm e502bf18a14c3bc4fa3ae2485df64c679162ac42 ? xhtml1/flex-flexitem-childmargin.xht e502bf18a14c3bc4fa3ae2485df64c679162ac42 ? -html/flex-flexitem-percentage-prescation.htm b0d6bca82c92cb53b4017ce7be97746cc69dbbb5 ? -xhtml1/flex-flexitem-percentage-prescation.xht b0d6bca82c92cb53b4017ce7be97746cc69dbbb5 ? +html/flex-flexitem-percentage-prescation.htm 3f2168e9d0e1d45b9e6b363febe37e8c5236ac67 ? +xhtml1/flex-flexitem-percentage-prescation.xht 3f2168e9d0e1d45b9e6b363febe37e8c5236ac67 ? html/flex-flow-001.htm 2b6fb9a06aaa67cd288e4250a76bbc9aaea44a14 ? xhtml1/flex-flow-001.xht 2b6fb9a06aaa67cd288e4250a76bbc9aaea44a14 ? html/flex-flow-002.htm 20995419ed10209f06aac780744ad9080e6cc280 ? @@ -229,8 +231,8 @@ html/flex-items-flexibility.htm 6bada7cc61f1b3adac7354992455b59cff76478e ? xhtml1/flex-items-flexibility.xht 6bada7cc61f1b3adac7354992455b59cff76478e ? html/flex-margin-no-collapse.htm 96231d68de1fe051b06e793d659a813a53a91ed9 ? xhtml1/flex-margin-no-collapse.xht 96231d68de1fe051b06e793d659a813a53a91ed9 ? -html/flex-order.htm bf51cba5b8e6bd78dbbf772b53f2a1170abcb6aa ? -xhtml1/flex-order.xht bf51cba5b8e6bd78dbbf772b53f2a1170abcb6aa ? +html/flex-order.htm 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 ? +xhtml1/flex-order.xht 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 ? html/flex-shrink-001.htm f27d600fc7863c3d4c3fc3b4e4bc8cc7f58cdbae ? xhtml1/flex-shrink-001.xht f27d600fc7863c3d4c3fc3b4e4bc8cc7f58cdbae ? html/flex-shrink-002.htm 49884ece59d09eb5cd9a4d9228d62478cdaf3179 ? @@ -291,8 +293,8 @@ html/flexbox-align-self-horiz-004.htm 10a87f5352d8eb2c448129d27aa505f3148d4534 ? xhtml1/flexbox-align-self-horiz-004.xht 10a87f5352d8eb2c448129d27aa505f3148d4534 ? html/flexbox-align-self-horiz-005.htm 47ddfa8eb08586be92297f63fb61d0b9e8899e29 ? xhtml1/flexbox-align-self-horiz-005.xht 47ddfa8eb08586be92297f63fb61d0b9e8899e29 ? -html/flexbox-align-self-stretch-vert-001.htm 62ba538d9dd827c9ce6f57b0e544d652e8b73621 ? -xhtml1/flexbox-align-self-stretch-vert-001.xht 62ba538d9dd827c9ce6f57b0e544d652e8b73621 ? +html/flexbox-align-self-stretch-vert-001.htm 6c777130631b607e0e1106a0bd655645cfb049e3 ? +xhtml1/flexbox-align-self-stretch-vert-001.xht 6c777130631b607e0e1106a0bd655645cfb049e3 ? html/flexbox-align-self-stretch-vert-002.htm 840566b89d122841be2e884ea8221ac398d42806 ? xhtml1/flexbox-align-self-stretch-vert-002.xht 840566b89d122841be2e884ea8221ac398d42806 ? html/flexbox-align-self-vert-001.htm 4e00d307563cb8aa340346dcfe8b5739041b89d4 ? @@ -315,8 +317,8 @@ html/flexbox-anonymous-items-001.htm 52184e10e8769e13e8e22317cfc27568b6be5bf3 ? xhtml1/flexbox-anonymous-items-001.xht 52184e10e8769e13e8e22317cfc27568b6be5bf3 ? html/flexbox-baseline-align-self-baseline-horiz-001.htm b1ec3f485c09884b34a4428cd9e2c61ba0d6d566 ? xhtml1/flexbox-baseline-align-self-baseline-horiz-001.xht b1ec3f485c09884b34a4428cd9e2c61ba0d6d566 ? -html/flexbox-baseline-align-self-baseline-vert-001.htm 617dc7fc641ee81c666885dd4268a4284469156a ? -xhtml1/flexbox-baseline-align-self-baseline-vert-001.xht 617dc7fc641ee81c666885dd4268a4284469156a ? +html/flexbox-baseline-align-self-baseline-vert-001.htm 0c08d77d4fdeeb6376fde7274059d9eb0b774b85 ? +xhtml1/flexbox-baseline-align-self-baseline-vert-001.xht 0c08d77d4fdeeb6376fde7274059d9eb0b774b85 ? html/flexbox-baseline-empty-001a.htm 8c0729a3905f9147062c16d2ff05434be1927f1f ? xhtml1/flexbox-baseline-empty-001a.xht 8c0729a3905f9147062c16d2ff05434be1927f1f ? html/flexbox-baseline-empty-001b.htm 347722d0a1056868babe94ffd6d3e64c5a1387ec ? @@ -789,8 +791,8 @@ html/flexbox_display.htm 429c145ce111df3e08fa2ff4f5692e56bc4bbb4d ? xhtml1/flexbox_display.xht 429c145ce111df3e08fa2ff4f5692e56bc4bbb4d ? html/flexbox_fbfc.htm 5b33462ad18995d80f363daf64588ae2b06b1012 ? xhtml1/flexbox_fbfc.xht 5b33462ad18995d80f363daf64588ae2b06b1012 ? -html/flexbox_fbfc2.htm 5168a1ea85a30d469233b13f81cc4ed6dc1409b0 ? -xhtml1/flexbox_fbfc2.xht 5168a1ea85a30d469233b13f81cc4ed6dc1409b0 ? +html/flexbox_fbfc2.htm 96924b6ce7df17a725dff73a27ec2baa994a6744 ? +xhtml1/flexbox_fbfc2.xht 96924b6ce7df17a725dff73a27ec2baa994a6744 ? html/flexbox_first-line.htm deee74919efb8cb2fcf9db6c4e7275d6aae4acfe ? xhtml1/flexbox_first-line.xht deee74919efb8cb2fcf9db6c4e7275d6aae4acfe ? html/flexbox_flex-0-0-0-unitless.htm 49f8ff4629e2b3657fd206cae67a2c6c03c23021 ? @@ -917,8 +919,8 @@ html/flexbox_flex-basis-shrink.htm ee8776dd7b5aacbd96f17061eb2bfeb2052a570e ? xhtml1/flexbox_flex-basis-shrink.xht ee8776dd7b5aacbd96f17061eb2bfeb2052a570e ? html/flexbox_flex-basis.htm c48a6e141ed3ee02e7bb94e691d7ae8a4e54bca0 ? xhtml1/flexbox_flex-basis.xht c48a6e141ed3ee02e7bb94e691d7ae8a4e54bca0 ? -html/flexbox_flex-formatting-interop.htm 88613624e2583e64cdf12d85df951b10b23a40e0 ? -xhtml1/flexbox_flex-formatting-interop.xht 88613624e2583e64cdf12d85df951b10b23a40e0 ? +html/flexbox_flex-formatting-interop.htm 6e0a157cae1cba8ae88023e2fe2aeeb7f146380d ? +xhtml1/flexbox_flex-formatting-interop.xht 6e0a157cae1cba8ae88023e2fe2aeeb7f146380d ? html/flexbox_flex-initial-2.htm 5781b06322897c0589a88c814d0c26786bb1866c ? xhtml1/flexbox_flex-initial-2.xht 5781b06322897c0589a88c814d0c26786bb1866c ? html/flexbox_flex-initial.htm c01df6367570a66c188861fe8ee19bfd122306aa ? @@ -1173,6 +1175,46 @@ html/flexible-box-float.htm 71056b40e8e41321e7463d829d634027549c42c8 ? xhtml1/flexible-box-float.xht 71056b40e8e41321e7463d829d634027549c42c8 ? html/flexible-order.htm ce262f5831c1c4e1021f8acf04611c4df8a05461 ? xhtml1/flexible-order.xht ce262f5831c1c4e1021f8acf04611c4df8a05461 ? +html/grid-inline-order-property-auto-placement-001.htm 918e47a41ffe595541954cf93da712b43f445a5e ? +xhtml1/grid-inline-order-property-auto-placement-001.xht 918e47a41ffe595541954cf93da712b43f445a5e ? +html/grid-inline-order-property-auto-placement-002.htm 4edacd9b53d661e31bf2106e16952e5f1d5a4ae3 ? +xhtml1/grid-inline-order-property-auto-placement-002.xht 4edacd9b53d661e31bf2106e16952e5f1d5a4ae3 ? +html/grid-inline-order-property-auto-placement-003.htm c477590482de8b6d0a47f65f0ee444e535dfe808 ? +xhtml1/grid-inline-order-property-auto-placement-003.xht c477590482de8b6d0a47f65f0ee444e535dfe808 ? +html/grid-inline-order-property-auto-placement-004.htm e4829929a72456f496b3cb51cfef0f7a513ca928 ? +xhtml1/grid-inline-order-property-auto-placement-004.xht e4829929a72456f496b3cb51cfef0f7a513ca928 ? +html/grid-inline-order-property-auto-placement-005.htm 6ab305e5677478e990b3875efb5e88c2354f52c5 ? +xhtml1/grid-inline-order-property-auto-placement-005.xht 6ab305e5677478e990b3875efb5e88c2354f52c5 ? +html/grid-inline-order-property-painting-001.htm 8b9dff39077af4b2aacfeb45bd613ff87f8337f1 ? +xhtml1/grid-inline-order-property-painting-001.xht 8b9dff39077af4b2aacfeb45bd613ff87f8337f1 ? +html/grid-inline-order-property-painting-002.htm 4ea3121613e183fd2314c8a286f1ff449a07e775 ? +xhtml1/grid-inline-order-property-painting-002.xht 4ea3121613e183fd2314c8a286f1ff449a07e775 ? +html/grid-inline-order-property-painting-003.htm 03c0507a09b98f190b9fdf128000c6db32222537 ? +xhtml1/grid-inline-order-property-painting-003.xht 03c0507a09b98f190b9fdf128000c6db32222537 ? +html/grid-inline-order-property-painting-004.htm 93ea4f95eeb4e085c1bb4ea9e5d0fc4fa1c64ac9 ? +xhtml1/grid-inline-order-property-painting-004.xht 93ea4f95eeb4e085c1bb4ea9e5d0fc4fa1c64ac9 ? +html/grid-inline-order-property-painting-005.htm 72728e05989a070edb754801be2e9769ec861c2d ? +xhtml1/grid-inline-order-property-painting-005.xht 72728e05989a070edb754801be2e9769ec861c2d ? +html/grid-order-property-auto-placement-001.htm ad5b4e57de7a4ea9fd826be7fca30d6700672fa1 ? +xhtml1/grid-order-property-auto-placement-001.xht ad5b4e57de7a4ea9fd826be7fca30d6700672fa1 ? +html/grid-order-property-auto-placement-002.htm d33459a775e8e493e29fe5cd454d1e20eb057f20 ? +xhtml1/grid-order-property-auto-placement-002.xht d33459a775e8e493e29fe5cd454d1e20eb057f20 ? +html/grid-order-property-auto-placement-003.htm df0c2f2f87996d49e5e9310ee18daefe64011519 ? +xhtml1/grid-order-property-auto-placement-003.xht df0c2f2f87996d49e5e9310ee18daefe64011519 ? +html/grid-order-property-auto-placement-004.htm 42cf26e259742411b423b6a40ef7984f3505f701 ? +xhtml1/grid-order-property-auto-placement-004.xht 42cf26e259742411b423b6a40ef7984f3505f701 ? +html/grid-order-property-auto-placement-005.htm 367195431744f6f660a7d2f5f633ad35f648911b ? +xhtml1/grid-order-property-auto-placement-005.xht 367195431744f6f660a7d2f5f633ad35f648911b ? +html/grid-order-property-painting-001.htm aee0a73a242a7b3b874983039ee2b39a9dd52544 ? +xhtml1/grid-order-property-painting-001.xht aee0a73a242a7b3b874983039ee2b39a9dd52544 ? +html/grid-order-property-painting-002.htm a78b91a8d9709a7584862672e0a8f90def76edb7 ? +xhtml1/grid-order-property-painting-002.xht a78b91a8d9709a7584862672e0a8f90def76edb7 ? +html/grid-order-property-painting-003.htm 80be21cb47ca6557aa4436603a85a28f80dde773 ? +xhtml1/grid-order-property-painting-003.xht 80be21cb47ca6557aa4436603a85a28f80dde773 ? +html/grid-order-property-painting-004.htm 70a79fa9be93b40a976ae83c7adc862d137317ac ? +xhtml1/grid-order-property-painting-004.xht 70a79fa9be93b40a976ae83c7adc862d137317ac ? +html/grid-order-property-painting-005.htm 1816a5bb33c6984fa4cd4d0d834d8681391acb9d ? +xhtml1/grid-order-property-painting-005.xht 1816a5bb33c6984fa4cd4d0d834d8681391acb9d ? html/justify-content-001.htm e103fe066163fdb6f14428ff0469211e802a5545 ? xhtml1/justify-content-001.xht e103fe066163fdb6f14428ff0469211e802a5545 ? html/justify-content-002.htm 26934eb3e05268678cb72c6d95a332f839ce096b ? diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/index.htm b/tests/wpt/css-tests/css-flexbox-1_dev/index.htm index c330c3f860c..97f3c804c58 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/index.htm +++ b/tests/wpt/css-tests/css-flexbox-1_dev/index.htm @@ -145,6 +145,7 @@ <li>Intel</li> <li>KeynesQu</li> <li>mailto:shiyoux.tan@intel.com</li> + <li>Manuel Rego Casasnovas</li> <li>Micky Brunetti</li> <li>Microsoft</li> <li>Mitsuteru Sawa</li> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/index.xht b/tests/wpt/css-tests/css-flexbox-1_dev/index.xht index cb0d1315249..1456740b77e 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/index.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/index.xht @@ -145,6 +145,7 @@ <li>Intel</li> <li>KeynesQu</li> <li>mailto:shiyoux.tan@intel.com</li> + <li>Manuel Rego Casasnovas</li> <li>Micky Brunetti</li> <li>Microsoft</li> <li>Mitsuteru Sawa</li> diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/testinfo.data b/tests/wpt/css-tests/css-flexbox-1_dev/testinfo.data index 3c6c5d9c4b3..0a17b9e9ba0 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/testinfo.data +++ b/tests/wpt/css-tests/css-flexbox-1_dev/testinfo.data @@ -47,12 +47,12 @@ autoheight-regions-in-fixed-sized-flexbox-007 reference/autoheight-regions-in-fi autoheight-regions-in-fixed-sized-flexbox-008 reference/autoheight-regions-in-fixed-sized-flexbox-008-ref CSS Regions: auto-height regions with max height in fixed sized flexbox ahem http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution,http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-flexbox-1/#layout-algorithm 715216466f7b8100617f5d9837f20ea185dd150c `Catalin Badea`<mailto:badea@adobe.com> Test that the max-height property is applied to regions placed inside a fixed sized flexbox with a column flow. The flex container should not flex the region flex items beyond their max height value. column-flexbox-break reference/column-flexbox-break-ref CSS Regions: fragmenting a flex container with column flow ahem http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#the-flow-from-property,http://www.w3.org/TR/css-flexbox-1/#flex-containers,http://www.w3.org/TR/css-flexbox-1/#flex-direction-property 10eb17e5712519a47d8edc5e72b2f29dc0a0b8bd `Catalin Badea`<mailto:badea@adobe.com> Test checks that a flex container with column flow is fragmented between regions. css-box-justify-content reference/css-box-justify-content-ref flexbox |css-box-justufy-content http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content,http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow 16dde2bb8fde7d77358127c179586c543fb5441c `xiaoxia`<ava656094@gmail.com> -css-flexbox-column reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow d1f2b481b20608c5a973aa7e72634000a7badc15 `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical. -css-flexbox-column-reverse reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow b657515bf66bca3bdadf78fa46ff822576173c49 `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical. -css-flexbox-column-reverse-wrap reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow 30ae81d71e8177986dd4b0c7fe70124fa5dd4152 `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical. -css-flexbox-column-reverse-wrap-reverse reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow 763e698dd7ef3f54dc75048a8d5eb33d7190117d `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical. -css-flexbox-column-wrap reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow 62e25b3e88768d9725a5a4a8a91006c97b71bf5a `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical. -css-flexbox-column-wrap-reverse reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow b488ba457e33fe91a41a01178e60d33f9834e8ae `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical. +css-flexbox-column reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow 2e5bf4ca2fcfceb11ea7a14828ed53b096385155 `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical. +css-flexbox-column-reverse reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow a4226108be2f0af901413339910960676e0aeab3 `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column, the flex container is vertical. +css-flexbox-column-reverse-wrap reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow 8c9461d7bb8e46a2173f6651e3596f1ea0650e94 `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical. +css-flexbox-column-reverse-wrap-reverse reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow d38b70360a7799e70ca707646a606c038c899013 `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical. +css-flexbox-column-wrap reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow 81bfe00b93f428cb9c18db56c7403d4b3fa8423e `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column wrap, the flex container is vertical. +css-flexbox-column-wrap-reverse reference/css-flexbox-column-ref flex direction: row http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow 110b7c270b5e15c253d57db831c76009af42141d `Naoki Okada`<mailto:somathor@gmail.com> Test checks that when writing mode is vertical and flex-flow: column wrap-reverse, the flex container is vertical. css-flexbox-height-animation-stretch reference/css-flexbox-height-animation-stretch-ref Items stretch correctly while content is animating http://www.w3.org/TR/css-flexbox-1/#propdef-align-items c0ec675efc75f1316a44fd2ab919ba9001af8b79 `Micky Brunetti`<mailto:micky2be@gmail.com> Items should stretch vertically in all time css-flexbox-img-expand-evenly reference/css-flexbox-img-expand-evenly-ref Image Expansion http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow 5112d07ce834249f41852096719e363804b80059 `Eiji Kitamura`<mailto:agektmr@gmail.com> 3 square images fill out border. css-flexbox-row reference/css-flexbox-row-ref flex direction: row, writing mode vertical http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow,http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode c2fdd1f935ea17ca5c3ef860a2b39c9040c2b032 `Tsutomu ogaoga Ogasawara`<mailto:info@ogaoga.org> Test checks that when writing mode is vertical and flex-flow: row, the flex container is vertical. @@ -79,6 +79,7 @@ flex-basis-006 reference/ref-filled-green-100px-square flex-basis - 0% http://w flex-basis-007 reference/ref-filled-green-100px-square flex-basis - auto http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis 2d1b30c5b772e87ba0ccb74ab319a3fe20cb2c06 `http://www.intel.com`<Intel>,`mailto:shiyoux.tan@intel.com`<Intel> The 'flex-basis' property set 'auto', the actual width of tested element same as the value which specified by width property. flex-basis-008 reference/ref-filled-green-100px-square flex-basis - 50% http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis 09979a1d088a61b54658fb8c6c0cf2c5f8fcf23a `http://www.intel.com`<Intel>,`mailto:shiyoux.tan@intel.com`<Intel> The 'flex-basis' property set positive percentage, the actual width of tested element same as the percentage of flex container size. flex-box-wrap reference/flex-box-wrap-ref flex-wrap: wrap http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap 9d6a4d6440cb23bae63e478580d061d47ffba194 `Tsuyoshi Tokuda`<mailto:tokuda109@gmail.com> the test passes if you see green box. +flex-container-margin reference/flex-container-margin-ref flex-container-margin-not-collapse-with-content-margin https://drafts.csswg.org/css-flexbox-1/#item-margins 5dd8264f765e903c8bd0ef01329e8085ba8eece6 `houzhenyu`<http://www.github.com/sskyy> The margins of adjacent flex items do not collapse. flex-direction reference/flex-direction flex flow direction http://www.w3.org/TR/css-flexbox-1/#flex-direction a766d53d70193da1a751a9b50c249bdbfad42047 `houzhenyu`<http://www.github.com/sskyy> The flow of flex items in the the flex container should observe the flex-direction property. flex-direction-column-reverse flex-direction: column-reverse swaps main start and end directions http://www.w3.org/TR/css-flexbox-1/#flex-direction 4e5f9ded45793abc3c57aa37fd7a18a10c394a34 `Sylvain Galineau`<mailto:galineau@adobe.com> This test checks that column-reverse flex-direction swaps the main start and main end directions flex-direction-modify reference/flex-direction-modify flex flow direction http://www.w3.org/TR/css-flexbox-1/#flex-direction 3b720e9b64459c43328b05d707190079a2faf3d4 `houzhenyu`<http://www.github.com/sskyy> Changing 'flex-direction' with JavaScript and then changing it back should returns to the original look. @@ -91,7 +92,7 @@ flex-direction_column-reverse flex-direction_column-reverse http://www.w3.org/ flex-direction_row flex-direction_row http://www.w3.org/TR/css-flexbox-1/#flex-direction-property 83c729ef6a0f2fb5c317dd507b2d9fe31316488e `Intel`<http://www.intel.com> Check if the web engine can identify the flex-direction value row. flex-direction_row-reverse flex-direction_row-reverse http://www.w3.org/TR/css-flexbox-1/#flex-direction-property 3006570651d466202f7d917cd152312730b9edd8 `Intel`<http://www.intel.com> Check if the web engine can identify the flex-direction value row-reverse. flex-flexitem-childmargin reference/flex-flexitem-childmargin-ref flex item child margin http://www.w3.org/TR/css-flexbox-1/#flex-items e502bf18a14c3bc4fa3ae2485df64c679162ac42 `shaofeic`<csf178@gmail.com> margin should effect the orange box and green box need to align to bottom. -flex-flexitem-percentage-prescation reference/flex-flexitem-percentage-prescation-ref flex item size prescation http://www.w3.org/TR/css-flexbox-1/#flex-items b0d6bca82c92cb53b4017ce7be97746cc69dbbb5 `shaofeic`<csf178@gmail.com> no blue color could be seen. +flex-flexitem-percentage-prescation reference/flex-flexitem-percentage-prescation-ref flex item size prescation http://www.w3.org/TR/css-flexbox-1/#flex-items 3f2168e9d0e1d45b9e6b363febe37e8c5236ac67 `shaofeic`<csf178@gmail.com> no blue color could be seen. flex-flow-001 reference/flex-flow-001-ref flex-flow - row nowrap http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow,http://www.w3.org/TR/css-flexbox-1/#flex-direction,http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap 2b6fb9a06aaa67cd288e4250a76bbc9aaea44a14 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The 'flex-flow' property set 'row nowrap' controls the flex container is single-line flex-flow-002 reference/flex-flow-002-ref flex-flow - row wrap http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow,http://www.w3.org/TR/css-flexbox-1/#flex-direction,http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap 20995419ed10209f06aac780744ad9080e6cc280 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The 'flex-flow' property set 'row wrap' controls the flex container is multi-line flex-flow-003 reference/flex-flow-002-ref flex-flow - row wrap-reverse http://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow,http://www.w3.org/TR/css-flexbox-1/#flex-direction,http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap 28dc1f2443f81ac364e9fa6fc3975eee67e90248 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The 'flex-flow' property set 'row wrap-reverse' controls the flex container is multi-line but the cross-start and cross-end directions are swapped @@ -112,7 +113,7 @@ flex-grow-005 reference/ref-filled-green-100px-square flex-grow - (invalid when flex-grow-006 reference/ref-filled-green-100px-square flex-grow - positive number(fill all space) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow f8b3290012a57cf47c520f716c3c50a4e02eba55 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> Test checks that all space of flex container will be filled when there is only one flex item and 'flex-grow' set any positive number. flex-items-flexibility reference/flex-items-flexibility CSS Flex-basis Test http://www.w3.org/TR/css-flexbox-1/#flexibility 6bada7cc61f1b3adac7354992455b59cff76478e `Chunsheng Zhang`<mailto:zhangcs_423@163.com> flex items flexibility flex-margin-no-collapse reference/flex-margin-no-collapse-ref flex item margins http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction,http://www.w3.org/TR/css-flexbox-1/#item-margins 96231d68de1fe051b06e793d659a813a53a91ed9 `Ping Huang`<mailto:phuangce@gmail.com> The vertical gap between two green boxs should be 100px. -flex-order reference/flex-order-ref flex order http://www.w3.org/TR/css-flexbox-1/#order-property bf51cba5b8e6bd78dbbf772b53f2a1170abcb6aa `Mitsuteru Sawa`<mailto:mitsuteru.s@gmail.com> ordered flex items should ordered properly +flex-order reference/flex-order-ref flex order http://www.w3.org/TR/css-flexbox-1/#order-property 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 `Mitsuteru Sawa`<mailto:mitsuteru.s@gmail.com> ordered flex items should ordered properly flex-shrink-001 reference/ref-filled-green-100px-square flex-shrink - number(positive) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink f27d600fc7863c3d4c3fc3b4e4bc8cc7f58cdbae `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property set positive number determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed flex-shrink-002 reference/ref-filled-green-100px-square flex-shrink - number(negative) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink 49884ece59d09eb5cd9a4d9228d62478cdaf3179 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property set negative is invalid to shrink flex items when negative free space is distributed flex-shrink-003 reference/ref-filled-green-100px-square flex-shrink - 1(initial value) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink 818d6673cf983ffed848bf72d5935cff3fe6bfa1 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property initial value is 1 @@ -143,7 +144,7 @@ flexbox-align-self-horiz-002 reference/flexbox-align-self-horiz-002-ref Testing flexbox-align-self-horiz-003 reference/flexbox-align-self-horiz-003-ref Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items http://www.w3.org/TR/css-flexbox-1/#align-items-property 8c82a3d90a6879d3371ca75d8c7d2ae768ee274c `Daniel Holbert`<mailto:dholbert@mozilla.com> flexbox-align-self-horiz-004 reference/flexbox-align-self-horiz-004-ref Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items http://www.w3.org/TR/css-flexbox-1/#align-items-property 10a87f5352d8eb2c448129d27aa505f3148d4534 `Daniel Holbert`<mailto:dholbert@mozilla.com> flexbox-align-self-horiz-005 reference/flexbox-align-self-horiz-005-ref Testing the behavior of 'align-self' with auto margins in play, in a horizontal flex container http://www.w3.org/TR/css-flexbox-1/#auto-margins 47ddfa8eb08586be92297f63fb61d0b9e8899e29 `Daniel Holbert`<mailto:dholbert@mozilla.com> -flexbox-align-self-stretch-vert-001 reference/flexbox-align-self-stretch-vert-001-ref Testing the sizing of a stretched horizontal flex container in a vertical flex container http://www.w3.org/TR/css-flexbox-1/#layout-algorithm 62ba538d9dd827c9ce6f57b0e544d652e8b73621 `Daniel Holbert`<mailto:dholbert@mozilla.com> 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 http://dev.w3.org/csswg/css-flexbox/issues-cr-2012#issue-23 +flexbox-align-self-stretch-vert-001 reference/flexbox-align-self-stretch-vert-001-ref Testing the sizing of a stretched horizontal flex container in a vertical flex container http://www.w3.org/TR/css-flexbox-1/#layout-algorithm 6c777130631b607e0e1106a0bd655645cfb049e3 `Daniel Holbert`<mailto:dholbert@mozilla.com> 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 https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23 flexbox-align-self-stretch-vert-002 reference/flexbox-align-self-stretch-vert-002-ref Testing the sizing of stretched flex items in a vertical multi-line flex container http://www.w3.org/TR/css-flexbox-1/#layout-algorithm 840566b89d122841be2e884ea8221ac398d42806 `Daniel Holbert`<mailto:dholbert@mozilla.com> In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed. flexbox-align-self-vert-001 reference/flexbox-align-self-vert-001-ref Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container http://www.w3.org/TR/css-flexbox-1/#align-items-property 4e00d307563cb8aa340346dcfe8b5739041b89d4 `Daniel Holbert`<mailto:dholbert@mozilla.com> flexbox-align-self-vert-002 reference/flexbox-align-self-vert-002-ref Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items http://www.w3.org/TR/css-flexbox-1/#align-items-property e4ec24ac64ed22adb3900510ba0aee2079ed087e `Daniel Holbert`<mailto:dholbert@mozilla.com> @@ -155,7 +156,7 @@ flexbox-align-self-vert-rtl-003 reference/flexbox-align-self-vert-rtl-003-ref Te flexbox-align-self-vert-rtl-004 reference/flexbox-align-self-vert-rtl-004-ref Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl' http://www.w3.org/TR/css-flexbox-1/#align-items-property 3d3ab6a958cf8699ca899e4502dccde60bb4101d `Daniel Holbert`<mailto:dholbert@mozilla.com> flexbox-anonymous-items-001 reference/flexbox-anonymous-items-001-ref Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering http://www.w3.org/TR/css-flexbox-1/#flex-items 52184e10e8769e13e8e22317cfc27568b6be5bf3 `Daniel Holbert`<mailto:dholbert@mozilla.com> flexbox-baseline-align-self-baseline-horiz-001 reference/flexbox-baseline-align-self-baseline-horiz-001-ref Testing the baseline of a horizontal flex container with baseline-aligned flex items http://www.w3.org/TR/css-flexbox-1/#flex-baselines b1ec3f485c09884b34a4428cd9e2c61ba0d6d566 `Daniel Holbert`<mailto:dholbert@mozilla.com> -flexbox-baseline-align-self-baseline-vert-001 reference/flexbox-baseline-align-self-baseline-vert-001-ref Testing the baseline of a vertical flex container with baseline-aligned flex items http://www.w3.org/TR/css-flexbox-1/#flex-baselines 617dc7fc641ee81c666885dd4268a4284469156a `Daniel Holbert`<mailto:dholbert@mozilla.com> +flexbox-baseline-align-self-baseline-vert-001 reference/flexbox-baseline-align-self-baseline-vert-001-ref Testing the baseline of a vertical flex container with baseline-aligned flex items http://www.w3.org/TR/css-flexbox-1/#flex-baselines 0c08d77d4fdeeb6376fde7274059d9eb0b774b85 `Daniel Holbert`<mailto:dholbert@mozilla.com> flexbox-baseline-empty-001a reference/flexbox-baseline-empty-001-ref Testing the baseline of an empty horizontal flex container http://www.w3.org/TR/css-flexbox-1/#flex-baselines 8c0729a3905f9147062c16d2ff05434be1927f1f `Daniel Holbert`<mailto:dholbert@mozilla.com> flexbox-baseline-empty-001b reference/flexbox-baseline-empty-001-ref Testing the baseline of an empty vertical flex container http://www.w3.org/TR/css-flexbox-1/#flex-baselines 347722d0a1056868babe94ffd6d3e64c5a1387ec `Daniel Holbert`<mailto:dholbert@mozilla.com> flexbox-baseline-multi-item-horiz-001 reference/flexbox-baseline-multi-item-horiz-001-ref Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned http://www.w3.org/TR/css-flexbox-1/#flex-baselines a283f1e214227518363634bca2679006df8923f8 `Daniel Holbert`<mailto:dholbert@mozilla.com> @@ -392,7 +393,7 @@ flexbox_direction-column-reverse reference/flexbox_direction-column-reverse-ref flexbox_direction-row-reverse reference/flexbox_direction-row-reverse-ref flexbox | flex-direction: row-reverse http://www.w3.org/TR/css-flexbox-1/#flex-direction-property 494b66430b84f041f8d792572a830d1e80b4f6fe `Opera Software`<http://opera.com> flexbox_display reference/flexbox_display-ref flexbox | display error-handling http://www.w3.org/TR/css-flexbox-1/#flex-containers 429c145ce111df3e08fa2ff4f5692e56bc4bbb4d `Opera Software`<http://opera.com> flexbox_fbfc reference/flexbox_fbfc-ref flexbox | flex formatting context :: float intrusion http://www.w3.org/TR/css-flexbox-1/#flex-containers 5b33462ad18995d80f363daf64588ae2b06b1012 `Opera Software`<http://opera.com> -flexbox_fbfc2 reference/flexbox_fbfc2-ref flexbox | flex formatting context :: float intrusion http://www.w3.org/TR/css-flexbox-1/#flex-containers 5168a1ea85a30d469233b13f81cc4ed6dc1409b0 `Opera Software`<http://opera.com> +flexbox_fbfc2 reference/flexbox_fbfc2-ref flexbox | flex formatting context :: float intrusion http://www.w3.org/TR/css-flexbox-1/#flex-containers 96924b6ce7df17a725dff73a27ec2baa994a6744 `Opera Software`<http://opera.com> flexbox_first-line reference/flexbox_first-line-ref flexbox | first-line http://www.w3.org/TR/css-flexbox-1/#placement deee74919efb8cb2fcf9db6c4e7275d6aae4acfe `Opera Software`<http://opera.com> flexbox_flex-0-0 reference/flexbox_flex-0-0-0-ref flexbox | flex: 0 0 http://www.w3.org/TR/css-flexbox-1/#flex-property c700880ab24c78fb3bf224f0ca08712384afada1 `Opera Software`<http://opera.com> flexbox_flex-0-0-0 reference/flexbox_flex-0-0-0-ref flexbox | flex: 0 0 0 http://www.w3.org/TR/css-flexbox-1/#flex-property f4f8b31d8d88dd7547609e3c8c792a60c9fb44c8 `Opera Software`<http://opera.com> @@ -456,7 +457,7 @@ flexbox_flex-1-N-Npercent-shrink reference/flexbox_flex-1-N-Npercent-shrink-ref flexbox_flex-auto reference/flexbox_flex-auto-ref flexbox | flex: auto http://www.w3.org/TR/css-flexbox-1/#flex-common cb7dffa204ac2366628e19623085fc987d0df43b `Opera Software`<http://opera.com> flexbox_flex-basis reference/flexbox_flex-basis-ref flexbox | flex-basis: percentage http://www.w3.org/TR/css-flexbox-1/#flex-basis-property c48a6e141ed3ee02e7bb94e691d7ae8a4e54bca0 `Opera Software`<http://opera.com> flexbox_flex-basis-shrink reference/flexbox_flex-basis-shrink-ref flexbox | flex-basis: percentage, flex-shrink: +integer http://www.w3.org/TR/css-flexbox-1/#flex-basis-property ee8776dd7b5aacbd96f17061eb2bfeb2052a570e `Opera Software`<http://opera.com> -flexbox_flex-formatting-interop reference/flexbox_flex-formatting-interop-ref flexbox | flex formatting context :: negative margins and border box http://www.w3.org/TR/css-flexbox-1/#flex-containers 88613624e2583e64cdf12d85df951b10b23a40e0 `Opera Software`<http://opera.com> +flexbox_flex-formatting-interop reference/flexbox_flex-formatting-interop-ref flexbox | flex formatting context :: negative margins and border box http://www.w3.org/TR/css-flexbox-1/#flex-containers 6e0a157cae1cba8ae88023e2fe2aeeb7f146380d `Opera Software`<http://opera.com> flexbox_flex-initial reference/flexbox_flex-initial-ref flexbox | flex: initial http://www.w3.org/TR/css-flexbox-1/#flex-common c01df6367570a66c188861fe8ee19bfd122306aa `Opera Software`<http://opera.com> flexbox_flex-initial-2 reference/flexbox_flex-initial-2-ref flexbox | flex: initial http://www.w3.org/TR/css-flexbox-1/#flex-common 5781b06322897c0589a88c814d0c26786bb1866c `Opera Software`<http://opera.com> flexbox_flex-N-0 reference/flexbox_flex-N-0-0-ref flexbox | flex: N 0 http://www.w3.org/TR/css-flexbox-1/#flex-property 54a8c6a89285e4ff75ce0533a8bbac051f58873c `Opera Software`<http://opera.com> @@ -584,6 +585,26 @@ flexbox_wrap-reverse reference/flexbox_wrap-reverse-ref flexbox | flex-wrap: wra flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref Align content flex-start with writing mode vertical-rl. http://www.w3.org/TR/css-flexbox-1/#flow-order 17cc4246ed20d7ad8f42d438b996f6c009552a61 `Ryuichi Nonaka`<mailto:ryuichi1com@gmail.com> In vertical Japanese, for example, a row flexbox lays out its contents from top to bottom. flexible-box-float reference/flex-box-float-ref flexible box flex item float effect http://www.w3.org/TR/css-flexbox-1/#flex-containers 71056b40e8e41321e7463d829d634027549c42c8 `zhouli`<mailto:liz@oupeng.com> float has no effect on flex items Flexible-order reference/Flexible-order-ref Change the value of 'order' property http://www.w3.org/TR/css-flexbox-1/#propdef-order ce262f5831c1c4e1021f8acf04611c4df8a05461 `KeynesQu`<mailto:keynesqu@sohu.com> The order of three should be blue-red-black +grid-inline-order-property-auto-placement-001 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 918e47a41ffe595541954cf93da712b43f445a5e `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-auto-placement-002 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 4edacd9b53d661e31bf2106e16952e5f1d5a4ae3 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-auto-placement-003 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property c477590482de8b6d0a47f65f0ee444e535dfe808 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-auto-placement-004 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property e4829929a72456f496b3cb51cfef0f7a513ca928 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-auto-placement-005 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 6ab305e5677478e990b3875efb5e88c2354f52c5 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-painting-001 reference/ref-filled-green-100px-square 'order' property affects grid items painting order within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 8b9dff39077af4b2aacfeb45bd613ff87f8337f1 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-painting-002 reference/ref-filled-green-100px-square 'order' property affects grid items painting order within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 4ea3121613e183fd2314c8a286f1ff449a07e775 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-painting-003 reference/ref-filled-green-100px-square 'order' property affects grid items painting order within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 03c0507a09b98f190b9fdf128000c6db32222537 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-painting-004 reference/ref-filled-green-100px-square 'order' property affects grid items painting order within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 93ea4f95eeb4e085c1bb4ea9e5d0fc4fa1c64ac9 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-inline-order-property-painting-005 reference/ref-filled-green-100px-square 'order' property affects grid items painting order within an inline grid ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 72728e05989a070edb754801be2e9769ec861c2d `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-auto-placement-001 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property ad5b4e57de7a4ea9fd826be7fca30d6700672fa1 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-auto-placement-002 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property d33459a775e8e493e29fe5cd454d1e20eb057f20 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-auto-placement-003 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property df0c2f2f87996d49e5e9310ee18daefe64011519 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-auto-placement-004 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 42cf26e259742411b423b6a40ef7984f3505f701 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-auto-placement-005 reference/grid-2x2-blue-yellow-lime-magenta 'order' property affects grid items auto-placement position ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 367195431744f6f660a7d2f5f633ad35f648911b `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-painting-001 reference/ref-filled-green-100px-square 'order' property affects grid items painting order ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property aee0a73a242a7b3b874983039ee2b39a9dd52544 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-painting-002 reference/ref-filled-green-100px-square 'order' property affects grid items painting order ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property a78b91a8d9709a7584862672e0a8f90def76edb7 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-painting-003 reference/ref-filled-green-100px-square 'order' property affects grid items painting order ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 80be21cb47ca6557aa4436603a85a28f80dde773 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-painting-004 reference/ref-filled-green-100px-square 'order' property affects grid items painting order ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 70a79fa9be93b40a976ae83c7adc862d137317ac `Manuel Rego Casasnovas`<mailto:rego@igalia.com> +grid-order-property-painting-005 reference/ref-filled-green-100px-square 'order' property affects grid items painting order ahem http://www.w3.org/TR/css-grid-1/#order-property,https://drafts.csswg.org/css-flexbox-1/#order-property 1816a5bb33c6984fa4cd4d0d834d8681391acb9d `Manuel Rego Casasnovas`<mailto:rego@igalia.com> justify-content-001 reference/justify-content-001-ref A flex container with 'justify-content' property set to 'center' image http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content e103fe066163fdb6f14428ff0469211e802a5545 `Microsoft`<http://www.microsoft.com/> This test checks that the flex container with 'justify-content: center' centers flex items in the main axis of each line. justify-content-002 reference/justify-content-001-ref A flex container with the 'justify-content' property set to 'flex-start' image http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content 26934eb3e05268678cb72c6d95a332f839ce096b `Microsoft`<http://www.microsoft.com/> This test checks that the flex container with 'justify-content: flex-start' packs flex items toward the start of the main axis of each line. justify-content-003 reference/justify-content-001-ref A flex container with the 'justify-content' property set to 'flex-end' image http://www.w3.org/TR/css-flexbox-1/#propdef-justify-content cd35996b3ada0401475d8140423b42d4be15201e `Microsoft`<http://www.microsoft.com/> This test checks that the flex container with 'justify-content: flex-end' packs flex items toward the end of the main axis of each line. 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 - diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht index e3bf234bbb8..4a3dbcb19a6 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-4.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/chapter-5.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-5.xht index fbdfd0d712e..ea92f3f636a 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-5.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/chapter-9.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht index 176fa40ff48..c949442c58c 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/chapter-9.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/css-flexbox-column-reverse-wrap-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap-reverse.xht index d72f89f0889..f1a5abbf083 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/css-flexbox-column-reverse-wrap.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap.xht index 13fd92d10b0..ae756f965fe 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse-wrap.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/css-flexbox-column-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse.xht index 4452ea4d925..9d7ec41b8d9 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/css-flexbox-column-wrap-reverse.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap-reverse.xht index edb38e97307..d6b2fdb6e71 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap-reverse.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/css-flexbox-column-wrap.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap.xht index 3f22f154cab..aeaebe31fc0 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column-wrap.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/css-flexbox-column.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column.xht index 1c6db2bc660..032fba3e598 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/css-flexbox-column.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/flex-container-margin.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-container-margin.xht new file mode 100644 index 00000000000..37786cbc3cc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/flex-flexitem-percentage-prescation.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-flexitem-percentage-prescation.xht index 25f4298cab9..f89a8986b2b 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-flexitem-percentage-prescation.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/flex-order.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-order.xht index b477920f646..759a1009f9a 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flex-order.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/flexbox-align-self-stretch-vert-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-align-self-stretch-vert-001.xht index ce7a26d9d54..cb7ab7627c5 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-align-self-stretch-vert-001.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/flexbox-baseline-align-self-baseline-vert-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-baseline-align-self-baseline-vert-001.xht index 4ee5bbc771d..bc2cc79e479 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox-baseline-align-self-baseline-vert-001.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/flexbox_fbfc2.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox_fbfc2.xht index cd8e95d4968..db1b99940bf 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox_fbfc2.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/flexbox_flex-formatting-interop.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox_flex-formatting-interop.xht index 060c0248870..03541854e35 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/flexbox_flex-formatting-interop.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/grid-inline-order-property-auto-placement-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-001.xht new file mode 100644 index 00000000000..35c30e4bbf1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-001.xht @@ -0,0 +1,66 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-auto-placement-001"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-auto-placement-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-002.xht new file mode 100644 index 00000000000..04ced17b09e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-002.xht @@ -0,0 +1,66 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-auto-placement-002"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-auto-placement-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-003.xht new file mode 100644 index 00000000000..cf691a4bb18 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-003.xht @@ -0,0 +1,66 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-auto-placement-003"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-auto-placement-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-004.xht new file mode 100644 index 00000000000..42a17b2cadd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-004.xht @@ -0,0 +1,67 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-auto-placement-004"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-auto-placement-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-005.xht new file mode 100644 index 00000000000..4c1a2a02924 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-auto-placement-005.xht @@ -0,0 +1,67 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-auto-placement-005"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-painting-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-001.xht new file mode 100644 index 00000000000..1c433920ea0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-001.xht @@ -0,0 +1,47 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-painting-001"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-painting-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-002.xht new file mode 100644 index 00000000000..fcd324239e3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-002.xht @@ -0,0 +1,47 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-painting-002"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-painting-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-003.xht new file mode 100644 index 00000000000..9fea376d53f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-003.xht @@ -0,0 +1,48 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-painting-003"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-painting-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-004.xht new file mode 100644 index 00000000000..78fee78312b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-004.xht @@ -0,0 +1,48 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-painting-004"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-inline-order-property-painting-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-005.xht new file mode 100644 index 00000000000..3fb0b5175e3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-inline-order-property-painting-005.xht @@ -0,0 +1,48 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-inline-order-property-painting-005"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-auto-placement-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-001.xht new file mode 100644 index 00000000000..45cccbe7c58 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-001.xht @@ -0,0 +1,66 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-auto-placement-001"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-auto-placement-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-002.xht new file mode 100644 index 00000000000..699e83cbd9a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-002.xht @@ -0,0 +1,66 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-auto-placement-002"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-auto-placement-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-003.xht new file mode 100644 index 00000000000..36c62be1db3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-003.xht @@ -0,0 +1,66 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-auto-placement-003"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-auto-placement-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-004.xht new file mode 100644 index 00000000000..9b2dadf2343 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-004.xht @@ -0,0 +1,67 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-auto-placement-004"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-auto-placement-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-005.xht new file mode 100644 index 00000000000..63125de403e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-auto-placement-005.xht @@ -0,0 +1,67 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-auto-placement-005"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-painting-001.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-001.xht new file mode 100644 index 00000000000..0b0dfada795 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-001.xht @@ -0,0 +1,47 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-painting-001"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-painting-002.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-002.xht new file mode 100644 index 00000000000..2d065ea7dd6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-002.xht @@ -0,0 +1,47 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-painting-002"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-painting-003.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-003.xht new file mode 100644 index 00000000000..9534061c07c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-003.xht @@ -0,0 +1,48 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-painting-003"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-painting-004.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-004.xht new file mode 100644 index 00000000000..d8768985da4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-004.xht @@ -0,0 +1,48 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-painting-004"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/grid-order-property-painting-005.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-005.xht new file mode 100644 index 00000000000..168488852a7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/grid-order-property-painting-005.xht @@ -0,0 +1,48 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-order-property-painting-005"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/reference/css-flexbox-column-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht index 4f4b322478b..3ac0639340b 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/reference/flex-container-margin-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-container-margin-ref.xht new file mode 100644 index 00000000000..38187fe38ca --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/reference/flex-order-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-order-ref.xht index 1ba69136aa2..527604fc061 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-order-ref.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/reference/grid-2x2-blue-yellow-lime-magenta.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/grid-2x2-blue-yellow-lime-magenta.xht new file mode 100644 index 00000000000..e71aa606f42 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/grid-2x2-blue-yellow-lime-magenta.xht @@ -0,0 +1,47 @@ +<!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> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test grid-2x2-blue-yellow-lime-magenta"; } + @bottom-right { content: counter(page); } + } +</style> + <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/xhtml1print/reftest-toc.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht index 64653047780..75ac520c053 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest-toc.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/reftest.list b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list index f4687c773ca..d830774b0fa 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reftest.list +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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/xhtml1print/toc.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht index 9823b1c7b97..8da21cf30e1 100644 --- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/toc.xht +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/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 - |