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