- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 09 Feb 2012 13:33:06 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-exclusions
In directory hutz:/tmp/cvs-serv19933
Modified Files:
Exclusions.src.html Overview.html
Log Message:
First pass at processing model example
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Overview.html,v
retrieving revision 1.29
retrieving revision 1.30
diff -u -d -r1.29 -r1.30
--- Overview.html 8 Feb 2012 10:06:38 -0000 1.29
+++ Overview.html 9 Feb 2012 13:33:04 -0000 1.30
@@ -111,12 +111,12 @@
<body>
<div class=head id=div-head> <!--begin-logo-->
- <p id=x><a href="http://www.w3.org/"><img alt=W3C height=48
+ <p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 February
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 February
[...1482 lines suppressed...]
- <p id=the-specification-will-remain-candidate-> The specification will
- remain Candidate Recommendation for at least six months.
+ <p> The specification will remain Candidate Recommendation for at least six
+ months.
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
- <p id=this-specification-is-made-possible-by-i> This specification is made
- possible by input from Stephen Zilles, Alexandru Chiculita, Andrei Bucur,
- Mihnea Ovidenie, Peter Sorotokin, Virgil Palanciuc, Alan Stearns, Arno
- Gourdol, Eugene Veselov, Arron Eicholz, Alex Mogilevsky, Chris Jones,
- Marcus Mielke, and the CSS Working Group members.
+ <p> This specification is made possible by input from Stephen Zilles,
+ Alexandru Chiculita, Andrei Bucur, Mihnea Ovidenie, Peter Sorotokin,
+ Virgil Palanciuc, Alan Stearns, Arno Gourdol, Eugene Veselov, Arron
+ Eicholz, Alex Mogilevsky, Chris Jones, Marcus Mielke, and the CSS Working
+ Group members.
<h2 class=no-num id=references>References</h2>
Index: Exclusions.src.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Exclusions.src.html,v
retrieving revision 1.28
retrieving revision 1.29
diff -u -d -r1.28 -r1.29
--- Exclusions.src.html 8 Feb 2012 10:06:38 -0000 1.28
+++ Exclusions.src.html 9 Feb 2012 13:33:04 -0000 1.29
@@ -769,6 +769,109 @@
This module does not depend on any particular positioning scheme.
</p>
+ <h3 id="exclusions-processing-model">Processing model</h3>
+
+ <h4 id="exclusions-processing-model-example">Example</h4>
+
+ <p>This section illustrates the exclusions processing model with an example. It is meant
+ to be simple. Yet, it contains enough complexity to address the issues of
+ layout dependencies and re-layout.</p>
+
+
+ <p>The code snippet in the following example has two exclusions affecting
+ the document's in-line content.</p>
+
+ <div class="example">
+ <pre class="code idl">
+ <html>
+ <body>
+ <div id="d1" style="width:100%;height:auto;position:relative">
+ <p>Lorem ipsusm ...</p>
+ <p id="e1" style="position:absolute; left:50%; top:50%;
+ width:40%;height:40%; margin-left:-20%;" ></p>
+ </div>
+ <div id="d2" style="width:100%;height:auto;position:static">
+ <p>Lorem ipsusm ...</p>
+ <p id="e2" style="position:absolute; right:5ex; top:1em;
+ width:12ex;height:10em; margin-left:-20%;" ></p>
+ </div>
+ </body>
+ </html>
+ </pre>
+ </div>
+ <p>The following figures illustrates the document's DOM tree, the block boxes generated
+ by the document and the rendering tree for the boxes.</p>
+
+ <div class="figure">
+ <img src="images/processing-model-example-dom.svg" width="200" />
+ <p class="caption">Processing model example: DOM tree</p>
+ </div>
+
+ <div class="figure">
+ <img src="images/processing-model-example-block-boxes.svg" width="400" />
+ <p class="caption">Processing model example: block boxes</p>
+ </div>
+
+ <div class="figure">
+ <img src="images/processing-model-example-layout-tree.svg" width="250" />
+ <p class="caption">Processing model example: box layout tree</p>
+ </div>
+
+ <p>The figures illustrate how the boxes corresponding to the element sometimes
+ have a different containment hierarchy in the layout tree than in the DOM tree.
+ For example, the block generated by <code class="idl">e1</code> is positioned in
+ its containing block, which is the <code class="idl">d1-block</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 elements belonging
+ to the wrapping contexts of all the elements can be computed:</p>
+
+ <ul>
+ <li>The wrapping context for the html element contains the <code class="idl">e2</code> element</li>
+ <li>The wrapping context for the body element inherits the html element's wrapping context</li>
+ <li>The wrapping context for <code class="idl">d1</code> inherits the body element's
+ wrapping context and adds the <code class="idl">e1</code> exclusion to it. So the wrapping
+ context is made of both <code class="idl">e1</code> and <code class="idl">e2</code></li>
+ <li>The wrapping context for <code class="idl">d2</code> inherits the body element's
+ wrapping context.</li>
+ </ul>
+
+ <p>With the wrapping contexts elements known, layout can start. During that process, the position
+ of exclusions belonging to the wrapping contexts will be computed.</p>
+ <p>The first step requires positioning the
+ <code class="idl">e2</code> exclusion. This may or many not require laying out other content.
+ In our example, no content needs to be laid out to compute the <code class="idl">e2</code>
+ exclusion's position. With the exclusion's position computed, layout can proceed and
+ inline content in the <code class="idl">html</code>, <code class="idl">body</code>,
+ <code class="idl">d1</code> and
+ <code class="idl">d2</code> elements will flow around the exclusion.</p>
+
+ <p>When laying out <code class="idl">d1</code>, the process is similar: the position of the
+ <code class="idl">e1</code>exclusion needs to be computed. Again, computing the exclusion's
+ position and size may require a layout of the element. It is the case here because the size
+ and position of
+ <code class="idl">e1</code> depends on resolving the percentage lengths used for
+ the position and the size. The percentages are relative to the size of
+ <code class="idl">d1</code> which requires a layout. As a result, in order to compute
+ a size for <code class="idl">d1</code>, a first layout of <code class="idl">d1</code>
+ is done with a wrapping context only containing the <code class="idl">e2</code>
+ exclusion (whose size and position have been resolved already). The layout will yield a
+ position and size for <code class="idl">e1</code>.
+ </p>
+ <p>At this point, the wrapping context positions for the <code class="idl">d1</code>
+ wrapping context are fully computed and the final layout happens: the in-line
+ content wraps around the <code class="idl">e1</code> and <code class="idl">e2</code>
+ exclusions.</p>
+
+ <p>The important aspect of the above processing example is that once a first layout
+ (if needed) is done to compute an exclusion's position and size, the position and size of the
+ exclusion is not recomputed if the element's size changes, during a new layout, because of the
+ influence of the exclusion itself. This is what breaks the circular dependency between the
+ layout and the exclusions.</p>
+
<!-- End section "Exclusions" -->
<h2 id="shapes">Shapes</h2>
Received on Thursday, 9 February 2012 13:33:12 UTC