Closed Bug 305095 Opened 19 years ago Closed 19 years ago

table cells relocated when parent TR style.display toggled from inline to none

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 97506

People

(Reporter: dyt, Unassigned)

Details

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50215)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

When table rows are hidden then shown by resetting their display attribute, 
they are not rendered where they were first drawn, but are shifted right.  
Continuing to toggle their attributes results in them "crawling" across the
screen a few pixels per toggle.

Reproducible: Always

Steps to Reproduce:
1.  Run the attached page
2.  Click on the phrase "Click here to test" six times.
3.  Observe that the rows containing "One.One" and "One.Two" move to the right

Actual Results:  
The rows containing "One.One" and "One.Two" move to the right


Expected Results:  
I expected the rows containing "One.One" and "One.Two" to be displayed in the 
same place each time their display attribute is either "block" or "inline".

<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
border: 2px solid green;
empty-cells: hide;
table-layout: auto;
}
td {
border: 1px solid black;
}

</style>
<script language="javascript">
function test(o)
{
var r = document.getElementsByName("foo");
for(var i =0;i < r.length; i++)
{
  var c = r.item(i);
  var color = "red";
  var state = "block"; // "inline"  fails the same way

  if(c.style.backgroundColor == "red")
  {
     color = "blue";
     state = "none";

    }
    subTest(c,color,state);
    c.style.backgroundColor = color;
    c.style.state = state;

}
}
function subTest(c,color,state)
{

   if(c.childNodes == null)
   {
   return;
   }
   for(var j=0;j < c.childNodes.length; j++)
    {
      var f = c.childNodes.item(j);

      c.childNodes.item(j).style.backgroundColor = color;
      c.childNodes.item(j).style.display = state;

    }
}


</script>
</head>
<body>
<table class="t" id="1">
<tr><td onClick="test(this);" id="2">Click Here To Test</td></tr>
<tr name="foo" id="foo" ><td>One.One</td></tr>
<tr name="foo" id="foo" ><td>One.Two</td></tr>
<tr id="5" ><td>Four</td>
<tr id="3" ><td>Four.One</td></tr>
<tr id="4" ><td>Four.Two</td></tr>
</tr>
<tr id="6" ><td>Five</td></tr>
</table>
</body>
</html>
TR elements should have the display set to table-row, not inline. That's
probably mucking things up somewhat.


*** This bug has been marked as a duplicate of 97506 ***
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.