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.

Author: atanassov

css3-exclusions/Exclusions.src.html

@@ -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 @@ <h2 class="no-num no-toc" id="abstract">Abstract</h2>
 
     <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 @@ <h2 id="definitions">Definitions</h2>
     </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 @@ <h2 id="definitions">Definitions</h2>
     </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 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
     <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 @@ <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
         <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 @@ <h3 id="propagation-of-exclusions">Propagation of Exclusions</h3>
 
     <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 @@ <h3 id="exclusions-order">Exclusions order</h3>
 
     </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 @@ <h3 id="exclusions-implementation-note">Exclusions implementation note</h3>
         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 @@ <h2 id="shapes">Shapes</h2>
         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 @@ <h3 id="shapes-from-svg-syntax">Shapes from SVG Syntax</h3>
       <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,15 +834,15 @@ <h4 id="supported-svg-shapes">Supported SVG Shapes</h4>
                       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>
                   <li><strong>cy</strong> - The y-axis coordinate of the center of the circle</li>
                   <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 @@ <h4 id="supported-svg-shapes">Supported SVG Shapes</h4>
                   <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 @@ <h4 id="supported-svg-shapes">Supported SVG Shapes</h4>
               <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 @@ <h4 id='referencing-svg-shapes'>Referencing SVG shapes</h4>
 
       <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>