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

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 UTC