206212 - Table row's VALIGN is inconsistent when DHTML rewrites innerHTML of table cells

Status: RESOLVED FIXED

(Core :: Layout: Tables, defect, P4)

Description

[Bill Karwin]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4b) Gecko/20030507
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4b) Gecko/20030507

I have a page with a table row, and an <IMG> in each cell
(see <TR> near line 456 in the page's source).

I use JavaScript and DHTML to alter the innerHTML of the table cells, so I can
change the dimensions of these images
(see JavaScript function "graphScore()", near line 115 in the page's source).

Even though I use <TR VALIGN="BOTTOM"> for the overall row, the image ends up
switching back and forth from bottom vertical alignment to top vertical
alignment.  I also tried to explicitly set each <TD VALIGN="BOTTOM"> but that
doesn't help.

Reproducible: Always

Steps to Reproduce:
1. View page given in URL above.
2. Observe my green progress bar (labeled "History").
3. To speed up page progress, go to my Options field and change the Retry
interval to "Instant".
4. Let the progress go a few hundred iterations, so you can see the pattern.

Actual Results:  
Table cell is rewritten, and image dimension changes correctly, but after a few
dozen iterations, the vertical alignment switches to TOP.  It might switch back
to BOTTOM after another bunch of iterations.  It switches back and forth
inconsistently.

Expected Results:  
The entire row of table cells should be vertically aligned BOTTOM.

I notice that this page behaves correctly in MS Internet Explorer 6.x and in
Opera 7.x.

Comment 1

[Andrew Schultz]

confirmed with linux trunk build 20030517.
this regressed between linux trunk 2002050902 and 2002051021

Comment 2

[Andrew Schultz]

Attachment: testcase

somewhat reduced testcase.  after each time a green image is added, a blank
image is added in the next column.  the black bar always has a height of 50
(same as the table).  Mozilla seems to ignore the need to reflow the table
because of the blank image.  In the testcase, the original's "blank" is also
drawn in green.

The testcase adds a 70-height image and a 50-height image.  the table is not
reflowed and the 70-height image extends below it.

Comment 3

[Csaba Gabor]

This bug still exists on FF 1.5.0.1 on Win XP Pro
Here is a workaround for the attachment:
    var td=document.getElementById('graphCol0');
    td.parentNode.replaceChild(td.cloneNode(true), td);

This same approach is also working for Bug 41464 and Bug 302710.
Note.  I could just as easily have used 'graphCol1'


Csaba Gabor from Vienna

Comment 4

[j.j.]

Testcase WFM.
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a2pre) Gecko/20061222 Minefield/3.0a2pre
Fixed by reflow branch landing?

Comment 5

[Boris Zbarsky [:bzbarsky]]

Yeah, indeed.

Need a testcase.  Unfortunately, I can't come up with one that _reliably_ fails (when I do shift-reload).  :(  The attached testcase fails about 50% of the time....