Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-16 02:45:36 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

Browse source
This commit is contained in:
Josh Matthews 2017-10-31 08:58:31 -04:00
parent 43a4f01647
commit 64e0a52537
12717 changed files with 59835 additions and 59820 deletions
Download patch file Download diff file Expand all files Collapse all files

38
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-items-001.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Regular and anonymous grid items 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/#grid-items" title="4 Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-inline-grid-overlapping-green {
display: inline-grid;
font: 25px/1 Ahem;
color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-inline-grid-overlapping-green">
<div>it</div>
em
<div>it</div>
em
</div><div class="test-inline-grid-overlapping-green">
it
<span>em</span>
it
<span>em</span>
</div>

50
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-items-002.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Children of grid items do not create new items 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/#grid-items" title="4 Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items within an inline grid.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-inline-grid-overlapping-green {
display: inline-grid;
font: 25px/1 Ahem;
color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-inline-grid-overlapping-green">
<div>
<div>it</div>
em
</div>
<div>
it
<div>em</div>
</div>
</div><div class="test-inline-grid-overlapping-green">
<span>
<span>i</span>t
</span>
<span>
e<span>m</span>
</span>
<span>
<span>i</span>t
</span>
<span>
e<span>m</span>
</span>
</div>

36
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-items-003.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered 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/#grid-items" title="4 Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-inline-grid-overlapping-green {
display: inline-grid;
font: 50px/1 Ahem;
color: green;
}
.display-none-red {
display: none;
color: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-inline-grid-overlapping-green two-columns">
<span>it</span>
<span class="display-none-red">hidden</span>
<span>em</span>
</div>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Paint order of grid items within an inline grid is the same as inline blocks</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/#z-order" title="9.5 Z-axis Ordering: the z-index property">
<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#inline-grid {
display: inline-grid;
}
#reference-overlapped-red {
color: red;
font: 100px/1 Ahem;
grid-row: 1;
grid-column: 1;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
grid-row: 1;
grid-column: 1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="reference-overlapped-red">R</div>
<div id="test-overlapping-green"></div>
</div>

52
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-001.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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>
<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>

52
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-002.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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>
<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>

52
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-003.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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>
<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>

53
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-004.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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>
<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>

53
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-005.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-painting-001.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-painting-002.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

34
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-painting-003.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

34
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-painting-004.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

34
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-order-property-painting-005.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

32
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-001.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

32
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-002.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-003.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 10;
}
#reference-item-overlapped-red {
color: red;
z-index: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-004.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: -5;
}
#reference-item-overlapped-red {
color: red;
z-index: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-005.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 1;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

43
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: 1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 10;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

43
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -10;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: -1;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 5;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -5;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

48
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 2;
grid-row: 2;
margin-top: -25px;
margin-left: -25px;
}
#yellow {
color: yellow;
grid-column: 4;
grid-row: 4;
margin-top: -50px;
margin-left: -50px;
}
#green {
color: green;
z-index: 1;
grid-column: 1;
grid-row: 1;
margin-top: 50px;
margin-left: 50px;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

37
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-containing-block-001.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item sizing</title>
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
width: 200px;
height: 200px;
grid-template-rows: 100px;
grid-template-columns: 100px;
}
#test-overlapped-red {
background-color: red;
width: 100%;
height: 100%;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-overlapped-red">
<div id="test-overlapping-green"></div>
</div>
</div>
</body>

37
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-containing-block-002.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item sizing</title>
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
width: 200px;
height: 200px;
grid-template-rows: 50%;
grid-template-columns: 50%;
}
#test-overlapped-red {
background-color: red;
width: 100%;
height: 100%;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-overlapped-red">
<div id="test-overlapping-green"></div>
</div>
</div>
</body>

37
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-containing-block-003.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item sizing</title>
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
width: 200px;
height: 200px;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
#test-overlapped-red {
background-color: red;
width: 100%;
height: 100%;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-overlapped-red">
<div id="test-overlapping-green"></div>
</div>
</div>
</body>

