Added/fixed/improved examples and reference images

Author: vhardy

css3-exclusions/Exclusions.src.html

@@ -351,10 +351,10 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
 
 &lt;style type="text/css"&gt; 
 #grid {
-    width: 100em;
-    height: 100em;
+    width: 30em;
+    height: 30em;
     display: grid;
-    grid-columns: 50% 20% 20%;
+    grid-columns: 50% 25% 25%;
     grid-rows: 40% 20% 40%;
 }
 
@@ -372,6 +372,9 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
 }
 &lt;/style&gt; 
 </pre></code>
+        <p>The following figures illustrate the visual rendering for different values
+            of the 'wrap-flow' property. The gray grid lines are marking the grid cells. and the 
+            blue area is the exclusion box (positioned by the grid).</p>
         <table class="example-table">
             <tr>
                 <td><code class="html">#exclusion{ wrap-flow: auto; }</code></td>
@@ -391,11 +394,11 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
             </tr>
             <tr>
                 <td><code class="html">#exclusion{ wrap-flow: maximum; }</code></td>
-                <td><code class="html">#exclusion{ wrap-flow: maximum; }</code></td>
+                <td><code class="html">#exclusion{ wrap-flow: minimum; }</code></td>
             </tr>
             <tr>
-                <td><img src="images/exclusion_wrap_side_maximum_L.png" alt="Example rendering for wrap-side: maximum" /></td>
-                <td><img src="images/exclusion_wrap_side_maximum_R.png" alt="Example rendering for wrap-side: maximum" /></td>
+                <td><img src="images/exclusion_wrap_side_maximum.png" alt="Example rendering for wrap-side: maximum" /></td>
+                <td><img src="images/exclusion_wrap_side_minimum.png" alt="Example rendering for wrap-side: maximum" /></td>
             </tr>
             <tr>
                 <td><code class="html">#exclusion{ wrap-flow: clear; }</code></td>
@@ -407,6 +410,7 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
             </tr>
         </table>
     </div>
+    
     <!-- End section "wrap-flow Property" -->
     <!-- End section "Declaring Exclusions" -->
 
@@ -705,7 +709,7 @@ <h3 id="exclusions-order">Exclusions order</h3>
         appears on top of all other exclusion, thus it affects the inline flow content of
         all other preceding exclusions or elements descendant of the same containing block.
         The 'z-index' property can be used to change the ordering of 
-        <a href="http://www.w3.org/TR/CSS2/visuren.html#choose-position"positioned</a> exclusion
+        <a href="http://www.w3.org/TR/CSS2/visuren.html#choose-position">positioned</a> exclusion
         boxes (see [[!CSS21]]). Statically positioned exclusions are not affected by the 
         'z-index' property and thus follow the painting order.
     </p>
@@ -845,19 +849,53 @@ <h4 id="exclusions-processing-model-example">Example</h4>
 
         <div class="example">
         <pre class="html">&lt;html&gt;
-    &lt;body&gt;
-        &lt;div id="d1" style="position:relative"&gt;
-            Lorem ipsusm ...
-            &lt;p id="e1" style="wrap-flow: both;position:absolute; left:50%; top:50%; 
-                              width:40%;height:40%; 
-                              margin-left:-20%;margin-right:-20%" &gt;&lt/p&gt;
-        &lt;/div&gt;
-        &lt;div id="d2" style="width:100%;height:auto;position:static"&gt;
-            Lorem ipsusm ...
-            &lt;p id="e2" style="wrap-flow: both;position:absolute; right:5ex; top:1em; 
-                              width:12ex;height:10em;" &gt;&lt/p&gt;
-        &lt;/div&gt;
-    &lt;/body&gt;
+&lt;style&gt;
+#d1 {
+    position:relative;
+    height: auto;
+    color: #46A4E9;
+    border: 1px solid gray;
+}
+
+#e1 {
+    -webkit-wrap-flow: both;
+    position: absolute; 
+    left: 50%; 
+    top: 50%; 
+    width: 40%; 
+    height: 40%; 
+    border: 1px solid red;
+    margin-left: -20%;
+    margin-top: -20%;
+}
+
+#d2 {
+    position: static;
+    width: 100%;
+    height: auto;
+    color: #808080;
+}
+
+#e2 {
+    -webkit-wrap-flow: both;
+    position: absolute; 
+    right: 5ex; 
+    top: 1em; 
+    width: 12ex;
+    height: 10em; 
+    border: 1px solid lime;
+}
+&lt;/style&gt;
+&lt;body&gt;
+    &lt;div id="d1"&gt;
+        Lorem ipsusm ...
+        &lt;p id="e1"&gt;&lt/p&gt;
+    &lt;/div&gt;
+    &lt;div id="d2"&gt;
+        Lorem ipsusm ...
+        &lt;p id="e2" &gt;&lt/p&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
 &lt;/html&gt;</pre>
         </div>
         <p>The following figures illustrate:</p>
