mirror of
https://github.com/servo/servo.git
synced 2025-08-15 18:35:33 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
#blue {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
#yellow {
|
||||
color: yellow;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#lime {
|
||||
color: lime;
|
||||
order: 5;
|
||||
}
|
||||
|
||||
#magenta {
|
||||
color: magenta;
|
||||
order: 10;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="inline-grid">
|
||||
<div id="magenta">M</div>
|
||||
<div id="lime">L</div>
|
||||
<div id="yellow">Y</div>
|
||||
<div id="blue">B</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
#blue {
|
||||
color: blue;
|
||||
order: -10;
|
||||
}
|
||||
|
||||
#yellow {
|
||||
color: yellow;
|
||||
order: -5;
|
||||
}
|
||||
|
||||
#lime {
|
||||
color: lime;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
#magenta {
|
||||
color: magenta;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="inline-grid">
|
||||
<div id="magenta">M</div>
|
||||
<div id="lime">L</div>
|
||||
<div id="yellow">Y</div>
|
||||
<div id="blue">B</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
#blue {
|
||||
color: blue;
|
||||
order: -5;
|
||||
}
|
||||
|
||||
#yellow {
|
||||
color: yellow;
|
||||
order: -5;
|
||||
}
|
||||
|
||||
#lime {
|
||||
color: lime;
|
||||
}
|
||||
|
||||
#magenta {
|
||||
color: magenta;
|
||||
order: 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="inline-grid">
|
||||
<div id="lime">L</div>
|
||||
<div id="magenta">M</div>
|
||||
<div id="blue">B</div>
|
||||
<div id="yellow">Y</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
#blue {
|
||||
color: blue;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#yellow {
|
||||
color: yellow;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#lime {
|
||||
color: lime;
|
||||
order: 5;
|
||||
}
|
||||
|
||||
#magenta {
|
||||
color: magenta;
|
||||
order: 5;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="inline-grid">
|
||||
<div id="blue">B</div>
|
||||
<div id="lime">L</div>
|
||||
<div id="magenta">M</div>
|
||||
<div id="yellow">Y</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
#blue {
|
||||
color: blue;
|
||||
order: -5;
|
||||
}
|
||||
|
||||
#yellow {
|
||||
color: yellow;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
#lime {
|
||||
color: lime;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#magenta {
|
||||
color: magenta;
|
||||
order: 5;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="inline-grid">
|
||||
<div id="yellow">Y</div>
|
||||
<div id="magenta">M</div>
|
||||
<div id="blue">B</div>
|
||||
<div id="lime">L</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
order: 10;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
order: -5;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
order: -10;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#inline-grid {
|
||||
display: inline-grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="inline-grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;"> </div></div>
|
||||
<div class="b">
|
||||
<div class="b1"><div style="height:50px;"> </div></div>
|
||||
<div class="b2"><div style="height:50px;"> </div></div>
|
||||
</div>
|
||||
<div class="c"><div style="height:50px;"> </div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#constrained-grid {
|
||||
display: grid;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 for height (as it's smaller than the content size of the image)." />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 content size for height (as it's smaller than the transferred size of the image)." />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<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/50x100-green.png" alt="Image download support must be enabled" />
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 (as it's smaller than the content size of the image)." />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 content size for width (as it's smaller than the transferred size of the image)." />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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;
|
||||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<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/100x50-green.png" alt="Image download support must be enabled" />
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="grid">
|
||||
<div id="magenta">M</div>
|
||||
<div id="lime">L</div>
|
||||
<div id="yellow">Y</div>
|
||||
<div id="blue">B</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="grid">
|
||||
<div id="magenta">M</div>
|
||||
<div id="lime">L</div>
|
||||
<div id="yellow">Y</div>
|
||||
<div id="blue">B</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="grid">
|
||||
<div id="lime">L</div>
|
||||
<div id="magenta">M</div>
|
||||
<div id="blue">B</div>
|
||||
<div id="yellow">Y</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="grid">
|
||||
<div id="blue">B</div>
|
||||
<div id="lime">L</div>
|
||||
<div id="magenta">M</div>
|
||||
<div id="yellow">Y</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 50px/1 Ahem;
|
||||
grid-template-columns: auto auto;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
|
||||
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div id="grid">
|
||||
<div id="yellow">Y</div>
|
||||
<div id="magenta">M</div>
|
||||
<div id="blue">B</div>
|
||||
<div id="lime">L</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
order: 10;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
order: 5;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
order: -5;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
order: -10;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#grid {
|
||||
display: grid;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
|
||||
#test-item-overlapping-green {
|
||||
color: green;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#reference-item-overlapped-red {
|
||||
color: red;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.first-row-first-column {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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 type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div id="grid">
|
||||
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
|
||||
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 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.xht" />
|
||||
<meta name="flags" content="ahem" />
|
||||
<style type="text/css"><![CDATA[
|
||||
#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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue