175686 - {ib}Setting display = 'none' results in unexpected behavior on a div that contains a form

Status: VERIFIED FIXED

(Core :: Layout: Block and Inline, defect, P4)

Description

[Ryan Grove]

Using Mozilla 1.2b (20021020):

Setting the display style of a div to "none" via JavaScript will result in
unexpected behavior if the div contains a form. Technically, the style does get
set to "none", but there is no visual indication of this (i.e., the div does not
disappear). In addition, the div's style properties will be ignored when it gets
displayed again.

There's a demonstration of this bug at the URL above, which will probably do a
much better job of describing it than I have.

Comment 1

[Chris Lyon]

->DOM Style

Comment 2

[Chris Lyon]

->component owners

Comment 3

[Christian Mattar]

Here's the problem:
Initially, DIV is defaults as a block element, which basically means
"display:block;"
Then, when you click the button, it's set to "display:none;", which works just fine.
Then, when you click the button again, it's set to "display:inline;". Note that
inline-elements cannot contain block elements, e.g., the form-element.
My guess would be that when you change the style of the the div-element to
inline, the DOM automatically tries to fix things by pulling the form element
out of the div-element and from there on, things break.

jst: Maybe you could provide us with some insights what actually happens in the
DOM  under these circumstances?

If you change the JS you use to toggle between block and none, everything works
just fine.

Comment 4

[Boris Zbarsky [:bzbarsky]]

CSS display properties do not affect the DOM.

Having a block inside an inline is perfectly valid in CSS, with well-defined
rendering.

The only issue I see on this testcase is that when the div's display is set to
"none" the second and following times the content below it does not move up (as
it should).  Other than that, the layout is exactly correct.

Comment 5

[Hixie (not reading bugmail)]

Actually it's not well defined at all, but you are right, it is definitely valid.

Comment 6

[Madhur Bhatia]

confirming bug 

Comment 7

[Boris Zbarsky [:bzbarsky]]

This got fixed by the checkin for bug 171830, as far as I can tell.

Comment 8

[Greg K.]

Appears to work fine using Win FF 1.5 to set the div.display to block or inline. Marking VERIFIED.