@@ -1045,12 +1083,17 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
     </p>
 
     <div class="example">
-        <p>CSS 'shape' and CSS box model relation.</p>
+        <p>CSS 'shape-outside' and CSS box model relation: the red box illustrates the exclusion element's
+            content box, which is unmodified and subject to normal CSS positioning (here absolute positioning).</p>
 <pre><code class="html">
 &lt;style type="text/css"&gt; 
     .exclusion  {
     	wrap-flow: both; 
     	position: absolute; 
+    	top: 25%;
+    	left: 25%;
+    	width: 50%;
+    	height: 50%;
     	shape-outside: circle(50%, 50%, 50%); 
     	border: 1px solid red; 
     } 
@@ -1063,7 +1106,44 @@ <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and
 </code></pre>
         <img class="singleImgExample" src="images/shapes_CSS2.1_MBP.png" alt="Example rendering of circle shape and box model."  style="max-width:40%"/>
     </div>
+    
+      <div class="example">
+          <p>In the following example the left and right floating <code class="html">div</code> elements 
+              specify a triangular shape using the 'shape-outside' property.</p>
+
+<pre><code class="html">
+&lt;div style="text-align:center;"&gt;
+      &lt;div id="float-left"&gt;&lt;/div&gt;
+      &lt;div id="float-right"&gt;&lt;/div&gt;
+      &lt;div&gt;
+      Sometimes a web page's text content appears to be
+      funneling your attention towards a spot on the page
+      to drive you to follow a particular link.  Sometimes
+      you don't notice.
+      &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;style type="text/css"&gt;
+#float-left {
+      wrap-flow: right
+      shape-outside: polygon(0,0 100%,100% 0,100%);
+      float: left;
+      width: 40%;
+      height: 12ex;
+  }
+
+#float-right {
+      wrap-flow: left;
+      shape-outside: polygon(100%,0 100%,100% 0,100%);
+      float: right;
+      width: 40%;
+      height: 12ex;
+  }
+  &lt;/style&gt;
+&lt;/div&gt;</code></pre>
 
+        <img class="singleImgExample" src="images/float-shape-outside.png" alt="Using the shape-outside property with a float"/>
+      </div>
       <h3 id="shapes-from-svg-syntax">Shapes from SVG Syntax</h3>
       <p>
           Shapes can be specified using <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>.

css3-exclusions/Overview.html

@@ -40,14 +40,14 @@
 
    <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 21 April 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 April 2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
-    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120421/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120421/</a></dd>-->
+    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120425/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120425/</a></dd>-->
 
     <dt>Latest version:
 
@@ -655,10 +655,10 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
 
 &lt;style type="text/css"&gt; 
 #grid {
-    width: 100em;
-    height: 100em;
+    width: 30em;
+    height: 30em;
     display: grid;
-    grid-columns: 50% 20% 20%;
+    grid-columns: 50% 25% 25%;
     grid-rows: 40% 20% 40%;
 }
 
@@ -677,6 +677,12 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
 &lt;/style&gt; 
 </pre>
 
+   <p>The following figures illustrate the visual rendering for different
+    values of the &lsquo;<a href="#wrap-flow"><code
+    class=property>wrap-flow</code></a>&rsquo; property. The gray grid lines
+    are marking the grid cells. and the blue area is the exclusion box
+    (positioned by the grid).</p>
+
    <table class=example-table>
     <tbody>
      <tr>
@@ -706,14 +712,14 @@ <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
      <tr>
       <td><code class=html>#exclusion{ wrap-flow: maximum; }</code>
 
-      <td><code class=html>#exclusion{ wrap-flow: maximum; }</code>
+      <td><code class=html>#exclusion{ wrap-flow: minimum; }</code>
 
      <tr>
       <td><img alt="Example rendering for wrap-side: maximum"
-       src="images/exclusion_wrap_side_maximum_L.png">
+       src="images/exclusion_wrap_side_maximum.png">
 
       <td><img alt="Example rendering for wrap-side: maximum"
-       src="images/exclusion_wrap_side_maximum_R.png">
+       src="images/exclusion_wrap_side_minimum.png">
 
      <tr>
       <td><code class=html>#exclusion{ wrap-flow: clear; }</code>
@@ -1086,8 +1092,8 @@ <h3 id=exclusions-order><span class=secno>3.4. </span>Exclusions order</h3>
    descendant of the same containing block. The &lsquo;<code
    class=property>z-index</code>&rsquo; property can be used to change the
    ordering of <a
