Google Git
Sign in
webkit / WebKit / dbb3923cafb6f84475e7a38fbee3e22998746738 / . / LayoutTests / fast / css / heightless-list-item.html
blob: e031fe8e803b07d4517c09ffb86ff06559520488 [file] [log] [blame]
robert@webkit.org1d326772012-03-22 20:49:24 +0000[diff] [blame]1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3 <head>
4 <title>CSS Test: height set to 0 to elements with 'display' set to 'list-item'</title>
5
6 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
7 <link rel="author" title="Boris Zbarsky" href="bzbarsky@MIT.EDU">
8 <link rel="bookmark" title="Interesting testcase that some UAs appear to fail" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2012Feb/0028.html">
9 <link rel="help" title="10.5 Content height: the 'height' property" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">
10 <meta content="" name="flags">
11 <meta content="If height of content exceeds the set height of a block-level non-replaced element in normal flow (like a list-item element such as in this test), then the content should overflow according to the 'overflow' property." name="assert">
12
13 <!-- Adapted margin-top values to allow compensating values for height of 1px in the reference result-->
14 <style type="text/css">
15 #heightzerolistitem
16 {
17 color: green;
18 display: list-item;
19 font: 2em/1 serif;
20 height: 0px;
21 margin-left: 1.25em;
22 overflow: visible;
23 margin-top: 1px;
24 }
25
26 ul
27 {
28 height: auto;
29 margin-top: 30px;
30 overflow: visible;
31 }
32
33 li
34 {
35 color: green;
36 font: 2em/1 serif;
37 height: 0px;
38 overflow: visible;
39 margin-top: 1px;
40 }
41
42 li#yhidden { overflow-y:hidden; }
43 li#xhidden { overflow-x:hidden; }
44
45 ul#heightless { height: 0px; }
46 </style>
47
48 </head>
49 <body>
50
51 <p>Test passes if <strong>5 green "PASS"</strong> are each preceded by a filled disc.</p>
52
53 <!--Inline content in div with display: list-item, overflow: visible and height:0 gets painted-->
54 <div id="heightzerolistitem">PASS</div>
55
56 <!--Inline content in list-item with overflow: visible and height:0 gets painted-->
57 <ul>
58 <li>PASS</li>
59 </ul>
60
61 <!--Inline content in list-item and list-item parent with overflow: visible and height:0 gets painted-->
62 <ul id="heightless">
63 <li>PASS</li>
64 </ul>
65
66 <!--Block content in div with display: list-item, overflow: visible and height:0 gets painted-->
67 <div id="heightzerolistitem" style="margin-top: 60px;"><div>PASS</div></div>
68
69 <!--Block content in list-item with overflow: visible and height:0 gets painted-->
70 <ul>
71 <li><div>PASS</div></li>
72 </ul>
73
74 <!--Inline content in div with display: list-item, overflow-y: hidden and height:0 does not get painted-->
75 <div id="heightzerolistitem" style="overflow-y:hidden;">PASS</div>
76
77 <!--Inline content in list-item with overflow-y: hidden and height:0 does not get painted-->
78 <ul>
79 <li id="yhidden">PASS</li>
80 </ul>
81
82 <!--Block content in list-item with overflow-y: hidden and height:0 does not get painted-->
83 <ul>
84 <li id="yhidden"><div>PASS</div></li>
85 </ul>
86
87 <!--Inline content in div with display: list-item, overflow-x: hidden and height:0 does not get painted-->
88 <div id="heightzerolistitem" style="overflow-x:hidden;">PASS</div>
89
90 <!--Inline content in list-item with overflow-x: hidden and height:0 does not get painted-->
91 <ul>
92 <li id="xhidden">PASS</li>
93 </ul>
94
95 <!--Block content in list-item with overflow-x: hidden and height:0 does not get painted-->
96 <ul>
97 <li id="xhidden"><div>PASS</div></li>
98 </ul>
99
100 </body>
101</html>