Skip to content

Commit c4b83b7

Browse files
vhardyvhardy
committed
Working on processing model example. In progress.
1 parent 1806fe5 commit c4b83b7

2 files changed

Lines changed: 209 additions & 101 deletions

File tree

‎css3-exclusions/Exclusions.src.html‎

Lines changed: 85 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -793,91 +793,132 @@ <h4 id="exclusions-processing-model-example">Example</h4>
793793
&lt;html&gt;
794794
&lt;body&gt;
795795
&lt;div id="d1" style="width:100%;height:auto;position:relative"&gt;
796-
&lt;p&gt;Lorem ipsusm ...&lt;/p&gt;
796+
Lorem ipsusm ...
797797
&lt;p id="e1" style="position:absolute; left:50%; top:50%;
798798
width:40%;height:40%; margin-left:-20%;" &gt;&lt/p&gt;
799799
&lt;/div&gt;
800800
&lt;div id="d2" style="width:100%;height:auto;position:static"&gt;
801-
&lt;p&gt;Lorem ipsusm ...&lt;/p&gt;
801+
Lorem ipsusm ...
802802
&lt;p id="e2" style="position:absolute; right:5ex; top:1em;
803803
width:12ex;height:10em; margin-left:-20%;" &gt;&lt/p&gt;
804804
&lt;/div&gt;
805805
&lt;/body&gt;
806806
&lt;/html&gt;
807807
</pre>
808808
</div>
809-
<p>The following figures illustrates the document's DOM tree, the block boxes generated
810-
by the document and the rendering tree for the boxes.</p>
811-
809+
<p>The following figures illustrate:</p>
810+
811+
<ul>
812+
<li>the document's DOM tree</li>
813+
<li>the boxes generated by block elements in the tree</li>
814+
<li>the layout tree for block boxes</p>
815+
</ul>
816+
812817
<div class="figure">
813818
<img src="images/processing-model-example-dom.svg" width="200" />
814-
<p class="caption">Processing model example: DOM tree</p>
819+
<p class="caption">DOM tree</p>
815820
</div>
816821

817822
<div class="figure">
818823
<img src="images/processing-model-example-block-boxes.svg" width="400" />
819-
<p class="caption">Processing model example: block boxes</p>
824+
<p class="caption">Boxes of block elements</p>
820825
</div>
821826

822827
<div class="figure">
823828
<img src="images/processing-model-example-layout-tree.svg" width="250" />
824-
<p class="caption">Processing model example: box layout tree</p>
829+
<p class="caption">Layout tree for block boxes</p>
825830
</div>
826831

827832
<p>The figures illustrate how the boxes corresponding to the element sometimes
828833
have a different containment hierarchy in the layout tree than in the DOM tree.
829-
For example, the block generated by <code class="idl">e1</code> is positioned in
830-
its containing block, which is the <code class="idl">d1-block</code>, because
834+
For example, the box generated by <code class="idl">e1</code> is positioned in
835+
its containing block's box, which is the <code class="idl">d1-block</code> box, because
831836
<code class="idl">e1</code> is absolutely positioned and <code class="idl">d1</code>
832837
is relatively positioned. However, while <code class="idl">e2</code> is also absolutely
833838
positioned, its containing block is the initial containing block (ICB). See the
834839
section 10.1 of the CSS 2.1 specification ([[!CSS21]]) for details.</p>
835840

836-
<p>As a result of the computation of containing blocks for the tree, the elements belonging
841+
<h5>Step 1: resolve exclusion boxes belonging to each wrapping context</h5>
842+
843+
<p>As a result of the computation of containing blocks for the tree, the boxes belonging
837844
to the wrapping contexts of all the elements can be computed:</p>
838845

839846
<ul>
840-
<li>The wrapping context for the html element contains the <code class="idl">e2</code> element</li>
841-
<li>The wrapping context for the body element inherits the html element's wrapping context</li>
847+
<li>The wrapping context for the html element contains the <code class="idl">e2</code> box: WC-1 (Wrapping Context 1)</li>
848+
<li>The wrapping context for the body element inherits the html element's wrapping context: WC-1</li>
842849
<li>The wrapping context for <code class="idl">d1</code> inherits the body element's
843-
wrapping context and adds the <code class="idl">e1</code> exclusion to it. So the wrapping
844-
context is made of both <code class="idl">e1</code> and <code class="idl">e2</code></li>
850+
wrapping context and adds the <code class="idl">e1</code> box to it. So the wrapping
851+
context is made of both the <code class="idl">e1</code> box and the
852+
<code class="idl">e2</code> box: WC-2</li>
845853
<li>The wrapping context for <code class="idl">d2</code> inherits the body element's
846-
wrapping context.</li>
854+
wrapping context: WC-1</li>
847855
</ul>
848856

