Re: [CSS21] Re: Clarification needed for inline boxes containing block boxes

On Sun, Mar 13, 2011 at 02:47:43PM -0400, Boris Zbarsky wrote:
> On 3/13/11 9:10 AM, Peter Moulder wrote:
> >   The mixed mentions of boxes and elements may result in uncertainty
> >   as to whether two boxes are considered "consecutive or ..." if they
> >   are generated by elements separated by, say, an inline element that
> >   contains only a floated element and some collapsible white space.
> >   My understanding is that such an inline element is considered in-flow
> >   by the current text.
> 
> For what it's worth, I believe this last case doesn't matter in the
> sense that the rendering is the same either way...

If "the inline box [is] broken around the block-level box [the first
one, i.e. prior to this hypothetically separating inline element],
dividing the inline box into two pieces even if either side is empty",
and if it's considered clear that the two end boxes each take up a
line's worth of vertical space and have their border area rendered with
the inline's background & border, then I'd have thought it also clear
that such a (would-be) separating inline would also take up a line and
have its (or its parent inline's) background & border rendered.

What am I missing?

Curiouser and curiouser: in the case of Gecko, such an inline is sometimes
considered separating and sometimes isn't: in the following test case, Gecko
considers it to be separating where the separating inline has its own border
(between block3 and block4), but not where it doesn't have its own border
(between block2 and block3).  Also of interest is that Gecko doesn't render
the parent inline's background & border for non-empty content that separates
two blocks:

  <!DOCTYPE html>
  <html><head><title>Rendering of inline split by blocks</title></head><body>
  <span style="border:2px dashed green; background:cyan">
   <span style="display:block">block1</span>
   Inline content; shouldn't this be on a cyan background with green dashed border?
   <span style="display:block">block2</span>
   <span> <span style="float:right">float</span> </span>
   <span style="display:block">block3</span>
   <span style="border:dotted 4px purple"> <span style="float:right">float</span> </span>
   <span style="display:block">block4</span>
  </span>
  </body></html>

pjrm.

Received on Sunday, 13 March 2011 20:16:41 UTC