W3C home > Mailing lists > Public > www-style@w3.org > June 2010

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

From: Paul Duffin <pduffin@volantis.com>
Date: Tue, 8 Jun 2010 07:36:04 -0600 (MDT)
To: www-style <www-style@w3.org>
Message-ID: <1910959843.613031276004164233.JavaMail.root@zimbra.volantis.com>
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 Tuesday, 8 June 2010 13:36:42 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:28 GMT