Update CSS tests to revision 09d27d61d637da536af1d86a8d7bea157592ff9e

This commit is contained in:
Simon Sapin 2015-09-08 11:01:17 +02:00
parent 282f9ade93
commit 5abfa12a4c
234 changed files with 4896 additions and 498 deletions

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Flex Items (58 tests)</h2>
<h2>Flex Items (74 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -451,7 +451,183 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.5">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">4.5 Implied Minimum Size of Flex Items</a></th></tr>
<!-- 16 tests -->
<!-- 32 tests -->
<tr id="flex-minimun-height-flex-items-001-4.5" class="primary">
<td><strong>
<a href="flex-minimun-height-flex-items-001.xht">flex-minimun-height-flex-items-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun height of flex items
<ul class="assert">
<li>Checks that minimun height for flex items is the min-content size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-height-flex-items-002-4.5" class="primary">
<td><strong>
<a href="flex-minimun-height-flex-items-002.xht">flex-minimun-height-flex-items-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun height of flex items
<ul class="assert">
<li>Checks that minimun height for flex items is the specified size if it's smaller than the min-content size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-height-flex-items-003-4.5" class="primary ahem">
<td><strong>
<a href="flex-minimun-height-flex-items-003.xht">flex-minimun-height-flex-items-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Minimun height of flex items
<ul class="assert">
<li>Checks that minimun height for flex items is the min-content size if it's smaller than the specified size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-height-flex-items-004-4.5" class="primary">
<td><strong>
<a href="flex-minimun-height-flex-items-004.xht">flex-minimun-height-flex-items-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun height of flex items
<ul class="assert">
<li>Checks that minimun height for flex items is the min-content size (which corresponds to the image size).</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-height-flex-items-005-4.5" class="primary">
<td><strong>
<a href="flex-minimun-height-flex-items-005.xht">flex-minimun-height-flex-items-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun height of flex items
<ul class="assert">
<li>Checks that minimun height for flex items is the specified size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-height-flex-items-006-4.5" class="primary">
<td><strong>
<a href="flex-minimun-height-flex-items-006.xht">flex-minimun-height-flex-items-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun height of flex items
<ul class="assert">
<li>Checks that minimun height for flex items is the specified size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-height-flex-items-007-4.5" class="primary">
<td><strong>
<a href="flex-minimun-height-flex-items-007.xht">flex-minimun-height-flex-items-007</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun height of flex items
<ul class="assert">
<li>Checks that minimun height for flex items is the transferred size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-height-flex-items-008-4.5" class="primary">
<td><strong>
<a href="flex-minimun-height-flex-items-008.xht">flex-minimun-height-flex-items-008</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun height of flex items
<ul class="assert">
<li>Checks that minimun height for flex items is the transferred size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-width-flex-items-001-4.5" class="primary ahem">
<td><strong>
<a href="flex-minimun-width-flex-items-001.xht">flex-minimun-width-flex-items-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Minimun width of flex items
<ul class="assert">
<li>Checks that minimun width for flex items is the min-content size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-width-flex-items-002-4.5" class="primary">
<td><strong>
<a href="flex-minimun-width-flex-items-002.xht">flex-minimun-width-flex-items-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun width of flex items
<ul class="assert">
<li>Checks that minimun width for flex items is the specified size if it's smaller than the min-content size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-width-flex-items-003-4.5" class="primary ahem">
<td><strong>
<a href="flex-minimun-width-flex-items-003.xht">flex-minimun-width-flex-items-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Minimun width of flex items
<ul class="assert">
<li>Checks that minimun width for flex items is the min-content size if it's smaller than the specified size.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-width-flex-items-004-4.5" class="primary">
<td><strong>
<a href="flex-minimun-width-flex-items-004.xht">flex-minimun-width-flex-items-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun width of flex items
<ul class="assert">
<li>Checks that minimun width for flex items is the min-content size (which corresponds to the image size).</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-width-flex-items-005-4.5" class="primary">
<td><strong>
<a href="flex-minimun-width-flex-items-005.xht">flex-minimun-width-flex-items-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun width of flex items
<ul class="assert">
<li>Checks that minimun width for flex items is the specified size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-width-flex-items-006-4.5" class="primary">
<td><strong>
<a href="flex-minimun-width-flex-items-006.xht">flex-minimun-width-flex-items-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun width of flex items
<ul class="assert">
<li>Checks that minimun width for flex items is the specified size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-width-flex-items-007-4.5" class="primary">
<td><strong>
<a href="flex-minimun-width-flex-items-007.xht">flex-minimun-width-flex-items-007</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun width of flex items
<ul class="assert">
<li>Checks that minimun width for flex items is the transferred size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flex-minimun-width-flex-items-008-4.5" class="primary">
<td><strong>
<a href="flex-minimun-width-flex-items-008.xht">flex-minimun-width-flex-items-008</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Minimun width of flex items
<ul class="assert">
<li>Checks that minimun width for flex items is the transferred size, as the min-content size of the image corresponds to that.</li>
</ul>
</td>
</tr>
<tr id="flexbox-min-height-auto-001-4.5" class="primary">
<td><strong>
<a href="flexbox-min-height-auto-001.xht">flexbox-min-height-auto-001</a></strong></td>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun height of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun height for flex items is the min-content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
flex-direction: column;
width: 100px;
height: 10px;
}
#test-flex-item-overlapping-green {
color: green;
background-color: green;
font: 50px/1 Ahem;
}
#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-flex">
<div id="test-flex-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun height of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun height for flex items is the specified size if it's smaller than the min-content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
flex-direction: column;
width: 100px;
height: 10px;
}
#test-flex-item-overlapping-green {
background-color: green;
height: 100px;
}
#content-100x200 {
width: 100px;
height: 200px;
}
]]></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-flex">
<div id="test-flex-item-overlapping-green">
<div id="content-100x200"></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun height of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that minimun height for flex items is the min-content size if it's smaller than the specified size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
flex-direction: column;
width: 100px;
height: 10px;
}
#test-flex-item-overlapping-green {
color: green;
background-color: green;
height: 200px;
font: 50px/1 Ahem;
}
#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-flex">
<div id="test-flex-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun height of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun height for flex items is the min-content size (which corresponds to the image size)." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
flex-direction: column;
width: 100px;
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-flex">
<img src="support/100x100-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun height of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun height for flex items is the specified size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
flex-direction: column;
width: 100px;
height: 10px;
}
#test-flex-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-flex">
<img id="test-flex-item-overlapping-green" src="support/60x60-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun height of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun height for flex items is the specified size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
flex-direction: column;
width: 100px;
height: 10px;
}
#test-flex-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-flex">
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun height of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun height for flex items is the transferred size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
flex-direction: column;
width: 100px;
height: 10px;
}
#test-flex-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-flex">
<img id="test-flex-item-overlapping-green" src="support/60x60-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun height of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun height for flex items is the transferred size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
flex-direction: column;
width: 100px;
height: 10px;
}
#test-flex-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-flex">
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun width of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that minimun width for flex items is the min-content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
width: 10px;
}
#test-flex-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-flex">
<div id="test-flex-item-overlapping-green">IT E</div>
</div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun width of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun width for flex items is the specified size if it's smaller than the min-content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
width: 10px;
}
#test-flex-item-overlapping-green {
background-color: green;
width: 100px;
}
#content-200x100 {
width: 200px;
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-flex">
<div id="test-flex-item-overlapping-green">
<div id="content-200x100"></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun width of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that minimun width for flex items is the min-content size if it's smaller than the specified size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
width: 10px;
}
#test-flex-item-overlapping-green {
color: green;
background-color: green;
width: 200px;
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-flex">
<div id="test-flex-item-overlapping-green">IT E</div>
</div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun width of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun width for flex items is the min-content size (which corresponds to the image size)." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
width: 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-flex">
<img src="support/100x100-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun width of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun width for flex items is the specified size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
width: 10px;
}
#test-flex-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-flex">
<img id="test-flex-item-overlapping-green" src="support/60x60-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun width of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun width for flex items is the specified size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
width: 10px;
}
#test-flex-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-flex">
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun width of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun width for flex items is the transferred size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
width: 10px;
}
#test-flex-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-flex">
<img id="test-flex-item-overlapping-green" src="support/60x60-green.png" />
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Flexible Box Test: Minimun width of flex items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun width for flex items is the transferred size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-flex {
display: flex;
width: 10px;
}
#test-flex-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-flex">
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 343 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 B

