Skip to content

Commit 653c7a9

Browse files
vhardyvhardy
committed
First pass at processing model example
1 parent b6487d6 commit 653c7a9

2 files changed

Lines changed: 630 additions & 475 deletions

File tree

‎css3-exclusions/Exclusions.src.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -769,6 +769,109 @@ <h3 id="exclusions-order">Exclusions order</h3>
769769
This module does not depend on any particular positioning scheme.
770770
</p>
771771

772+
<h3 id="exclusions-processing-model">Processing model</h3>
773+
774+
<h4 id="exclusions-processing-model-example">Example</h4>
775+
776+
<p>This section illustrates the exclusions processing model with an example. It is meant
777+
to be simple. Yet, it contains enough complexity to address the issues of
778+
layout dependencies and re-layout.</p>
779+
780+
781+
<p>The code snippet in the following example has two exclusions affecting
782+
the document's in-line content.</p>
783+
784+
<div class="example">
785+
<pre class="code idl">
786+
&lt;html&gt;
787+
&lt;body&gt;
788+
&lt;div id="d1" style="width:100%;height:auto;position:relative"&gt;
789+
&lt;p&gt;Lorem ipsusm ...&lt;/p&gt;
790+
&lt;p id="e1" style="position:absolute; left:50%; top:50%;
791+
width:40%;height:40%; margin-left:-20%;" &gt;&lt/p&gt;
792+
&lt;/div&gt;
793+
&lt;div id="d2" style="width:100%;height:auto;position:static"&gt;
794+
&lt;p&gt;Lorem ipsusm ...&lt;/p&gt;
795+
&lt;p id="e2" style="position:absolute; right:5ex; top:1em;
796+
width:12ex;height:10em; margin-left:-20%;" &gt;&lt/p&gt;
797+
&lt;/div&gt;
798+
&lt;/body&gt;
799+
&lt;/html&gt;
800+
</pre>
801+
</div>
802+
<p>The following figures illustrates the document's DOM tree, the block boxes generated
803+
by the document and the rendering tree for the boxes.</p>
804+
805+
<div class="figure">
806+
<img src="images/processing-model-example-dom.svg" width="200" />
807+
<p class="caption">Processing model example: DOM tree</p>
808+
</div>
809+
810+
<div class="figure">
811+
<img src="images/processing-model-example-block-boxes.svg" width="400" />
812+
<p class="caption">Processing model example: block boxes</p>
813+
</div>
814+
815+
<div class="figure">
816+
<img src="images/processing-model-example-layout-tree.svg" width="250" />
817+
<p class="caption">Processing model example: box layout tree</p>
818+
</div>
819+
820+
<p>The figures illustrate how the boxes corresponding to the element sometimes
821+
have a different containment hierarchy in the layout tree than in the DOM tree.
822+
For example, the block generated by <code class="idl">e1</code> is positioned in
823+
its containing block, which is the <code class="idl">d1-block</code>, because
824+
<code class="idl">e1</code> is absolutely positioned and <code class="idl">d1</code>
825+
is relatively positioned. However, while <code class="idl">e2</code> is also absolutely
826+
positioned, its containing block is the initial containing block (ICB). See the
827+
section 10.1 of the CSS 2.1 specification ([[!CSS21]]) for details.</p>
828+
829+
<p>As a result of the computation of containing blocks for the tree, the elements belonging
830+
to the wrapping contexts of all the elements can be computed:</p>
831+
832+
<ul>
833+
<li>The wrapping context for the html element contains the <code class="idl">e2</code> element</li>
834+
<li>The wrapping context for the body element inherits the html element's wrapping context</li>
835+
<li>The wrapping context for <code class="idl">d1</code> inherits the body element's
836+
wrapping context and adds the <code class="idl">e1</code> exclusion to it. So the wrapping
837+
context is made of both <code class="idl">e1</code> and <code class="idl">e2</code></li>
838+
<li>The wrapping context for <code class="idl">d2</code> inherits the body element's
839+
wrapping context.</li>
840+
</ul>
841+
842+
<p>With the wrapping contexts elements known, layout can start. During that process, the position
843+
of exclusions belonging to the wrapping contexts will be computed.</p>
844+
<p>The first step requires positioning the
845+
<code class="idl">e2</code> exclusion. This may or many not require laying out other content.
846+
In our example, no content needs to be laid out to compute the <code class="idl">e2</code>
847+
exclusion's position. With the exclusion's position computed, layout can proceed and
848+
inline content in the <code class="idl">html</code>, <code class="idl">body</code>,
849+
<code class="idl">d1</code> and
850+
<code class="idl">d2</code> elements will flow around the exclusion.</p>
851+
852+
<p>When laying out <code class="idl">d1</code>, the process is similar: the position of the
853+
<code class="idl">e1</code>exclusion needs to be computed. Again, computing the exclusion's
854+
position and size may require a layout of the element. It is the case here because the size
855+
and position of
856+
<code class="idl">e1</code> depends on resolving the percentage lengths used for
857+
the position and the size. The percentages are relative to the size of
858+
<code class="idl">d1</code> which requires a layout. As a result, in order to compute
859+
a size for <code class="idl">d1</code>, a first layout of <code class="idl">d1</code>
860+
is done with a wrapping context only containing the <code class="idl">e2</code>
861+
exclusion (whose size and position have been resolved already). The layout will yield a
862+
position and size for <code class="idl">e1</code>.
863+
</p>
864+
<p>At this point, the wrapping context positions for the <code class="idl">d1</code>
865+
wrapping context are fully computed and the final layout happens: the in-line
866+
content wraps around the <code class="idl">e1</code> and <code class="idl">e2</code>
867+
exclusions.</p>
868+
869+
<p>The important aspect of the above processing example is that once a first layout
870+
(if needed) is done to compute an exclusion's position and size, the position and size of the
871+
exclusion is not recomputed if the element's size changes, during a new layout, because of the
872+
influence of the exclusion itself. This is what breaks the circular dependency between the
873+
layout and the exclusions.</p>
874+
772875
<!-- End section "Exclusions" -->
773876

774877
<h2 id="shapes">Shapes</h2>

0 commit comments

Comments
 (0)