37
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-item-containing-block-004.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid item sizing in a positioned grid container</title>
<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
<meta name="assert" content="A grid item is sized within the containing block defined by its grid area that intersects flexible tracks">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
position: absolute;
height: 200px;
width: 200px;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
#test-item-overlapped-red {
background-color: red;
width: 100%;
height: 100%;
}
#reference-overlapping-green{
background-color: green;
width: 100px;
height: 100px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapped-red">
<div id="reference-overlapping-green">
</div>
</div>
</div>
</body>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-items-001.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Regular and anonymous grid items</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/#grid-items" title="4 Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-grid-overlapping-green {
display: grid;
font: 25px/1 Ahem;
color: green;
grid-template-columns: auto auto;
justify-content: start;
align-content: start;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-grid-overlapping-green">
<div>it</div>
em
<div>it</div>
em
</div>
<div class="test-grid-overlapping-green">
it
<span>em</span>
it
<span>em</span>
</div>

51
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-items-002.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Children of grid items do not create new items</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/#grid-items" title="4 Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-grid-overlapping-green {
display: grid;
font: 25px/1 Ahem;
color: green;
justify-content: start;
align-content: start;
}
.two-columns {
grid-template-columns: auto auto;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-grid-overlapping-green two-columns">
<div>
<div>it</div>
em
</div>
<div>
it
<div>em</div>
</div>
</div>
<div class="test-grid-overlapping-green">
<span>
<span>it</span>em
</span>
<span>
it<span>em</span>
</span>
</div>

36
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-items-003.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered</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/#grid-items" title="4 Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-grid-overlapping-green {
display: grid;
font: 50px/1 Ahem;
color: green;
}
.display-none-red {
display: none;
color: red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-grid-overlapping-green two-columns">
<span>it</span>
<span class="display-none-red">hidden</span>
<span>em</span>
</div>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-items-inline-blocks-001.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Paint order of grid items is the same as inline blocks</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/#z-order" title="9.5 Z-axis Ordering: the z-index property">
<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#grid {
display: grid;
}
#reference-overlapped-red {
color: red;
font: 100px/1 Ahem;
grid-row: 1;
grid-column: 1;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
grid-row: 1;
grid-column: 1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="reference-overlapped-red">R</div>
<div id="test-overlapping-green"></div>
</div>

13
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference: Grid Item Sizing</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<p>Test passes if it has the same output than the reference.</p>
<div id="grid">
<button style="width: 200px; height: 200px;">Stretched button (200x200)</button><button style="width: 200px; height: 200px;">Stretched button (200x200)</button><button style="vertical-align: top;">Regular button</button>
<br>
<img style="vertical-align: top; margin-right: 150px;" src="support/50x50-green.png" alt="Image download support must be enabled" /><img src="support/200x200-green.png" alt="Image download support must be enabled" /><img style="vertical-align: top;" src="support/50x50-green.png" alt="Image download support must be enabled" />
</div>

28
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid Item Sizing</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">
<link rel="match" href="grid-items-sizing-alignment-001-ref.html" />
<meta name="assert" content="Checks how alignment properties affect the size of the non-replaced vs replaced grid items.">
<style>
#grid {
display: grid;
grid-auto-rows: 200px;
grid-template-columns: repeat(3, 200px);
}
</style>
<p>Test passes if it has the same output than the reference.</p>
<div id="grid">
<button style="align-self: normal; justify-self: normal;">Stretched button (200x200)</button>
<button style="align-self: stretch; justify-self: stretch;">Stretched button (200x200)</button>
<button style="align-self: start; justify-self: start;">Regular button</button>
<img src="support/50x50-green.png" alt="Image download support must be enabled"
style="align-self: normal; justify-self: normal;" />
<img src="support/50x50-green.png" alt="Image download support must be enabled"
style="align-self: stretch; justify-self: stretch;" />
<img src="support/50x50-green.png" alt="Image download support must be enabled"
style="align-self: start; justify-self: start;" />
</div>

