| 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: 'bottom' offset - offset from the bottom edge of the co
ntaining block (abs. pos.)</title> |
| 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> |
| 6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtal
bot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-17 --> |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-b
ottom" /> |
| 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#position-
props" /> |
| 9 <link rel="match" href="bottom-offset-001-ref.xht" /> |
| 10 |
| 11 <meta name="flags" content="" /> |
| 12 <meta name="assert" content="The 'bottom' property, for absolute positio
ning, specifies the offset of the element in relation to the containing block's
bottom edge. The containing block of an absolutely positioned element is formed
by the padding box of its nearest (closest) positioned non-inline ancestor eleme
nt." /> |
| 13 <style type="text/css"> |
| 14 #div1 |
| 15 { |
| 16 padding-bottom: 0.5in; |
| 17 position: relative; |
| 18 } |
| 19 #div2 |
| 20 { |
| 21 background: white; |
| 22 height: 0.5in; |
| 23 position: absolute; |
| 24 bottom: 0.5in; |
| 25 width: 0.5in; |
| 26 } |
| 27 #div3 |
| 28 { |
| 29 background: blue; |
| 30 height: 1in; |
| 31 width: 1in; |
| 32 } |
| 33 </style> |
| 34 </head> |
| 35 <body> |
| 36 <p>Test passes if there is a blue square with its bottom-left corner mis
sing.</p> |
| 37 <div id="div1"> |
| 38 <div id="div2"></div> |
| 39 <div id="div3"></div> |
| 40 </div> |
| 41 </body> |
| 42 </html> |
| OLD | NEW |