-   href="http://www.w3.org/TR/CSS2/visuren.html#choose-position"
-   positioned></a> exclusion boxes (see <a href="#CSS21"
+   href="http://www.w3.org/TR/CSS2/visuren.html#choose-position">positioned</a>
+   exclusion boxes (see <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). Statically positioned
    exclusions are not affected by the &lsquo;<code
    class=property>z-index</code>&rsquo; property and thus follow the painting
@@ -1259,19 +1265,53 @@ <h4 id=exclusions-processing-model-example><span class=secno>3.5.6.
 
   <div class=example>
    <pre class=html>&lt;html&gt;
-    &lt;body&gt;
-        &lt;div id="d1" style="position:relative"&gt;
-            Lorem ipsusm ...
-            &lt;p id="e1" style="wrap-flow: both;position:absolute; left:50%; top:50%; 
-                              width:40%;height:40%; 
-                              margin-left:-20%;margin-right:-20%" &gt;&lt/p&gt;
-        &lt;/div&gt;
-        &lt;div id="d2" style="width:100%;height:auto;position:static"&gt;
-            Lorem ipsusm ...
-            &lt;p id="e2" style="wrap-flow: both;position:absolute; right:5ex; top:1em; 
-                              width:12ex;height:10em;" &gt;&lt/p&gt;
-        &lt;/div&gt;
-    &lt;/body&gt;
+&lt;style&gt;
+#d1 {
+    position:relative;
+    height: auto;
+    color: #46A4E9;
+    border: 1px solid gray;
+}
+
+#e1 {
+    -webkit-wrap-flow: both;
+    position: absolute; 
+    left: 50%; 
+    top: 50%; 
+    width: 40%; 
+    height: 40%; 
+    border: 1px solid red;
+    margin-left: -20%;
+    margin-top: -20%;
+}
+
+#d2 {
+    position: static;
+    width: 100%;
+    height: auto;
+    color: #808080;
+}
+
+#e2 {
+    -webkit-wrap-flow: both;
+    position: absolute; 
+    right: 5ex; 
+    top: 1em; 
+    width: 12ex;
+    height: 10em; 
+    border: 1px solid lime;
+}
+&lt;/style&gt;
+&lt;body&gt;
+    &lt;div id="d1"&gt;
+        Lorem ipsusm ...
+        &lt;p id="e1"&gt;&lt/p&gt;
+    &lt;/div&gt;
+    &lt;div id="d2"&gt;
+        Lorem ipsusm ...
+        &lt;p id="e2" &gt;&lt/p&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
 &lt;/html&gt;</pre>
   </div>
 
@@ -1513,14 +1553,21 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>4.1.
    box.
 
   <div class=example>
-   <p>CSS &lsquo;<code class=property>shape</code>&rsquo; and CSS box model
-    relation.</p>
+   <p>CSS &lsquo;<a href="#shape-outside"><code
+    class=property>shape-outside</code></a>&rsquo; and CSS box model
+    relation: the red box illustrates the exclusion element's content box,
+    which is unmodified and subject to normal CSS positioning (here absolute
+    positioning).</p>
 
    <pre><code class=html>
 &lt;style type="text/css"&gt; 
     .exclusion  {
     	wrap-flow: both; 
     	position: absolute; 
+    	top: 25%;
+    	left: 25%;
+    	width: 50%;
+    	height: 50%;
     	shape-outside: circle(50%, 50%, 50%); 
     	border: 1px solid red; 
     } 
@@ -1535,6 +1582,45 @@ <h3 id=relation-to-box-model-and-float-behavior><span class=secno>4.1.
    class=singleImgExample src="images/shapes_CSS2.1_MBP.png"
    style="max-width:40%"></div>
 
+  <div class=example>
+   <p>In the following example the left and right floating <code
+    class=html>div</code> elements specify a triangular shape using the
+    &lsquo;<a href="#shape-outside"><code
+    class=property>shape-outside</code></a>&rsquo; property.</p>
+
+   <pre><code class=html>
+&lt;div style="text-align:center;"&gt;
+      &lt;div id="float-left"&gt;&lt;/div&gt;
+      &lt;div id="float-right"&gt;&lt;/div&gt;
+      &lt;div&gt;
+      Sometimes a web page's text content appears to be
+      funneling your attention towards a spot on the page
+      to drive you to follow a particular link.  Sometimes
+      you don't notice.
+      &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;style type="text/css"&gt;
+#float-left {
+      wrap-flow: right
+      shape-outside: polygon(0,0 100%,100% 0,100%);
+      float: left;
+      width: 40%;
+      height: 12ex;
+  }
+
+#float-right {
+      wrap-flow: left;
+      shape-outside: polygon(100%,0 100%,100% 0,100%);
+      float: right;
+      width: 40%;
+      height: 12ex;
+  }
+  &lt;/style&gt;
+&lt;/div&gt;</code></pre>
+   <img alt="Using the shape-outside property with a float"
+   class=singleImgExample src="images/float-shape-outside.png"></div>
+
   <h3 id=shapes-from-svg-syntax><span class=secno>4.2. </span>Shapes from SVG
    Syntax</h3>