67
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-layout-grid-in-grid.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: grid in grid</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
<link rel="match" href="../reference/grid-layout-grid-in-grid-ref.html">
<meta name="assert" content="the nested grid should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
height: 150px;
width: 150px;
background: #eee;
display: grid;
grid-template-columns: 50px 100px;
grid-template-rows: 100px 50px;
}
.a {
background: blue;
grid-column: 1;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 2;
grid-row: 1;
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
}
.b1 {
background: orange;
grid-column: 1;
grid-row: 1;
}
.b2 {
background: cyan;
grid-column: 2;
grid-row: 2;
}
.c {
background: pink;
grid-column: 2;
grid-row: 2;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a"><div style="height:100px;">&nbsp;</div></div>
<div class="b">
<div class="b1"><div style="height:50px;">&nbsp;</div></div>
<div class="b2"><div style="height:50px;">&nbsp;</div></div>
</div>
<div class="c"><div style="height:50px;">&nbsp;</div></div>
</div>
</body>
</html>

46
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-layout-z-order-a.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: z order</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order">
<link rel="match" href="../reference/grid-layout-z-order-ref.html">
<meta name="assert" content="the layout should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-template-columns: 50px 50px 50px;
color:white;
}
.a {
background: blue;
grid-row: 1;
grid-column: 1 / span 2;
z-index:10
}
.b {
background: yellow;
grid-row: 1;
grid-column: 2 / span 2;
z-index:1
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="b">down</div>
<div class="a">up</div>
</div>
</body>
</html>

46
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-layout-z-order-b.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Test: z order</title>
<link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order">
<link rel="match" href="../reference/grid-layout-z-order-ref.html">
<meta name="assert" content="the layout should behave the same as reference.">
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-template-columns: 50px 50px 50px;
color:white;
}
.a {
background: blue;
grid-row: 1;
grid-column: 1 / 3;
z-index:10
}
.b {
background: yellow;
grid-row: 1;
grid-column: 2 / 4;
z-index:1
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="b">down</div>
<div class="a">up</div>
</div>
</body>
</html>

36
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-001.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="Checks that minimum size for grid items is the content size.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
color: green;
background-color: green;
font: 50px/1 Ahem;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">IT E</div>
</div>

40
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-002.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that minimum size for grid items is the content size.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-003.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
#content-500x500 {
width: 500px;
height: 500px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-500x500"></div>
</div>
</div>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-004.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
#content-50x50 {
width: 50px;
height: 50px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-50x50"></div>
</div>
</div>

30
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-005.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the content size.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img src="support/100x100-green.png" alt="Image download support must be enabled" />
</div>

34
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-006.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is bigger).">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
width: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" />
</div>

38
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-007.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is smaller).">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid-template-columns: auto auto;
width: 10px;
height: 10px;
}
.test-grid-item-overlapping-green {
width: 50px;
justify-self: stretch;
align-self: stretch;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" />
<img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" />
</div>

34
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size of the image for width (even when content size is bigger).">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
#test-grid-item-overlapping-green {
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" />
</div>

37
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size for width of the image (even when content size is smaller).">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
}
.test-grid-item-overlapping-green {
height: 50px;
justify-self: stretch;
align-self: stretch;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" />
<img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" />
</div>

39
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-010.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 100px / 100px;
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-011.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 100px;
height: 100px;
grid: minmax(0px, 500px) / minmax(0px, 500px);
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-012.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 100px;
height: 100px;
grid: minmax(0px, auto) / minmax(0px, auto);
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

37
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-013.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
color: green;
background-color: green;
font: 50px/1 Ahem;
justify-self: start;
align-self: start;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">IT E</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-014.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
justify-self: start;
align-self: start;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

43
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-015.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item if it spans some not fixed grid tracks.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px auto 10px / 10px auto 10px;
justify-content: start;
}
#test-grid-item-overlapping-green {
background-color: green;
grid-row: span 3;
grid-column: span 3;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-016.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 50px 30px 20px / 50px 30px 20px;
}
#test-grid-item-overlapping-green {
background-color: green;
grid-row: span 3;
grid-column: span 3;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-017.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the track has an 'auto' min track sizing function.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
grid: minmax(auto, 0px) / minmax(auto, 0px);
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-018.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is not clamped if the track has an 'auto' min track sizing function.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 10px;
height: 10px;
grid: minmax(auto, 500px) / minmax(auto, 500px);
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-100x100 {
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-019.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 500px;
height: 200px;
grid: 50% / 20%;
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

43
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-020.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks.">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
width: 200px;
height: 500px;
grid: 10% 30px 20px / 50px 30px 10%;
}
#test-grid-item-overlapping-green {
background-color: green;
grid-row: span 3;
grid-column: span 3;
}
#content-200x200 {
width: 200px;
height: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-200x200"></div>
</div>
</div>

214
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html Normal file
View file

