--- /dev/null
+layer at (0,0) size 800x600
+ RenderCanvas at (0,0) size 800x600
+layer at (0,0) size 800x600
+ RenderBlock {HTML} at (0,0) size 800x600
+ RenderBody {BODY} at (8,8) size 784x584
+ RenderBlock {H2} at (0,0) size 784x28
+ RenderText {TEXT} at (0,0) size 220x28
+ text run at (0,0) width 220: "Block Collapse Demo"
+ RenderBlock {P} at (0,47) size 784x18
+ RenderText {TEXT} at (0,0) size 687x18
+ text run at (0,0) width 304: "This table below has three hierarchical sections. "
+ text run at (304,0) width 383: "Collapsing a section should cause those below it to move up."
+ RenderBlock {P} at (0,81) size 784x18
+ RenderText {TEXT} at (0,0) size 765x18
+ text run at (0,0) width 765: "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)}."
+ RenderBlock {P} at (0,115) size 784x18
+ RenderText {TEXT} at (0,0) size 747x18
+ text run at (0,0) width 579: "Note that the second section is collapsed when the page opens and expanding it works fine. "
+ text run at (579,0) width 168: "Just the collapse is broken."
+ RenderBlock {DIV} at (0,149) size 784x148
+ RenderBlock {HR} at (0,0) size 784x2 [border: (1px inset #000000)]
+ RenderBlock {DIV} at (0,10) size 784x20
+ RenderImage {IMG} at (0,0) size 16x16
+ RenderText {TEXT} at (16,2) size 75x18
+ text run at (16,2) width 75: " Block One"
+ RenderBlock {DIV} at (0,30) size 784x20
+ RenderImage {IMG} at (0,0) size 16x16
+ RenderText {TEXT} at (16,2) size 78x18
+ text run at (16,2) width 78: " Block Two"
+ RenderBlock {DIV} at (0,50) size 784x20
+ RenderImage {IMG} at (0,0) size 16x16
+ RenderText {TEXT} at (16,2) size 88x18
+ text run at (16,2) width 88: " Block Three"
+ RenderBlock {DIV} at (0,70) size 784x68
+ RenderTable {TABLE} at (0,0) size 784x68
+ RenderTableSection {TBODY} at (0,0) size 0x68
+ RenderTableRow {TR} at (0,0) size 0x0
+ RenderTableCell {TD} at (2,2) size 32x20 [r=0 c=0 rs=1 cs=1]
+ RenderText {TEXT} at (1,1) size 4x18
+ text run at (1,1) width 4: " "
+ RenderTableCell {TD} at (36,2) size 746x20 [r=0 c=1 rs=1 cs=1]
+ RenderText {TEXT} at (1,1) size 65x18
+ text run at (1,1) width 65: "This is the"
+ RenderTableRow {TR} at (0,0) size 0x0
+ RenderTableCell {TD} at (2,24) size 32x20 [r=1 c=0 rs=1 cs=1]
+ RenderText {TEXT} at (1,1) size 4x18
+ text run at (1,1) width 4: " "
+ RenderTableCell {TD} at (36,24) size 746x20 [r=1 c=1 rs=1 cs=1]
+ RenderText {TEXT} at (1,1) size 69x18
+ text run at (1,1) width 69: "contents of"
+ RenderTableRow {TR} at (0,0) size 0x0
+ RenderTableCell {TD} at (2,46) size 32x20 [r=2 c=0 rs=1 cs=1]
+ RenderText {TEXT} at (1,1) size 4x18
+ text run at (1,1) width 4: " "
+ RenderTableCell {TD} at (36,46) size 746x20 [r=2 c=1 rs=1 cs=1]
+ RenderText {TEXT} at (1,1) size 74x18
+ text run at (1,1) width 74: "block three."
+ RenderBlock {HR} at (0,146) size 784x2 [border: (1px inset #000000)]
--- /dev/null
+<html>
+ <head>
+ <title>Block Collapse Demo</title>
+ <script>
+ function toggleBlock( pBlockName )
+ {
+ var theImage = document.getElementById( "I-" + pBlockName )
+ var theBlock = document.getElementById( "T-" + pBlockName )
+
+ if (theImage.alt == "shown")
+ {
+ theImage.src = "resources/closed.png"
+ theImage.alt = "hidden"
+ theBlock.style.visibility = "hidden"
+ theBlock.style.position = "absolute"
+ }
+ else
+ {
+ theImage.src = "resources/open.png"
+ theImage.alt = "shown"
+ theBlock.style.position = "static"
+ theBlock.style.visibility = "visible"
+ }
+ }
+ </script>
+ </head>
+ <body onload="document.body.offsetTop; toggleBlock('Alpha')">
+ <h2>Block Collapse Demo</h2>
+ <p>This table below has three hierarchical sections. Collapsing a section should cause those below it to move up.</p>
+ <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>
+ <p>Note that the second section is collapsed when the page opens and expanding it works fine. Just the collapse is broken.</p>
+
+
+ <div>
+ <hr>
+ <div onclick="toggleBlock('Alpha')" style="font-weight:bold;cursor:pointer;"><img src="resources/open.png" alt="shown" id="I-Alpha"> Block One</div>
+ <div id="T-Alpha">
+ <table width="100%">
+ <tr><td width=30> </td><td>This is the</td></tr>
+ <tr><td width=30> </td><td>contents of</td></tr>
+ <tr><td width=30> </td><td>block one.</td></tr>
+ </table>
+ </div>
+
+ <div onclick="toggleBlock('Beta')" style="font-weight:bold;cursor:pointer;"><img src="resources/closed.png" alt="hidden" id="I-Beta"> Block Two</div>
+
+ <div id="T-Beta" style="visibility:hidden;position:absolute;">
+ <table width="100%">
+ <tr><td width=30> </td><td>This is the</td></tr>
+ <tr><td width=30> </td><td>contents of</td></tr>
+ <tr><td width=30> </td><td>block two.</td></tr>
+ </table>
+ </div>
+
+ <div onclick="toggleBlock('Gamma')" style="font-weight:bold;cursor:pointer;"><img src="resources/open.png" alt="shown" id="I-Gamma"> Block Three</div>
+
+ <div id="T-Gamma">
+ <table width="100%">
+ <tr><td width=30> </td><td>This is the</td></tr>
+ <tr><td width=30> </td><td>contents of</td></tr>
+ <tr><td width=30> </td><td>block three.</td></tr>
+ </table>
+ </div>
+ <hr>
+ </div>
+ </body>
+</html>
+