213707 - Nested DIVs with height 100% not working, causes to effects

Status: RESOLVED INVALID

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

Description

[Rocky Moore]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5a) Gecko/20030718
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5a) Gecko/20030718

A div with a height of 100% nested in another div does not render correctly.  If
the embedded div has several paragraphs of content and the containing div has
not specified a height, the embedded div's content will be displayed beyond both
div's area.  If the bounding div has a set height that is larger than the
embedded div's content, the embedded div only fills the are that its content fills.

Reproducible: Always

Steps to Reproduce:
<div style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px;
PADDING-TOP: 5px; HEIGHT: 100px; BACKGROUND-COLOR: lightblue">Div1<div
style="BACKGROUND-COLOR: floralwhite">Div2</div><div style="WIDTH: 100%; HEIGHT:
100%; BACKGROUND-COLOR: honeydew">Div3</div></div>

Actual Results:  
Mozilla gives a form of staggered third div.

Expected Results:  
This should produce a div with a single line div embedded and a second embedded
div that spans the rest of the containing div's height.  Works properly in IE
and Opera.

Comment 1

[Bill Mason]

Attachment: testcase

Comment 2

[Bill Mason]

This is not a blocker bug.
Opera 7 renders this exactly the same as Mozilla 20030721 PC/WinXP.  I only see
a different rendering in IE6.

Mozilla's rendering looks right to me.  DIV3's height is 100%, meaning 100% of
the height of the containing block DIV1.  DIV1 is explictly 100px, so DIV3 is
100% of that, or 100px.  That's how it rendered.

Resolving invalid.  If I've misinterpreted or gotten something wrong here,
please reopen bug.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

verified invalid.

Comment 4

[Rocky Moore]

I do not know about version 20030721 as I do not know of a way to obtain it, 
but in 1.5a (2003071814) there is a difference between Mozilla and IE5, IE6 and 
Opera 7.  I captured the output of these browsers and the result along with the 
code is at:

http://rjsoft.com/mozilla/test.htm

You can see that Opera 7 and both versions of IE generate the exact same 
results while Mozilla is different.

Also with padding and 100% width on Div 2 it will make Div 2 extend beyond Div 
1.

Comment 5

[Boris Zbarsky [:bzbarsky]]

http://rjsoft.com/mozilla/test.htm has a doctype that puts all the browser
involved into quirks mode (unlike the testcase Bill attached, which puts them
all into standards mode).

Now all the browsers introduce certain bugs in their rendering in quirks mode;
looks like Opera introduces a bug in its sizing of blocks (to render like IE,
which renders incorrectly in both modes).

The determining factor for making something a quirk in Mozilla is "does it break
a lot of pages on the web?"

This issue does not, hence we render per standard in both modes.

For more details on rendering modes, see
http://www.mozilla.org/docs/web-developer/quirks/
 
As for getting current versions, see
ftp://ftp.mozilla.org/pub/mozilla/nightly/latest/

Comment 6

[Rocky Moore]

<<unlike the testcase Bill attached, which puts them
all into standards mode>>

Sorry, that version does the exact same thing and DOES generate the same bogus 
rendering unlike other browsers.

Don't worry, I am gone now, will not waste any more time here.