@ -0,0 +1,214 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</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/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#algo-track-sizing" title="12.3. Track Sizing Algorithm">
<meta name="assert" content="Checks how automatic minimum size of images affect to the calculation of the grid container size and the grid tracks. Verifies the sizing of the image in the different cases too.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.grid {
display: inline-grid;
font: 25px/1 Ahem;
}
.constrainedGrid {
width: 10px;
height: 10px;
}
.justifyContentStart {
justify-content: start;
}
.width200px {
width: 200px;
}
.width100percent {
width: 100%;
}
</style>
<script>
function checkGridSizeTracksAndImageSize(gridId, imgId, gridWidth, gridHeight, gridColumns, gridRows, imgWidth, imgHeight) {
const gridStyle = getComputedStyle(document.getElementById(gridId));
const imgStyle = getComputedStyle(document.getElementById(imgId));
test(
function() {
assert_equals(gridStyle.width, gridWidth);
}, gridId + ".width");
test(
function() {
assert_equals(gridStyle.height, gridHeight);
}, gridId + ".height");
test(
function() {
assert_equals(gridStyle.gridTemplateColumns, gridColumns);
}, gridId + ".gridTemplateColumns");
test(
function() {
assert_equals(gridStyle.gridTemplateRows, gridRows);
}, gridId + ".gridTemplateRows");
test(
function() {
assert_equals(imgStyle.width, imgWidth);
}, imgId + ".width");
test(
function() {
assert_equals(imgStyle.height, imgHeight);
}, imgId + ".height");
}
setup({ explicit_done: true });
window.addEventListener("load", runTests);
function runTests() {
checkGridSizeTracksAndImageSize("grid-1", "img-1", "200px", "200px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-2", "img-2", "10px", "10px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-3", "img-3", "200px", "200px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-4", "img-4", "200px", "10px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-5", "img-5", "200px", "50px", "50px", "50px", "50px", "50px");
checkGridSizeTracksAndImageSize("grid-6", "img-6", "200px", "10px", "50px", "50px", "50px", "50px");
checkGridSizeTracksAndImageSize("grid-7", "img-7", "200px", "225px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-8", "img-8", "10px", "10px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-9", "img-9", "200px", "225px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-10", "img-10", "200px", "10px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-11", "img-11", "200px", "125px", "100px", "100px 25px", "100px", "100px");
checkGridSizeTracksAndImageSize("grid-12", "img-12", "200px", "10px", "100px", "100px 25px", "100px", "100px");
checkGridSizeTracksAndImageSize("grid-13", "img-13", "200px", "200px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-14", "img-14", "10px", "10px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-15", "img-15", "200px", "200px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-16", "img-16", "200px", "10px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-17", "img-17", "200px", "200px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-18", "img-18", "200px", "10px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-19", "img-19", "200px", "225px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-20", "img-20", "10px", "10px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-21", "img-21", "200px", "225px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-22", "img-22", "200px", "10px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-23", "img-23", "200px", "225px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-24", "img-24", "200px", "10px", "200px", "200px 25px", "200px", "200px");
done();
}
</script>
<div id=log></div>
<!-- Grids with only a 50x50 image as grid item. -->
<div id="grid-1" class="grid">
<img id="img-1" class="width200px" src="support/50x50-green.png">
</div>
<div id="grid-2" class="grid constrainedGrid">
<img id="img-2" class="width200px" src="support/50x50-green.png">
</div>
<div id="grid-3" class="grid width200px">
<img id="img-3" class="width100percent" src="support/50x50-green.png">
</div>
<div id="grid-4" class="grid width200px constrainedGrid">
<img id="img-4" class="width100percent" src="support/50x50-green.png">
</div>
<div id="grid-5" class="grid width200px justifyContentStart">
<img id="img-5" class="width100percent" src="support/50x50-green.png">
</div>
<div id="grid-6" class="grid width200px constrainedGrid justifyContentStart">
<img id="img-6" class="width100percent" src="support/50x50-green.png">
</div>
<!-- Grids with a 50x50 image as grid item and a 100x25 text grid item. -->
<div id="grid-7" class="grid">
<img id="img-7" class="width200px" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-8" class="grid constrainedGrid">
<img id="img-8" class="width200px" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-9" class="grid width200px">
<img id="img-9" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-10" class="grid width200px constrainedGrid">
<img id="img-10" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-11" class="grid width200px justifyContentStart">
<img id="img-11" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<div id="grid-12" class="grid width200px constrainedGrid justifyContentStart">
<img id="img-12" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>
<!-- Grids with only a 500x500 image as grid item. -->
<div id="grid-13" class="grid">
<img id="img-13" class="width200px" src="support/500x500-green.png">
</div>
<div id="grid-14" class="grid constrainedGrid">
<img id="img-14" class="width200px" src="support/500x500-green.png">
</div>
<div id="grid-15" class="grid width200px">
<img id="img-15" class="width100percent" src="support/500x500-green.png">
</div>
<div id="grid-16" class="grid width200px constrainedGrid">
<img id="img-16" class="width100percent" src="support/500x500-green.png">
</div>
<div id="grid-17" class="grid width200px justifyContentStart">
<img id="img-17" class="width100percent" src="support/500x500-green.png">
</div>
<div id="grid-18" class="grid width200px constrainedGrid justifyContentStart">
<img id="img-18" class="width100percent" src="support/500x500-green.png">
</div>
<!-- Grids with a 500x500 image as grid item and a 100x25 text grid item. -->
<div id="grid-19" class="grid">
<img id="img-19" class="width200px" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-20" class="grid constrainedGrid">
<img id="img-20" class="width200px" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-21" class="grid width200px">
<img id="img-21" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-22" class="grid width200px constrainedGrid">
<img id="img-22" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-23" class="grid width200px justifyContentStart">
<img id="img-23" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>
<div id="grid-24" class="grid width200px constrainedGrid justifyContentStart">
<img id="img-24" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>

