| 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: Relative positioning with top and bottom do not change
element dimensions</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-07-09 --> |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#relative-
positioning" title="9.4.3 Relative positioning" /> |
| 8 <link rel="match" href="../reference/ref-filled-green-100px-squa
re.xht" /> |
| 9 |
| 10 <meta name="flags" content="" /> |
| 11 <meta name="assert" content="Relatively positioned element dimensions ar
e not changed with top/bottom applied. If 'top' is 'auto' and if 'bottom' is '10
0px', then top's used value becomes the negative of bottom. If both 'top' and 'b
ottom' are specified (like for #div3 in this test), then 'bottom' is ignored and
the used value of 'bottom' becomes minus the value of 'top')." /> |
| 12 <style type="text/css"> |
| 13 div |
| 14 { |
| 15 height: 100px; |
| 16 position: relative; |
| 17 width: 100px; |
| 18 } |
| 19 #div1 |
| 20 { |
| 21 background-color: red; |
| 22 } |
| 23 #div2 |
| 24 { |
| 25 background-color: red; |
| 26 bottom: 100px; |
| 27 top: auto; |
| 28 } |
| 29 #div3 |
| 30 { |
| 31 background-color: green; |
| 32 bottom: 0px; |
| 33 top: -200px; |
| 34 } |
| 35 </style> |
| 36 </head> |
| 37 <body> |
| 38 <p>Test passes if there is a filled green square and <strong>no red</str
ong>.</p> |
| 39 <div id="div1"></div> |
| 40 <div id="div2"></div> |
| 41 <div id="div3"></div> |
| 42 </body> |
| 43 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2824603002:
Import css21/positioning W3C CSS Test Suite (Closed)