849-
<p>With the wrapping contexts elements known, layout can start. During that process, the position
850-
of exclusions belonging to the wrapping contexts will be computed.</p>
851-
<p>The first step requires positioning the
852-
<code class="idl">e2</code> exclusion. This may or many not require laying out other content.
857+
<h5>Step 2: resolve wrapping contexts and layout containing blocks</h5>
858+
859+
<p>In this step, each containing block is processed in turn. For each containing block,
860+
we (conceptually) go through two phases:</p>
861+
<ol>
862+
<li>resolve the wrapping context</li>
863+
<li>layout the containing block</li>
864+
</ol>
865+
866+
<p>In our example, this breaks down to:</p>
867+
<ol>
868+
<li>resolve the position and size of the exclusions belonging to the wrapping context. We call this
869+
step 'resolve the wrapping context'. Let's call the initial containing block's wrapping context RWC-1 (Resolved Wrapping Context 1).</li>
870+
<li>layout the initial containing block (i.e., layout its content):
871+
<ol>
872+
<li>resolve the html element's wrapping context: RWC-1</li>
873+
<li>layout the html element:
874+
<ol>
875+
<li>resolve the body element's wrapping context: RWC-1</li>
876+
<li>layout the body element:
877+
<ol>
878+
<li>resolve the d1 element's wrapping context: RWC-2</li>
879+
<li>layout the d1 element</li>
880+
<li>resolve the d2 element's wrapping context: RWC-1</li>
881+
<li>layout the d2 element</li>
882+
</ol>
883+
</li>
884+
</ol>
885+
</li>
886+
</ol>
887+
</li>
888+
</ol>
889+
890+
<h6>Computing RWC-1</h6>
891+
892+
<p>The top most wrapping context, in the layout tree, contains the <code class="idl">e2</code>
893+
exclusion. Its position and size needs to be computed. In general, computing an
894+
exclusion's position and size may or may not require laying out other content.
853895
In our example, no content needs to be laid out to compute the <code class="idl">e2</code>
854-
exclusion's position. With the exclusion's position computed, layout can proceed and
855-
inline content in the <code class="idl">html</code>, <code class="idl">body</code>,
856-
<code class="idl">d1</code> and
857-
<code class="idl">d2</code> elements will flow around the exclusion.</p>
896+
exclusion's position because it is absolutely positioned and its size can be computed
897+
without layout either. At this point, RWC-1 is resolved and can be used during
898+
layout of inline content.</p>
858899

859-
<p>When laying out <code class="idl">d1</code>, the process is similar: the position of the
900+
<h6>Computing RWC-2</h6>
901+
902+
<p>The process is similar: the position of the
860903
<code class="idl">e1</code>exclusion needs to be computed. Again, computing the exclusion's
861-
position and size may require a layout of the element. It is the case here because the size
862-
and position of
863-
<code class="idl">e1</code> depends on resolving the percentage lengths used for
864-
the position and the size. The percentages are relative to the size of
865-
<code class="idl">d1</code> which requires a layout. As a result, in order to compute
866-
a size for <code class="idl">d1</code>, a first layout of <code class="idl">d1</code>
867-
is done with a wrapping context only containing the <code class="idl">e2</code>
868-
exclusion (whose size and position have been resolved already). The layout will yield a
869-
position and size for <code class="idl">e1</code>.
904+
position and size may require processing the containing block (d1 here).
905+
It is the case here because the size and position of
906+
<code class="idl">e1</code> depend on resolving the percentage lengths. The percentages are relative
907+
to the size of
908+
<code class="idl">d1</code>'s box. As a result, in order to compute
909+
a size for <code class="idl">d1</code>'s box, a first layout of <code class="idl">d1</code>
910+
is done with an empty wrapping context. The layout yields a
911+
position and size for <code class="idl">e1</code>'s box.
870912
</p>
871-
<p>At this point, the wrapping context positions for the <code class="idl">d1</code>
872-
wrapping context are fully computed and the final layout happens: the in-line
873-
content wraps around the <code class="idl">e1</code> and <code class="idl">e2</code>
874-
exclusions.</p>
875-
876-
<p>The important aspect of the above processing example is that once a first layout
877-
(if needed) is done to compute an exclusion's position and size, the position and size of the
878-
exclusion is not recomputed if the element's size changes, during a new layout, because of the
879-
influence of the exclusion itself. This is what breaks the circular dependency between the
880-
layout and the exclusions.</p>
913+
<p>At this point, RWC-2 is resolved because the position and size of both
914+
e1 and e2 and computed.</p>
915+
916+
<p class="note">The important aspect of the above processing example is that once an element's wrapping context
917+
is resolved (by computing its exclusions' position and size), the position and size of the
918+
exclusions are not recomputed if the element's size changes between the layout that may be done with
919+
an empty wrapping context (as for RWC-2) and the layout done with the resolved wrapping context.
920+
This is what breaks the possible circular dependency between the resolution of wrapping contexts
921+
and the layout of containing blocks.</p>
881922

882923
<!-- End section "Exclusions" -->
883924

0 commit comments

Comments
 (0)