| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 <head> |
| 4 <title>CSS Test: Max-height on absolutely positioned, non-replaced eleme
nts, 'height' based on 'top' and 'bottom' positions</title> |
| 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> |
| 6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/
BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 --> |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-r
eplaced-height" /> |
| 8 <link rel="match" href="absolute-non-replaced-max-height-003-ref
.xht" /> |
| 9 |
| 10 <meta name="flags" content="" /> |
| 11 <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-proces
s the values as following. If none of 'top', height, bottom are 'auto' and if bo
th 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the ext
ra constraint that the two margins get equal values." /> |
| 12 <style type="text/css"> |
| 13 #div1 |
| 14 { |
| 15 border: solid black; |
| 16 height: 3in; |
| 17 position: relative; |
| 18 width: 3in; |
| 19 } |
| 20 div div |
| 21 { |
| 22 background: blue; |
| 23 bottom: 1in; |
| 24 height: auto; |
| 25 margin-bottom: auto; |
| 26 margin-top: auto; |
| 27 max-height: 0.5in; |
| 28 position: absolute; |
| 29 top: 1in; |
| 30 width: 100%; |
| 31 } |
| 32 |
| 33 |
| 34 /* |
| 35 |
| 36 1in : top |
| 37 + |
| 38 auto (to solve): margin-top |
| 39 + |
| 40 0 : border-top-width |
| 41 + |
| 42 0 : padding-top |
| 43 + |
| 44 auto (to solve) : height (may be constrained to use 0.5in by ma
x-height) |
| 45 + |
| 46 0 : padding-bottom |
| 47 + |
| 48 0 : border-bottom-width |
| 49 + |
| 50 auto (to solve): margin-bottom |
| 51 + |
| 52 1in : bottom |
| 53 ============= |
| 54 3in : height of containing block |
| 55 |
| 56 |
| 57 " |
| 58 'top' is 'auto', 'height' and 'bottom' are not 'auto', |
| 59 then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, |
| 60 and solve for 'top' |
| 61 " |
| 62 |
| 63 so this brings: |
| 64 |
| 65 1in : top |
| 66 + |
| 67 0 (set): margin-top |
| 68 + |
| 69 0 : border-top-width |
| 70 + |
| 71 0 : padding-top |
| 72 + |
| 73 1in (not constrained) : height (must be constrained to use 0.5i
n by max-height) |
| 74 + |
| 75 0 : padding-bottom |
| 76 + |
| 77 0 : border-bottom-width |
| 78 + |
| 79 0 (set): margin-bottom |
| 80 + |
| 81 1in : bottom |
| 82 ============= |
| 83 3in : height of containing block |
| 84 |
| 85 So, here, we must reenter the algorithm since height is |
| 86 constrained and is no longer 'auto'. |
| 87 |
| 88 " |
| 89 If none of the three [top, height, bottom] are 'auto': |
| 90 If both 'margin-top' and 'margin-bottom' are 'auto', |
| 91 solve the equation under the extra constraint that |
| 92 the two margins get equal values. |
| 93 " |
| 94 |
| 95 so this brings: |
| 96 |
| 97 1in : top |
| 98 + |
| 99 auto (to solve): margin-top |
| 100 + |
| 101 0 : border-top-width |
| 102 + |
| 103 0 : padding-top |
| 104 + |
| 105 0.5in (constrained) : height (constrained by max-height) |
| 106 + |
| 107 0 : padding-bottom |
| 108 + |
| 109 0 : border-bottom-width |
| 110 + |
| 111 auto (to solve): margin-bottom |
| 112 + |
| 113 1in : bottom |
| 114 ============= |
| 115 3in : height of containing block |
| 116 |
| 117 |
| 118 So, here, margin-top must use 0.25in and margin-bottom must use
0.25in |
| 119 so that the equation remains balanced. |
| 120 |
| 121 */ |
| 122 </style> |
| 123 </head> |
| 124 <body> |
| 125 <p>Test passes if a blue rectangle is <strong>vertically centered</stron
g> in an hollow black square.</p> |
| 126 <div id="div1"> |
| 127 <div></div> |
| 128 </div> |
| 129 </body> |
| 130 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2824603002:
Import css21/positioning W3C CSS Test Suite (Closed)
