13331 - (M9) content box does not expand with CSS2 height declaration

Status: VERIFIED INVALID

(Core :: Layout, defect, P3)

Description

[Ethan Fremen]

When a block box is assigned a height, the content box (excluding margin,
padding, etc.) is supposed to expand to fill it. (CSS2 10.5)
"The line box height is the distance between the uppermost box top and the
lowermost box bottom" (10.8)

The vertical-align property should be applied to a block box to determine where
in the content box the anonymous inline text appears. at least, that's what I
assume "The following values only have meaning ... to a parent block-level
element, if that element generates anonymous inline boxes" (10.8.1) means.

Even if this doesn't work, it should work on declared inline boxes, as I use in
the second example.

I know this is CSS2, but it makes things like Sample12 (from the viewer) wildly
implausible without resorting to table nonsense.

(if i'm being too verbose or pedantic, let me know)

~mindlace

Comment 1

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

CSS2 is quite unclear on these issues.  The current layout of your test page is
correct.  The vertical-align: bottom means the bottom of the line-box.  The line
box doesn't get any bigger by setting the height of the block - all that happens
is that the size of the block is not determined by the height of all its line
boxes stacked up.

In response to your first paragraph, the line box and content box are totally
different things.  Each line of text is in a line box.  The content box is the
inside edge of the padding of a block level element.

In response to your second paragraph, your interpretation of the quote is
incorrect.  It means that it only applies to blocks that directly contain inline
elements, rather than those that contain other blocks.  It actually applies to
those blocks only at the level of their inline content.  How it does so is one
of the vaguest sections of CSS2, and I have proposed a number of corrections to
it.

The line boxes always begin at the top of the block.

However, I never really noticed that statement before, and I think it does mean
something interesting.  It seems to say that the vertical-align on the block
should apply to anonymous text nodes that are children of that block.  I think
that idea is a bad one, but...

I'm leaving the bug open to discuss this issue.

Comment 2

[Ethan Fremen]

This modified version (same URL) of the test should more clearly illustrate
the problem.

In test #1, the baseline is applied to the block box.  This is the only way it
can apply to anonymous inline boxes.  it says, for baseline "If the box doesn't
have a baseline, align the bottom of the box with the parent's baseline."

This doesn't address what happens when the parent has no baseline, as I assume a
block-box would not.  I would inferr that you would read that "if the parent has
no baseline, align the baseline of the box with the parent's bottom".

The second box has the anonymous text aligned bottom.  CSS2: "Align the bottom
of the box with the bottom of the line box." well, the parent isn't a line box,
so shouldn't this be "Align the bottom of the inline box with the bottom of the
parent box"?

The last two boxes render correctly, and the second-to-last actually gives me
the effect I was looking for- but only on the anonymous blocks. I suppose I
could have an inline box with an   to get the effect I want. I could also
achieve the same effect with 2 fixed position block boxes- one with the
background image and the other specifying the location of the text.
Both of these solutions involve messing with HTML markup to achieve a visual
effect.

Comment 3

[kipp]

(1) The vertical-align property only applies to inline-level and table-cell
elements (section 10.8.1; the vertical-align property).

(2) vertical-align doesn't apply to the anonymous text nodes of a block because
the vertical-align property is not inherited. This part is a bit tricky because
the statement in 10.8.1 regarding vertical-align and anonymous inline boxes
would lead one to believe that it does apply. However, section 9.2.2 is very
clear on how inheritance behaves with anonymous inline boxes. Therefore, they
inherit a default value of vertical-align (since it's not inheritable) and
therefore the value is always "baseline".

Comment 4

[Hixie (not reading bugmail)]

Yup, "only have meaning with respect to" does not mean "applies to". The test
case is being rendered 100% correctly. (Kipp: Does it still render correctly
with your latest and greatest?)

David: Assuming the anonymous inline as suggested in bug 6865, the text in
10.8.1 means that vertical-align always applies to inline boxes.

Mindlace: Sample12 is done using fixed positioning, so why is it implausible?
And what is the effect you are looking for? Maybe there is an easier way to do
it without resorting to hairy HTML.

Suggest we mark this INVALID.

Comment 5

[Hixie (not reading bugmail)]

Attachment: Screenshot of correct behaviour.

Comment 6

[Hixie (not reading bugmail)]

Sorry about the messed up colours, I had to use Microsoft Photo Editor and I
do not yet grok it...

Comment 7

[kipp]

The test works as it should in the current build and in my updated tree.

Comment 8

[Ethan Fremen]

The text in sample12 is done in tables, and I want to avoid using tables for
anything except tabular data.
I'm simply trying to have a box with a graphic background with overlayed text
that is centered at the bottom of the image. I can get close by specifying
margin-top for the text, or the other two approaches I mentioned.

Maybe my next bug will actually be valid :-P

Comment 9

[Hixie (not reading bugmail)]

Erm, no tables in Sample12...

If you'd like some ideas on how to do what you are looking at doing, e-mail
me directly: py8ieh=[e-mail]