Auto merge of #7561 - servo:update-css, r=SimonSapin
Update CSS tests to revision 09d27d61d637da536af1d86a8d7bea157592ff9e <!-- Reviewable:start --> [<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7561) <!-- Reviewable:end -->
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
<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%">
|
<table width="100%">
|
||||||
<col id="test-column">
|
<col id="test-column">
|
||||||
<col id="refs-column">
|
<col id="refs-column">
|
||||||
|
@ -451,7 +451,183 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s4.5">+</a>
|
<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>
|
<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.htm">flex-minimun-height-flex-items-001</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-002</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-003</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||||
|
<td>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.htm">flex-minimun-height-flex-items-004</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-005</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-006</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-007</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-008</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-001</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||||
|
<td>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.htm">flex-minimun-width-flex-items-002</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-003</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||||
|
<td>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.htm">flex-minimun-width-flex-items-004</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-005</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-006</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-007</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-008</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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">
|
<tr id="flexbox-min-height-auto-001-4.5" class="primary">
|
||||||
<td><strong>
|
<td><strong>
|
||||||
<a href="flexbox-min-height-auto-001.htm">flexbox-min-height-auto-001</a></strong></td>
|
<a href="flexbox-min-height-auto-001.htm">flexbox-min-height-auto-001</a></strong></td>
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<meta name="assert" content="Checks that minimun height for flex items is the min-content size.">
|
||||||
|
<style type="text/css">
|
||||||
|
#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>
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS 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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS 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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS 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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS 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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS 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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<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.htm">
|
||||||
|
<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">
|
||||||
|
#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>
|
After Width: | Height: | Size: 343 B |
After Width: | Height: | Size: 351 B |
|
@ -1,4 +1,4 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Ahem";
|
font-family: "Ahem";
|
||||||
src: url(../../../../fonts/Ahem.ttf);
|
src: url(./Ahem.ttf);
|
||||||
}
|
}
|
||||||
|
|
|
@ -792,6 +792,134 @@
|
||||||
<td rowspan="1"></td>
|
<td rowspan="1"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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.htm">flex-minimun-height-flex-items-001</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-002</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-003</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody id="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.htm">flex-minimun-height-flex-items-004</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-005</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-006</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-007</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-height-flex-items-008</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-001</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody id="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.htm">flex-minimun-width-flex-items-002</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-003</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tbody id="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.htm">flex-minimun-width-flex-items-004</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-005</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-006</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-007</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</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.htm">flex-minimun-width-flex-items-008</a></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td rowspan="1"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
<tbody id="flex-order" class="">
|
<tbody id="flex-order" class="">
|
||||||
<tr>
|
<tr>
|
||||||
<td rowspan="1" title="flex order">
|
<td rowspan="1" title="flex order">
|
||||||
|
|
|
@ -95,6 +95,22 @@ flex-grow-005.htm == reference/ref-filled-green-100px-square.htm
|
||||||
flex-grow-006.htm == reference/ref-filled-green-100px-square.htm
|
flex-grow-006.htm == reference/ref-filled-green-100px-square.htm
|
||||||
flex-items-flexibility.htm == reference/flex-items-flexibility.htm
|
flex-items-flexibility.htm == reference/flex-items-flexibility.htm
|
||||||
flex-margin-no-collapse.htm == reference/flex-margin-no-collapse-ref.htm
|
flex-margin-no-collapse.htm == reference/flex-margin-no-collapse-ref.htm
|
||||||
|
flex-minimun-height-flex-items-001.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-height-flex-items-002.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-height-flex-items-003.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-height-flex-items-004.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-height-flex-items-005.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-height-flex-items-006.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-height-flex-items-007.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-height-flex-items-008.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-width-flex-items-001.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-width-flex-items-002.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-width-flex-items-003.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-width-flex-items-004.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-width-flex-items-005.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-width-flex-items-006.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-width-flex-items-007.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
flex-minimun-width-flex-items-008.htm == reference/ref-filled-green-100px-square.htm
|
||||||
flex-order.htm == reference/flex-order-ref.htm
|
flex-order.htm == reference/flex-order-ref.htm
|
||||||
flex-shrink-001.htm == reference/ref-filled-green-100px-square.htm
|
flex-shrink-001.htm == reference/ref-filled-green-100px-square.htm
|
||||||
flex-shrink-002.htm == reference/ref-filled-green-100px-square.htm
|
flex-shrink-002.htm == reference/ref-filled-green-100px-square.htm
|
||||||
|
|
After Width: | Height: | Size: 343 B |
After Width: | Height: | Size: 351 B |
BIN
tests/wpt/css-tests/css-flexbox-1_dev/html/support/Ahem.ttf
Normal file
|
@ -1,4 +1,4 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Ahem";
|
font-family: "Ahem";
|
||||||
src: url(../../../../fonts/Ahem.ttf);
|
src: url(./Ahem.ttf);
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||||
Flex Items</a></th>
|
Flex Items</a></th>
|
||||||
<td>(58 Tests)</td></tr>
|
<td>(74 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s5">
|
<tbody id="s5">
|
||||||
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
<tr><th><a href="chapter-5.htm">Chapter 5 -
|
||||||
|
|
|
@ -231,6 +231,38 @@ html/flex-items-flexibility.htm 6bada7cc61f1b3adac7354992455b59cff76478e ?
|
||||||
xhtml1/flex-items-flexibility.xht 6bada7cc61f1b3adac7354992455b59cff76478e ?
|
xhtml1/flex-items-flexibility.xht 6bada7cc61f1b3adac7354992455b59cff76478e ?
|
||||||
html/flex-margin-no-collapse.htm 96231d68de1fe051b06e793d659a813a53a91ed9 ?
|
html/flex-margin-no-collapse.htm 96231d68de1fe051b06e793d659a813a53a91ed9 ?
|
||||||
xhtml1/flex-margin-no-collapse.xht 96231d68de1fe051b06e793d659a813a53a91ed9 ?
|
xhtml1/flex-margin-no-collapse.xht 96231d68de1fe051b06e793d659a813a53a91ed9 ?
|
||||||
|
html/flex-minimun-height-flex-items-001.htm 605b08c7906eba5ed79720f2399103205a138218 ?
|
||||||
|
xhtml1/flex-minimun-height-flex-items-001.xht 605b08c7906eba5ed79720f2399103205a138218 ?
|
||||||
|
html/flex-minimun-height-flex-items-002.htm fb81ee347c99fde166c84ec223256317f0a54a41 ?
|
||||||
|
xhtml1/flex-minimun-height-flex-items-002.xht fb81ee347c99fde166c84ec223256317f0a54a41 ?
|
||||||
|
html/flex-minimun-height-flex-items-003.htm fe8d92576daf7706ca13a1f8733a7a0ee3665fee ?
|
||||||
|
xhtml1/flex-minimun-height-flex-items-003.xht fe8d92576daf7706ca13a1f8733a7a0ee3665fee ?
|
||||||
|
html/flex-minimun-height-flex-items-004.htm 481c989561996809009e4adc5eceebe34e97d47f ?
|
||||||
|
xhtml1/flex-minimun-height-flex-items-004.xht 481c989561996809009e4adc5eceebe34e97d47f ?
|
||||||
|
html/flex-minimun-height-flex-items-005.htm a53cfd1a5d229518deaf85198040cd4b98cdb99a ?
|
||||||
|
xhtml1/flex-minimun-height-flex-items-005.xht a53cfd1a5d229518deaf85198040cd4b98cdb99a ?
|
||||||
|
html/flex-minimun-height-flex-items-006.htm b9e8e63e87b4249c4c54ebce3efe8284dd42be2a ?
|
||||||
|
xhtml1/flex-minimun-height-flex-items-006.xht b9e8e63e87b4249c4c54ebce3efe8284dd42be2a ?
|
||||||
|
html/flex-minimun-height-flex-items-007.htm 87a0e5d4fdacee220ad90b4ad5cf8a4e18db29aa ?
|
||||||
|
xhtml1/flex-minimun-height-flex-items-007.xht 87a0e5d4fdacee220ad90b4ad5cf8a4e18db29aa ?
|
||||||
|
html/flex-minimun-height-flex-items-008.htm 0a1cdcd4142b1c5a92069faef42f6a78fc99941a ?
|
||||||
|
xhtml1/flex-minimun-height-flex-items-008.xht 0a1cdcd4142b1c5a92069faef42f6a78fc99941a ?
|
||||||
|
html/flex-minimun-width-flex-items-001.htm bd9124d48aeaf942f7f89e144e44f2f77fc570d6 ?
|
||||||
|
xhtml1/flex-minimun-width-flex-items-001.xht bd9124d48aeaf942f7f89e144e44f2f77fc570d6 ?
|
||||||
|
html/flex-minimun-width-flex-items-002.htm ec336ef15ab4b521ab28ef7471090dc7a680a109 ?
|
||||||
|
xhtml1/flex-minimun-width-flex-items-002.xht ec336ef15ab4b521ab28ef7471090dc7a680a109 ?
|
||||||
|
html/flex-minimun-width-flex-items-003.htm 15b5885d64f7eee135cc4843c7132d83db0a9d62 ?
|
||||||
|
xhtml1/flex-minimun-width-flex-items-003.xht 15b5885d64f7eee135cc4843c7132d83db0a9d62 ?
|
||||||
|
html/flex-minimun-width-flex-items-004.htm 445113470be2ca8cf72d9a2ecc86f8a446ec9c8b ?
|
||||||
|
xhtml1/flex-minimun-width-flex-items-004.xht 445113470be2ca8cf72d9a2ecc86f8a446ec9c8b ?
|
||||||
|
html/flex-minimun-width-flex-items-005.htm 4dd98aa6402f85f43ec8c96d5a6b1703ccee87cd ?
|
||||||
|
xhtml1/flex-minimun-width-flex-items-005.xht 4dd98aa6402f85f43ec8c96d5a6b1703ccee87cd ?
|
||||||
|
html/flex-minimun-width-flex-items-006.htm 5c254ac186b629c2b602eb9938ba5adda22bbd33 ?
|
||||||
|
xhtml1/flex-minimun-width-flex-items-006.xht 5c254ac186b629c2b602eb9938ba5adda22bbd33 ?
|
||||||
|
html/flex-minimun-width-flex-items-007.htm 2420cde9162ecdbc67cd24a93a892922a2d6a6dd ?
|
||||||
|
xhtml1/flex-minimun-width-flex-items-007.xht 2420cde9162ecdbc67cd24a93a892922a2d6a6dd ?
|
||||||
|
html/flex-minimun-width-flex-items-008.htm f925ab003ec01a98c18659e1b959e9b4a58bebc4 ?
|
||||||
|
xhtml1/flex-minimun-width-flex-items-008.xht f925ab003ec01a98c18659e1b959e9b4a58bebc4 ?
|
||||||
html/flex-order.htm 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 ?
|
html/flex-order.htm 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 ?
|
||||||
xhtml1/flex-order.xht 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 ?
|
xhtml1/flex-order.xht 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 ?
|
||||||
html/flex-shrink-001.htm f27d600fc7863c3d4c3fc3b4e4bc8cc7f58cdbae ?
|
html/flex-shrink-001.htm f27d600fc7863c3d4c3fc3b4e4bc8cc7f58cdbae ?
|
||||||
|
|
|
@ -113,6 +113,22 @@ flex-grow-005 reference/ref-filled-green-100px-square flex-grow - (invalid when
|
||||||
flex-grow-006 reference/ref-filled-green-100px-square flex-grow - positive number(fill all space) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow f8b3290012a57cf47c520f716c3c50a4e02eba55 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> Test checks that all space of flex container will be filled when there is only one flex item and 'flex-grow' set any positive number.
|
flex-grow-006 reference/ref-filled-green-100px-square flex-grow - positive number(fill all space) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow f8b3290012a57cf47c520f716c3c50a4e02eba55 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> Test checks that all space of flex container will be filled when there is only one flex item and 'flex-grow' set any positive number.
|
||||||
flex-items-flexibility reference/flex-items-flexibility CSS Flex-basis Test http://www.w3.org/TR/css-flexbox-1/#flexibility 6bada7cc61f1b3adac7354992455b59cff76478e `Chunsheng Zhang`<mailto:zhangcs_423@163.com> flex items flexibility
|
flex-items-flexibility reference/flex-items-flexibility CSS Flex-basis Test http://www.w3.org/TR/css-flexbox-1/#flexibility 6bada7cc61f1b3adac7354992455b59cff76478e `Chunsheng Zhang`<mailto:zhangcs_423@163.com> flex items flexibility
|
||||||
flex-margin-no-collapse reference/flex-margin-no-collapse-ref flex item margins http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction,http://www.w3.org/TR/css-flexbox-1/#item-margins 96231d68de1fe051b06e793d659a813a53a91ed9 `Ping Huang`<mailto:phuangce@gmail.com> The vertical gap between two green boxs should be 100px.
|
flex-margin-no-collapse reference/flex-margin-no-collapse-ref flex item margins http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction,http://www.w3.org/TR/css-flexbox-1/#item-margins 96231d68de1fe051b06e793d659a813a53a91ed9 `Ping Huang`<mailto:phuangce@gmail.com> The vertical gap between two green boxs should be 100px.
|
||||||
|
flex-minimun-height-flex-items-001 reference/ref-filled-green-100px-square Minimun height of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto 605b08c7906eba5ed79720f2399103205a138218 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun height for flex items is the min-content size.
|
||||||
|
flex-minimun-height-flex-items-002 reference/ref-filled-green-100px-square Minimun height of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto fb81ee347c99fde166c84ec223256317f0a54a41 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun height for flex items is the specified size if it's smaller than the min-content size.
|
||||||
|
flex-minimun-height-flex-items-003 reference/ref-filled-green-100px-square Minimun height of flex items ahem http://www.w3.org/TR/css-flexbox-1/#min-size-auto fe8d92576daf7706ca13a1f8733a7a0ee3665fee `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun height for flex items is the min-content size if it's smaller than the specified size.
|
||||||
|
flex-minimun-height-flex-items-004 reference/ref-filled-green-100px-square Minimun height of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto 481c989561996809009e4adc5eceebe34e97d47f `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun height for flex items is the min-content size (which corresponds to the image size).
|
||||||
|
flex-minimun-height-flex-items-005 reference/ref-filled-green-100px-square Minimun height of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto a53cfd1a5d229518deaf85198040cd4b98cdb99a `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun height for flex items is the specified size, as the min-content size of the image corresponds to that.
|
||||||
|
flex-minimun-height-flex-items-006 reference/ref-filled-green-100px-square Minimun height of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto b9e8e63e87b4249c4c54ebce3efe8284dd42be2a `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun height for flex items is the specified size, as the min-content size of the image corresponds to that.
|
||||||
|
flex-minimun-height-flex-items-007 reference/ref-filled-green-100px-square Minimun height of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto 87a0e5d4fdacee220ad90b4ad5cf8a4e18db29aa `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun height for flex items is the transferred size, as the min-content size of the image corresponds to that.
|
||||||
|
flex-minimun-height-flex-items-008 reference/ref-filled-green-100px-square Minimun height of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto 0a1cdcd4142b1c5a92069faef42f6a78fc99941a `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun height for flex items is the transferred size, as the min-content size of the image corresponds to that.
|
||||||
|
flex-minimun-width-flex-items-001 reference/ref-filled-green-100px-square Minimun width of flex items ahem http://www.w3.org/TR/css-flexbox-1/#min-size-auto bd9124d48aeaf942f7f89e144e44f2f77fc570d6 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun width for flex items is the min-content size.
|
||||||
|
flex-minimun-width-flex-items-002 reference/ref-filled-green-100px-square Minimun width of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto ec336ef15ab4b521ab28ef7471090dc7a680a109 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun width for flex items is the specified size if it's smaller than the min-content size.
|
||||||
|
flex-minimun-width-flex-items-003 reference/ref-filled-green-100px-square Minimun width of flex items ahem http://www.w3.org/TR/css-flexbox-1/#min-size-auto 15b5885d64f7eee135cc4843c7132d83db0a9d62 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun width for flex items is the min-content size if it's smaller than the specified size.
|
||||||
|
flex-minimun-width-flex-items-004 reference/ref-filled-green-100px-square Minimun width of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto 445113470be2ca8cf72d9a2ecc86f8a446ec9c8b `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun width for flex items is the min-content size (which corresponds to the image size).
|
||||||
|
flex-minimun-width-flex-items-005 reference/ref-filled-green-100px-square Minimun width of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto 4dd98aa6402f85f43ec8c96d5a6b1703ccee87cd `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun width for flex items is the specified size, as the min-content size of the image corresponds to that.
|
||||||
|
flex-minimun-width-flex-items-006 reference/ref-filled-green-100px-square Minimun width of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto 5c254ac186b629c2b602eb9938ba5adda22bbd33 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun width for flex items is the specified size, as the min-content size of the image corresponds to that.
|
||||||
|
flex-minimun-width-flex-items-007 reference/ref-filled-green-100px-square Minimun width of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto 2420cde9162ecdbc67cd24a93a892922a2d6a6dd `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun width for flex items is the transferred size, as the min-content size of the image corresponds to that.
|
||||||
|
flex-minimun-width-flex-items-008 reference/ref-filled-green-100px-square Minimun width of flex items http://www.w3.org/TR/css-flexbox-1/#min-size-auto f925ab003ec01a98c18659e1b959e9b4a58bebc4 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Checks that minimun width for flex items is the transferred size, as the min-content size of the image corresponds to that.
|
||||||
flex-order reference/flex-order-ref flex order http://www.w3.org/TR/css-flexbox-1/#order-property 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 `Mitsuteru Sawa`<mailto:mitsuteru.s@gmail.com> ordered flex items should ordered properly
|
flex-order reference/flex-order-ref flex order http://www.w3.org/TR/css-flexbox-1/#order-property 9e6a2aa1915fdf7450eba77f1d5499884b800ea6 `Mitsuteru Sawa`<mailto:mitsuteru.s@gmail.com> ordered flex items should ordered properly
|
||||||
flex-shrink-001 reference/ref-filled-green-100px-square flex-shrink - number(positive) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink f27d600fc7863c3d4c3fc3b4e4bc8cc7f58cdbae `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property set positive number determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed
|
flex-shrink-001 reference/ref-filled-green-100px-square flex-shrink - number(positive) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink f27d600fc7863c3d4c3fc3b4e4bc8cc7f58cdbae `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property set positive number determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed
|
||||||
flex-shrink-002 reference/ref-filled-green-100px-square flex-shrink - number(negative) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink 49884ece59d09eb5cd9a4d9228d62478cdaf3179 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property set negative is invalid to shrink flex items when negative free space is distributed
|
flex-shrink-002 reference/ref-filled-green-100px-square flex-shrink - number(negative) http://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink 49884ece59d09eb5cd9a4d9228d62478cdaf3179 `Intel`<http://www.intel.com>,`Shiyou Tan`<mailto:shiyoux.tan@intel.com> The flex-shrink property set negative is invalid to shrink flex items when negative free space is distributed
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
<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%">
|
<table width="100%">
|
||||||
<col id="test-column"></col>
|
<col id="test-column"></col>
|
||||||
<col id="refs-column"></col>
|
<col id="refs-column"></col>
|
||||||
|
@ -451,7 +451,183 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s4.5">+</a>
|
<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>
|
<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">
|
<tr id="flexbox-min-height-auto-001-4.5" class="primary">
|
||||||
<td><strong>
|
<td><strong>
|
||||||
<a href="flexbox-min-height-auto-001.xht">flexbox-min-height-auto-001</a></strong></td>
|
<a href="flexbox-min-height-auto-001.xht">flexbox-min-height-auto-001</a></strong></td>
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
After Width: | Height: | Size: 343 B |
After Width: | Height: | Size: 351 B |
|
@ -1,4 +1,4 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Ahem";
|
font-family: "Ahem";
|
||||||
src: url(../../../../fonts/Ahem.ttf);
|
src: url(./Ahem.ttf);
|
||||||
}
|
}
|
||||||
|
|
|
@ -792,6 +792,134 @@
|
||||||
<td rowspan="1"></td>
|
<td rowspan="1"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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="">
|
<tbody id="flex-order" class="">
|
||||||
<tr>
|
<tr>
|
||||||
<td rowspan="1" title="flex order">
|
<td rowspan="1" title="flex order">
|
||||||
|
|
|
@ -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-grow-006.xht == reference/ref-filled-green-100px-square.xht
|
||||||
flex-items-flexibility.xht == reference/flex-items-flexibility.xht
|
flex-items-flexibility.xht == reference/flex-items-flexibility.xht
|
||||||
flex-margin-no-collapse.xht == reference/flex-margin-no-collapse-ref.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-order.xht == reference/flex-order-ref.xht
|
||||||
flex-shrink-001.xht == reference/ref-filled-green-100px-square.xht
|
flex-shrink-001.xht == reference/ref-filled-green-100px-square.xht
|
||||||
flex-shrink-002.xht == reference/ref-filled-green-100px-square.xht
|
flex-shrink-002.xht == reference/ref-filled-green-100px-square.xht
|
||||||
|
|
After Width: | Height: | Size: 343 B |
After Width: | Height: | Size: 351 B |
BIN
tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/support/Ahem.ttf
Normal file
|
@ -1,4 +1,4 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Ahem";
|
font-family: "Ahem";
|
||||||
src: url(../../../../fonts/Ahem.ttf);
|
src: url(./Ahem.ttf);
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||||
Flex Items</a></th>
|
Flex Items</a></th>
|
||||||
<td>(58 Tests)</td></tr>
|
<td>(74 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s5">
|
<tbody id="s5">
|
||||||
<tr><th><a href="chapter-5.xht">Chapter 5 -
|
<tr><th><a href="chapter-5.xht">Chapter 5 -
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
<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%">
|
<table width="100%">
|
||||||
<col id="test-column"></col>
|
<col id="test-column"></col>
|
||||||
<col id="refs-column"></col>
|
<col id="refs-column"></col>
|
||||||
|
@ -451,7 +451,183 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s4.5">+</a>
|
<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>
|
<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">
|
<tr id="flexbox-min-height-auto-001-4.5" class="primary">
|
||||||
<td><strong>
|
<td><strong>
|
||||||
<a href="flexbox-min-height-auto-001.xht">flexbox-min-height-auto-001</a></strong></td>
|
<a href="flexbox-min-height-auto-001.xht">flexbox-min-height-auto-001</a></strong></td>
|
||||||
|
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun height of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-height-flex-items-001"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun height of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-height-flex-items-002"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun height of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-height-flex-items-003"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun height of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-height-flex-items-004"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-height-flex-items-005"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-height-flex-items-006"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-height-flex-items-007"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-height-flex-items-008"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun width of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-width-flex-items-001"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun width of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-width-flex-items-002"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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 width of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-width-flex-items-003"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun width of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-width-flex-items-004"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun width of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-width-flex-items-005"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun width of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-width-flex-items-006"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun width of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-width-flex-items-007"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
|
@ -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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>CSS Flexible Box Test: Minimun width of flex items</title>
|
||||||
|
<style type="text/css">
|
||||||
|
@page { font: italic 8pt sans-serif; color: gray;
|
||||||
|
margin: 7%;
|
||||||
|
counter-increment: page;
|
||||||
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
||||||
|
@top-right { content: "Test flex-minimun-width-flex-items-008"; }
|
||||||
|
@bottom-right { content: counter(page); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<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>
|
After Width: | Height: | Size: 343 B |
After Width: | Height: | Size: 351 B |
|
@ -1,4 +1,4 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Ahem";
|
font-family: "Ahem";
|
||||||
src: url(../../../../fonts/Ahem.ttf);
|
src: url(./Ahem.ttf);
|
||||||
}
|
}
|
||||||
|
|
|
@ -792,6 +792,134 @@
|
||||||
<td rowspan="1"></td>
|
<td rowspan="1"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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="">
|
<tbody id="flex-order" class="">
|
||||||
<tr>
|
<tr>
|
||||||
<td rowspan="1" title="flex order">
|
<td rowspan="1" title="flex order">
|
||||||
|
|
|
@ -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-grow-006.xht == reference/ref-filled-green-100px-square.xht
|
||||||
flex-items-flexibility.xht == reference/flex-items-flexibility.xht
|
flex-items-flexibility.xht == reference/flex-items-flexibility.xht
|
||||||
flex-margin-no-collapse.xht == reference/flex-margin-no-collapse-ref.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-order.xht == reference/flex-order-ref.xht
|
||||||
flex-shrink-001.xht == reference/ref-filled-green-100px-square.xht
|
flex-shrink-001.xht == reference/ref-filled-green-100px-square.xht
|
||||||
flex-shrink-002.xht == reference/ref-filled-green-100px-square.xht
|
flex-shrink-002.xht == reference/ref-filled-green-100px-square.xht
|
||||||
|
|
After Width: | Height: | Size: 343 B |
After Width: | Height: | Size: 351 B |
|
@ -1,4 +1,4 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Ahem";
|
font-family: "Ahem";
|
||||||
src: url(../../../../fonts/Ahem.ttf);
|
src: url(./Ahem.ttf);
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||||
Flex Items</a></th>
|
Flex Items</a></th>
|
||||||
<td>(58 Tests)</td></tr>
|
<td>(74 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s5">
|
<tbody id="s5">
|
||||||
<tr><th><a href="chapter-5.xht">Chapter 5 -
|
<tr><th><a href="chapter-5.xht">Chapter 5 -
|
||||||
|
|
|
@ -277,7 +277,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' with various font sizes
|
<td>'text-decoration: underline' with various font sizes
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
<li>This test checks that when mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -288,7 +288,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' with various font sizes and mixed text
|
<td>'text-decoration: underline' with various font sizes and mixed text
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
<li>This test checks that when latin and mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -299,7 +299,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' with various font sizes
|
<td>'text-decoration: underline' with various font sizes
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
<li>This test checks that when east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -310,7 +310,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' with various font sizes and mixed text
|
<td>'text-decoration: underline' with various font sizes and mixed text
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
<li>This test checks that when latin and east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -321,7 +321,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' and mixed text
|
<td>'text-decoration: underline' and mixed text
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text.</li>
|
<li>This test checks that when latin and mongolian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -332,7 +332,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' and mixed text
|
<td>'text-decoration: underline' and mixed text
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text.</li>
|
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="">
|
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="">
|
||||||
|
|
||||||
<meta content="" name="flags">
|
<meta content="" name="flags">
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert">
|
<meta content="This test checks that when mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -21,12 +21,12 @@
|
||||||
writing-mode: vertical-lr;
|
writing-mode: vertical-lr;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -43,7 +43,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="mn">ᠨ<span id="larger">ᠨᠨ</span>ᠨ</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="mn">ᠨ<span id="larger">ᠨᠨ</span>ᠨ</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -10,7 +10,7 @@
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||||
|
|
||||||
<meta content="" name="flags">
|
<meta content="" name="flags">
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert">
|
<meta content="This test checks that when latin and mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -20,12 +20,12 @@
|
||||||
writing-mode: vertical-lr;
|
writing-mode: vertical-lr;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="mn">ᠨ<span id="larger" lang="en">AB</span>ᠨ</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="mn">ᠨ<span id="larger" lang="en">AB</span>ᠨ</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -11,7 +11,7 @@
|
||||||
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="">
|
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="">
|
||||||
|
|
||||||
<meta content="" name="flags">
|
<meta content="" name="flags">
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert">
|
<meta content="This test checks that when east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -21,12 +21,12 @@
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -43,7 +43,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="ja">方<span id="larger">方方</span>方</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="ja">方<span id="larger">方方</span>方</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -10,7 +10,7 @@
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||||
|
|
||||||
<meta content="" name="flags">
|
<meta content="" name="flags">
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert">
|
<meta content="This test checks that when latin and east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -20,12 +20,12 @@
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="ja">方<span id="larger" lang="en">AB</span>方</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="ja">方<span id="larger" lang="en">AB</span>方</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -10,7 +10,7 @@
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||||
|
|
||||||
<meta content="" name="flags">
|
<meta content="" name="flags">
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text." name="assert">
|
<meta content="This test checks that when latin and mongolian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -20,12 +20,12 @@
|
||||||
writing-mode: vertical-lr;
|
writing-mode: vertical-lr;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="mn">ᠨ<span lang="en">AB</span>ᠨ</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="mn">ᠨ<span lang="en">AB</span>ᠨ</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -10,7 +10,7 @@
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property">
|
||||||
|
|
||||||
<meta content="" name="flags">
|
<meta content="" name="flags">
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text." name="assert">
|
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -20,12 +20,12 @@
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="ja">方<span lang="en">AB</span>方</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="ja">方<span lang="en">AB</span>方</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -47,15 +47,15 @@ html/text-underline-position-right-002.htm 58dc96adf3a515eea76558481f13d6fa76fa7
|
||||||
xhtml1/text-underline-position-right-002.xht 58dc96adf3a515eea76558481f13d6fa76fa7377 ?
|
xhtml1/text-underline-position-right-002.xht 58dc96adf3a515eea76558481f13d6fa76fa7377 ?
|
||||||
html/text-underline-position-under-001.htm 859f9df320e8eddb0c876e5cae8eef78cff1afbc ?
|
html/text-underline-position-under-001.htm 859f9df320e8eddb0c876e5cae8eef78cff1afbc ?
|
||||||
xhtml1/text-underline-position-under-001.xht 859f9df320e8eddb0c876e5cae8eef78cff1afbc ?
|
xhtml1/text-underline-position-under-001.xht 859f9df320e8eddb0c876e5cae8eef78cff1afbc ?
|
||||||
html/underline-font-size-vlr-003.htm 05a00f9e67ec770a68184f514da16d42f3664b4e ?
|
html/underline-font-size-vlr-003.htm 2ed0dce303004a098525b1c0aa2008df639643ea ?
|
||||||
xhtml1/underline-font-size-vlr-003.xht 05a00f9e67ec770a68184f514da16d42f3664b4e ?
|
xhtml1/underline-font-size-vlr-003.xht 2ed0dce303004a098525b1c0aa2008df639643ea ?
|
||||||
html/underline-font-size-vlr-005.htm cf494cde416df9487dabe224857d7c09849b13a7 ?
|
html/underline-font-size-vlr-005.htm 8218f172828fc358d5814147c09eac80646d5167 ?
|
||||||
xhtml1/underline-font-size-vlr-005.xht cf494cde416df9487dabe224857d7c09849b13a7 ?
|
xhtml1/underline-font-size-vlr-005.xht 8218f172828fc358d5814147c09eac80646d5167 ?
|
||||||
html/underline-font-size-vrl-002.htm fde426aff2dd0f2666881af719f8a933595db5e5 ?
|
html/underline-font-size-vrl-002.htm 9d177e35a9389b54beaadb42c09d951c9257f137 ?
|
||||||
xhtml1/underline-font-size-vrl-002.xht fde426aff2dd0f2666881af719f8a933595db5e5 ?
|
xhtml1/underline-font-size-vrl-002.xht 9d177e35a9389b54beaadb42c09d951c9257f137 ?
|
||||||
html/underline-font-size-vrl-004.htm b37f8604be0f98e2fb03f2f2198170017232ece1 ?
|
html/underline-font-size-vrl-004.htm ed45bd0102ed75aa8ca35234af60fd100c050ba6 ?
|
||||||
xhtml1/underline-font-size-vrl-004.xht b37f8604be0f98e2fb03f2f2198170017232ece1 ?
|
xhtml1/underline-font-size-vrl-004.xht ed45bd0102ed75aa8ca35234af60fd100c050ba6 ?
|
||||||
html/underline-mixed-vlr-003.htm ffd107c6592a7876badaee2070b4aac10886bbc3 ?
|
html/underline-mixed-vlr-003.htm 9decb3fe18594253186c493df367347f88b59019 ?
|
||||||
xhtml1/underline-mixed-vlr-003.xht ffd107c6592a7876badaee2070b4aac10886bbc3 ?
|
xhtml1/underline-mixed-vlr-003.xht 9decb3fe18594253186c493df367347f88b59019 ?
|
||||||
html/underline-mixed-vrl-002.htm 233697bcbc7031e4901fe8df986802a06698c850 ?
|
html/underline-mixed-vrl-002.htm eb7123d62ff36d68544380c78a28bcbeac5f4411 ?
|
||||||
xhtml1/underline-mixed-vrl-002.xht 233697bcbc7031e4901fe8df986802a06698c850 ?
|
xhtml1/underline-mixed-vrl-002.xht eb7123d62ff36d68544380c78a28bcbeac5f4411 ?
|
||||||
|
|
|
@ -21,9 +21,9 @@ text-underline-position-left-002 text-underline-position - left in vertical wri
|
||||||
text-underline-position-right-001 text-underline-position - right ahem http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 9a87883e72baf49dca5ef85b1a77926074a7d47e `Kazuaki Takemura`<mailto:takemura@networksoft.co.jp> This tests checks that there is underline in a position under the descenders.
|
text-underline-position-right-001 text-underline-position - right ahem http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 9a87883e72baf49dca5ef85b1a77926074a7d47e `Kazuaki Takemura`<mailto:takemura@networksoft.co.jp> This tests checks that there is underline in a position under the descenders.
|
||||||
text-underline-position-right-002 text-underline-position - right in vertical writing mode ahem http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 58dc96adf3a515eea76558481f13d6fa76fa7377 `Kazuaki Takemura`<mailto:takemura@networksoft.co.jp> This tests checks that there is underline to the right of the text in vertical writing mode.
|
text-underline-position-right-002 text-underline-position - right in vertical writing mode ahem http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 58dc96adf3a515eea76558481f13d6fa76fa7377 `Kazuaki Takemura`<mailto:takemura@networksoft.co.jp> This tests checks that there is underline to the right of the text in vertical writing mode.
|
||||||
text-underline-position-under-001 text-underline-position - under ahem http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 859f9df320e8eddb0c876e5cae8eef78cff1afbc `Kazuaki Takemura`<mailto:takemura@networksoft.co.jp> This tests checks that there is underline in a position under the descenders.
|
text-underline-position-under-001 text-underline-position - under ahem http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 859f9df320e8eddb0c876e5cae8eef78cff1afbc `Kazuaki Takemura`<mailto:takemura@networksoft.co.jp> This tests checks that there is underline in a position under the descenders.
|
||||||
underline-font-size-vlr-003 'text-decoration: underline' with various font sizes http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 05a00f9e67ec770a68184f514da16d42f3664b4e `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.
|
underline-font-size-vlr-003 'text-decoration: underline' with various font sizes http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 2ed0dce303004a098525b1c0aa2008df639643ea `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.
|
||||||
underline-font-size-vlr-005 'text-decoration: underline' with various font sizes and mixed text http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property cf494cde416df9487dabe224857d7c09849b13a7 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.
|
underline-font-size-vlr-005 'text-decoration: underline' with various font sizes and mixed text http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 8218f172828fc358d5814147c09eac80646d5167 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.
|
||||||
underline-font-size-vrl-002 'text-decoration: underline' with various font sizes http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property fde426aff2dd0f2666881af719f8a933595db5e5 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.
|
underline-font-size-vrl-002 'text-decoration: underline' with various font sizes http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 9d177e35a9389b54beaadb42c09d951c9257f137 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.
|
||||||
underline-font-size-vrl-004 'text-decoration: underline' with various font sizes and mixed text http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property b37f8604be0f98e2fb03f2f2198170017232ece1 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.
|
underline-font-size-vrl-004 'text-decoration: underline' with various font sizes and mixed text http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property ed45bd0102ed75aa8ca35234af60fd100c050ba6 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.
|
||||||
underline-mixed-vlr-003 'text-decoration: underline' and mixed text http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property ffd107c6592a7876badaee2070b4aac10886bbc3 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text.
|
underline-mixed-vlr-003 'text-decoration: underline' and mixed text http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 9decb3fe18594253186c493df367347f88b59019 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and mongolian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.
|
||||||
underline-mixed-vrl-002 'text-decoration: underline' and mixed text http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property 233697bcbc7031e4901fe8df986802a06698c850 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text.
|
underline-mixed-vrl-002 'text-decoration: underline' and mixed text http://www.w3.org/TR/css-writing-modes-3/#line-mappings,http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property eb7123d62ff36d68544380c78a28bcbeac5f4411 `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.
|
||||||
|
|
|
@ -277,7 +277,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' with various font sizes
|
<td>'text-decoration: underline' with various font sizes
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
<li>This test checks that when mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -288,7 +288,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' with various font sizes and mixed text
|
<td>'text-decoration: underline' with various font sizes and mixed text
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
<li>This test checks that when latin and mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -299,7 +299,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' with various font sizes
|
<td>'text-decoration: underline' with various font sizes
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
<li>This test checks that when east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -310,7 +310,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' with various font sizes and mixed text
|
<td>'text-decoration: underline' with various font sizes and mixed text
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger.</li>
|
<li>This test checks that when latin and east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -321,7 +321,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' and mixed text
|
<td>'text-decoration: underline' and mixed text
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text.</li>
|
<li>This test checks that when latin and mongolian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -332,7 +332,7 @@
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>'text-decoration: underline' and mixed text
|
<td>'text-decoration: underline' and mixed text
|
||||||
<ul class="assert">
|
<ul class="assert">
|
||||||
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text.</li>
|
<li>This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="" />
|
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="" />
|
||||||
|
|
||||||
<meta content="" name="flags" />
|
<meta content="" name="flags" />
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert" />
|
<meta content="This test checks that when mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
|
||||||
|
|
||||||
<style type="text/css"><![CDATA[
|
<style type="text/css"><![CDATA[
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -21,12 +21,12 @@
|
||||||
writing-mode: vertical-lr;
|
writing-mode: vertical-lr;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -43,7 +43,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="mn" xml:lang="mn">ᠨ<span id="larger">ᠨᠨ</span>ᠨ</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="mn" xml:lang="mn">ᠨ<span id="larger">ᠨᠨ</span>ᠨ</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -10,7 +10,7 @@
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
|
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
|
||||||
|
|
||||||
<meta content="" name="flags" />
|
<meta content="" name="flags" />
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert" />
|
<meta content="This test checks that when latin and mongolian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
|
||||||
|
|
||||||
<style type="text/css"><![CDATA[
|
<style type="text/css"><![CDATA[
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -20,12 +20,12 @@
|
||||||
writing-mode: vertical-lr;
|
writing-mode: vertical-lr;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="mn" xml:lang="mn">ᠨ<span id="larger" lang="en" xml:lang="en">AB</span>ᠨ</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="mn" xml:lang="mn">ᠨ<span id="larger" lang="en" xml:lang="en">AB</span>ᠨ</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -11,7 +11,7 @@
|
||||||
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="" />
|
<link rel="bookmark" href="http://www.w3.org/TR/css-text-decor-3/leftline-cross.png" title="" />
|
||||||
|
|
||||||
<meta content="" name="flags" />
|
<meta content="" name="flags" />
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert" />
|
<meta content="This test checks that when east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
|
||||||
|
|
||||||
<style type="text/css"><![CDATA[
|
<style type="text/css"><![CDATA[
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -21,12 +21,12 @@
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -43,7 +43,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="ja" xml:lang="ja">方<span id="larger">方方</span>方</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="ja" xml:lang="ja">方<span id="larger">方方</span>方</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -10,7 +10,7 @@
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
|
<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#text-underline-position-property" title="2.6. Text Underline Position: the 'text-underline-position' property" />
|
||||||
|
|
||||||
<meta content="" name="flags" />
|
<meta content="" name="flags" />
|
||||||
<meta content="This test checks that when latin and east-asian glyphs are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box even if that cuts through glyphs of descendant text or through em box of descendant text or even if font size of text is larger." name="assert" />
|
<meta content="This test checks that when latin and east-asian glyphs of varying font sizes are used in mixed text-orientation (therefore with text centrally baseline-aligned), then the text-decoration of the parent box is used across the parent box." name="assert" />
|
||||||
|
|
||||||
<style type="text/css"><![CDATA[
|
<style type="text/css"><![CDATA[
|
||||||
div#vrl
|
div#vrl
|
||||||
|
@ -20,12 +20,12 @@
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#outer
|
span#parent
|
||||||
{
|
{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
span#inner
|
span#child
|
||||||
{
|
{
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
<p>Test passes if there is <strong>one and only one vertical straight and unbroken line</strong>. Such line should have the same thickness over its entire length.</p>
|
||||||
|
|
||||||
<div id="vrl"><span id="outer"><span id="inner" lang="ja" xml:lang="ja">方<span id="larger" lang="en" xml:lang="en">AB</span>方</span></span></div>
|
<div id="vrl"><span id="parent"><span id="child" lang="ja" xml:lang="ja">方<span id="larger" lang="en" xml:lang="en">AB</span>方</span></span></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|