Bug 17858 – input element inside div and div inside div is rendered incorrectly

• Status: RESOLVED
• Resolution: INVALID
• Component: Layout and Rendering

[jasneet]

I Steps:
Go to
the attached reduction

II Issue:
the black box should be inside of the red box from all edges and not overlapping at the right edges.

III Conclusion: input element inside div and div inside div is rendered incorrectly.
<div style="width:66%; border:2px solid red"><input style="border:2px solid; width:100%;" type="text"></div>
When an input element is contained in div, IE6 and Opera render the input element inside div.

<div style="width:66%; border:2px solid red"><div style="border:2px solid; width:100%; height:10px"></div></div>
When a div is contained in another div, the child div comes out a little bit of the parent div. Only IE6 can render this properly.

IV Other browsers: 
FF2: not ok (FF3: not ok)
Opera: partially ok
IE 6: ok (IE 7: not ok)

V Nightly tested: 31032

[jasneet]

Created attachment 19780 [details]
reduction

[Robert Blaut]

Width property specifies the *content width* of boxes generated by block-level and replaced elements. [http://www.w3.org/TR/CSS21/visudet.html#propdef-width] Content width is a width of space *between* left and right border (excluding border width). The test case is rendered correctly in Webkit. Bug report is INVALID