272816 - JavaScript: style.display = 'none'/'' Needs a redraw / resize event to correct the layout appearance.

Status: UNCONFIRMED

(Core :: Layout: Tables, defect)

Description

[Yoon-Kit Yong]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040421 MultiZilla/1.6.4.0b
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040421 MultiZilla/1.6.4.0b

This bug is similar to 97056 [https://bugzilla.mozilla.org/show_bug.cgi?id=97506]
but also different.

See "Steps to Reproduce".

I have tried the recommended workarounds from the ref bug, but that doesnt work.
Ive included the attempts in the provided URL.


Reproducible: Always
Steps to Reproduce:
1. Open URL.
2. Click on "Selection" [Bottom right, where it says [1]]
3. Note that the Left Menu bar doesnt extend downwards as the Selection reveals
itself
4. Resize the Browser. On the first sign of change, the Left Menu Bar will
correctly display itself by 'extending' downwards.

Suspicion: when calling the JavaScript style.display = 'none'/'', 
Gecko would need to do a quick redraw/refresh/resize.

Proof.
1. Reload the page
2. Click on the Email [2] section.
3. Note that the Left Menu Bar extends downwards as it should.
4. Also note that by clicking on Email, the Width of the revealed table causes
the width of the page to increase, triggering a Redraw.
5. This Redraw gives the correct visual results.

Suspicion: the redraw corrects the first problem.


Actual Results:  
Due to the increase in length of the page triggered by a javascript event, 
the Menu Bar didnt extend downwards adapting to the new height, 
thus leaving unsightly whitespace on where it should be the same bgcolor.

Expected Results:  
The Menu Bar should extend downwards with its colour.

about:buildconfig

Build platform
target
i586-pc-msvc

Build tools
Compiler 	Version 	Compiler flags
$(CYGWIN_WRAPPER) cl 	12.00.8804 	-TC -nologo -W3 -nologo -Gy -Fd$(PDBFILE)
$(CYGWIN_WRAPPER) cl 	12.00.8804 	-TP -nologo -W3 -nologo -Gy -Fd$(PDBFILE)

Configure arguments
--without-system-jpg --without-system-zlib --enable-extensions=default,irc,tasks
--enable-crypto --disable-auto-deps --disable-debug --enable-optimize=-O1

Comment 1

[Yoon-Kit Yong]

Attachment: Sample HTML which demonstrates the problems with the rendering and javascript.

Clicking on [1] "Selection" First shows the problem

Clicking on [2] "Email" shows the problem corrected by doing a resize.

javascript in the procedure "ToggleTable" is used.

Comment 2

[Gary van der Merwe]

WFM 
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

The version of Gecko you are using is 8 months old. If you experence this bug on
a new version, Please reopen.

Comment 3

[Brendan Eich [:brendan]]

Reporter: the JavaScript Engine component has nothing to do with DOM and CSS;
please file appropriately in the future.

/be

Comment 4

[Nick Seng]

(In reply to comment #2)
> WFM 
> Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107
Firefox/1.0
> 
> The version of Gecko you are using is 8 months old. If you experence this bug on
> a new version, Please reopen.

I've just tried the above bug with the latest version of Gecko, bug's still there. 

Comment 5

[Yoon-Kit Yong]

The bug occurs on all the Mozilla/Firefox browsers Im using,
upto Mozilla 1.7.3 and Firefox 1.0. 

> Reporter: the JavaScript Engine component has nothing to do with DOM and CSS;
> please file appropriately in the future.

To be honest, I dont know where this bug is coming from,
so I wouldnt know where to 'file it appropriately'

All I know that it affects Mozilla rendering,
due to Javascript and css. And there is a 'work-around'
by the renderer by just doing a resize of the entire page.

yk.

Comment 6

[Brendan Eich [:brendan]]

If you want to be useful filing bugs, and get canconfirm bugzilla capability,
then please learn from what I just wrote, instead of repeating what you didn't
know before.  The Core / JavaScript Engine component is for core JavaScript
language bugs only.

/be

Comment 7

[Yoon-Kit Yong]

chill...

Is the category correct now? 
Product: Core
Component: DOM CSS

because if the wrongful categorization of this bug 
is hindering the progress of someone actually looking into the bug, 
Ill be more than eager to learn, correct and conform to the standards.

I selected 'Javascript Engine' before because 
that is the functionality Im accessing which makes the bug apparrent.

yk.

Comment 8

[Erik Fabert]

Attachment: Testcase for bug 272816

Comment 9

[Erik Fabert]

As you see, the effect can be reproduced without JavaScript. DOM: CSSOM usually 
deals with "getComputedStyle returns wrong value" type of bugs, this should be 
in Layout: Tables (and is probably a duplicate): a table cell's child with 
height: 100% does not expand on a style change.

Two notes:
1. the bug disappears if I set body's margin-top to 0.
2. After hovering over the left column the table does not shrink any longer.

Comment 10

[Yoon-Kit Yong]

> 1. the bug disappears if I set body's margin-top to 0.

You are right,
the work-around works by splicing this code in my page:

<style type="text/css">
 body { margin-top: 10; }
</style>

Thanks very much, 
however, is this a bug which will be fixed,
or should I close this report?

Product: Core
Component: Layout Tables

yk.