View file

@ -1,4 +1,4 @@
@font-face {
font-family: "Ahem";
src: url(../../../../fonts/Ahem.ttf);
src: url(./Ahem.ttf);
}

View file

@ -792,6 +792,134 @@
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-height-flex-items-001" class="">
<tr>
<td rowspan="1" title="Minimun height of flex items">
<a href="flex-minimun-height-flex-items-001.xht">flex-minimun-height-flex-items-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-height-flex-items-002" class="">
<tr>
<td rowspan="1" title="Minimun height of flex items">
<a href="flex-minimun-height-flex-items-002.xht">flex-minimun-height-flex-items-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-height-flex-items-003" class="ahem">
<tr>
<td rowspan="1" title="Minimun height of flex items">
<a href="flex-minimun-height-flex-items-003.xht">flex-minimun-height-flex-items-003</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="flex-minimun-height-flex-items-004" class="">
<tr>
<td rowspan="1" title="Minimun height of flex items">
<a href="flex-minimun-height-flex-items-004.xht">flex-minimun-height-flex-items-004</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-height-flex-items-005" class="">
<tr>
<td rowspan="1" title="Minimun height of flex items">
<a href="flex-minimun-height-flex-items-005.xht">flex-minimun-height-flex-items-005</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-height-flex-items-006" class="">
<tr>
<td rowspan="1" title="Minimun height of flex items">
<a href="flex-minimun-height-flex-items-006.xht">flex-minimun-height-flex-items-006</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-height-flex-items-007" class="">
<tr>
<td rowspan="1" title="Minimun height of flex items">
<a href="flex-minimun-height-flex-items-007.xht">flex-minimun-height-flex-items-007</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-height-flex-items-008" class="">
<tr>
<td rowspan="1" title="Minimun height of flex items">
<a href="flex-minimun-height-flex-items-008.xht">flex-minimun-height-flex-items-008</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-width-flex-items-001" class="ahem">
<tr>
<td rowspan="1" title="Minimun width of flex items">
<a href="flex-minimun-width-flex-items-001.xht">flex-minimun-width-flex-items-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="flex-minimun-width-flex-items-002" class="">
<tr>
<td rowspan="1" title="Minimun width of flex items">
<a href="flex-minimun-width-flex-items-002.xht">flex-minimun-width-flex-items-002</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-width-flex-items-003" class="ahem">
<tr>
<td rowspan="1" title="Minimun width of flex items">
<a href="flex-minimun-width-flex-items-003.xht">flex-minimun-width-flex-items-003</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="flex-minimun-width-flex-items-004" class="">
<tr>
<td rowspan="1" title="Minimun width of flex items">
<a href="flex-minimun-width-flex-items-004.xht">flex-minimun-width-flex-items-004</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-width-flex-items-005" class="">
<tr>
<td rowspan="1" title="Minimun width of flex items">
<a href="flex-minimun-width-flex-items-005.xht">flex-minimun-width-flex-items-005</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-width-flex-items-006" class="">
<tr>
<td rowspan="1" title="Minimun width of flex items">
<a href="flex-minimun-width-flex-items-006.xht">flex-minimun-width-flex-items-006</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-width-flex-items-007" class="">
<tr>
<td rowspan="1" title="Minimun width of flex items">
<a href="flex-minimun-width-flex-items-007.xht">flex-minimun-width-flex-items-007</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-minimun-width-flex-items-008" class="">
<tr>
<td rowspan="1" title="Minimun width of flex items">
<a href="flex-minimun-width-flex-items-008.xht">flex-minimun-width-flex-items-008</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="flex-order" class="">
<tr>
<td rowspan="1" title="flex order">

