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

csswg/css3-exclusions Exclusions.src.html,1.26,1.27 Overview.html,1.27,1.28

From: Rossen Atanassov via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 07 Feb 2012 16:58:42 +0000
To: public-css-commits@w3.org
Message-Id: <E1RuoNO-0006yY-FX@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-exclusions
In directory hutz:/tmp/cvs-serv26557

Modified Files:
	Exclusions.src.html Overview.html 
Log Message:
Adding new styling for issues in the spec.
Removed the section for the proposed Processing model since it relied on a particular positioning scheme which is not in the scope of this module.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Overview.html,v
retrieving revision 1.27
retrieving revision 1.28
diff -u -d -r1.27 -r1.28
--- Overview.html	29 Jan 2012 06:29:55 -0000	1.27
+++ Overview.html	7 Feb 2012 16:58:40 -0000	1.28
@@ -30,31 +30,79 @@
     .example-table tr td img {
     	width: 90%;
     }
-    
-    a.toggle {
-        position: fixed;
-        top: 0.5em;
-        right: 0.5em;
-    	font-size: smaller;
-    	color: gray;
-    	opacity: 0.2;
+
+    @media screen and (min-width: 68em){             
+        .issue-marker {
+            position: absolute;
+            width: 20ex;
+            margin-left: -22ex;
+            text-align: right;
+            margin-bottom: 1em;
+        }
+
+        div.issue-marker .issue-marker {
+            position: static;
+            width: auto;
+            margin-left: 0;
+            text-align: right;
+        }  
+
+        div.issue-marker {
+            position: absolute;
+            width: 20ex;
+            margin-left: -22ex;
+        }
     }
 
-    a.toggle:hover {
-        opacity: 1;
-        color: #46A4E9;
+    @media screen and (max-width: 68em){
+        .issue-marker {
+            margin-bottom: 1em;
+        }
+
+        .issue-marker a:link {
+            padding-left: 0.5em;
+        }
+    } 
+
+      .issue-marker {
+          background:#eee;  
+          border:1px solid #ddd; 
+          font-size: 1em;
+      }
+          
+      .issue-marker.wrapper {
+          background: none;
+          border: none;
+      }
+
+      .issue-marker a:link {
+          color: #c00;
+          background: none;
+          font-weight: normal;
+          padding-right: 0.5em;
+      }
+
+    .issue-details {  
+        padding:0.5em;
+        font-size: 0.8em;
+        line-height: 1.5;
     }
-    
-    .issue-marker a {
-         background: #c00;
-         color: white;
-         font-weight: bold;
-         padding: 0.5em;
-     }
-     
-     .issue-marker-resolved a {
-         background: green;
-     }
+
+    .issue-details p{
+        padding:0;
+        margin:0; 
+    }           
+
+    .issue-details .status{
+        background:#333;   
+        color:white;
+        float:left;    
+        padding:0.15em 0.8em;    
+        font-size:0.8em;
+        margin-right:0.8em;
+        text-transform:uppercase;      
+    }
+ 
   </style>
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   type="text/css">
@@ -68,7 +116,7 @@
 
    <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 29 January
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 February
     2012</h2>
 
    <dl>
@@ -76,7 +124,7 @@
 
     <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-20120129/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120129/</a></dd>-->
+    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120207/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120207/</a></dd>-->
 
     <dt>Latest version:
 
@@ -138,9 +186,8 @@
   <h2 class="no-num no-toc" id=abstract>Abstract</h2>
 
   <p id=css-exclusions-define-arbitrary-areas-ar> CSS exclusions define
-   arbitrary areas around which inline content can flow. Unlike CSS floats,
-   which they extend, CSS exclusions can be positioned with any CSS
-   positioning schemes.
+   arbitrary areas around which inline content can flow. CSS exclusions can
+   be defined on any CSS block-level elements.
 
   <p id=css-shapes-control-the-geometric-shapes-> CSS Shapes control the
    geometric shapes used for wrapping inline flow content outside or inside
@@ -241,10 +288,6 @@
 
      <li id=exclusions-order-><a href="#exclusions-order"><span
       class=secno>3.4. </span>Exclusions order</a>
-
-     <li id=exclusions-implementation-note-><a
-      href="#exclusions-implementation-note"><span class=secno>3.5.
-      </span>Exclusions implementation note</a>
     </ul>
 
    <li id=shapes-4.1.-shapes-from-svg-syntax-4.1.1><a href="#shapes"><span
@@ -355,8 +398,14 @@
 
   <p id=exclusion-area-><dfn id=exclusion-area>Exclusion area</dfn>
 
-  <div class=issue-marker><a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a></div>
+  <div class=issue-marker data-bug_id=15087 data-bug_status=NEW> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a>
+   <div class=issue-details>
+    <p class=short-desc
+     id=interaction-of-floats-and-exclusions-how>Interaction of floats and
+     exclusions (Howcome's questions)</p>
+   </div>
+  </div>
 
   <p id=the-area-used-for-excluding-inline-flow-> The area used for excluding
    inline flow content around an exclusion element. The exclusion area is
@@ -374,8 +423,13 @@
 
   <p id=wrapping-context-><dfn id=wrapping-context>Wrapping context</dfn>
 
-  <div class=issue-marker><a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a></div>
+  <div class=issue-marker data-bug_id=15086 data-bug_status=NEW> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a>
+   <div class=issue-details>
+    <p class=short-desc id=should-the-wrapping-context-be-generic-a>should
+     the wrapping context be generic and include floats?</p>
+   </div>
+  </div>
 
   <p id=the-wrapping-context-of-an-element-is-a-> The wrapping context of an
    element is a collection of &lsquo;<code class=css>exclusion
@@ -490,8 +544,9 @@
   <dl>
    <dt><dfn id=auto title="'wrap-flow'!!'auto'">auto</dfn>
 
-   <dd> For floats an exclusion is created, for all other elements an
-    exclusion is not created.
+   <dd> Exclusion is not created and inline flow content interacts with the
+    element as usual. For example it will wrap around floats and other
+    elements.
 
    <dt><dfn id=both title="'wrap-flow'!!'both'">both</dfn>
 
@@ -555,37 +610,45 @@
    <p class=caption id=combining-exclusions>Combining exclusions</p>
   </div>
 
-  <div>
-   <p id=the-above-figure-illustrates-how-exclusi>The above figure
-    illustrates how exclusions combine. The red box represents an element's
-    content box. The A, B, C and D darker gray boxes represent exclusions in
-    the element's wrapping context. A, B, C and D have their respective
-    &lsquo;<a href="#wrap-flow"><code
-    class=property>wrap-flow</code></a>&rsquo; set to &lsquo;<code
-    class=property>both</code>&rsquo;, &lsquo;<code
-    class=property>start</code>&rsquo;, &lsquo;<code
-    class=property>end</code>&rsquo; and &lsquo;<code
-    class=property>clear</code>&rsquo; respectively. The lighter gray areas
-    show the additional areas that are excluded for inline layout as a result
-    of the &lsquo;<a href="#wrap-flow"><code
-    class=property>wrap-flow</code></a>&rsquo; value. For example, the area
-    to the right of &lsquo;<code class=property>B</code>&rsquo; cannot be
-    used for inline layout because the &lsquo;<a href="#wrap-flow"><code
-    class=property>wrap-flow</code></a>&rsquo; for &lsquo;<code
-    class=property>B</code>&rsquo; is &lsquo;<code
-    class=property>start</code>&rsquo;.</p>
+  <p id=the-above-figure-illustrates-how-exclusi> The above figure
+   illustrates how exclusions are combined. The outermost box represents an
+   element's content box. The A, B, C and D darker gray boxes represent
+   exclusions in the element's wrapping context. A, B, C and D have their
+   respective &lsquo;<a href="#wrap-flow"><code
+   class=property>wrap-flow</code></a>&rsquo; set to &lsquo;<code
+   class=property>both</code>&rsquo;, &lsquo;<code
+   class=property>start</code>&rsquo;, &lsquo;<code
+   class=property>end</code>&rsquo; and &lsquo;<code
+   class=property>clear</code>&rsquo; respectively. The lighter gray areas
+   show the additional areas that are excluded for inline layout as a result
+   of the &lsquo;<a href="#wrap-flow"><code
+   class=property>wrap-flow</code></a>&rsquo; value. For example, the area to
+   the right of &lsquo;<code class=property>B</code>&rsquo; cannot be used
+   for inline layout because the &lsquo;<a href="#wrap-flow"><code
+   class=property>wrap-flow</code></a>&rsquo; for &lsquo;<code
+   class=property>B</code>&rsquo; is &lsquo;<code
+   class=property>start</code>&rsquo;.
 
-   <p id=the-background-blue-area-shows-what-area>The background &lsquo;<code
-    class=property>blue</code>&rsquo; area shows what areas are available for
-    inline content layout. All areas represented with a light or dark shade
-    of gray are not available for inline content layout.</p>
-  </div>
+  <p id=the-background-blue-area-shows-what-area> The background &lsquo;<code
+   class=property>blue</code>&rsquo; area shows what areas are available for
+   inline content layout. All areas represented with a light or dark shade of
+   gray are not available for inline content layout.
 
-  <div class="issue-marker issue-marker-resolved"><a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a></div>
+  <div class=issue-marker data-bug_id=15088 data-bug_status=FIXED> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a>
+   <div class=issue-details>
+    <p class=short-desc id=add-an-example-with-auto-height-content->Add an
+     example with auto-height content and z-index for exclusions order.</p>
+   </div>
+  </div>
 
-  <div class=issue-marker><a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a></div>
+  <div class=issue-marker data-bug_id=15084 data-bug_status=NEW> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a>
+   <div class=issue-details>
+    <p class=short-desc id=fluidity-of-the-layout-with-respect-to-d>Fluidity
+     of the layout with respect to different amounts of content</p>
+   </div>
+  </div>
 
   <div class=example>
    <p id=the-wrap-flow-property-values-applied-to> The &lsquo;<a
@@ -820,8 +883,12 @@
    href="#wrap-through"><code class=property>wrap-through</code></a>&rsquo;
    Property</h4>
 
-  <div class=issue-marker><a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a></div>
+  <div class=issue-marker data-bug_id=15085 data-bug_status=NEW> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a>
+   <div class=issue-details>
+    <p class=short-desc id=do-we-need-wrap-through>do we need wrap-through?</p>
+   </div>
+  </div>
 
   <table class=propdef>
    <tbody>
@@ -1028,14 +1095,21 @@
   </div>
   <!-- End section "Order of Exclusions" -->
 
-  <h3 id=exclusions-implementation-note><span class=secno>3.5.
-   </span>Exclusions implementation note</h3>
-
-  <div class=issue-marker> <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Bug-15183</a></div>
+  <div class=issue-marker data-bug_id=15183 data-bug_status=NEW> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Bug-15183</a>
+   <div class=issue-details>
+    <p class=short-desc id=is-the-css-exclusions-processing-model-i>Is the
+     CSS exclusions processing model incorrect?</p>
+   </div>
+  </div>
 
-  <div class=issue-marker> <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Bug-15083</a></div>
+  <div class=issue-marker data-bug_id=15083 data-bug_status=NEW> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Bug-15083</a>
+   <div class=issue-details>
+    <p class=short-desc id=concerns-over-error-accumulation-vs.-per>Concerns
+     over Error accumulation vs. performance</p>
+   </div>
+  </div>
 
   <p class=issue id=the-rules-for-exclusions-order-and-exclu> The rules for
    exclusions order and exclusions on absolutely positioned elements
@@ -1047,47 +1121,19 @@
    positioning (as these sections of this specification do) or on top of
    floats.
 
-  <p id=this-section-is-not-normative.0><em>This section is not
-   normative.</em>
-
-  <p id=exclusions-can-be-specified-on-positione> Exclusions can be specified
-   on positioned elements and elements can be positioned from their <a
-   href="http://www.w3.org/TR/CSS21/visudet.html#static-position">static
-   position</a>. Since, the static position of such elements depends on the
-   inline flow content affected by the exclusion itself; there is a circular
-   dependency between the two layout tasks. To break this circular dependency
-   a two-pass layout approach is recommended. The first layout pass computes
-   the static positions of all auto-positioned exclusions by laying out all
-   content besides exclusions. The second pass is layout of all elements
-   including all exclusions. Exclusions that depend on their static position
-   will use the position calculated during the first layout pass.
-
-  <p class=note id=note-this-may-cause-exclusions-to-overla> Note, this may
-   cause exclusions to overlap or be distant from their static position
-   (compared to non-exclusions auto-positioned elements).
-
-  <p id=similar-dependency-exists-for-exclusions> Similar dependency exists
-   for exclusions whose size or position is specified in percentage and the
-   containing block size is specified as &lsquo;<code
-   class=property>auto</code>&rsquo;. In such cases the size or position of
-   the exclusion is calculated based on the size of the containing block
-   calculated in the first layout pass.
-
-  <p id=exclusions-can-be-positioned-on-all-leve> Exclusions can be
-   positioned on all levels of nested elements. If layout is restarted on
-   every level of nesting, the time to complete layout will be exponential.
-   To avoid multiple layout passes, the restart of the second layout pass
-   should be scoped to the top-most containing block of exclusions.
-   Similarly, restarting layout for the entire document is not necessary
-   unless there are exclusions whose containing block is the initial
-   containing block.</p>
-  <!-- End section "Processing Model of Exclusions" -->
+  <p class=note id=this-module-does-not-depend-on-any-parti> This module does
+   not depend on any particular positioning scheme.</p>
   <!-- End section "Exclusions" -->
 
   <h2 id=shapes><span class=secno>4. </span>Shapes</h2>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15091 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Bug-15091</a><br>
+
+   <div class=issue-details>
+    <p class=short-desc id=simplify-the-syntax-for-shapes>Simplify the syntax
+     for shapes</p>
+   </div>
   </div>
 
   <p id=shapes-define-arbitrary-geometric-contou> Shapes define arbitrary
@@ -1100,14 +1146,6 @@
    an element's <span>content shape</span> and the element's inline content
    will flow within that shape.
 
-  <p id=flow-container-><dfn id=flow-container>Flow Container</dfn>
-
-  <p id=a-flow-container-is-an-element-with-a-di> A flow container is an
-   element with a &lsquo;<code class=property>display</code>&rsquo; value
-   that is computed as &lsquo;<code class=property>block</code>&rsquo;,
-   &lsquo;<code class=property>table-cell</code>&rsquo; or &lsquo;<code
-   class=property>inline-block</code>&rsquo;.
-
   <p class=note id=note-while-the-boundaries-used-for-wrapp> Note, while the
    boundaries used for wrapping inline flow content outside and inside an
    element can be defined using shapes, the actual box model does not change.
@@ -1151,7 +1189,9 @@
    are supported by the CSS shapes module.
 
   <dl>
-   <dt>rectangle(x, y, width, height, [[rx], ry])
+   <dt>rectangle(&lt;length&gt;{4} [&lt;&lsquo;<code
+    class=property>border-corner-shape</code>&rsquo;&gt;
+    &lt;length&gt;{1,2}]? )
 
    <dd>
     <ul>
@@ -1167,7 +1207,7 @@
       off the corners of the rectangle
     </ul>
 
-   <dt>circle(cx, cy, r)
+   <dt>circle(&lt;lentgh&gt;{3})
 
    <dd>
     <ul>
@@ -1181,7 +1221,7 @@
       the circle
     </ul>
 
-   <dt>ellipse(cx, cy, rx, ry)
+   <dt>ellipse(&lt;lentgh&gt;{4})
 
    <dd>
     <ul>
@@ -1198,7 +1238,7 @@
       y-axis radius of the ellipse
     </ul>
 
-   <dt>polygon([fillRule], x1, y1, x2, y2, x3, y3, … xn, yn)
+   <dt>polygon([&lt;fill-rule&gt;,]? &lt;length&gt;{2}#)
 
    <dd>
     <ul>
@@ -1270,12 +1310,35 @@
 
   <h3 id=shapes-from-image><span class=secno>4.2. </span>Shapes from Image</h3>
 
-  <div class=issue-marker> <a
+  <div class=issue-marker data-bug_id=15093 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Bug-15093</a><br>
-   <a
+
+   <div class=issue-details>
+    <p class=short-desc id=do-we-need-to-provide-properties-to-repe> Do we
+     need to provide properties to repeat exclusion images as for the
+     background-image property?</p>
+   </div>
+  </div>
+
+  <div class=issue-marker data-bug_id=15090 data-bug_status=NEW> <a
    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Bug-15090</a><br>
-   <a
-   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Bug-15092</a></div>
+
+   <div class=issue-details>
+    <p class=short-desc id=use-the-contour-keyword.-ltimg-idshape-m> Use the
+     contour() keyword. &lt;img id=shape-me url=foo&gt;&lt;style&gt;#shape-me
+     { shape-outside: contour; }&lt;/style&gt; //equal to &lsquo;<code
+     class=css>shape-outside: url(foo)</code>&rsquo; shape-outside: attr(src
+     as url);</p>
+   </div>
+  </div>
+
+  <div class=issue-marker data-bug_id=15092 data-bug_status=NEW> <a
+   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Bug-15092</a>
+   <div class=issue-details>
+    <p class=short-desc id=specify-what-happens-with-animated-image>Specify
+     what happens with animated images</p>
+   </div>
+  </div>
 
   <p id=another-way-of-defining-shapes-is-by-spe> Another way of defining
    shapes is by specifying a source image whose alpha channel is used to
@@ -1909,9 +1972,6 @@
    <li>Exclusion element, <a href="#exclusion-element"
     title="Exclusion element"><strong>2.</strong></a>
 
-   <li>Flow Container, <a href="#flow-container"
-    title="Flow Container"><strong>4.</strong></a>
-
    <li>outside-inside, <a href="#outside-and-inside"
     title=outside-inside><strong>2.</strong></a>
 

Index: Exclusions.src.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Exclusions.src.html,v
retrieving revision 1.26
retrieving revision 1.27
diff -u -d -r1.26 -r1.27
--- Exclusions.src.html	29 Jan 2012 06:29:55 -0000	1.26
+++ Exclusions.src.html	7 Feb 2012 16:58:40 -0000	1.27
@@ -28,31 +28,79 @@
     .example-table tr td img {
     	width: 90%;
     }
-    
-    a.toggle {
-        position: fixed;
-        top: 0.5em;
-        right: 0.5em;
-    	font-size: smaller;
-    	color: gray;
-    	opacity: 0.2;
+
+    @media screen and (min-width: 68em){             
+        .issue-marker {
+            position: absolute;
+            width: 20ex;
+            margin-left: -22ex;
+            text-align: right;
+            margin-bottom: 1em;
+        }
+
+        div.issue-marker .issue-marker {
+            position: static;
+            width: auto;
+            margin-left: 0;
+            text-align: right;
+        }  
+
+        div.issue-marker {
+            position: absolute;
+            width: 20ex;
+            margin-left: -22ex;
+        }
     }
 
-    a.toggle:hover {
-        opacity: 1;
-        color: #46A4E9;
+    @media screen and (max-width: 68em){
+        .issue-marker {
+            margin-bottom: 1em;
+        }
+
+        .issue-marker a:link {
+            padding-left: 0.5em;
+        }
+    } 
+
+      .issue-marker {
+          background:#eee;  
+          border:1px solid #ddd; 
+          font-size: 1em;
+      }
+          
+      .issue-marker.wrapper {
+          background: none;
+          border: none;
+      }
+
+      .issue-marker a:link {
+          color: #c00;
+          background: none;
+          font-weight: normal;
+          padding-right: 0.5em;
+      }
+
+    .issue-details {  
+        padding:0.5em;
+        font-size: 0.8em;
+        line-height: 1.5;
     }
-    
-    .issue-marker a {
-         background: #c00;
-         color: white;
-         font-weight: bold;
-         padding: 0.5em;
-     }
-     
-     .issue-marker-resolved a {
-         background: green;
-     }
+
+    .issue-details p{
+        padding:0;
+        margin:0; 
+    }           
+
+    .issue-details .status{
+        background:#333;   
+        color:white;
+        float:left;    
+        padding:0.15em 0.8em;    
+        font-size:0.8em;
+        margin-right:0.8em;
+        text-transform:uppercase;      
+    }
+ 
   </style>
   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" />
 
@@ -99,8 +147,7 @@
         
     <p>
         CSS exclusions define arbitrary areas around which inline content can flow.
-        Unlike CSS floats, which they extend, CSS exclusions can be positioned with any 
-        CSS positioning schemes.
+        CSS exclusions can be defined on any CSS block-level elements.
     </p>
     <p>
         CSS Shapes control the geometric shapes used for wrapping inline
@@ -143,8 +190,12 @@
     </p>
     
     <dfn>Exclusion area</dfn>
-    <div class=issue-marker><a
-     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a></div>
+    <div class="issue-marker" data-bug_id="15087" data-bug_status="NEW">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a>
+        <div class="issue-details">
+            <p class="short-desc">Interaction of floats and exclusions (Howcome's questions)</p>
+        </div>
+    </div>
     <p>
         The area used for excluding inline flow content around an exclusion element. The
         exclusion area is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">
@@ -156,8 +207,12 @@
     </p>
     
     <dfn>Wrapping context</dfn>
-    <div class=issue-marker><a
-     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a></div>
+    <div class="issue-marker" data-bug_id="15086" data-bug_status="NEW">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a>
+        <div class="issue-details">
+            <p class="short-desc">should the wrapping context be generic and include floats?</p>
+        </div>
+    </div>
     
     <p>
         The wrapping context of an element is a collection of 'exclusion areas'. The wrapping
@@ -249,7 +304,8 @@
     <dl>
         <dt><dfn title="'wrap-flow'!!'auto'">auto</dfn></dt>
         <dd>
-            For floats an exclusion is created, for all other elements an exclusion is not created.
+            Exclusion is not created and inline flow content interacts with the element as usual.
+            For example it will wrap around floats and other elements.
         </dd>
         <dt><dfn title="'wrap-flow'!!'both'">both</dfn></dt>
         <dd>
@@ -304,25 +360,34 @@
         <p class="caption">Combining exclusions</p>
     </div>
     
-    <div>
-        <p>The above figure illustrates how exclusions combine. The red box represents an element's 
-        content box. The A, B, C and D darker gray boxes represent exclusions in the element's
-        wrapping context. A, B, C and D have their respective 
-        'wrap-flow' set to 'both', 'start', 'end' and 'clear' respectively. The lighter gray
-        areas show the additional areas that are excluded for inline layout as a result of the 
-        'wrap-flow' value. For example, the area to the right of 'B' cannot be used for inline
-        layout because the 'wrap-flow' for 'B' is 'start'.</p>
-        
-        <p>The background 'blue' area shows what areas are available for inline content layout.
-            All areas represented with a light or dark shade of gray are not available for inline
-            content layout.</p>
-    </div>
+    <p>
+        The above figure illustrates how exclusions are combined. The outermost box represents
+        an element's content box. The A, B, C and D darker gray boxes represent exclusions
+        in the element's wrapping context. A, B, C and D have their respective 'wrap-flow'
+        set to 'both', 'start', 'end' and 'clear' respectively. The lighter gray areas show
+        the additional areas that are excluded for inline layout as a result of the 'wrap-flow'
+        value. For example, the area to the right of 'B' cannot be used for inline layout
+        because the 'wrap-flow' for 'B' is 'start'.
+    </p>
+    <p>
+        The background 'blue' area shows what areas are available for inline content layout.
+        All areas represented with a light or dark shade of gray are not available for inline
+        content layout.
+    </p>
     
-    <div class="issue-marker issue-marker-resolved"><a
-     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a></div>
+    <div class="issue-marker" data-bug_id="15088" data-bug_status="FIXED">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a>
+        <div class="issue-details">
+            <p class="short-desc">Add an example with auto-height content and z-index for exclusions order.</p>
+        </div>
+    </div>
     
-     <div class=issue-marker><a
-      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a></div>
+    <div class="issue-marker" data-bug_id="15084" data-bug_status="NEW">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a>
+        <div class="issue-details">
+            <p class="short-desc">Fluidity of the layout with respect to different amounts of content</p>
+        </div>
+    </div>
 
     <div class="example">
         <p>
@@ -500,8 +565,12 @@
 
     <h4 id="wrap-through-property">The 'wrap-through' Property</h4>
     
-    <div class=issue-marker><a
-     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a></div>
+    <div class="issue-marker" data-bug_id="15085" data-bug_status="NEW">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a>
+        <div class="issue-details">
+            <p class="short-desc">do we need wrap-through?</p>
+        </div>
+    </div>
     
     <table class="propdef">
         <tr>
@@ -672,15 +741,19 @@
 
     </div>
     <!-- End section "Order of Exclusions" -->
-
-    <h3 id="exclusions-implementation-note">Exclusions implementation note</h3>
-    
-    <div class="issue-marker">
+        
+    <div class="issue-marker" data-bug_id="15183" data-bug_status="NEW">
         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Bug-15183</a>
+        <div class="issue-details">
+            <p class="short-desc">Is the CSS exclusions processing model incorrect?</p>
+        </div>
      </div>
 
-    <div class="issue-marker">
+    <div class="issue-marker" data-bug_id="15083" data-bug_status="NEW">
         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Bug-15083</a>
+        <div class="issue-details">
+            <p class="short-desc">Concerns over Error accumulation vs. performance</p>
+        </div>
     </div>
     <p class="issue">
         The rules for exclusions order and exclusions on absolutely positioned elements
@@ -692,44 +765,19 @@
         top of floats.
     </p>
 
-    <p><em>This section is not normative.</em></p>
-    <p>
-        Exclusions can be specified on positioned elements and elements can be positioned
-        from their <a href="http://www.w3.org/TR/CSS21/visudet.html#static-position">static
-        position</a>. Since, the static position of such elements depends on the inline
-        flow content affected by the exclusion itself; there is a circular dependency between
-        the two layout tasks. To break this circular dependency a two-pass layout approach
-        is recommended. The first layout pass computes the static positions of all auto-positioned
-        exclusions by laying out all content besides exclusions. The second pass is layout
-        of all elements including all exclusions. Exclusions that depend on their static
-        position will use the position calculated during the first layout pass.
-    </p>
     <p class="note">
-        Note, this may cause exclusions to overlap or be distant from their static position
-        (compared to non-exclusions auto-positioned elements).
-    </p>
-    <p>
-        Similar dependency exists for exclusions whose size or position is specified in
-        percentage and the containing block size is specified as 'auto'. In such cases the
-        size or position of the exclusion is calculated based on the size of the containing
-        block calculated in the first layout pass.
-    </p>
-    <p>
-        Exclusions can be positioned on all levels of nested elements. If layout is
-        restarted on every level of nesting, the time to complete layout will be exponential.
-        To avoid multiple layout passes, the restart of the second layout pass
-        should be scoped to the top-most containing block of exclusions. Similarly, restarting
-        layout for the entire document is not necessary unless there are exclusions whose
-        containing block is the initial containing block.
+        This module does not depend on any particular positioning scheme.
     </p>
     
-    <!-- End section "Processing Model of Exclusions" -->
     <!-- End section "Exclusions" -->
 
     <h2 id="shapes">Shapes</h2>
     
-    <div class="issue-marker">
-      <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Bug-15091</a><br />
+    <div class="issue-marker" data-bug_id="15091" data-bug_status="NEW">
+        <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Bug-15091</a><br />
+        <div class="issue-details">
+            <p class="short-desc">Simplify the syntax for shapes</p>
+        </div>
     </div>
 
     <p>
@@ -740,11 +788,6 @@
         content will flow within that shape.
     </p>
 
-    <dfn>Flow Container</dfn>
-    <p>
-        A flow container is an element with a 'display' value that is computed as 'block',
-        'table-cell' or 'inline-block'.
-    </p>
     <p class="note">
         Note, while the boundaries used for wrapping inline flow content outside and inside
         an element can be defined using shapes, the actual box model does not change. If
@@ -781,7 +824,7 @@
       <h4 id="supported-svg-shapes">Supported SVG Shapes</h4>
       The following SVG shapes are supported by the CSS shapes module.
       <dl>
-          <dt>rectangle(x, y, width, height, [[rx], ry])</dt>
+          <dt>rectangle(&lt;length&gt;{4} [&lt;'border-corner-shape'&gt; &lt;length&gt;{1,2}]? )</dt>
           <dd>
               <ul>
                   <li><strong>x, y, width and height</strong> - define the bounding box of the rectangle</li>
@@ -791,7 +834,7 @@
                       to round off the corners of the rectangle</li>
               </ul>
           </dd>
-          <dt>circle(cx, cy, r)</dt>
+          <dt>circle(&lt;lentgh&gt;{3})</dt>
           <dd>
               <ul>
                   <li><strong>cx</strong> - The x-axis coordinate of the center of the circle</li>
@@ -799,7 +842,7 @@
                   <li><strong>r</strong> - The radius of the circle</li>
               </ul>
           </dd>
-          <dt>ellipse(cx, cy, rx, ry)</dt>
+          <dt>ellipse(&lt;lentgh&gt;{4})</dt>
           <dd>
               <ul>
                   <li><strong>cx</strong> - The x-axis coordinate of the center of the ellipse</li>
@@ -808,7 +851,7 @@
                   <li><strong>ry</strong> - The y-axis radius of the ellipse</li>
               </ul>
           </dd>
-          <dt>polygon([fillRule], x1, y1, x2, y2, x3, y3, … xn, yn)</dt>
+          <dt>polygon([&lt;fill-rule&gt;,]? &lt;length&gt;{2}#)</dt>
           <dd>
               <ul>
                   <li><strong>fillRule</strong> - The filling rule used to determine the interior of the
@@ -820,7 +863,7 @@
               <p>
                   If the polygon is not closed the user-agent will automatically add a new vertex
                   at the end.</p>
-              <br>
+              <br/>
           </dd>
       </dl>
       
@@ -868,10 +911,32 @@
       
       <h3 id="shapes-from-image">Shapes from Image</h3>
 
-      <div class=issue-marker>
+      <div class="issue-marker" data-bug_id="15093" data-bug_status="NEW">
           <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Bug-15093</a><br />
+          <div class="issue-details">
+              <p class="short-desc">
+                  Do we need to provide properties to repeat exclusion images as for the 
+                  background-image property?
+              </p>
+          </div>
+      </div>
+
+      <div class="issue-marker" data-bug_id="15090" data-bug_status="NEW">
           <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Bug-15090</a><br />
+          <div class="issue-details">
+              <p class="short-desc">
+                Use the contour() keyword. &lt;img id=shape-me url=foo&gt;&lt;style&gt;#shape-me 
+                { shape-outside: contour; }&lt;/style&gt; //equal to 'shape-outside: url(foo)' 
+                shape-outside: attr(src as url);
+              </p>
+          </div>
+      </div>
+
+      <div class="issue-marker" data-bug_id="15092" data-bug_status="NEW">
           <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Bug-15092</a>
+          <div class="issue-details">
+              <p class="short-desc">Specify what happens with animated images</p>
+          </div>
       </div>
       
       <p>
Received on Tuesday, 7 February 2012 17:00:46 UTC

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