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/html | |
| 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/html')
43 files changed, 1434 insertions, 42 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 - |