View file

@ -95,6 +95,22 @@ flex-grow-005.xht == reference/ref-filled-green-100px-square.xht
flex-grow-006.xht == reference/ref-filled-green-100px-square.xht
flex-items-flexibility.xht == reference/flex-items-flexibility.xht
flex-margin-no-collapse.xht == reference/flex-margin-no-collapse-ref.xht
flex-minimun-height-flex-items-001.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-height-flex-items-002.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-height-flex-items-003.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-height-flex-items-004.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-height-flex-items-005.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-height-flex-items-006.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-height-flex-items-007.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-height-flex-items-008.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-width-flex-items-001.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-width-flex-items-002.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-width-flex-items-003.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-width-flex-items-004.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-width-flex-items-005.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-width-flex-items-006.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-width-flex-items-007.xht == reference/ref-filled-green-100px-square.xht
flex-minimun-width-flex-items-008.xht == reference/ref-filled-green-100px-square.xht
flex-order.xht == reference/flex-order-ref.xht
flex-shrink-001.xht == reference/ref-filled-green-100px-square.xht
flex-shrink-002.xht == reference/ref-filled-green-100px-square.xht

Binary file not shown.

After

Width:  |  Height:  |  Size: 343 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 B

View file

@ -1,4 +1,4 @@
@font-face {
font-family: "Ahem";
src: url(../../../../fonts/Ahem.ttf);
src: url(./Ahem.ttf);
}

View file

@ -37,7 +37,7 @@
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Flex Items</a></th>
<td>(58 Tests)</td></tr>
<td>(74 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.xht">Chapter 5 -