| 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 |
| 3 <html xmlns="http://www.w3.org/1999/xhtml"> |
| 4 |
| 5 <head> |
| 6 |
| 7 <title>CSS Test: max-height - float and overflow</title> |
| 8 |
| 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/" /> |
| 10 <link rel="author" title="Hilbrand Edskes" href="http://edskes.com/" /> |
| 11 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights
" /> |
| 12 <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#overflow" /> |
| 13 <meta content="ahem" name="flags" /> |
| 14 <meta content="The content of the #test-red-overlapped generates an active hor
izontal scrollbar. The height of such horizontal scrollbar adds itself to the co
ntent making it exceed the max-height constraint of 200px. Therefore, such verti
cal space taken by the horizontal scrollbar must be substracted from the height
of the content. An active vertical scrollbar then must be generated to provide a
ccess to the equivalent of the height of the horizontal scrollbar." name="assert
" /> |
| 15 |
| 16 <style type="text/css"><![CDATA[ |
| 17 div |
| 18 { |
| 19 font: 200px/1 Ahem; |
| 20 overflow: auto; |
| 21 width: 200px; |
| 22 } |
| 23 |
| 24 #test-red-overlapped |
| 25 { |
| 26 color: red; |
| 27 float: left; |
| 28 max-height: 200px; |
| 29 } |
| 30 |
| 31 #control-green-overlapping |
| 32 { |
| 33 clear: left; |
| 34 color: green; |
| 35 height: 200px; |
| 36 position: relative; |
| 37 top: -200px; |
| 38 } |
| 39 ]]></style> |
| 40 |
| 41 </head> |
| 42 |
| 43 <body> |
| 44 |
| 45 <p>PREREQUISITE: User agent needs to support scrollbars as the scrolling mecha
nism. If it does not, then this test case does not apply to this user agent.</p> |
| 46 |
| 47 <p>Test passes if there is a green square and <strong>no red</strong>. Such gr
een square should have active horizontal and vertical scrollbars.</p> |
| 48 |
| 49 <div id="test-red-overlapped">XX</div> |
| 50 |
| 51 <div id="control-green-overlapping">XX</div> |
| 52 |
| 53 </body> |
| 54 </html> |
| OLD | NEW |