Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

This commit is contained in:
James Graham
2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions

View File

@@ -0,0 +1,130 @@
<!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 Test: Max-height on absolutely positioned, non-replaced elements, 'height' based on 'top' and 'bottom' positions</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
<link rel="match" href="reference/absolute-non-replaced-max-height-003-ref.xht" />
<meta name="flags" content="" />
<meta name="assert" content="The 'auto' values on 'margin-top', 'margin-bottom' are set to '0' and the 'height' is the remaining space between the 'top' and 'bottom' positions, when 'height' is 'auto' and 'top' and 'bottom' are both not 'auto'. If such height is constrained by max-height, then we must re-process the values as following. If none of 'top', height, bottom are 'auto' and if both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values." />
<style type="text/css">
#div1
{
border: solid black;
height: 3in;
position: relative;
width: 3in;
}
div div
{
background: blue;
bottom: 1in;
height: auto;
margin-bottom: auto;
margin-top: auto;
max-height: 0.5in;
position: absolute;
top: 1in;
width: 100%;
}
/*
1in : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
auto (to solve) : height (may be constrained to use 0.5in by max-height)
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
1in : bottom
=============
3in : height of containing block
"
'top' is 'auto', 'height' and 'bottom' are not 'auto',
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
and solve for 'top'
"
so this brings:
1in : top
+
0 (set): margin-top
+
0 : border-top-width
+
0 : padding-top
+
1in (not constrained) : height (must be constrained to use 0.5in by max-height)
+
0 : padding-bottom
+
0 : border-bottom-width
+
0 (set): margin-bottom
+
1in : bottom
=============
3in : height of containing block
So, here, we must reenter the algorithm since height is
constrained and is no longer 'auto'.
"
If none of the three [top, height, bottom] are 'auto':
If both 'margin-top' and 'margin-bottom' are 'auto',
solve the equation under the extra constraint that
the two margins get equal values.
"
so this brings:
1in : top
+
auto (to solve): margin-top
+
0 : border-top-width
+
0 : padding-top
+
0.5in (constrained) : height (constrained by max-height)
+
0 : padding-bottom
+
0 : border-bottom-width
+
auto (to solve): margin-bottom
+
1in : bottom
=============
3in : height of containing block
So, here, margin-top must use 0.25in and margin-bottom must use 0.25in
so that the equation remains balanced.
*/
</style>
</head>
<body>
<p>Test passes if a blue rectangle is <strong>vertically centered</strong> in an hollow black square.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>