202942 - inline element background colors do not take into account differing heights in sub-elements

Status: RESOLVED INVALID

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

Description

[Benjamin Strautin]

User-Agent:       Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.4a) Gecko/20030411 Phoenix/0.5+
Build Identifier: Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.4a) Gecko/20030411 Phoenix/0.5+

In the demonstration page, background colors are applied to nested inline
elements.  What (I think) should happen is that the height of the outermost
element is the height of the tallest sub-element within it, which means that the
background color will be behind all of the sub-elements.  What actually happens
is that the background color only covers sub-elements up to the height of the
outermost element.

Reproducible: Always

Steps to Reproduce:
1. write a page that applies background colors to nested inline elements of
varying heights.
2. open page

Actual Results:  
The backgrounds of sub-elements taller than their parent elements are only
covered up to the level of the height of the parent element.

Expected Results:  
The backgrounds of sub-elements should be covered up to their full height, with
the background of their parent

Comment 1

[Chris Casciano]

This looks to me to be INVALID due to the definition of line height by the w3c,
but there's probably a bug out there to dupe it to.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Probably, but not worth looking.

This is indeed invalid; see http://www.w3.org/TR/CSS21/visudet.html#q17

In particular:

  The height of the content area should be based on the font

which means that it does _not_ depend on the presence of other inline children.  

  

Comment 3

[Benjamin Strautin]

If the height of the outermost element is (correctly) based on its font alone, 
then child elements' heights are not being computed correctly, because although 
they inherit the background-color of their parents, their entire boxes are not 
being filled with that color.

In my example, the background of "why" should be completely, not halfway, 
green, no matter what the height of its parent.  The height of the background 
of "there" should not necessarily be changed

Comment 4

[Boris Zbarsky [:bzbarsky]]

> because although they inherit the background-color of their parents

They don't.  Backgrounds are not inherited.  See
http://www.w3.org/TR/CSS21/colors.html#propdef-background-color,
http://www.w3.org/TR/CSS21/colors.html#propdef-background-image, etc.

So in your test, the green background should be (and is) painted by the <em>
element and by the <em> element only, over an area that depends on the computed
font-size of the <em> element and on nothing else.  

Comment 5

[Hixie (not reading bugmail)]

(to make the background inherited you need to set 'background: inherit')

Comment 6

[Bill Mason]

*** Bug 260615 has been marked as a duplicate of this bug. ***

Comment 7

[Andrew Schultz]

*** Bug 273084 has been marked as a duplicate of this bug. ***