8000 csswg-drafts/css-exclusions/Exclusions.src.html at 99f3ea751933f473f01bf386f5d414982d12ea75 · w3c/csswg-drafts · GitHub
Skip to content

Exclusions.src.html

Latest commit

 

History

History
executable file
·
2024 lines (1805 loc) · 80.1 KB

Exclusions.src.html

File metadata and controls

executable file
·
2024 lines (1805 loc) · 80.1 KB
For example, the box generated by <code class="idl">e1</code> is positioned in
its containing block's box, which is the <code class="idl">d1-box</code>, because
<code class="idl">e1</code> is absolutely positioned and <code class="idl">d1</code>
is relatively positioned. However, while <code class="idl">e2</code> is also absolutely
positioned, its containing block is the initial containing block (ICB). See the
section 10.1 of the CSS 2.1 specification ([[!CSS21]]) for details.</p>
<p>As a result of the computation of containing blocks for the tree, the boxes belonging
to the <span>wrapping context</span>s of all the elements can be determined:</p>
<ul>
<li>The <span>wrapping context</span> for the html element contains the <code class="idl">e2</code> box: WC-1 (Wrapping Context 1)</li>
<li>The <span>wrapping context</span> for the body element inherits the html element's <span>wrapping context</span>: WC-1</li>
<li>The <span>wrapping context</span> for <code class="idl">d1</code> inherits the body element's
<span>wrapping context</span> and adds the <code class="idl">e1-box</code> to it. So the wrapping
context is made of both the <code class="idl">e1-box</code> and the
<code class="idl">e2-box</code>: WC-2</li>
<li>The <span>wrapping context</span> for <code class="idl">d2</code> inherits the body element's
<span>wrapping context</span>: WC-1</li>
</ul>
<h5>Step 2: resolve wrapping contexts and lay out containing blocks</h5>
<p>In this step, each containing block is processed in turn. For each containing block,
we (conceptually) go through two phases:</p>
<ol>
<li>resolve the <span>wrapping context</span>: resolve the position and size of its exclusions</li>
<li>lay out the containing block</li>
</ol>
<p>In our example, this breaks down to:</p>
<ol>
<li>resolve the position and size of the exclusions belonging to WC-1: RWC-1 (Resolved Wrapping Context 1).</li>
<li>lay out the initial containing block (i.e., lay out its content):
<ol>
<li>resolve the html element's <span>wrapping context</span>: RWC-1</li>
<li>lay out the html element:
<ol>
<li>resolve the body element's <span>wrapping context</span>: RWC-1</li>
<li>lay out the body element:
<ol>
<li>resolve the <code class="idl">d1</code> element's <span>wrapping context</span>: RWC-2</li>
<li>lay out the <code class="idl">d1</code> element</li>
<li>resolve the <code class="idl">d2</code> element's <span>wrapping context</span>: RWC-1</li>
<li>lay out the <code class="idl">d2</code> element</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<h6>Resolving RWC-1</h6>
<p>The top-most <span>wrapping context</span> in the layout tree contains the <code class="idl">e2</code>
exclusion. Its position and size needs to be resolved. In general, computing an
exclusion's position and size may or may not require laying out other content.
In our example, no content needs to be laid out to resolve the <code class="idl">e2</code>
exclusion's position because it is absolutely positioned and its size can be resolved
without layout either. At this point, RWC-1 is resolved and can be used when
laying inline content out.</p>
<h6>Resolving RWC-2</h6>
<p>The process is similar: the position of the
<code class="idl">e1</code> exclusion needs to be resolved. Again, resolving the exclusion's
position and size may require processing the containing block (d1 here).
It is the case here because the size and position of
<code class="idl">e1</code> depend on resolving the percentage lengths. The percentages are relative
to the size of
<code class="idl">d1</code>'s box. As a result, in order to resolve
View remainder of file in raw view