Fix for 3785211. Make sure to do a layout with the old position before doing a layou...
[WebKit-https.git] / LayoutTests / fast / dynamic / 012.html
1 <html>
2   <head>
3     <title>Block Collapse Demo</title>
4     <script>
5       function toggleBlock( pBlockName )
6       {
7         var theImage = document.getElementById( "I-" + pBlockName )
8         var theBlock = document.getElementById( "T-" + pBlockName )
9         
10         if (theImage.alt == "shown")
11         {
12           theImage.src   = "resources/closed.png"
13           theImage.alt   = "hidden"
14           theBlock.style.visibility = "hidden"
15           theBlock.style.position   = "absolute"
16         }
17         else
18         {
19           theImage.src   = "resources/open.png"
20           theImage.alt   = "shown"
21           theBlock.style.position   = "static"
22           theBlock.style.visibility = "visible"
23         }
24       }
25     </script>
26   </head>
27   <body onload="document.body.offsetTop; toggleBlock('Alpha')">
28     <h2>Block Collapse Demo</h2>
29     <p>This table below has three hierarchical sections.  Collapsing a section should cause those below it to move up.</p>
30     <p>This works on the latest Windows IE and Mozilla Firefox (Win and Mac) but not on Safari 1.2.3 (v125.9) {or 2.0 (146)}.</p>
31     <p>Note that the second section is collapsed when the page opens and expanding it works fine.  Just the collapse is broken.</p>
32
33
34     <div>
35       <hr>
36       <div onclick="toggleBlock('Alpha')" style="font-weight:bold;cursor:pointer;"><img src="resources/open.png" alt="shown" id="I-Alpha">&nbsp;Block One</div>
37       <div id="T-Alpha">
38         <table width="100%">
39           <tr><td width=30>&nbsp;</td><td>This is the</td></tr>
40           <tr><td width=30>&nbsp;</td><td>contents of</td></tr>
41           <tr><td width=30>&nbsp;</td><td>block one.</td></tr>
42         </table>
43       </div>
44       
45       <div onclick="toggleBlock('Beta')" style="font-weight:bold;cursor:pointer;"><img src="resources/closed.png" alt="hidden" id="I-Beta">&nbsp;Block Two</div>
46       
47       <div id="T-Beta" style="visibility:hidden;position:absolute;">
48         <table width="100%">
49           <tr><td width=30>&nbsp;</td><td>This is the</td></tr>
50           <tr><td width=30>&nbsp;</td><td>contents of</td></tr>
51           <tr><td width=30>&nbsp;</td><td>block two.</td></tr>
52         </table>
53       </div>
54       
55       <div onclick="toggleBlock('Gamma')" style="font-weight:bold;cursor:pointer;"><img src="resources/open.png" alt="shown" id="I-Gamma">&nbsp;Block Three</div>
56       
57       <div id="T-Gamma">
58         <table width="100%">
59           <tr><td width=30>&nbsp;</td><td>This is the</td></tr>
60           <tr><td width=30>&nbsp;</td><td>contents of</td></tr>
61           <tr><td width=30>&nbsp;</td><td>block three.</td></tr>
62         </table>
63       </div>
64       <hr>
65     </div>
66   </body>
67 </html>
68