Re: [css3-content] ::outside become "containing block"

I don't mean to hassle but I have a deadline and really need an answer. I know it could change in future and I can deal with that (vendor specific pseudo element) I just wanted to minimize the risk.

----- "Paul Duffin" <pduffin@volantis.com> wrote:

> I have a question about the meaning of width/height properties when
> used on an element that is the superior parent for one or more
> ::outside pseudo elements. It may be that a deeper understanding of
> how CSS rendering is performed or pseudo elements in general would
> make this obvious but I have looked and am still not clear.
> 
> Calculations for determining the actual values of width/height
> properties are defined in terms of the "containing block", nowhere in
> the specification for ::outside (in
> http://dev.w3.org/csswg/css3-content/) does it make mention of the
> "containing block" so I am unsure as to whether the ::outside affects
> the containing block or not.
> 
> I assume that an ::outside pseudo element becomes the "containing
> block" of its superior parent and the "containing block" of the
> ::outside pseudo element is the "containing block" that its superior
> parent would have had if the ::outside pseudo element was not present.
> This determination of "containing blocks" starts from the element and
> recurses down through the hierarchy of ::outside pseudo elements.
> 
> Some examples may make this easier to understand, in the following X >
> Y means that box for element X is the "containing block" of box for
> element Y.
> 
> Lets say that I have some markup like this:
>     <div class="outer">
>         <div class="inner">
>             ....
>         </div>
>     </div>
> 
> Without any styles: ".outer" > ".inner"
> 
> If applying this CSS.
>     .inner::outside {border: 4px solid red; padding: 2px}
> 
> Then the determination of "containing block" relationships would
> consist of the following steps:
> 1) Initially .outer > .inner
> 2) Processing .inner::outside:
>    * .inner::outside > .inner
>    * .outer > .inner::outside.
> 
> If applying CSS.
>     .inner::outside {border: 4px solid red; padding: 2px}
>     .inner::outside(2) {border: 3px dashed blue; padding: 1px}
> 
> Then the determination of "containing block" relationships would
> consist of the following steps:
> 1) Initially .outer > .inner
> 2) Processing .inner::outside:
>    * .inner::outside > .inner
>    * .outer > .inner::outside.
> 3) Processing .inner::outside(2)
>    * .inner::outside > .inner
>    * .inner::outside(2) > .inner::outside
>    * .outer > .inner::outside(2).
> 
> If applying CSS.
>     .inner::outside {width: 50%}
>     .inner::outside(2) {width: 20%}
> 
> Then if the actual width of the ".outer" element is 200px then:
> * Width of .inner::outside(2) is 20% x 200px = 40px.
> * Width of .inner::outside us 50% x 40px = 20px.
> 
> Is this how it is supposed to work?

Received on Thursday, 10 June 2010 07:56:18 UTC