third_party/WebKit/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