W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-exclusions Exclusions.src.html,1.28,1.29 Overview.html,1.29,1.30

From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
Date: Thu, 09 Feb 2012 13:33:06 +0000
To: public-css-commits@w3.org
Message-Id: <E1RvU7W-0005CA-9d@lionel-hutz.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">
+    &lt;html&gt;
+        &lt;body&gt;
+            &lt;div id="d1" style="width:100%;height:auto;position:relative"&gt;
+                &lt;p&gt;Lorem ipsusm ...&lt;/p&gt;
+                &lt;p id="e1" style="position:absolute; left:50%; top:50%; 
+                                  width:40%;height:40%; margin-left:-20%;" &gt;&lt/p&gt;
+            &lt;/div&gt;
+            &lt;div id="d2" style="width:100%;height:auto;position:static"&gt;
+                &lt;p&gt;Lorem ipsusm ...&lt;/p&gt;
+                &lt;p id="e2" style="position:absolute; right:5ex; top:1em; 
+                                  width:12ex;height:10em; margin-left:-20%;" &gt;&lt/p&gt;
+            &lt;/div&gt;
+        &lt;/body&gt;
+    &lt;/html&gt;
+        </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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC