Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 21:50:18 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision d674587d6ae7d2e231d632785559f2613d554eb0

Browse source
This commit is contained in:
Ms2ger 2015-08-21 17:46:44 +02:00
parent 7c45ff8e05
commit f235d49372
6623 changed files with 267392 additions and 10061 deletions
Download patch file Download diff file Expand all files Collapse all files

15
tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-4.htm
View file

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

164
tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-5.htm
View file

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

2
tests/wpt/css-tests/css-flexbox-1_dev/html/chapter-9.htm
View file

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

3
tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap-reverse.htm
View file

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

3
tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse-wrap.htm
View file

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

3
tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-reverse.htm
View file

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

3
tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap-reverse.htm
View file

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

3
tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column-wrap.htm
View file

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

3
tests/wpt/css-tests/css-flexbox-1_dev/html/css-flexbox-column.htm
View file

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

30
tests/wpt/css-tests/css-flexbox-1_dev/html/flex-container-margin.htm Normal file
View file

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

3
tests/wpt/css-tests/css-flexbox-1_dev/html/flex-flexitem-percentage-prescation.htm
View file

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

8
tests/wpt/css-tests/css-flexbox-1_dev/html/flex-order.htm
View file

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

2
tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-align-self-stretch-vert-001.htm
View file

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

2
tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox-baseline-align-self-baseline-vert-001.htm
View file

@ -25,8 +25,6 @@
.flexContainer {
display: inline-flex;
flex-direction: column;
display: -webkit-inline-flex;
-webkit-flex-direction: column;
background: lightblue;
align-items: baseline;
}

3
tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_fbfc2.htm
View file

@ -14,9 +14,6 @@
background: #ffcc00;
margin-left: -200px;
width: 400px;
display: -moz-box;
display: -ms-box;
display: -webkit-box;
display: flex;
}
div div {

2
tests/wpt/css-tests/css-flexbox-1_dev/html/flexbox_flex-formatting-interop.htm
View file

@ -17,8 +17,6 @@
width: 200px;
display: flex;
display: -ms-flex;
display: -webkit-flex;
}
div div {
border: 2px solid transparent;

57
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-001.htm Normal file
View file

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

57
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-002.htm Normal file
View file

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

57
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-003.htm Normal file
View file

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

58
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-004.htm Normal file
View file

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

58
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-auto-placement-005.htm Normal file
View file

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

38
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-001.htm Normal file
View file

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

38
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-002.htm Normal file
View file

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

39
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-003.htm Normal file
View file

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

39
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-004.htm Normal file
View file

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

39
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-inline-order-property-painting-005.htm Normal file
View file

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

57
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-001.htm Normal file
View file

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

57
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-002.htm Normal file
View file

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

57
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-003.htm Normal file
View file

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

58
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-004.htm Normal file
View file

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

58
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-auto-placement-005.htm Normal file
View file

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

38
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-001.htm Normal file
View file

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

38
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-002.htm Normal file
View file

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

39
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-003.htm Normal file
View file

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

39
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-004.htm Normal file
View file

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

39
tests/wpt/css-tests/css-flexbox-1_dev/html/grid-order-property-painting-005.htm Normal file
View file

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

1
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm
View file

@ -9,7 +9,6 @@
width: 9em;
}
.item {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
background: green;
height: 4em;

33
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-container-margin-ref.htm Normal file
View file

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

2
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-order-ref.htm
View file

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

38
tests/wpt/css-tests/css-flexbox-1_dev/html/reference/grid-2x2-blue-yellow-lime-magenta.htm Normal file
View file

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

168
tests/wpt/css-tests/css-flexbox-1_dev/html/reftest-toc.htm
View file

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

21
tests/wpt/css-tests/css-flexbox-1_dev/html/reftest.list
View file

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

4
tests/wpt/css-tests/css-flexbox-1_dev/html/toc.htm
View file

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