54
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-auto-placement-001.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 10;
}
</style>
<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>

54
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-auto-placement-002.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
order: -10;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
order: -1;
}
#magenta {
color: magenta;
}
</style>
<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>

54
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-auto-placement-003.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
}
#magenta {
color: magenta;
order: 1;
}
</style>
<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>

55
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-auto-placement-004.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
order: 1;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 5;
}
</style>
<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>

55
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-auto-placement-005.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
<meta name="flags" content="ahem">
<style>
#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;
justify-content: start;
align-content: start;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -1;
}
#lime {
color: lime;
order: 1;
}
#magenta {
color: magenta;
order: 5;
}
</style>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-painting-001.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-painting-002.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

34
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-painting-003.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

34
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-painting-004.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

34
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-order-property-painting-005.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#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>
<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>

32
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-001.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

32
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-002.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-003.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 10;
}
#reference-item-overlapped-red {
color: red;
z-index: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-004.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: -5;
}
#reference-item-overlapped-red {
color: red;
z-index: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

33
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-005.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
</style>
<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>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-001.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 1;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

43
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-002.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: 1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 10;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

43
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-003.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -10;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: -1;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-004.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 5;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

42
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -5;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
grid-column: 3;
grid-row: 3;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

48
tests/wpt/web-platform-tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking 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/#z-order" title="4.4. Z-axis Ordering: the z-index property">
<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
<meta name="flags" content="ahem">
<style>
#grid {
display: grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 2;
grid-row: 2;
margin-top: -25px;
margin-left: -25px;
}
#yellow {
color: yellow;
grid-column: 4;
grid-row: 4;
margin-top: -50px;
margin-left: -50px;
}
#green {
color: green;
z-index: 1;
grid-column: 1;
grid-row: 1;
margin-top: 50px;
margin-left: 50px;
}
</style>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>

8
tests/wpt/web-platform-tests/css/css-grid/grid-items/ref-filled-green-100px-square-image.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference: 100x100 green square image</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<img src="support/100x100-green.png" alt="Image download support must be enabled" />

BIN
tests/wpt/web-platform-tests/css/css-grid/grid-items/support/100x100-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
tests/wpt/web-platform-tests/css/css-grid/grid-items/support/200x200-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
tests/wpt/web-platform-tests/css/css-grid/grid-items/support/25x50-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 99 B

BIN
tests/wpt/web-platform-tests/css/css-grid/grid-items/support/500x500-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
tests/wpt/web-platform-tests/css/css-grid/grid-items/support/50x25-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 100 B

BIN
tests/wpt/web-platform-tests/css/css-grid/grid-items/support/50x50-green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB