[webkit-dev] Question on Inline element

Tue May 17 04:12:36 PDT 2011

Hi Eric,

Thanks for your patient & detailed answer :-) So based on your explanation,
I understand that a paragraph element can contain an image (inline) & text
(inline) element altogether.
Am i correct?

If that is so, as per my understanding the m_framerect of Renderblock
corresponding to Paragraph element will contain both the image & text
element.
Is this understanding correct?

I wrote the below html to draw a border around the paragraph element, but
the border is drawn around the text element only as can be seen in Safari
browser too, which brings to the conclusion that the framerect calculation
of paragraph element is not taking into consideration the children image
element.
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
</style>
</head>
<p class="one"> <img src="titan.jpg" alt="RSS" width="256" border="0"
height="256" align="left">Subscribe</p>
</html>

I have also debugged the WebKit code & found that while doing layout
calculation for Paragraph element, it goes inside
RenderBlock::layoutInlineChildren==> Inside this we are doing the layout for
each of the children. As per my understanding, the size of paragraph element
would be the largest of its children & I dont see any such calculation.
Could you please suggest where I should look to fix this issue
appropriately?

Thanks,
Rahaman
On Fri, May 13, 2011 at 11:25 PM, Eric Seidel <eric at webkit.org> wrote:

>
>
> On Thu, May 12, 2011 at 10:52 PM, Mustafizur Rahaman <
> mustaf.here at gmail.com> wrote:
>
>> So my question is
>>
>>    - Can a paragraph element contain an image element=> the html spec
>>    does not say NO.
>>
>> Yes.  There are two specs at play here.  HTML and CSS. Ignore anything
> prior to HTML5 as it was proscriptive rather than descriptive and does not
> match what browsers and web authors actually use!   <image> (aka <img>) is
> just an inline element.  (Like span or b or i, etc.) and flows with inline
> children per the CSS spec.  (See CSS 2.1).  So Paragraph, which is a block,
> can contain as many inline children as its little heart desires.  <img>
> happens to be a "replaced" element, so it has intrinsic size (again see CSS
> 2.1).  Inline children (with the exception of inline blocks, which are
> blocks which flow as inlines) CANNOT contain box children (blocks are
> boxes), so for example <span><p></p></span> would be invalid and cause a
> special type of craziness called a "continuation", where the spans inline
> contents are split in two, wrapped in anonymous blocks, and the two
> anonymous wrappers and the P are all children off the parent instead of the
> P being a child of the span.
>
>
>>
>>    - If we make the image element neither float/nor positioned, it
>>    creates an anomynous block & everything is rendered properly. But I am not
>>    sure whether that is the right approach.
>>
>> Images will only end up getting wrapped in anonymous blocks when they're
> in a block with other box children.  For example:
>
> <div><img><div></div></div> will cause the <img> to get wrapped in an
> anonymous block.
>
> This is due to he CSS rule that blocks may contain either all inline
> children OR all box/block children.  Thus since it has one block child (the
> <div>) the img has to get wrapped in an anymous block to keep with the rule.
> http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level
>
>
>>
>>
>> Can any one please throw some light here & help us out.
>>
>> Thanks.
>>
>>
>>
>>
>> _______________________________________________
>> webkit-dev mailing list
>> webkit-dev at lists.webkit.org
>> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20110517/167e30a6/attachment.html>