Mercurial > drafts / changeset

     1.1 --- a/css3-exclusions/Exclusions.src.html	Fri Jul 20 14:24:16 2012 -0400
     1.2 +++ b/css3-exclusions/Exclusions.src.html	Fri Jul 20 14:08:43 2012 -0700
     1.3 @@ -1222,12 +1222,22 @@
     1.4            <dt>rectangle([&lt;length&gt;|&lt;percentage&gt;]{4} [ curve [&lt;length&gt;|&lt;percentage&gt;]{1,2} ]? )</dt>
     1.5            <dd>
     1.6                <ul>
     1.7 -                  <li>The four values represent <strong>x, y, width and height</strong> - define the bounding box of the rectangle</li>
     1.8                    <li>
     1.9 -                      The two 'curve' values represent <strong>
    1.10 -                      rx</strong> and <strong>ry</strong> - define the rounded rectangles, the <strong>x</strong>
    1.11 -                      and <strong>y</strong> axis and radius of the ellipse used to round off the corners
    1.12 -                      of the rectangle 
    1.13 +                      The four values represent 
    1.14 +                      <strong>x, y, width</strong> and 
    1.15 +                      <strong>height</strong>.
    1.16 +                      They define the bounding box 
    1.17 +                      of the rectangle. 
    1.18 +                      Negative values for width and height are invalid.
    1.19 +                  </li>
    1.20 +                  <li>
    1.21 +                      The two 'curve' values represent 
    1.22 +                      <strong> rx</strong> and <strong>ry</strong>. 
    1.23 +                      For rounded rectangles they define 
    1.24 +                      the x-axis radius and y-axis radius 
    1.25 +                      of the ellipse used to round off 
    1.26 +                      the corners of the rectangle. 
    1.27 +                      Negative values for rx and ry are invalid.
    1.28                    </li>
    1.29                </ul>
    1.30            </dd>
    1.31 @@ -1235,18 +1245,31 @@
    1.32            <dd>
    1.33                <ul>
    1.34                    <li>
    1.35 -                      The three values values represent <strong>cx</strong>, <strong>cy</strong>,
    1.36 -                      <strong>r</strong> - The <strong>x</strong> and <strong>y</strong> axis coordinate 
    1.37 -                      of the center of the circle and the radius of the circle
    1.38 +                      The three values values represent 
    1.39 +                      <strong>cx</strong>, 
    1.40 +                      <strong>cy</strong>, 
    1.41 +                      and <strong>r</strong>. 
    1.42 +                      They define the x-axis and y-axis coordinates
    1.43 +                      of the center of the circle 
    1.44 +                      and the radius of the circle. 
    1.45 +                      A negative value for r is invalid.
    1.46                    </li>
    1.47                </ul>
    1.48            </dd>
    1.49            <dt>ellipse([&lt;length&gt;|&lt;percentage&gt;]{4})</dt>
    1.50            <dd>
    1.51                <ul>
    1.52 -                  <li>The four values represent <strong>cx</strong>, <strong>cy</strong>, <strong>rx</strong> and <strong>ry</strong> - 
    1.53 -                      The <strong>x</strong> and <strong>y</strong> coordinate of the center of the ellipse and 
    1.54 -                      the <strong>x</strong> and <strong>y</strong> axis radius of the ellipse
    1.55 +                  <li>
    1.56 +                      The four values represent 
    1.57 +                      <strong>cx</strong>, 
    1.58 +                      <strong>cy</strong>, 
    1.59 +                      <strong>rx</strong>, and 
    1.60 +                      <strong>ry</strong>.  
    1.61 +                      They define the x-axis and y-axis coordinates
    1.62 +                      of the center of the ellipse 
    1.63 +                      and the x-axis and y-axis radius
    1.64 +                      of the ellipse. 
    1.65 +                      Negative values for rx and ry are invalid.
    1.66                    </li>
    1.67                </ul>
    1.68            </dd>

     2.1 --- a/css3-exclusions/Overview.html	Fri Jul 20 14:24:16 2012 -0400
     2.2 +++ b/css3-exclusions/Overview.html	Fri Jul 20 14:08:43 2012 -0700
     2.3 @@ -31,23 +31,23 @@
     2.4  
     2.5   <body>
     2.6    <div class=head id=div-head>
     2.7 -   <p id=x><a href="http://www.w3.org/"><img alt=W3C height=53 id=mobile-logo
     2.8 +   <p><a href="http://www.w3.org/"><img alt=W3C height=53 id=mobile-logo
     2.9      src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width=90></a>
    2.10      <!--begin-logo-->
    2.11  
    2.12 -   <p id=x0><a href="http://www.w3.org/"><img alt=W3C height=48
    2.13 +   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    2.14      src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--></p>
    2.15  
    2.16     <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
    2.17  
    2.18 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 July 2012</h2>
    2.19 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 July 2012</h2>
    2.20  
    2.21     <dl>
    2.22      <dt>This version:
    2.23  
    2.24      <dd><a
    2.25       href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
    2.26 -    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120710/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120710/</a></dd>-->
    2.27 +    <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120720/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120720/</a></dd>-->
    2.28  
    2.29      <dt>Latest version:
    2.30  
    2.31 @@ -90,7 +90,7 @@
    2.32       with subject line "<code>[css3-exclusions] message topic</code>"
    2.33     </dl>
    2.34     <!--begin-copyright-->
    2.35 -   <p class=copyright id=copyright-copy-year-2000-w3creg-mit-erci><a
    2.36 +   <p class=copyright><a
    2.37      href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    2.38      rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
    2.39      title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
    2.40 @@ -111,33 +111,30 @@
    2.41  
    2.42    <h2 class="no-num no-toc" id=abstract>Abstract</h2>
    2.43  
    2.44 -  <p id=css-exclusions-define-arbitrary-areas-ar> CSS Exclusions define
    2.45 -   arbitrary areas around which <a
    2.46 +  <p> CSS Exclusions define arbitrary areas around which <a
    2.47     href="http://www.w3.org/TR/CSS2/visuren.html#inline-boxes">inline
    2.48     content</a> (<a href="#CSS21"
    2.49     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) content can flow. CSS
    2.50     Exclusions can be defined on any CSS block-level elements. CSS Exclusions
    2.51     extend the notion of content wrapping previously limited to floats.
    2.52  
    2.53 -  <p id=css-shapes-control-the-geometric-shapes->CSS Shapes control the
    2.54 -   geometric shapes used for wrapping inline flow content outside or inside
    2.55 -   an element. CSS Shapes can be applied to any element. A circle shape on a
    2.56 -   float will cause inline content to wrap around the circle shape instead of
    2.57 -   the float's bounding box.
    2.58 -
    2.59 -  <p id=combining-css-exclusions-and-css-shapes->Combining CSS Exclusions and
    2.60 -   CSS Shapes allows sophisticated layouts, allowing interactions between
    2.61 -   shapes in complex positioning schemes.
    2.62 +  <p>CSS Shapes control the geometric shapes used for wrapping inline flow
    2.63 +   content outside or inside an element. CSS Shapes can be applied to any
    2.64 +   element. A circle shape on a float will cause inline content to wrap
    2.65 +   around the circle shape instead of the float's bounding box.
    2.66 +
    2.67 +  <p>Combining CSS Exclusions and CSS Shapes allows sophisticated layouts,
    2.68 +   allowing interactions between shapes in complex positioning schemes.
    2.69  
    2.70    <h2 class="no-num no-toc" id=status>Status of this document</h2>
    2.71    <!--begin-status-->
    2.72  
    2.73 -  <p id=this-is-a-public-copy-of-the-editors-dra>This is a public copy of the
    2.74 -   editors' draft. It is provided for discussion only and may change at any
    2.75 -   moment. Its publication here does not imply endorsement of its contents by
    2.76 -   W3C. Don't cite this document other than as work in progress.
    2.77 -
    2.78 -  <p id=the-archived-public-mailing-list-www-sty>The (<a
    2.79 +  <p>This is a public copy of the editors' draft. It is provided for
    2.80 +   discussion only and may change at any moment. Its publication here does
    2.81 +   not imply endorsement of its contents by W3C. Don't cite this document
    2.82 +   other than as work in progress.
    2.83 +
    2.84 +  <p>The (<a
    2.85     href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
    2.86     mailing list <a
    2.87     href="mailto:www-style@w3.org?Subject=%5Bcss3-exclusions%5D%20PUT%20SUBJECT%20HERE">
    2.88 @@ -147,12 +144,10 @@
    2.89     “css3-exclusions” in the subject, preferably like this:
    2.90     “[<!---->css3-exclusions<!---->] <em>…summary of comment…</em>”
    2.91  
    2.92 -  <p id=this-document-was-produced-by-the-css-wo>This document was produced
    2.93 -   by the <a href="/Style/CSS/members">CSS Working Group</a> (part of the <a
    2.94 -   href="/Style/">Style Activity</a>).
    2.95 -
    2.96 -  <p id=this-document-was-produced-by-a-group-op>This document was produced
    2.97 -   by a group operating under the <a
    2.98 +  <p>This document was produced by the <a href="/Style/CSS/members">CSS
    2.99 +   Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
   2.100 +
   2.101 +  <p>This document was produced by a group operating under the <a
   2.102     href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   2.103     Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   2.104     rel=disclosure>public list of any patent disclosures</a> made in
   2.105 @@ -169,244 +164,212 @@
   2.106    <!--begin-toc-->
   2.107  
   2.108    <ul class=toc>
   2.109 -   <li id=introduction-><a href="#intro"><span class=secno>1.
   2.110 -    </span>Introduction</a>
   2.111 -
   2.112 -   <li id=definitions-><a href="#definitions"><span class=secno>2.
   2.113 -    </span>Definitions</a>
   2.114 -
   2.115 -   <li id=exclusions-3.1.-declaring-exclusions-3.1><a
   2.116 -    href="#exclusions"><span class=secno>3. </span>Exclusions</a>
   2.117 +   <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
   2.118 +
   2.119 +   <li><a href="#definitions"><span class=secno>2. </span>Definitions</a>
   2.120 +
   2.121 +   <li><a href="#exclusions"><span class=secno>3. </span>Exclusions</a>
   2.122      <ul class=toc>
   2.123 -     <li id=declaring-exclusions-3.1.1.-the-wrap-flo><a
   2.124 -      href="#declaring-exclusions"><span class=secno>3.1. </span>Declaring
   2.125 -      exclusions</a>
   2.126 +     <li><a href="#declaring-exclusions"><span class=secno>3.1.
   2.127 +      </span>Declaring exclusions</a>
   2.128        <ul class=toc>
   2.129 -       <li id=the-wrap-flow-property-><a href="#wrap-flow-property"><span
   2.130 -        class=secno>3.1.1. </span>The ‘<code
   2.131 -        class=property>wrap-flow</code>’ property</a>
   2.132 +       <li><a href="#wrap-flow-property"><span class=secno>3.1.1. </span>The
   2.133 +        ‘<code class=property>wrap-flow</code>’ property</a>
   2.134        </ul>
   2.135  
   2.136 -     <li id=scope-and-effect-of-exclusions-3.2.1.-th><a
   2.137 -      href="#scope-and-effect-of-exclusions"><span class=secno>3.2.
   2.138 +     <li><a href="#scope-and-effect-of-exclusions"><span class=secno>3.2.
   2.139        </span>Scope and effect of exclusions</a>
   2.140        <ul class=toc>
   2.141 -       <li id=the-wrap-margin-property-><a href="#wrap-margin-property"><span
   2.142 -        class=secno>3.2.1. </span>The ‘<code
   2.143 -        class=property>wrap-margin</code>’ property</a>
   2.144 -
   2.145 -       <li id=the-wrap-padding-property-><a
   2.146 -        href="#wrap-padding-property"><span class=secno>3.2.2. </span>The
   2.147 -        ‘<code class=property>wrap-padding</code>’ Property</a>
   2.148 +       <li><a href="#wrap-margin-property"><span class=secno>3.2.1.
   2.149 +        </span>The ‘<code class=property>wrap-margin</code>’ property</a>
   2.150 +        
   2.151 +
   2.152 +       <li><a href="#wrap-padding-property"><span class=secno>3.2.2.
   2.153 +        </span>The ‘<code class=property>wrap-padding</code>’
   2.154 +        Property</a>
   2.155        </ul>
   2.156  
   2.157 -     <li id=propagation-of-exclusions-3.3.1.-the-wra><a
   2.158 -      href="#propagation-of-exclusions"><span class=secno>3.3.
   2.159 +     <li><a href="#propagation-of-exclusions"><span class=secno>3.3.
   2.160        </span>Propagation of Exclusions</a>
   2.161        <ul class=toc>
   2.162 -       <li id=the-wrap-through-property-><a
   2.163 -        href="#wrap-through-property"><span class=secno>3.3.1. </span>The
   2.164 -        ‘<code class=property>wrap-through</code>’ Property</a>
   2.165 -
   2.166 -       <li id=the-wrap-shorthand-property-><a
   2.167 -        href="#wrap-shorthand-property"><span class=secno>3.3.2. </span>The
   2.168 -        ‘<code class=property>wrap</code>’ Shorthand Property</a>
   2.169 +       <li><a href="#wrap-through-property"><span class=secno>3.3.1.
   2.170 +        </span>The ‘<code class=property>wrap-through</code>’
   2.171 +        Property</a>
   2.172 +
   2.173 +       <li><a href="#wrap-shorthand-property"><span class=secno>3.3.2.
   2.174 +        </span>The ‘<code class=property>wrap</code>’ Shorthand
   2.175 +        Property</a>
   2.176        </ul>
   2.177  
   2.178 -     <li id=exclusions-order-><a href="#exclusions-order"><span
   2.179 -      class=secno>3.4. </span>Exclusions order</a>
   2.180 -
   2.181 -     <li id=processing-model-3.5.1.-description-3.5.><a
   2.182 -      href="#exclusions-processing-model"><span class=secno>3.5.
   2.183 +     <li><a href="#exclusions-order"><span class=secno>3.4. </span>Exclusions
   2.184 +      order</a>
   2.185 +
   2.186 +     <li><a href="#exclusions-processing-model"><span class=secno>3.5.
   2.187        </span>Processing model</a>
   2.188        <ul class=toc>
   2.189 -       <li id=description-><a
   2.190 -        href="#exclusions-processing-model-description"><span
   2.191 +       <li><a href="#exclusions-processing-model-description"><span
   2.192          class=secno>3.5.1. </span>Description</a>
   2.193  
   2.194 -       <li id=step-1-resolve-exclusion-boxes-belonging0><a
   2.195 +       <li><a
   2.196          href="#step-1-resolve-exclusion-boxes-belonging-to-each-wrapping-context"><span
   2.197          class=secno>3.5.2. </span>Step 1: resolve exclusion boxes belonging
   2.198          to each <span>wrapping context</span></a>
   2.199  
   2.200 -       <li id=step-2-resolve-wrapping-contexts-and-lay0><a
   2.201 +       <li><a
   2.202          href="#step-2-resolve-wrapping-contexts-layout-containing-blocks"><span
   2.203          class=secno>3.5.3. </span>Step 2: resolve wrapping contexts and lay
   2.204          out containing blocks</a>
   2.205  
   2.206 -       <li id=step-2-a-resolve-the-position-and-size-o><a
   2.207 -        href="#step-2-A-resolve-exclusions-position-and-size"><span
   2.208 +       <li><a href="#step-2-A-resolve-exclusions-position-and-size"><span
   2.209          class=secno>3.5.4. </span>Step 2-A: resolve the position and size of
   2.210          exclusion boxes</a>
   2.211  
   2.212 -       <li id=step-2-b-lay-out-containing-block-applyi><a
   2.213 +       <li><a
   2.214          href="#step-2-B-layout-containing-block-applying-wrapping"><span
   2.215          class=secno>3.5.5. </span>Step 2-B: lay out containing block applying
   2.216          wrapping</a>
   2.217  
   2.218 -       <li id=example-3.5.6.1.-step-1-resolve-exclusio><a
   2.219 -        href="#exclusions-processing-model-example"><span class=secno>3.5.6.
   2.220 -        </span>Example</a>
   2.221 +       <li><a href="#exclusions-processing-model-example"><span
   2.222 +        class=secno>3.5.6. </span>Example</a>
   2.223          <ul class=toc>
   2.224 -         <li id=step-1-resolve-exclusion-boxes-belonging1><a
   2.225 -          href="#step-1-resolve-exclusion-boxes-belonging"><span
   2.226 +         <li><a href="#step-1-resolve-exclusion-boxes-belonging"><span
   2.227            class=secno>3.5.6.1. </span>Step 1: resolve exclusion boxes
   2.228            belonging to each <span>wrapping context</span></a>
   2.229  
   2.230 -         <li id=step-2-resolve-wrapping-contexts-and-lay1><a
   2.231 -          href="#step-2-resolve-wrapping-contexts-and-lay"><span
   2.232 +         <li><a href="#step-2-resolve-wrapping-contexts-and-lay"><span
   2.233            class=secno>3.5.6.2. </span>Step 2: resolve wrapping contexts and
   2.234            lay out containing blocks</a>
   2.235            <ul class=toc>
   2.236 -           <li id=resolving-rwc-1-><a href="#resolving-rwc-1"><span
   2.237 -            class=secno>3.5.6.2.1. </span>Resolving RWC-1</a>
   2.238 -
   2.239 -           <li id=resolving-rwc-2-><a href="#resolving-rwc-2"><span
   2.240 -            class=secno>3.5.6.2.2. </span>Resolving RWC-2</a>
   2.241 +           <li><a href="#resolving-rwc-1"><span class=secno>3.5.6.2.1.
   2.242 +            </span>Resolving RWC-1</a>
   2.243 +
   2.244 +           <li><a href="#resolving-rwc-2"><span class=secno>3.5.6.2.2.
   2.245 +            </span>Resolving RWC-2</a>
   2.246            </ul>
   2.247          </ul>
   2.248        </ul>
   2.249  
   2.250 -     <li id=floats-and-exclusions-3.6.1.-similaritie><a
   2.251 -      href="#floats-and-exclusions"><span class=secno>3.6. </span>Floats and
   2.252 -      exclusions</a>
   2.253 +     <li><a href="#floats-and-exclusions"><span class=secno>3.6.
   2.254 +      </span>Floats and exclusions</a>
   2.255        <ul class=toc>
   2.256 -       <li id=similarities-><a
   2.257 -        href="#floats-and-exclusions-similarities"><span class=secno>3.6.1.
   2.258 -        </span>Similarities</a>
   2.259 -
   2.260 -       <li id=differences-><a href="#floats-and-exclusions-differences"><span
   2.261 +       <li><a href="#floats-and-exclusions-similarities"><span
   2.262 +        class=secno>3.6.1. </span>Similarities</a>
   2.263 +
   2.264 +       <li><a href="#floats-and-exclusions-differences"><span
   2.265          class=secno>3.6.2. </span>Differences</a>
   2.266  
   2.267 -       <li id=interoperability-3.6.3.1.-effect-of-floa><a
   2.268 -        href="#floats-and-exclusions-interoperability"><span
   2.269 +       <li><a href="#floats-and-exclusions-interoperability"><span
   2.270          class=secno>3.6.3. </span>Interoperability</a>
   2.271          <ul class=toc>
   2.272 -         <li id=effect-of-floats-on-exclusions-><a
   2.273 -          href="#effect-of-floats-on-exclusions"><span class=secno>3.6.3.1.
   2.274 -          </span>Effect of floats on exclusions</a>
   2.275 -
   2.276 -         <li id=effect-of-exclusions-on-floats-><a
   2.277 -          href="#effect-of-exclusions-on-floats"><span class=secno>3.6.3.2.
   2.278 -          </span>Effect of exclusions on floats</a>
   2.279 +         <li><a href="#effect-of-floats-on-exclusions"><span
   2.280 +          class=secno>3.6.3.1. </span>Effect of floats on exclusions</a>
   2.281 +
   2.282 +         <li><a href="#effect-of-exclusions-on-floats"><span
   2.283 +          class=secno>3.6.3.2. </span>Effect of exclusions on floats</a>
   2.284          </ul>
   2.285        </ul>
   2.286      </ul>
   2.287  
   2.288 -   <li id=shapes-4.1.-relation-to-the-box-model-an><a href="#shapes"><span
   2.289 -    class=secno>4. </span>Shapes</a>
   2.290 +   <li><a href="#shapes"><span class=secno>4. </span>Shapes</a>
   2.291      <ul class=toc>
   2.292 -     <li id=relation-to-the-box-model-and-float-beha><a
   2.293 -      href="#relation-to-box-model-and-float-behavior"><span class=secno>4.1.
   2.294 -      </span>Relation to the box model and float behavior</a>
   2.295 -
   2.296 -     <li id=shapes-from-svg-syntax-4.2.1.-supported-><a
   2.297 -      href="#shapes-from-svg-syntax"><span class=secno>4.2. </span>Shapes
   2.298 -      from SVG Syntax</a>
   2.299 +     <li><a href="#relation-to-box-model-and-float-behavior"><span
   2.300 +      class=secno>4.1. </span>Relation to the box model and float
   2.301 +      behavior</a>
   2.302 +
   2.303 +     <li><a href="#shapes-from-svg-syntax"><span class=secno>4.2.
   2.304 +      </span>Shapes from SVG Syntax</a>
   2.305        <ul class=toc>
   2.306 -       <li id=supported-svg-shapes-><a href="#supported-svg-shapes"><span
   2.307 -        class=secno>4.2.1. </span>Supported SVG Shapes</a>
   2.308 -
   2.309 -       <li id=referencing-svg-shapes-><a href="#referencing-svg-shapes"><span
   2.310 -        class=secno>4.2.2. </span>Referencing SVG shapes</a>
   2.311 +       <li><a href="#supported-svg-shapes"><span class=secno>4.2.1.
   2.312 +        </span>Supported SVG Shapes</a>
   2.313 +
   2.314 +       <li><a href="#referencing-svg-shapes"><span class=secno>4.2.2.
   2.315 +        </span>Referencing SVG shapes</a>
   2.316        </ul>
   2.317  
   2.318 -     <li id=shapes-from-image-><a href="#shapes-from-image"><span
   2.319 -      class=secno>4.3. </span>Shapes from Image</a>
   2.320 -
   2.321 -     <li id=declaring-shapes-4.4.1.-the-shape-outsid><a
   2.322 -      href="#declaring-shapes"><span class=secno>4.4. </span>Declaring
   2.323 +     <li><a href="#shapes-from-image"><span class=secno>4.3. </span>Shapes
   2.324 +      from Image</a>
   2.325 +
   2.326 +     <li><a href="#declaring-shapes"><span class=secno>4.4. </span>Declaring
   2.327        Shapes</a>
   2.328        <ul class=toc>
   2.329 -       <li id=the-shape-outside-property-><a
   2.330 -        href="#shape-outside-property"><span class=secno>4.4.1. </span>The
   2.331 -        ‘<code class=property>shape-outside</code>’ Property</a>
   2.332 -
   2.333 -       <li id=the-shape-inside-property-><a
   2.334 -        href="#shape-inside-property"><span class=secno>4.4.2. </span>The
   2.335 -        ‘<code class=property>shape-inside</code>’ Property</a>
   2.336 -
   2.337 -       <li id=the-shape-image-threshold-property-><a
   2.338 -        href="#shape-image-threshold-property"><span class=secno>4.4.3.
   2.339 +       <li><a href="#shape-outside-property"><span class=secno>4.4.1.
   2.340 +        </span>The ‘<code class=property>shape-outside</code>’
   2.341 +        Property</a>
   2.342 +
   2.343 +       <li><a href="#shape-inside-property"><span class=secno>4.4.2.
   2.344 +        </span>The ‘<code class=property>shape-inside</code>’
   2.345 +        Property</a>
   2.346 +
   2.347 +       <li><a href="#shape-image-threshold-property"><span class=secno>4.4.3.
   2.348          </span>The ‘<code class=property>shape-image-threshold</code>’
   2.349          Property</a>
   2.350        </ul>
   2.351      </ul>
   2.352  
   2.353 -   <li id=conformance-5.1.-document-conventions-5.><a
   2.354 -    href="#conformance"><span class=secno>5. </span>Conformance</a>
   2.355 +   <li><a href="#conformance"><span class=secno>5. </span>Conformance</a>
   2.356      <ul class=toc>
   2.357 -     <li id=document-conventions-><a href="#conventions"><span
   2.358 -      class=secno>5.1. </span>Document Conventions</a>
   2.359 -
   2.360 -     <li id=conformance-classes-><a href="#conformance-classes"><span
   2.361 -      class=secno>5.2. </span>Conformance Classes</a>
   2.362 -
   2.363 -     <li id=partial-implementations-><a href="#partial"><span
   2.364 -      class=secno>5.3. </span> Partial Implementations</a>
   2.365 -
   2.366 -     <li id=experimental-implementations-><a href="#experimental"><span
   2.367 -      class=secno>5.4. </span> Experimental Implementations</a>
   2.368 -
   2.369 -     <li id=non-experimental-implementations-><a href="#testing"><span
   2.370 -      class=secno>5.5. </span> Non-Experimental Implementations</a>
   2.371 -
   2.372 -     <li id=cr-exit-criteria-><a href="#cr-exit-criteria"><span
   2.373 -      class=secno>5.6. </span> CR Exit Criteria</a>
   2.374 +     <li><a href="#conventions"><span class=secno>5.1. </span>Document
   2.375 +      Conventions</a>
   2.376 +
   2.377 +     <li><a href="#conformance-classes"><span class=secno>5.2.
   2.378 +      </span>Conformance Classes</a>
   2.379 +
   2.380 +     <li><a href="#partial"><span class=secno>5.3. </span> Partial
   2.381 +      Implementations</a>
   2.382 +
   2.383 +     <li><a href="#experimental"><span class=secno>5.4. </span> Experimental
   2.384 +      Implementations</a>
   2.385 +
   2.386 +     <li><a href="#testing"><span class=secno>5.5. </span> Non-Experimental
   2.387 +      Implementations</a>
   2.388 +
   2.389 +     <li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit
   2.390 +      Criteria</a>
   2.391      </ul>
   2.392  
   2.393 -   <li class=no-num id=acknowledgments-><a
   2.394 -    href="#acknowledgments">Acknowledgments</a>
   2.395 -
   2.396 -   <li class=no-num id=references-normative-references-other-re><a
   2.397 -    href="#references">References</a>
   2.398 +   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
   2.399 +
   2.400 +   <li class=no-num><a href="#references">References</a>
   2.401      <ul class=toc>
   2.402 -     <li class=no-num id=normative-references-><a
   2.403 -      href="#normative-references">Normative references</a>
   2.404 -
   2.405 -     <li class=no-num id=other-references-><a href="#other-references">Other
   2.406 +     <li class=no-num><a href="#normative-references">Normative
   2.407        references</a>
   2.408 +
   2.409 +     <li class=no-num><a href="#other-references">Other references</a>
   2.410      </ul>
   2.411  
   2.412 -   <li class=no-num id=index-><a href="#index">Index</a>
   2.413 -
   2.414 -   <li class=no-num id=property-index-><a href="#property-index">Property
   2.415 -    index</a>
   2.416 -
   2.417 -   <li class=no-num id=change-log-5.7.-since-may-3rd-2012-5.8.-><a
   2.418 -    href="#change-log">Change Log</a>
   2.419 +   <li class=no-num><a href="#index">Index</a>
   2.420 +
   2.421 +   <li class=no-num><a href="#property-index">Property index</a>
   2.422 +
   2.423 +   <li class=no-num><a href="#change-log">Change Log</a>
   2.424      <ul class=toc>
   2.425 -     <li id=since-may-3rd-2012-><a href="#since-may-3rd-2012"><span
   2.426 -      class=secno>5.7. </span>Since May 3rd 2012</a>
   2.427 -
   2.428 -     <li id=since-december-13th-2011-><a
   2.429 -      href="#since-december-13th-2011"><span class=secno>5.8. </span>Since
   2.430 -      December 13th 2011</a>
   2.431 +     <li><a href="#since-may-3rd-2012"><span class=secno>5.7. </span>Since
   2.432 +      May 3rd 2012</a>
   2.433 +
   2.434 +     <li><a href="#since-december-13th-2011"><span class=secno>5.8.
   2.435 +      </span>Since December 13th 2011</a>
   2.436      </ul>
   2.437    </ul>
   2.438    <!--end-toc-->
   2.439  
   2.440    <h2 id=intro><span class=secno>1. </span>Introduction</h2>
   2.441  
   2.442 -  <p id=this-section-is-not-normative.><em>This section is not
   2.443 -   normative.</em>
   2.444 -
   2.445 -  <p id=the-exclusions-section-of-this-specifica> The exclusions section of
   2.446 -   this specification defines features that allow inline flow content to wrap
   2.447 -   around outside the <a href="#exclusion-area">exclusion area</a> of
   2.448 -   elements.
   2.449 -
   2.450 -  <p id=the-shapes-section-of-the-specification-> The shapes section of the
   2.451 -   specification defines properties to control the geometry of an element's
   2.452 -   <a href="#exclusion-area">exclusion area</a> as well as the geometry used
   2.453 -   for wrapping an element's inline flow content.
   2.454 +  <p><em>This section is not normative.</em>
   2.455 +
   2.456 +  <p> The exclusions section of this specification defines features that
   2.457 +   allow inline flow content to wrap around outside the <a
   2.458 +   href="#exclusion-area">exclusion area</a> of elements.
   2.459 +
   2.460 +  <p> The shapes section of the specification defines properties to control
   2.461 +   the geometry of an element's <a href="#exclusion-area">exclusion area</a>
   2.462 +   as well as the geometry used for wrapping an element's inline flow
   2.463 +   content.
   2.464  
   2.465    <h2 id=definitions><span class=secno>2. </span>Definitions</h2>
   2.466  
   2.467 -  <p id=exclusion-box-><dfn id=exclusion-box>Exclusion box</dfn>
   2.468 -
   2.469 -  <p id=a-box-css3box-that-defines-an-exclusion-> A <a
   2.470 -   href="http://www.w3.org/TR/css3-box/">box</a> (<a href="#CSS3BOX"
   2.471 +  <p><dfn id=exclusion-box>Exclusion box</dfn>
   2.472 +
   2.473 +  <p> A <a href="http://www.w3.org/TR/css3-box/">box</a> (<a href="#CSS3BOX"
   2.474     rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) that defines an <a
   2.475     href="#exclusion-area">exclusion area</a> for other boxes. The ‘<a
   2.476     href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property is
   2.477 @@ -418,75 +381,71 @@
   2.478     other than ‘<code class=property>none</code>’ does not become an
   2.479     exclusion.
   2.480  
   2.481 -  <p id=exclusion-area-><dfn id=exclusion-area>Exclusion area</dfn>
   2.482 +  <p><dfn id=exclusion-area>Exclusion area</dfn>
   2.483  
   2.484    <div class=issue-marker data-bug_id=15087 data-bug_status=NEW> <a
   2.485     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Issue-15087</a>
   2.486     
   2.487     <div class=issue-details>
   2.488 -    <p class=short-desc
   2.489 -     id=interaction-of-floats-and-exclusions-how>Interaction of floats and
   2.490 -     exclusions (Howcome's questions)</p>
   2.491 +    <p class=short-desc>Interaction of floats and exclusions (Howcome's
   2.492 +     questions)</p>
   2.493     </div>
   2.494    </div>
   2.495  
   2.496 -  <p id=the-area-used-for-excluding-inline-flow-> The area used for excluding
   2.497 -   inline flow content around an exclusion box. The exclusion area is
   2.498 -   equivalent to the <a
   2.499 +  <p> The area used for excluding inline flow content around an exclusion
   2.500 +   box. The exclusion area is equivalent to the <a
   2.501     href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> border box</a>.
   2.502     This specification's ‘<a href="#shape-outside"><code
   2.503     class=property>shape-outside</code></a>’ property can be used to define
   2.504     arbitrary, non-rectangular exclusion areas.
   2.505  
   2.506 -  <p id=float-area-><dfn id=float-area>Float area</dfn>
   2.507 -
   2.508 -  <p id=the-area-used-for-excluding-inline-flow-0> The area used for
   2.509 -   excluding inline flow content around a float element. By default, the
   2.510 -   float area is the float element's <a
   2.511 +  <p><dfn id=float-area>Float area</dfn>
   2.512 +
   2.513 +  <p> The area used for excluding inline flow content around a float element.
   2.514 +   By default, the float area is the float element's <a
   2.515     href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>.
   2.516     This specification's ‘<a href="#shape-outside"><code
   2.517     class=property>shape-outside</code></a>’ property can be used to define
   2.518     arbitrary, non-rectangular float areas.
   2.519  
   2.520 -  <p id=exclusion-element-><dfn id=exclusion-element>Exclusion element</dfn>
   2.521 -
   2.522 -  <p id=an-block-level-element-which-is-not-a-fl>An block-level element which
   2.523 -   is not a float and generates an <a href="#exclusion-box">exclusion
   2.524 -   box</a>. An element generates an exclusion box when its ‘<a
   2.525 -   href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property's
   2.526 -   computed value is not ‘<code class=property>auto</code>’.
   2.527 -
   2.528 -  <p id=wrapping-context-><dfn id=wrapping-context>Wrapping context</dfn>
   2.529 +  <p><dfn id=exclusion-element>Exclusion element</dfn>
   2.530 +
   2.531 +  <p>An block-level element which is not a float and generates an <a
   2.532 +   href="#exclusion-box">exclusion box</a>. An element generates an exclusion
   2.533 +   box when its ‘<a href="#wrap-flow"><code
   2.534 +   class=property>wrap-flow</code></a>’ property's computed value is not
   2.535 +   ‘<code class=property>auto</code>’.
   2.536 +
   2.537 +  <p><dfn id=wrapping-context>Wrapping context</dfn>
   2.538  
   2.539    <div class=issue-marker data-bug_id=15086 data-bug_status=NEW> <a
   2.540     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Issue-15086</a>
   2.541     
   2.542     <div class=issue-details>
   2.543 -    <p class=short-desc id=should-the-wrapping-context-be-generic-a>should
   2.544 -     the wrapping context be generic and include floats?</p>
   2.545 +    <p class=short-desc>should the wrapping context be generic and include
   2.546 +     floats?</p>
   2.547     </div>
   2.548    </div>
   2.549  
   2.550 -  <p id=the-wrapping-context-of-a-box-is-a-colle> The <a
   2.551 -   href="#wrapping-context">wrapping context</a> of a box is a collection of
   2.552 -   <a href="#exclusion-area">exclusion areas</a> contributed by its
   2.553 -   associated <a href="#exclusion-box">exclusion boxes</a>. During layout, a
   2.554 -   box wraps its inline flow content in the area that corresponds to the
   2.555 -   subtraction of its <a href="#wrapping-context">wrapping context</a> from
   2.556 -   its own <a href="#content-area">content area</a>.
   2.557 -
   2.558 -  <p id=a-box-inherits-its-containing-blocks-wra> A box inherits its <a
   2.559 +  <p> The <a href="#wrapping-context">wrapping context</a> of a box is a
   2.560 +   collection of <a href="#exclusion-area">exclusion areas</a> contributed by
   2.561 +   its associated <a href="#exclusion-box">exclusion boxes</a>. During
   2.562 +   layout, a box wraps its inline flow content in the area that corresponds
   2.563 +   to the subtraction of its <a href="#wrapping-context">wrapping context</a>
   2.564 +   from its own <a href="#content-area">content area</a>.
   2.565 +
   2.566 +  <p> A box inherits its <a
   2.567     href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
   2.568     block's</a> <a href="#wrapping-context">wrapping context</a> unless it
   2.569     specifically resets it using the ‘<a href="#wrap-through"><code
   2.570     class=property>wrap-through</code></a>’ property.
   2.571  
   2.572 -  <p id=content-area-><dfn id=content-area>Content area</dfn>
   2.573 -
   2.574 -  <p id=the-area-used-for-layout-of-the-inline-f> The area used for layout of
   2.575 -   the inline flow content of a box. By default the area is equivalent to the
   2.576 -   <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content
   2.577 -   box</a>. This specification's ‘<a href="#shape-inside"><code
   2.578 +  <p><dfn id=content-area>Content area</dfn>
   2.579 +
   2.580 +  <p> The area used for layout of the inline flow content of a box. By
   2.581 +   default the area is equivalent to the <a
   2.582 +   href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content box</a>.
   2.583 +   This specification's ‘<a href="#shape-inside"><code
   2.584     class=property>shape-inside</code></a>’ property can define arbitrary,
   2.585     non-rectangular content areas.
   2.586  
   2.587 @@ -494,46 +453,41 @@
   2.588     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15089">Issue-15089</a>
   2.589     
   2.590     <div class=issue-details>
   2.591 -    <p class=short-desc id=shrink-to-fit-circle-shape>shrink-to-fit circle /
   2.592 -     shape</p>
   2.593 +    <p class=short-desc>shrink-to-fit circle / shape</p>
   2.594     </div>
   2.595    </div>
   2.596  
   2.597 -  <p id=outside-and-inside-><dfn id=outside-and-inside
   2.598 -   title=outside-inside>Outside and inside</dfn>
   2.599 -
   2.600 -  <p id=in-this-specification-outside-refers-to-> In this specification,
   2.601 -   ‘<code class=property>outside</code>’ refers to DOM content that is
   2.602 -   not a descendant of an element while ‘<code
   2.603 +  <p><dfn id=outside-and-inside title=outside-inside>Outside and inside</dfn>
   2.604 +   
   2.605 +
   2.606 +  <p> In this specification, ‘<code class=property>outside</code>’ refers
   2.607 +   to DOM content that is not a descendant of an element while ‘<code
   2.608     class=property>inside</code>’ refers to the element's descendants.
   2.609  
   2.610    <h2 id=exclusions><span class=secno>3. </span>Exclusions</h2>
   2.611  
   2.612 -  <p id=exclusion-elements-define-exclusion-area> Exclusion elements define
   2.613 -   exclusion areas that contribute to their containing block's <a
   2.614 -   href="#wrapping-context">wrapping context</a>. As a consequence,
   2.615 -   exclusions impact the layout of their containing block's descendants.
   2.616 -
   2.617 -  <p id=x1>
   2.618 -
   2.619 -  <p id=elements-layout-their-inline-content-in-> Elements layout their
   2.620 -   inline content in their <a href="#content-area">content area</a> and wrap
   2.621 -   around the areas in their associated <a href="#wrapping-context">wrapping
   2.622 -   context</a>. If the element is itself an exclusion, it does not wrap
   2.623 -   around its own exclusion shape and the impact of other exclusions on other
   2.624 -   exclusions is controlled by the ‘<code class=property>z-index</code>’
   2.625 -   property as explained in the <a href="#exclusions-order">exclusions
   2.626 -   order</a> section.
   2.627 -
   2.628 -  <p id=the-shape-properties-can-be-used-to-chan> The <a href="#shapes">shape
   2.629 -   properties</a> can be used to change the shape of <a
   2.630 -   href="#exclusion-area">exclusion areas</a>.
   2.631 +  <p> Exclusion elements define exclusion areas that contribute to their
   2.632 +   containing block's <a href="#wrapping-context">wrapping context</a>. As a
   2.633 +   consequence, exclusions impact the layout of their containing block's
   2.634 +   descendants.
   2.635 +
   2.636 +  <p>
   2.637 +
   2.638 +  <p> Elements layout their inline content in their <a
   2.639 +   href="#content-area">content area</a> and wrap around the areas in their
   2.640 +   associated <a href="#wrapping-context">wrapping context</a>. If the
   2.641 +   element is itself an exclusion, it does not wrap around its own exclusion
   2.642 +   shape and the impact of other exclusions on other exclusions is controlled
   2.643 +   by the ‘<code class=property>z-index</code>’ property as explained in
   2.644 +   the <a href="#exclusions-order">exclusions order</a> section.
   2.645 +
   2.646 +  <p> The <a href="#shapes">shape properties</a> can be used to change the
   2.647 +   shape of <a href="#exclusion-area">exclusion areas</a>.
   2.648  
   2.649    <h3 id=declaring-exclusions><span class=secno>3.1. </span>Declaring
   2.650     exclusions</h3>
   2.651  
   2.652 -  <p id=an-element-becomes-an-exclusion-when-its> An element becomes an
   2.653 -   exclusion when its ‘<a href="#wrap-flow"><code
   2.654 +  <p> An element becomes an exclusion when its ‘<a href="#wrap-flow"><code
   2.655     class=property>wrap-flow</code></a>’ property has a computed value other
   2.656     than ‘<code class=property>auto</code>’.
   2.657  
   2.658 @@ -592,13 +546,11 @@
   2.659     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16437">Issue-16437</a>
   2.660     
   2.661     <div class=issue-details>
   2.662 -    <p class=short-desc id=consistent-use-of-startendtopbottom>Consistent use
   2.663 -     of start/end/top/bottom</p>
   2.664 +    <p class=short-desc>Consistent use of start/end/top/bottom</p>
   2.665     </div>
   2.666    </div>
   2.667  
   2.668 -  <p id=the-values-of-this-property-have-the-fol>The values of this property
   2.669 -   have the following meanings:
   2.670 +  <p>The values of this property have the following meanings:
   2.671  
   2.672    <dl>
   2.673     <dt><dfn id=auto title="'wrap-flow'!!'auto'">auto</dfn>
   2.674 @@ -642,15 +594,15 @@
   2.675      edges of the exclusion empty.
   2.676    </dl>
   2.677  
   2.678 -  <p id=if-the-propertys-computed-value-is-auto-> If the property's computed
   2.679 -   value is ‘<code class=property>auto</code>’, the element does not
   2.680 -   become an <span>exclusion</span>.
   2.681 -
   2.682 -  <p id=otherwise-a-computed-wrap-flow-property-> Otherwise, a computed ‘<a
   2.683 -   href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property
   2.684 -   value of ‘<code class=property>both</code>’, ‘<code
   2.685 -   class=property>start</code>’, ‘<code class=property>end</code>’,
   2.686 -   ‘<code class=property>minimum</code>’, ‘<code
   2.687 +  <p> If the property's computed value is ‘<code
   2.688 +   class=property>auto</code>’, the element does not become an
   2.689 +   <span>exclusion</span>.
   2.690 +
   2.691 +  <p> Otherwise, a computed ‘<a href="#wrap-flow"><code
   2.692 +   class=property>wrap-flow</code></a>’ property value of ‘<code
   2.693 +   class=property>both</code>’, ‘<code class=property>start</code>’,
   2.694 +   ‘<code class=property>end</code>’, ‘<code
   2.695 +   class=property>minimum</code>’, ‘<code
   2.696     class=property>maximum</code>’ or ‘<code
   2.697     class=property>clear</code>’ on an element makes that element an
   2.698     <span>exclusion element. It's <span>exclusion shape</span> is contributed
   2.699 @@ -658,54 +610,53 @@
   2.700     context</a>, causing the containing block's descendants to wrap around its
   2.701     exclusion area. </span>
   2.702  
   2.703 -  <p id=an-exclusion-element-establishes-a-new-b>An <a
   2.704 -   href="#exclusion-element">exclusion element</a> establishes a new <a
   2.705 -   href="">block formatting context</a> (see <a href="#CSS21"
   2.706 +  <p>An <a href="#exclusion-element">exclusion element</a> establishes a new
   2.707 +   <a href="">block formatting context</a> (see <a href="#CSS21"
   2.708     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) for its content.
   2.709  
   2.710    <div class=figure> <img
   2.711     alt="General illustration showing how exclusions combine"
   2.712     src="images/exclusions-illustration.png" width="70%">
   2.713 -   <p class=caption id=combining-exclusions>Combining exclusions</p>
   2.714 +   <p class=caption>Combining exclusions</p>
   2.715    </div>
   2.716  
   2.717 -  <p id=the-above-figure-illustrates-how-exclusi> The above figure
   2.718 -   illustrates how exclusions are combined. The outermost box represents an
   2.719 -   element's content box. The A, B, C and D darker gray boxes represent
   2.720 -   exclusions in the element's <a href="#wrapping-context">wrapping
   2.721 -   context</a>. A, B, C and D have their respective ‘<a
   2.722 -   href="#wrap-flow"><code class=property>wrap-flow</code></a>’ set to
   2.723 -   ‘<code class=property>both</code>’, ‘<code
   2.724 -   class=property>start</code>’, ‘<code class=property>end</code>’ and
   2.725 -   ‘<code class=property>clear</code>’ respectively. The lighter gray
   2.726 -   areas show the additional areas that are excluded for inline layout as a
   2.727 -   result of the ‘<a href="#wrap-flow"><code
   2.728 -   class=property>wrap-flow</code></a>’ value. For example, the area to the
   2.729 -   right of ‘<code class=property>B</code>’ cannot be used for inline
   2.730 -   layout because the ‘<a href="#wrap-flow"><code
   2.731 -   class=property>wrap-flow</code></a>’ for ‘<code
   2.732 -   class=property>B</code>’ is ‘<code class=property>start</code>’.
   2.733 -
   2.734 -  <p id=the-background-blue-area-shows-what-area> The background ‘<code
   2.735 -   class=property>blue</code>’ area shows what areas are available for the
   2.736 -   element's inline content layout. All areas represented with a light or
   2.737 -   dark shade of gray are not available for inline content layout.
   2.738 +  <p> The above figure illustrates how exclusions are combined. The outermost
   2.739 +   box represents an element's content box. The A, B, C and D darker gray
   2.740 +   boxes represent exclusions in the element's <a
   2.741 +   href="#wrapping-context">wrapping context</a>. A, B, C and D have their
   2.742 +   respective ‘<a href="#wrap-flow"><code
   2.743 +   class=property>wrap-flow</code></a>’ set to ‘<code
   2.744 +   class=property>both</code>’, ‘<code class=property>start</code>’,
   2.745 +   ‘<code class=property>end</code>’ and ‘<code
   2.746 +   class=property>clear</code>’ respectively. The lighter gray areas show
   2.747 +   the additional areas that are excluded for inline layout as a result of
   2.748 +   the ‘<a href="#wrap-flow"><code class=property>wrap-flow</code></a>’
   2.749 +   value. For example, the area to the right of ‘<code
   2.750 +   class=property>B</code>’ cannot be used for inline layout because the
   2.751 +   ‘<a href="#wrap-flow"><code class=property>wrap-flow</code></a>’ for
   2.752 +   ‘<code class=property>B</code>’ is ‘<code
   2.753 +   class=property>start</code>’.
   2.754 +
   2.755 +  <p> The background ‘<code class=property>blue</code>’ area shows what
   2.756 +   areas are available for the element's inline content layout. All areas
   2.757 +   represented with a light or dark shade of gray are not available for
   2.758 +   inline content layout.
   2.759  
   2.760    <div class="issue-marker wrapper">
   2.761     <div class=issue-marker data-bug_id=15084 data-bug_status=NEW> <a
   2.762      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Issue-15084</a>
   2.763      
   2.764      <div class=issue-details>
   2.765 -     <p class=short-desc id=fluidity-of-the-layout-with-respect-to-d>Fluidity
   2.766 -      of the layout with respect to different amounts of content</p>
   2.767 +     <p class=short-desc>Fluidity of the layout with respect to different
   2.768 +      amounts of content</p>
   2.769      </div>
   2.770     </div>
   2.771    </div>
   2.772  
   2.773    <div class=example>
   2.774 -   <p id=the-wrap-flow-property-values-applied-to> The ‘<a
   2.775 -    href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property
   2.776 -    values applied to an absolutely positioned element.</p>
   2.777 +   <p> The ‘<a href="#wrap-flow"><code
   2.778 +    class=property>wrap-flow</code></a>’ property values applied to an
   2.779 +    absolutely positioned element.</p>
   2.780     <code class=html></code>
   2.781     <pre>
   2.782      
   2.783 @@ -738,11 +689,11 @@
   2.784  &lt;/style&gt; 
   2.785  </pre>
   2.786  
   2.787 -   <p id=the-following-figures-illustrate-the-vis>The following figures
   2.788 -    illustrate the visual rendering for different values of the ‘<a
   2.789 -    href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property.
   2.790 -    The gray grid lines are marking the grid cells. and the blue area is the
   2.791 -    exclusion box (positioned by the grid).</p>
   2.792 +   <p>The following figures illustrate the visual rendering for different
   2.793 +    values of the ‘<a href="#wrap-flow"><code
   2.794 +    class=property>wrap-flow</code></a>’ property. The gray grid lines are
   2.795 +    marking the grid cells. and the blue area is the exclusion box
   2.796 +    (positioned by the grid).</p>
   2.797  
   2.798     <table class=example-table>
   2.799      <tbody>
   2.800 @@ -800,9 +751,8 @@
   2.801    <h3 id=scope-and-effect-of-exclusions><span class=secno>3.2. </span>Scope
   2.802     and effect of exclusions</h3>
   2.803  
   2.804 -  <p id=an-exclusion-affects-the-inline-flow-con> An <span>exclusion</span>
   2.805 -   affects the inline flow content descended from the exclusion's containing
   2.806 -   blocks (defined in <a
   2.807 +  <p> An <span>exclusion</span> affects the inline flow content descended
   2.808 +   from the exclusion's containing blocks (defined in <a
   2.809     href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
   2.810     CSS 2.1 10.1</a>) and that of all descendant elements of the same
   2.811     containing block. All inline flow content inside the containing block of
   2.812 @@ -812,21 +762,19 @@
   2.813     href="#propagation-of-exclusions">propagation of exclusions</a> section
   2.814     below).
   2.815  
   2.816 -  <p id=for-exclusions-with-positionfixed-the-co> For exclusions with
   2.817 -   ‘<code class=css>position:fixed</code>’, the containing block is that
   2.818 -   of the root element.
   2.819 +  <p> For exclusions with ‘<code class=css>position:fixed</code>’, the
   2.820 +   containing block is that of the root element.
   2.821  
   2.822    <h4 id=wrap-margin-property><span class=secno>3.2.1. </span>The ‘<a
   2.823     href="#wrap-margin"><code class=property>wrap-margin</code></a>’
   2.824     property</h4>
   2.825  
   2.826 -  <p id=the-wrap-margin-property-can-be-used-to-> The ‘<a
   2.827 -   href="#wrap-margin"><code class=property>wrap-margin</code></a>’
   2.828 -   property can be used to offset the inline flow content wrapping on the
   2.829 -   outside of exclusions. Offsets created by the ‘<a
   2.830 -   href="#wrap-margin"><code class=property>wrap-margin</code></a>’
   2.831 -   property are offset from the outside of the exclusion. This property takes
   2.832 -   on positive values only.
   2.833 +  <p> The ‘<a href="#wrap-margin"><code
   2.834 +   class=property>wrap-margin</code></a>’ property can be used to offset
   2.835 +   the inline flow content wrapping on the outside of exclusions. Offsets
   2.836 +   created by the ‘<a href="#wrap-margin"><code
   2.837 +   class=property>wrap-margin</code></a>’ property are offset from the
   2.838 +   outside of the exclusion. This property takes on positive values only.
   2.839  
   2.840    <table class=propdef>
   2.841     <tbody>
   2.842 @@ -876,13 +824,13 @@
   2.843     href="#wrap-padding"><code class=property>wrap-padding</code></a>’
   2.844     Property</h4>
   2.845  
   2.846 -  <p id=the-wrap-padding-property-can-be-used-to> The ‘<a
   2.847 -   href="#wrap-padding"><code class=property>wrap-padding</code></a>’
   2.848 -   property can be used to offset the inline flow content wrapping on the
   2.849 -   inside of elements. Offsets created by the ‘<a
   2.850 -   href="#wrap-padding"><code class=property>wrap-padding</code></a>’
   2.851 -   property are offset from the <a href="#content-area">content area</a> of
   2.852 -   the element. This property takes on positive values only.
   2.853 +  <p> The ‘<a href="#wrap-padding"><code
   2.854 +   class=property>wrap-padding</code></a>’ property can be used to offset
   2.855 +   the inline flow content wrapping on the inside of elements. Offsets
   2.856 +   created by the ‘<a href="#wrap-padding"><code
   2.857 +   class=property>wrap-padding</code></a>’ property are offset from the <a
   2.858 +   href="#content-area">content area</a> of the element. This property takes
   2.859 +   on positive values only.
   2.860  
   2.861    <table class=propdef>
   2.862     <tbody>
   2.863 @@ -938,18 +886,17 @@
   2.864    <h3 id=propagation-of-exclusions><span class=secno>3.3. </span>Propagation
   2.865     of Exclusions</h3>
   2.866  
   2.867 -  <p id=by-default-an-element-inherits-its-paren> By default, an element
   2.868 -   inherits its parent <a href="#wrapping-context">wrapping context</a>. In
   2.869 -   other words it is subject to the exclusions defined <a
   2.870 -   href="#outside-and-inside" title=outside-inside>outside the element. </a>
   2.871 -
   2.872 -  <p id=setting-the-wrap-through-property-to-non>Setting the ‘<a
   2.873 -   href="#wrap-through"><code class=property>wrap-through</code></a>’
   2.874 -   property to ‘<code class=property>none</code>’ prevents an element
   2.875 -   from inheriting its parent <a href="#wrapping-context">wrapping
   2.876 -   context</a>. In other words, exclusions defined ‘<code
   2.877 -   class=property>outside</code>’ the element, have not effect on the
   2.878 -   element's children layout.
   2.879 +  <p> By default, an element inherits its parent <a
   2.880 +   href="#wrapping-context">wrapping context</a>. In other words it is
   2.881 +   subject to the exclusions defined <a href="#outside-and-inside"
   2.882 +   title=outside-inside>outside the element. </a>
   2.883 +
   2.884 +  <p>Setting the ‘<a href="#wrap-through"><code
   2.885 +   class=property>wrap-through</code></a>’ property to ‘<code
   2.886 +   class=property>none</code>’ prevents an element from inheriting its
   2.887 +   parent <a href="#wrapping-context">wrapping context</a>. In other words,
   2.888 +   exclusions defined ‘<code class=property>outside</code>’ the element,
   2.889 +   have not effect on the element's children layout.
   2.890  
   2.891    <div class=note> Exclusions defined by an element's descendants still
   2.892     contribute to their containing block's <a
   2.893 @@ -967,7 +914,7 @@
   2.894     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Issue-15085</a>
   2.895     
   2.896     <div class=issue-details>
   2.897 -    <p class=short-desc id=do-we-need-wrap-through>do we need wrap-through?</p>
   2.898 +    <p class=short-desc>do we need wrap-through?</p>
   2.899     </div>
   2.900    </div>
   2.901  
   2.902 @@ -1014,8 +961,7 @@
   2.903       <td>as specified
   2.904    </table>
   2.905  
   2.906 -  <p id=the-values-of-this-property-have-the-fol0>The values of this property
   2.907 -   have the following meanings:
   2.908 +  <p>The values of this property have the following meanings:
   2.909  
   2.910    <dl>
   2.911     <dt><dfn id=wrap title="'wrap-through'!!'wrap'">wrap</dfn>
   2.912 @@ -1036,9 +982,9 @@
   2.913    </dl>
   2.914  
   2.915    <div class=example>
   2.916 -   <p id=using-the-wrap-through-property-to-contr> Using the ‘<a
   2.917 -    href="#wrap-through"><code class=property>wrap-through</code></a>’
   2.918 -    property to control the effect of exclusions.</p>
   2.919 +   <p> Using the ‘<a href="#wrap-through"><code
   2.920 +    class=property>wrap-through</code></a>’ property to control the effect
   2.921 +    of exclusions.</p>
   2.922  
   2.923     <pre><code class=html>
   2.924  
   2.925 @@ -1141,17 +1087,15 @@
   2.926       <td>see individual properties
   2.927    </table>
   2.928  
   2.929 -  <p id=the-wrap-property-is-a-shorthand-propert> The ‘<a
   2.930 -   href="#wrap0"><code class=property>wrap</code></a>’ property is a
   2.931 -   shorthand property for setting the exclusions properties at the same place
   2.932 -   in the style sheet.</p>
   2.933 +  <p> The ‘<a href="#wrap0"><code class=property>wrap</code></a>’
   2.934 +   property is a shorthand property for setting the exclusions properties at
   2.935 +   the same place in the style sheet.</p>
   2.936    <!-- End section "wrap shorthand property" -->
   2.937    <!-- End section "Propagation of Exclusions" -->
   2.938  
   2.939    <h3 id=exclusions-order><span class=secno>3.4. </span>Exclusions order</h3>
   2.940  
   2.941 -  <p id=exclusions-follow-the-painting-order-see> Exclusions follow the
   2.942 -   painting order (See <a href="#CSS21"
   2.943 +  <p> Exclusions follow the painting order (See <a href="#CSS21"
   2.944     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Appendix E). Exclusions are
   2.945     applied in reverse to the document order in which they are defined. The
   2.946     last exclusion appears on top of all other exclusion, thus it affects the
   2.947 @@ -1170,13 +1114,12 @@
   2.948     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16474">Issue-16474</a>
   2.949     
   2.950     <div class=issue-details>
   2.951 -    <p class=short-desc id=improve-example-3-about-exclusion-order>Improve
   2.952 -     Example 3 about exclusion order</p>
   2.953 +    <p class=short-desc>Improve Example 3 about exclusion order</p>
   2.954     </div>
   2.955    </div>
   2.956  
   2.957    <div class=example>
   2.958 -   <p id=ordering-of-exclusions.>Ordering of exclusions.</p>
   2.959 +   <p>Ordering of exclusions.</p>
   2.960  
   2.961     <pre><code class=html>
   2.962  &lt;style type="text/css"&gt; 
   2.963 @@ -1223,8 +1166,7 @@
   2.964      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Issue-15183</a>
   2.965      
   2.966      <div class=issue-details>
   2.967 -     <p class=short-desc id=is-the-css-exclusions-processing-model-i>Is the
   2.968 -      CSS exclusions processing model incorrect?</p>
   2.969 +     <p class=short-desc>Is the CSS exclusions processing model incorrect?</p>
   2.970      </div>
   2.971     </div>
   2.972  
   2.973 @@ -1232,24 +1174,22 @@
   2.974      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Issue-15083</a>
   2.975      
   2.976      <div class=issue-details>
   2.977 -     <p class=short-desc id=concerns-over-error-accumulation-vs.-per>Concerns
   2.978 -      over Error accumulation vs. performance</p>
   2.979 +     <p class=short-desc>Concerns over Error accumulation vs. performance</p>
   2.980      </div>
   2.981     </div>
   2.982    </div>
   2.983  
   2.984 -  <p class=issue id=the-rules-for-exclusions-order-and-exclu> The rules for
   2.985 -   exclusions order and exclusions on absolutely positioned elements
   2.986 -   (particularly those with static position) build this exclusions model on
   2.987 -   top of the absolute positioning model in CSS Level 2, rather than on top
   2.988 -   of floats, the existing exclusion model in CSS Level 1 and 2. The CSS
   2.989 -   Working Group has not reached consensus on whether it intends to base the
   2.990 -   new exclusions features in this specification on top of absolute
   2.991 -   positioning (as these sections of this specification do) or on top of
   2.992 -   floats.
   2.993 -
   2.994 -  <p class=note id=this-module-does-not-depend-on-any-parti> This module does
   2.995 -   not depend on any particular positioning scheme.
   2.996 +  <p class=issue> The rules for exclusions order and exclusions on absolutely
   2.997 +   positioned elements (particularly those with static position) build this
   2.998 +   exclusions model on top of the absolute positioning model in CSS Level 2,
   2.999 +   rather than on top of floats, the existing exclusion model in CSS Level 1
  2.1000 +   and 2. The CSS Working Group has not reached consensus on whether it
  2.1001 +   intends to base the new exclusions features in this specification on top
  2.1002 +   of absolute positioning (as these sections of this specification do) or on
  2.1003 +   top of floats.
  2.1004 +
  2.1005 +  <p class=note> This module does not depend on any particular positioning
  2.1006 +   scheme.
  2.1007  
  2.1008    <h3 id=exclusions-processing-model><span class=secno>3.5. </span>Processing
  2.1009     model</h3>
  2.1010 @@ -1257,23 +1197,20 @@
  2.1011    <h4 id=exclusions-processing-model-description><span class=secno>3.5.1.
  2.1012     </span>Description</h4>
  2.1013  
  2.1014 -  <p id=applying-exclusions-is-a-two-step-proces>Applying exclusions is a
  2.1015 -   two-step process:
  2.1016 +  <p>Applying exclusions is a two-step process:
  2.1017  
  2.1018    <ul>
  2.1019 -   <li id=step-1-resolve-exclusion-boxes-belonging2><strong>Step 1</strong>:
  2.1020 -    resolve exclusion boxes belonging to each <a
  2.1021 +   <li><strong>Step 1</strong>: resolve exclusion boxes belonging to each <a
  2.1022      href="#wrapping-context">wrapping context</a>
  2.1023  
  2.1024 -   <li id=step-2-resolve-wrapping-contexts-and-lay2><strong>Step 2</strong>:
  2.1025 -    resolve <a href="#wrapping-context">wrapping context</a>s and lay out
  2.1026 -    each containing block in turn:
  2.1027 +   <li><strong>Step 2</strong>: resolve <a href="#wrapping-context">wrapping
  2.1028 +    context</a>s and lay out each containing block in turn:
  2.1029      <ul>
  2.1030 -     <li id=step-2-a-resolve-the-position-and-size-o0><strong>Step
  2.1031 -      2-A</strong>: resolve the position and size of exclusion boxes
  2.1032 -
  2.1033 -     <li id=step-2-b-lay-out-containing-block-wrappi><strong>Step
  2.1034 -      2-B</strong>: lay out containing block, wrapping around exclusion areas
  2.1035 +     <li><strong>Step 2-A</strong>: resolve the position and size of
  2.1036 +      exclusion boxes
  2.1037 +
  2.1038 +     <li><strong>Step 2-B</strong>: lay out containing block, wrapping around
  2.1039 +      exclusion areas
  2.1040      </ul>
  2.1041    </ul>
  2.1042  
  2.1043 @@ -1282,8 +1219,7 @@
  2.1044     class=secno>3.5.2. </span>Step 1: resolve exclusion boxes belonging to
  2.1045     each <a href="#wrapping-context">wrapping context</a></h4>
  2.1046  
  2.1047 -  <p id=in-this-step-the-user-agent-determines-w>In this step, the user agent
  2.1048 -   determines which <a
  2.1049 +  <p>In this step, the user agent determines which <a
  2.1050     href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
  2.1051     block</a> each <a href="#exclusion-area">exclusion area</a> belongs to.
  2.1052     This is a simple step, based on the definition of containing blocks and
  2.1053 @@ -1295,8 +1231,7 @@
  2.1054     class=secno>3.5.3. </span>Step 2: resolve wrapping contexts and lay out
  2.1055     containing blocks</h4>
  2.1056  
  2.1057 -  <p id=in-this-step-starting-from-the-top-of-th>In this step, starting from
  2.1058 -   the top of the <a
  2.1059 +  <p>In this step, starting from the top of the <a
  2.1060     href="http://www.w3.org/TR/CSS2/visuren.html#z-index">rendering tree</a>
  2.1061     (see <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), the
  2.1062     the agent processes each containing block in two sub-steps.
  2.1063 @@ -1305,21 +1240,20 @@
  2.1064     class=secno>3.5.4. </span>Step 2-A: resolve the position and size of
  2.1065     exclusion boxes</h4>
  2.1066  
  2.1067 -  <p id=resolving-the-position-and-size-of-exclu>Resolving the position and
  2.1068 -   size of <a href="#exclusion-box">exclusion boxes</a> in the <a
  2.1069 -   href="#wrapping-context">wrapping context</a> may or may not require a
  2.1070 -   layout. For example, if an <a href="#exclusion-box">exclusion box</a> is
  2.1071 -   absolutely positioned and sized, a layout may not be needed to resolve its
  2.1072 -   position and size. In other situations, laying out the containing block's
  2.1073 -   content is required.
  2.1074 -
  2.1075 -  <p id=when-a-layout-is-required-it-is-carried->When a layout is required,
  2.1076 -   it is carried out without applying any <a href="#exclusion-area">exclusion
  2.1077 -   area</a>. In other words, the containing block is laid out without a <a
  2.1078 -   href="#wrapping-context">wrapping context</a>.
  2.1079 -
  2.1080 -  <p id=step-2-a-yields-a-position-and-size-for->Step 2-A yields a position
  2.1081 -   and size for all <a href="#exclusion-box">exclusion boxes</a> in the <a
  2.1082 +  <p>Resolving the position and size of <a href="#exclusion-box">exclusion
  2.1083 +   boxes</a> in the <a href="#wrapping-context">wrapping context</a> may or
  2.1084 +   may not require a layout. For example, if an <a
  2.1085 +   href="#exclusion-box">exclusion box</a> is absolutely positioned and
  2.1086 +   sized, a layout may not be needed to resolve its position and size. In
  2.1087 +   other situations, laying out the containing block's content is required.
  2.1088 +
  2.1089 +  <p>When a layout is required, it is carried out without applying any <a
  2.1090 +   href="#exclusion-area">exclusion area</a>. In other words, the containing
  2.1091 +   block is laid out without a <a href="#wrapping-context">wrapping
  2.1092 +   context</a>.
  2.1093 +
  2.1094 +  <p>Step 2-A yields a position and size for all <a
  2.1095 +   href="#exclusion-box">exclusion boxes</a> in the <a
  2.1096     href="#wrapping-context">wrapping context</a>. Each exclusion box is
  2.1097     processed in turn, starting from the top-most, and each <a
  2.1098     href="#exclusion-area">exclusion area</a> is computed and contributed to
  2.1099 @@ -1327,12 +1261,11 @@
  2.1100     href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
  2.1101     block's</a> <a href="#wrapping-context">wrapping context</a>.
  2.1102  
  2.1103 -  <p id=scrolling-is-ignored-in-this-step-when-r>Scrolling is ignored in this
  2.1104 -   step when resolving the position and size of ‘<code
  2.1105 -   class=css>position:fixed</code>’ <a href="#exclusion-box">exclusion
  2.1106 -   boxes</a>.
  2.1107 -
  2.1108 -  <p id=once-the-containing-blocks-wrapping-cont>Once the <a
  2.1109 +  <p>Scrolling is ignored in this step when resolving the position and size
  2.1110 +   of ‘<code class=css>position:fixed</code>’ <a
  2.1111 +   href="#exclusion-box">exclusion boxes</a>.
  2.1112 +
  2.1113 +  <p>Once the <a
  2.1114     href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
  2.1115     block's</a> <a href="#wrapping-context">wrapping context</a> is computed,
  2.1116     all <a href="#exclusion-box">exclusion boxes</a> in that <a
  2.1117 @@ -1343,29 +1276,26 @@
  2.1118     class=secno>3.5.5. </span>Step 2-B: lay out containing block applying
  2.1119     wrapping</h4>
  2.1120  
  2.1121 -  <p id=finally-the-content-of-the-containing-bl>Finally, the content of the
  2.1122 -   containing block is laid out, with the inline content wrapping around the
  2.1123 -   <span>wrapping content</span>‘<code class=css>s <a
  2.1124 -   href="#exclusion-area">exclusion areas</a> (which may be different from
  2.1125 -   the <a href="#exclusion-box">exclusion box</a> because of the
  2.1126 -   </code>’shape-outside' property).
  2.1127 -
  2.1128 -  <p id=when-the-containing-block-itself-is-an-e>When the containing block
  2.1129 -   itself is an <a href="#exclusion-box">exclusion box</a>, then rules on <a
  2.1130 +  <p>Finally, the content of the containing block is laid out, with the
  2.1131 +   inline content wrapping around the <span>wrapping content</span>‘<code
  2.1132 +   class=css>s <a href="#exclusion-area">exclusion areas</a> (which may be
  2.1133 +   different from the <a href="#exclusion-box">exclusion box</a> because of
  2.1134 +   the </code>’shape-outside' property).
  2.1135 +
  2.1136 +  <p>When the containing block itself is an <a
  2.1137 +   href="#exclusion-box">exclusion box</a>, then rules on <a
  2.1138     href="#exclusions-order">exclusions order</a> define which exclusions
  2.1139     affect the inline and descendant content of the box.
  2.1140  
  2.1141    <h4 id=exclusions-processing-model-example><span class=secno>3.5.6.
  2.1142     </span>Example</h4>
  2.1143  
  2.1144 -  <p id=this-section-illustrates-the-exclusions->This section illustrates the
  2.1145 -   exclusions processing model with an example. It is meant to be simple.
  2.1146 -   Yet, it contains enough complexity to address the issues of layout
  2.1147 -   dependencies and re-layout.
  2.1148 -
  2.1149 -  <p id=the-code-snippet-in-the-following-exampl>The code snippet in the
  2.1150 -   following example has two exclusions affecting the document's inline
  2.1151 -   content.
  2.1152 +  <p>This section illustrates the exclusions processing model with an
  2.1153 +   example. It is meant to be simple. Yet, it contains enough complexity to
  2.1154 +   address the issues of layout dependencies and re-layout.
  2.1155 +
  2.1156 +  <p>The code snippet in the following example has two exclusions affecting
  2.1157 +   the document's inline content.
  2.1158  
  2.1159    <div class=example>
  2.1160     <pre class=html>&lt;html&gt;
  2.1161 @@ -1419,67 +1349,60 @@
  2.1162  &lt;/html&gt;</pre>
  2.1163    </div>
  2.1164  
  2.1165 -  <p id=the-following-figures-illustrate>The following figures illustrate:
  2.1166 +  <p>The following figures illustrate:
  2.1167  
  2.1168    <ul>
  2.1169 -   <li id=the-documents-dom-tree>the document's DOM tree
  2.1170 -
  2.1171 -   <li id=the-layout-tree-of-generated-block-boxes>the layout tree of
  2.1172 -    generated block boxes
  2.1173 +   <li>the document's DOM tree
  2.1174 +
  2.1175 +   <li>the layout tree of generated block boxes
  2.1176    </ul>
  2.1177  
  2.1178    <div class=figure> <img alt="DOM tree nodes"
  2.1179     src="images/processing-model-example-dom.svg" width=200>
  2.1180 -   <p class=caption id=dom-tree>DOM tree</p>
  2.1181 +   <p class=caption>DOM tree</p>
  2.1182    </div>
  2.1183  
  2.1184    <div class=figure> <img alt="Layout tree boxes"
  2.1185     src="images/processing-model-example-layout-tree.svg" width=350>
  2.1186 -   <p class=caption id=layout-tree-of-generated-block-boxes>Layout tree of
  2.1187 -    generated block boxes</p>
  2.1188 +   <p class=caption>Layout tree of generated block boxes</p>
  2.1189    </div>
  2.1190  
  2.1191    <h5 id=step-1-resolve-exclusion-boxes-belonging><span class=secno>3.5.6.1.
  2.1192     </span>Step 1: resolve exclusion boxes belonging to each <a
  2.1193     href="#wrapping-context">wrapping context</a></h5>
  2.1194  
  2.1195 -  <p id=the-figures-illustrate-how-the-boxes-cor>The figures illustrate how
  2.1196 -   the boxes corresponding to the element sometimes have a different
  2.1197 -   containment hierarchy in the layout tree than in the DOM tree. For
  2.1198 -   example, the box generated by <code class=idl>e1</code> is positioned in
  2.1199 -   its containing block's box, which is the <code class=idl>d1-box</code>,
  2.1200 -   because <code class=idl>e1</code> is absolutely positioned and <code
  2.1201 -   class=idl>d1</code> is relatively positioned. However, while <code
  2.1202 -   class=idl>e2</code> is also absolutely positioned, its containing block is
  2.1203 -   the initial containing block (ICB). See the section 10.1 of the CSS 2.1
  2.1204 -   specification (<a href="#CSS21"
  2.1205 +  <p>The figures illustrate how the boxes corresponding to the element
  2.1206 +   sometimes have a different containment hierarchy in the layout tree than
  2.1207 +   in the DOM tree. For example, the box generated by <code
  2.1208 +   class=idl>e1</code> is positioned in its containing block's box, which is
  2.1209 +   the <code class=idl>d1-box</code>, because <code class=idl>e1</code> is
  2.1210 +   absolutely positioned and <code class=idl>d1</code> is relatively
  2.1211 +   positioned. However, while <code class=idl>e2</code> is also absolutely
  2.1212 +   positioned, its containing block is the initial containing block (ICB).
  2.1213 +   See the section 10.1 of the CSS 2.1 specification (<a href="#CSS21"
  2.1214     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) for details.
  2.1215  
  2.1216 -  <p id=as-a-result-of-the-computation-of-contai>As a result of the
  2.1217 -   computation of containing blocks for the tree, the boxes belonging to the
  2.1218 -   <a href="#wrapping-context">wrapping context</a>s of all the elements can
  2.1219 -   be determined:
  2.1220 +  <p>As a result of the computation of containing blocks for the tree, the
  2.1221 +   boxes belonging to the <a href="#wrapping-context">wrapping context</a>s
  2.1222 +   of all the elements can be determined:
  2.1223  
  2.1224    <ul>
  2.1225 -   <li id=the-wrapping-context-for-the-html-elemen>The <a
  2.1226 -    href="#wrapping-context">wrapping context</a> for the html element
  2.1227 -    contains the <code class=idl>e2</code> box: WC-1 (Wrapping Context 1)
  2.1228 -
  2.1229 -   <li id=the-wrapping-context-for-the-body-elemen>The <a
  2.1230 -    href="#wrapping-context">wrapping context</a> for the body element
  2.1231 -    inherits the html element's <a href="#wrapping-context">wrapping
  2.1232 +   <li>The <a href="#wrapping-context">wrapping context</a> for the html
  2.1233 +    element contains the <code class=idl>e2</code> box: WC-1 (Wrapping
  2.1234 +    Context 1)
  2.1235 +
  2.1236 +   <li>The <a href="#wrapping-context">wrapping context</a> for the body
  2.1237 +    element inherits the html element's <a href="#wrapping-context">wrapping
  2.1238      context</a>: WC-1
  2.1239  
  2.1240 -   <li id=the-wrapping-context-for-d1-inherits-the>The <a
  2.1241 -    href="#wrapping-context">wrapping context</a> for <code
  2.1242 +   <li>The <a href="#wrapping-context">wrapping context</a> for <code
  2.1243      class=idl>d1</code> inherits the body element's <a
  2.1244      href="#wrapping-context">wrapping context</a> and adds the <code
  2.1245      class=idl>e1-box</code> to it. So the wrapping context is made of both
  2.1246      the <code class=idl>e1-box</code> and the <code class=idl>e2-box</code>:
  2.1247      WC-2
  2.1248  
  2.1249 -   <li id=the-wrapping-context-for-d2-inherits-the>The <a
  2.1250 -    href="#wrapping-context">wrapping context</a> for <code
  2.1251 +   <li>The <a href="#wrapping-context">wrapping context</a> for <code
  2.1252      class=idl>d2</code> inherits the body element's <a
  2.1253      href="#wrapping-context">wrapping context</a>: WC-1
  2.1254    </ul>
  2.1255 @@ -1487,54 +1410,43 @@
  2.1256    <h5 id=step-2-resolve-wrapping-contexts-and-lay><span class=secno>3.5.6.2.
  2.1257     </span>Step 2: resolve wrapping contexts and lay out containing blocks</h5>
  2.1258  
  2.1259 -  <p id=in-this-step-each-containing-block-is-pr>In this step, each
  2.1260 -   containing block is processed in turn. For each containing block, we
  2.1261 -   (conceptually) go through two phases:
  2.1262 +  <p>In this step, each containing block is processed in turn. For each
  2.1263 +   containing block, we (conceptually) go through two phases:
  2.1264  
  2.1265    <ol>
  2.1266 -   <li id=resolve-the-wrapping-context-resolve-the>resolve the <a
  2.1267 -    href="#wrapping-context">wrapping context</a>: resolve the position and
  2.1268 -    size of its exclusions
  2.1269 -
  2.1270 -   <li id=lay-out-the-containing-block>lay out the containing block
  2.1271 +   <li>resolve the <a href="#wrapping-context">wrapping context</a>: resolve
  2.1272 +    the position and size of its exclusions
  2.1273 +
  2.1274 +   <li>lay out the containing block
  2.1275    </ol>
  2.1276  
  2.1277 -  <p id=in-our-example-this-breaks-down-to>In our example, this breaks down
  2.1278 -   to:
  2.1279 +  <p>In our example, this breaks down to:
  2.1280  
  2.1281    <ol>
  2.1282 -   <li id=resolve-the-position-and-size-of-the-exc>resolve the position and
  2.1283 -    size of the exclusions belonging to WC-1: RWC-1 (Resolved Wrapping
  2.1284 -    Context 1).
  2.1285 -
  2.1286 -   <li id=lay-out-the-initial-containing-block-i.e>lay out the initial
  2.1287 -    containing block (i.e., lay out its content):
  2.1288 +   <li>resolve the position and size of the exclusions belonging to WC-1:
  2.1289 +    RWC-1 (Resolved Wrapping Context 1).
  2.1290 +
  2.1291 +   <li>lay out the initial containing block (i.e., lay out its content):
  2.1292      <ol>
  2.1293 -     <li id=resolve-the-html-elements-wrapping-conte>resolve the html
  2.1294 -      element's <a href="#wrapping-context">wrapping context</a>: RWC-1
  2.1295 -
  2.1296 -     <li id=lay-out-the-html-element-resolve-the-bod>lay out the html
  2.1297 -      element:
  2.1298 +     <li>resolve the html element's <a href="#wrapping-context">wrapping
  2.1299 +      context</a>: RWC-1
  2.1300 +
  2.1301 +     <li>lay out the html element:
  2.1302        <ol>
  2.1303 -       <li id=resolve-the-body-elements-wrapping-conte>resolve the body
  2.1304 -        element's <a href="#wrapping-context">wrapping context</a>: RWC-1
  2.1305 -
  2.1306 -       <li id=lay-out-the-body-element-resolve-the-d1->lay out the body
  2.1307 -        element:
  2.1308 +       <li>resolve the body element's <a href="#wrapping-context">wrapping
  2.1309 +        context</a>: RWC-1
  2.1310 +
  2.1311 +       <li>lay out the body element:
  2.1312          <ol>
  2.1313 -         <li id=resolve-the-d1-elements-wrapping-context>resolve the <code
  2.1314 -          class=idl>d1</code> element's <a href="#wrapping-context">wrapping
  2.1315 -          context</a>: RWC-2
  2.1316 -
  2.1317 -         <li id=lay-out-the-d1-element>lay out the <code class=idl>d1</code>
  2.1318 -          element
  2.1319 -
  2.1320 -         <li id=resolve-the-d2-elements-wrapping-context>resolve the <code
  2.1321 -          class=idl>d2</code> element's <a href="#wrapping-context">wrapping
  2.1322 -          context</a>: RWC-1
  2.1323 -
  2.1324 -         <li id=lay-out-the-d2-element>lay out the <code class=idl>d2</code>
  2.1325 -          element
  2.1326 +         <li>resolve the <code class=idl>d1</code> element's <a
  2.1327 +          href="#wrapping-context">wrapping context</a>: RWC-2
  2.1328 +
  2.1329 +         <li>lay out the <code class=idl>d1</code> element
  2.1330 +
  2.1331 +         <li>resolve the <code class=idl>d2</code> element's <a
  2.1332 +          href="#wrapping-context">wrapping context</a>: RWC-1
  2.1333 +
  2.1334 +         <li>lay out the <code class=idl>d2</code> element
  2.1335          </ol>
  2.1336        </ol>
  2.1337      </ol>
  2.1338 @@ -1542,40 +1454,38 @@
  2.1339  
  2.1340    <h6 id=resolving-rwc-1><span class=secno>3.5.6.2.1. </span>Resolving RWC-1</h6>
  2.1341  
  2.1342 -  <p id=the-top-most-wrapping-context-in-the-lay>The top-most <a
  2.1343 -   href="#wrapping-context">wrapping context</a> in the layout tree contains
  2.1344 -   the <code class=idl>e2</code> exclusion. Its position and size needs to be
  2.1345 -   resolved. In general, computing an exclusion's position and size may or
  2.1346 -   may not require laying out other content. In our example, no content needs
  2.1347 -   to be laid out to resolve the <code class=idl>e2</code> exclusion's
  2.1348 -   position because it is absolutely positioned and its size can be resolved
  2.1349 -   without layout either. At this point, RWC-1 is resolved and can be used
  2.1350 -   when laying inline content out.
  2.1351 +  <p>The top-most <a href="#wrapping-context">wrapping context</a> in the
  2.1352 +   layout tree contains the <code class=idl>e2</code> exclusion. Its position
  2.1353 +   and size needs to be resolved. In general, computing an exclusion's
  2.1354 +   position and size may or may not require laying out other content. In our
  2.1355 +   example, no content needs to be laid out to resolve the <code
  2.1356 +   class=idl>e2</code> exclusion's position because it is absolutely
  2.1357 +   positioned and its size can be resolved without layout either. At this
  2.1358 +   point, RWC-1 is resolved and can be used when laying inline content out.
  2.1359  
  2.1360    <h6 id=resolving-rwc-2><span class=secno>3.5.6.2.2. </span>Resolving RWC-2</h6>
  2.1361  
  2.1362 -  <p id=the-process-is-similar-the-position-of-t>The process is similar: the
  2.1363 -   position of the <code class=idl>e1</code> exclusion needs to be resolved.
  2.1364 -   Again, resolving the exclusion's position and size may require processing
  2.1365 -   the containing block (d1 here). It is the case here because the size and
  2.1366 -   position of <code class=idl>e1</code> depend on resolving the percentage
  2.1367 -   lengths. The percentages are relative to the size of <code
  2.1368 -   class=idl>d1</code>‘<code class=css>s box. As a result, in order to
  2.1369 -   resolve a size for <code class=idl>d1</code></code>’s box, a first
  2.1370 -   layout of <code class=idl>d1</code> is done without any <a
  2.1371 +  <p>The process is similar: the position of the <code class=idl>e1</code>
  2.1372 +   exclusion needs to be resolved. Again, resolving the exclusion's position
  2.1373 +   and size may require processing the containing block (d1 here). It is the
  2.1374 +   case here because the size and position of <code class=idl>e1</code>
  2.1375 +   depend on resolving the percentage lengths. The percentages are relative
  2.1376 +   to the size of <code class=idl>d1</code>‘<code class=css>s box. As a
  2.1377 +   result, in order to resolve a size for <code
  2.1378 +   class=idl>d1</code></code>’s box, a first layout of <code
  2.1379 +   class=idl>d1</code> is done without any <a
  2.1380     href="#wrapping-context">wrapping context</a> (i.e., no exclusions
  2.1381     applied). The layout yields a position and size for <code
  2.1382     class=idl>e1</code>‘<code class=css>s box. </code>
  2.1383  
  2.1384 -  <p id=at-this-point-rwc-2-is-resolved-because->At this point, RWC-2 is
  2.1385 -   resolved because the position and size of both e1 and e2 are resolved.
  2.1386 -
  2.1387 -  <p class=note id=the-important-aspect-of-the-above-proces>The important
  2.1388 -   aspect of the above processing example is that once an element’s <a
  2.1389 -   href="#wrapping-context">wrapping context</a> is resolved (by resolving
  2.1390 -   its exclusions' position and size), the position and size of the
  2.1391 -   exclusions are not re-processed if the element's size changes between the
  2.1392 -   layout that may be done without considering any <a
  2.1393 +  <p>At this point, RWC-2 is resolved because the position and size of both
  2.1394 +   e1 and e2 are resolved.
  2.1395 +
  2.1396 +  <p class=note>The important aspect of the above processing example is that
  2.1397 +   once an element’s <a href="#wrapping-context">wrapping context</a> is
  2.1398 +   resolved (by resolving its exclusions' position and size), the position
  2.1399 +   and size of the exclusions are not re-processed if the element's size
  2.1400 +   changes between the layout that may be done without considering any <a
  2.1401     href="#wrapping-context">wrapping context</a> (as for RWC-2) and the
  2.1402     layout done with the resolved <a href="#wrapping-context">wrapping
  2.1403     context</a>. This is what breaks the possible circular dependency between
  2.1404 @@ -1588,36 +1498,31 @@
  2.1405    <h4 id=floats-and-exclusions-similarities><span class=secno>3.6.1.
  2.1406     </span>Similarities</h4>
  2.1407  
  2.1408 -  <p id=there-are-similarities-between-floats-an>There are similarities
  2.1409 -   between floats an exclusions in that inline content wraps around floats
  2.1410 -   and also wraps around exclusion areas. However, there are very significant
  2.1411 -   differences.
  2.1412 +  <p>There are similarities between floats an exclusions in that inline
  2.1413 +   content wraps around floats and also wraps around exclusion areas.
  2.1414 +   However, there are very significant differences.
  2.1415  
  2.1416    <h4 id=floats-and-exclusions-differences><span class=secno>3.6.2.
  2.1417     </span>Differences</h4>
  2.1418  
  2.1419    <ul>
  2.1420 -   <li id=scope.-while-floats-apply-to-content-tha><strong>scope</strong>.
  2.1421 -    While floats apply to content that follows in the document, exclusions
  2.1422 -    apply to content in their containing block.
  2.1423 -
  2.1424 -   <li
  2.1425 -    id=positioning.-floats-are-part-of-the-inli><strong>positioning</strong>.
  2.1426 -    Floats are part of the inline flow and ‘<code
  2.1427 -    class=property>float</code>’ on the line box. Authors can control how
  2.1428 -    the floats move on the line box, to the right or to the left. By
  2.1429 -    contrast, exclusions can be positioned using any positioning scheme such
  2.1430 -    as grid layout (<a href="#CSS3-GRID-LAYOUT"
  2.1431 +   <li><strong>scope</strong>. While floats apply to content that follows in
  2.1432 +    the document, exclusions apply to content in their containing block.
  2.1433 +
  2.1434 +   <li><strong>positioning</strong>. Floats are part of the inline flow and
  2.1435 +    ‘<code class=property>float</code>’ on the line box. Authors can
  2.1436 +    control how the floats move on the line box, to the right or to the left.
  2.1437 +    By contrast, exclusions can be positioned using any positioning scheme
  2.1438 +    such as grid layout (<a href="#CSS3-GRID-LAYOUT"
  2.1439      rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>),
  2.1440      flexible box (<a href="#CSS3-FLEXBOX"
  2.1441      rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>) or any other
  2.1442      CSS positioning scheme.
  2.1443  
  2.1444 -   <li id=separation-of-concerns.-making-an-elemen><strong>separation of
  2.1445 -    concerns</strong>. Making an element a float determines both its
  2.1446 -    positioning scheme and its effect on inline content. Making an element an
  2.1447 -    exclusion only determines its impact on inline content and does not
  2.1448 -    impose constraints on its positioning method.
  2.1449 +   <li><strong>separation of concerns</strong>. Making an element a float
  2.1450 +    determines both its positioning scheme and its effect on inline content.
  2.1451 +    Making an element an exclusion only determines its impact on inline
  2.1452 +    content and does not impose constraints on its positioning method.
  2.1453    </ul>
  2.1454  
  2.1455    <h4 id=floats-and-exclusions-interoperability><span class=secno>3.6.3.
  2.1456 @@ -1626,19 +1531,17 @@
  2.1457    <h5 id=effect-of-floats-on-exclusions><span class=secno>3.6.3.1.
  2.1458     </span>Effect of floats on exclusions</h5>
  2.1459  
  2.1460 -  <p id=floats-have-an-effect-on-the-positioning>Floats have an effect on the
  2.1461 -   positioning of exclusions and the layout of their inline content. For
  2.1462 -   example, if an exclusion is an inline-box which happens to be on the same
  2.1463 -   line as a float, its' position, as computed in <a
  2.1464 -   href="#step-2-A-resolve-exclusions-position-and-size">Step 2-A</a> will be
  2.1465 -   impacted by the float, as is any other inline content.
  2.1466 +  <p>Floats have an effect on the positioning of exclusions and the layout of
  2.1467 +   their inline content. For example, if an exclusion is an inline-box which
  2.1468 +   happens to be on the same line as a float, its' position, as computed in
  2.1469 +   <a href="#step-2-A-resolve-exclusions-position-and-size">Step 2-A</a> will
  2.1470 +   be impacted by the float, as is any other inline content.
  2.1471  
  2.1472    <h5 id=effect-of-exclusions-on-floats><span class=secno>3.6.3.2.
  2.1473     </span>Effect of exclusions on floats</h5>
  2.1474  
  2.1475 -  <p id=exclusions-have-an-effect-on-the-positio>Exclusions have an effect on
  2.1476 -   the positioning of floats as they have an effect on inline content.
  2.1477 -   Therefore, in <a
  2.1478 +  <p>Exclusions have an effect on the positioning of floats as they have an
  2.1479 +   effect on inline content. Therefore, in <a
  2.1480     href="#step-2-B-layout-containing-block-applying-wrapping">Step 2-B</a>,
  2.1481     floats will avoid <a href="#exclusion-area">exclusion areas</a>.</p>
  2.1482    <!-- End section "Exclusions" -->
  2.1483 @@ -1650,8 +1553,7 @@
  2.1484      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Issue-15091</a><br>
  2.1485  
  2.1486      <div class=issue-details>
  2.1487 -     <p class=short-desc id=simplify-the-syntax-for-shapes>Simplify the
  2.1488 -      syntax for shapes</p>
  2.1489 +     <p class=short-desc>Simplify the syntax for shapes</p>
  2.1490      </div>
  2.1491     </div>
  2.1492  
  2.1493 @@ -1659,16 +1561,14 @@
  2.1494      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16716">Issue-16716</a>
  2.1495      
  2.1496      <div class=issue-details>
  2.1497 -     <p class=short-desc id=handling-visible-content-as-a-shape-for->Handling
  2.1498 -      visible content as a shape for Exclusions</p>
  2.1499 +     <p class=short-desc>Handling visible content as a shape for Exclusions</p>
  2.1500      </div>
  2.1501     </div>
  2.1502    </div>
  2.1503  
  2.1504 -  <p id=shapes-define-arbitrary-geometric-contou> Shapes define arbitrary
  2.1505 -   geometric contours around which or into which inline flow content flows.
  2.1506 -   There are two different types of shapes – ‘<code
  2.1507 -   class=property>outside</code>’ and ‘<code
  2.1508 +  <p> Shapes define arbitrary geometric contours around which or into which
  2.1509 +   inline flow content flows. There are two different types of shapes –
  2.1510 +   ‘<code class=property>outside</code>’ and ‘<code
  2.1511     class=property>inside</code>’. The outside shape defines the <a
  2.1512     href="#exclusion-area">exclusion area</a> for an <a
  2.1513     href="#exclusion-element">exclusion element</a> or the <a
  2.1514 @@ -1676,34 +1576,32 @@
  2.1515     element's <span>content shape</span> and the element's inline content will
  2.1516     flow within that shape.
  2.1517  
  2.1518 -  <p class=note id=it-is-important-to-note-that-while-outsi>It is important
  2.1519 -   to note that while outside shapes only apply to <span>exclusions</span>
  2.1520 -   and floats, inside shapes apply to all block-level elements.
  2.1521 +  <p class=note>It is important to note that while outside shapes only apply
  2.1522 +   to <span>exclusions</span> and floats, inside shapes apply to all
  2.1523 +   block-level elements.
  2.1524  
  2.1525    <h3 id=relation-to-box-model-and-float-behavior><span class=secno>4.1.
  2.1526     </span>Relation to the box model and float behavior</h3>
  2.1527  
  2.1528 -  <p id=while-the-boundaries-used-for-wrapping-i> While the boundaries used
  2.1529 -   for wrapping inline flow content outside and inside an element can be
  2.1530 -   defined using shapes, the actual box model does not change. If the element
  2.1531 -   has specified margins, borders or paddings they will be computed and
  2.1532 -   rendered according to the <a href="#CSS3BOX"
  2.1533 +  <p> While the boundaries used for wrapping inline flow content outside and
  2.1534 +   inside an element can be defined using shapes, the actual box model does
  2.1535 +   not change. If the element has specified margins, borders or paddings they
  2.1536 +   will be computed and rendered according to the <a href="#CSS3BOX"
  2.1537     rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> module.
  2.1538  
  2.1539 -  <p id=however-floats-are-an-exception.-if-a-fl> However, floats are an
  2.1540 -   exception. If a float has an outside shape, its positioning is resolved as
  2.1541 -   <a
  2.1542 +  <p> However, floats are an exception. If a float has an outside shape, its
  2.1543 +   positioning is resolved as <a
  2.1544     href="http://www.w3.org/TR/CSS2/visuren.html#float-position">defined</a>
  2.1545     in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> but using
  2.1546     the outside shape's bounding box is used in lieu of the float's margin
  2.1547     box.
  2.1548  
  2.1549    <div class=example>
  2.1550 -   <p id=css-shape-outside-and-css-box-model-rela>CSS ‘<a
  2.1551 -    href="#shape-outside"><code class=property>shape-outside</code></a>’
  2.1552 -    and CSS box model relation: the red box illustrates the exclusion
  2.1553 -    element's content box, which is unmodified and subject to normal CSS
  2.1554 -    positioning (here absolute positioning).</p>
  2.1555 +   <p>CSS ‘<a href="#shape-outside"><code
  2.1556 +    class=property>shape-outside</code></a>’ and CSS box model relation:
  2.1557 +    the red box illustrates the exclusion element's content box, which is
  2.1558 +    unmodified and subject to normal CSS positioning (here absolute
  2.1559 +    positioning).</p>
  2.1560  
  2.1561     <pre><code class=html>
  2.1562  &lt;style type="text/css"&gt; 
  2.1563 @@ -1729,10 +1627,10 @@
  2.1564     style="max-width:40%"></div>
  2.1565  
  2.1566    <div class=example>
  2.1567 -   <p id=in-the-following-example-the-left-and-ri>In the following example
  2.1568 -    the left and right floating <code class=html>div</code> elements specify
  2.1569 -    a triangular shape using the ‘<a href="#shape-outside"><code
  2.1570 -    class=property>shape-outside</code></a>’ property.</p>
  2.1571 +   <p>In the following example the left and right floating <code
  2.1572 +    class=html>div</code> elements specify a triangular shape using the ‘<a
  2.1573 +    href="#shape-outside"><code class=property>shape-outside</code></a>’
  2.1574 +    property.</p>
  2.1575  
  2.1576     <pre><code class=html>
  2.1577  &lt;div style="text-align:center;"&gt;
  2.1578 @@ -1768,9 +1666,9 @@
  2.1579    <h3 id=shapes-from-svg-syntax><span class=secno>4.2. </span>Shapes from SVG
  2.1580     Syntax</h3>
  2.1581  
  2.1582 -  <p id=shapes-can-be-specified-using-svg-basic-> Shapes can be specified
  2.1583 -   using <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>.
  2.1584 -   The definitions use <code><a
  2.1585 +  <p> Shapes can be specified using <a
  2.1586 +   href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>. The
  2.1587 +   definitions use <code><a
  2.1588     href="http://www.w3.org/TR/css3-values/#lengths">&lt;length&gt;</a></code>
  2.1589     type and the <code><a href="">&lt;percentage&gt;</a></code> types (see <a
  2.1590     href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>).
  2.1591 @@ -1786,8 +1684,7 @@
  2.1592    <h4 id=supported-svg-shapes><span class=secno>4.2.1. </span>Supported SVG
  2.1593     Shapes</h4>
  2.1594  
  2.1595 -  <p id=the-following-svg-shapes-are-supported-b> The following SVG shapes
  2.1596 -   are supported by the CSS shapes module.
  2.1597 +  <p> The following SVG shapes are supported by the CSS shapes module.
  2.1598  
  2.1599    <dl>
  2.1600     <dt>rectangle([&lt;length&gt;|&lt;percentage&gt;]{4} [ curve
  2.1601 @@ -1795,66 +1692,64 @@
  2.1602  
  2.1603     <dd>
  2.1604      <ul>
  2.1605 -     <li id=the-four-values-represent-x-y-width-and->The four values
  2.1606 -      represent <strong>x, y, width and height</strong> - define the bounding
  2.1607 -      box of the rectangle
  2.1608 -
  2.1609 -     <li id=the-two-curve-values-represent-rx-and-ry> The two ‘<code
  2.1610 -      class=property>curve</code>’ values represent <strong> rx</strong>
  2.1611 -      and <strong>ry</strong> - define the rounded rectangles, the
  2.1612 -      <strong>x</strong> and <strong>y</strong> axis and radius of the
  2.1613 -      ellipse used to round off the corners of the rectangle
  2.1614 +     <li> The four values represent <strong>x, y, width</strong> and
  2.1615 +      <strong>height</strong>. They define the bounding box of the rectangle.
  2.1616 +      Negative values for width and height are invalid.
  2.1617 +
  2.1618 +     <li> The two ‘<code class=property>curve</code>’ values represent
  2.1619 +      <strong> rx</strong> and <strong>ry</strong>. For rounded rectangles
  2.1620 +      they define the x-axis radius and y-axis radius of the ellipse used to
  2.1621 +      round off the corners of the rectangle. Negative values for rx and ry
  2.1622 +      are invalid.
  2.1623      </ul>
  2.1624  
  2.1625     <dt>circle([&lt;length&gt;|&lt;percentage&gt;]{3})
  2.1626  
  2.1627     <dd>
  2.1628      <ul>
  2.1629 -     <li id=the-three-values-values-represent-cx-cy-> The three values values
  2.1630 -      represent <strong>cx</strong>, <strong>cy</strong>, <strong>r</strong>
  2.1631 -      - The <strong>x</strong> and <strong>y</strong> axis coordinate of the
  2.1632 -      center of the circle and the radius of the circle
  2.1633 +     <li> The three values values represent <strong>cx</strong>,
  2.1634 +      <strong>cy</strong>, and <strong>r</strong>. They define the x-axis and
  2.1635 +      y-axis coordinates of the center of the circle and the radius of the
  2.1636 +      circle. A negative value for r is invalid.
  2.1637      </ul>
  2.1638  
  2.1639     <dt>ellipse([&lt;length&gt;|&lt;percentage&gt;]{4})
  2.1640  
  2.1641     <dd>
  2.1642      <ul>
  2.1643 -     <li id=the-four-values-represent-cx-cy-rx-and-r>The four values
  2.1644 -      represent <strong>cx</strong>, <strong>cy</strong>, <strong>rx</strong>
  2.1645 -      and <strong>ry</strong> - The <strong>x</strong> and <strong>y</strong>
  2.1646 -      coordinate of the center of the ellipse and the <strong>x</strong> and
  2.1647 -      <strong>y</strong> axis radius of the ellipse
  2.1648 +     <li> The four values represent <strong>cx</strong>, <strong>cy</strong>,
  2.1649 +      <strong>rx</strong>, and <strong>ry</strong>. They define the x-axis
  2.1650 +      and y-axis coordinates of the center of the ellipse and the x-axis and
  2.1651 +      y-axis radius of the ellipse. Negative values for rx and ry are
  2.1652 +      invalid.
  2.1653      </ul>
  2.1654  
  2.1655     <dt>polygon([&lt;fill-rule&gt;,]? [&lt;length&gt;|&lt;percentage&gt;]{2}#)
  2.1656  
  2.1657     <dd>
  2.1658      <ul>
  2.1659 -     <li
  2.1660 -      id=fillrule--the-filling-rule-used-to-deter><strong>fillRule</strong> -
  2.1661 -      The filling rule used to determine the interior of the polygon. See
  2.1662 -      fill-rule property in SVG for details. Possible values are nonzero or
  2.1663 -      evenodd. Default value when omitted is nonzero.
  2.1664 -
  2.1665 -     <li id=the-two-length-values-represent-xi-and-y> The two length values
  2.1666 -      represent <strong>xi</strong> and <strong>yi</strong> - the
  2.1667 -      <strong>x</strong> and <strong>y</strong> axis coordinates of the i-th
  2.1668 -      vertex of the polygon.
  2.1669 +     <li><strong>fillRule</strong> - The filling rule used to determine the
  2.1670 +      interior of the polygon. See fill-rule property in SVG for details.
  2.1671 +      Possible values are nonzero or evenodd. Default value when omitted is
  2.1672 +      nonzero.
  2.1673 +
  2.1674 +     <li> The two length values represent <strong>xi</strong> and
  2.1675 +      <strong>yi</strong> - the <strong>x</strong> and <strong>y</strong>
  2.1676 +      axis coordinates of the i-th vertex of the polygon.
  2.1677      </ul>
  2.1678  
  2.1679 -    <p id=if-the-polygon-is-not-closed-the-user-ag> If the polygon is not
  2.1680 -     closed the user-agent will automatically add a new vertex at the end.</p>
  2.1681 +    <p> If the polygon is not closed the user-agent will automatically add a
  2.1682 +     new vertex at the end.</p>
  2.1683      <br>
  2.1684    </dl>
  2.1685  
  2.1686    <h4 id=referencing-svg-shapes><span class=secno>4.2.2. </span>Referencing
  2.1687     SVG shapes</h4>
  2.1688  
  2.1689 -  <p id=an-svg-shape-can-be-referenced-using-the>An SVG shape can be
  2.1690 -   referenced using the <code>url()</code> syntax. The shape can be any of
  2.1691 -   the <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a> or
  2.1692 -   a <a href="http://www.w3.org/TR/SVG/paths.html">path element</a>.
  2.1693 +  <p>An SVG shape can be referenced using the <code>url()</code> syntax. The
  2.1694 +   shape can be any of the <a href="http://www.w3.org/TR/SVG/shapes.html">SVG
  2.1695 +   basic shapes</a> or a <a href="http://www.w3.org/TR/SVG/paths.html">path
  2.1696 +   element</a>.
  2.1697  
  2.1698    <div class=example> <code class=html></code>
  2.1699     <pre>
  2.1700 @@ -1879,15 +1774,14 @@
  2.1701            </pre>
  2.1702    </div>
  2.1703  
  2.1704 -  <p id=when-using-the-svg-syntax-or-referencing> When using the SVG syntax
  2.1705 -   or referencing SVG elements to define shapes, all the lengths expressed in
  2.1706 -   percentages are resolved from the border box of the element. The
  2.1707 -   coordinate system for the shape has its origin on the top-left corner of
  2.1708 -   the border box with the x-axis running to the right and the y-axis running
  2.1709 -   downwards. If the SVG element uses unitless coordinate values, they are
  2.1710 -   equivalent to using ‘<code class=property>px</code>’ units. If the
  2.1711 -   border box of the element is dependent on auto sizing (i.e., the element's
  2.1712 -   ‘<code class=property>width</code>’ or ‘<code
  2.1713 +  <p> When using the SVG syntax or referencing SVG elements to define shapes,
  2.1714 +   all the lengths expressed in percentages are resolved from the border box
  2.1715 +   of the element. The coordinate system for the shape has its origin on the
  2.1716 +   top-left corner of the border box with the x-axis running to the right and
  2.1717 +   the y-axis running downwards. If the SVG element uses unitless coordinate
  2.1718 +   values, they are equivalent to using ‘<code class=property>px</code>’
  2.1719 +   units. If the border box of the element is dependent on auto sizing (i.e.,
  2.1720 +   the element's ‘<code class=property>width</code>’ or ‘<code
  2.1721     class=property>height</code>’ property is ‘<code
  2.1722     class=property>auto</code>’), then the percentage values resolve to 0.</p>
  2.1723    <!-- End section "Shapes from SVG Syntax -->
  2.1724 @@ -1899,9 +1793,8 @@
  2.1725      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Issue-15093</a><br>
  2.1726  
  2.1727      <div class=issue-details>
  2.1728 -     <p class=short-desc id=do-we-need-to-provide-properties-to-repe>Do we
  2.1729 -      need to provide properties to repeat exclusion images as for the
  2.1730 -      background-image property?</p>
  2.1731 +     <p class=short-desc>Do we need to provide properties to repeat exclusion
  2.1732 +      images as for the background-image property?</p>
  2.1733      </div>
  2.1734     </div>
  2.1735  
  2.1736 @@ -1909,8 +1802,7 @@
  2.1737      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Issue-15090</a>
  2.1738      
  2.1739      <div class=issue-details>
  2.1740 -     <p class=short-desc id=use-the-contour-keyword-in-shape-outside>Use the
  2.1741 -      contour keyword in shape-outside property?</p>
  2.1742 +     <p class=short-desc>Use the contour keyword in shape-outside property?</p>
  2.1743      </div>
  2.1744     </div>
  2.1745  
  2.1746 @@ -1918,8 +1810,7 @@
  2.1747      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Issue-15092</a>
  2.1748      
  2.1749      <div class=issue-details>
  2.1750 -     <p class=short-desc id=specify-what-happens-with-animated-image>Specify
  2.1751 -      what happens with animated images</p>
  2.1752 +     <p class=short-desc>Specify what happens with animated images</p>
  2.1753      </div>
  2.1754     </div>
  2.1755  
  2.1756 @@ -1927,28 +1818,27 @@
  2.1757      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16112">Issue-16112</a>
  2.1758      
  2.1759      <div class=issue-details>
  2.1760 -     <p class=short-desc id=address-security-concern-with-automatic->Address
  2.1761 -      security concern with automatic shape extractions for images</p>
  2.1762 +     <p class=short-desc>Address security concern with automatic shape
  2.1763 +      extractions for images</p>
  2.1764      </div>
  2.1765     </div>
  2.1766    </div>
  2.1767  
  2.1768 -  <p id=another-way-of-defining-shapes-is-by-spe> Another way of defining
  2.1769 -   shapes is by specifying a source image whose alpha channel is used to
  2.1770 -   compute the inside or outside shape. The shape is computed to be the path
  2.1771 -   that encloses the area where the opacity of the specified image is greater
  2.1772 -   than the ‘<a href="#shape-image-threshold"><code
  2.1773 +  <p> Another way of defining shapes is by specifying a source image whose
  2.1774 +   alpha channel is used to compute the inside or outside shape. The shape is
  2.1775 +   computed to be the path that encloses the area where the opacity of the
  2.1776 +   specified image is greater than the ‘<a
  2.1777 +   href="#shape-image-threshold"><code
  2.1778     class=property>shape-image-threshold</code></a>’ value. If the ‘<a
  2.1779     href="#shape-image-threshold"><code
  2.1780     class=property>shape-image-threshold</code></a>’ is not specified, the
  2.1781     initial value to be considered is 0.5.
  2.1782  
  2.1783 -  <p class=note id=note-images-can-define-cavities-and-inli> Note, images can
  2.1784 -   define cavities and inline flow content should wrap inside them. In order
  2.1785 -   to avoid that, another exclusion element can be overlaid.
  2.1786 -
  2.1787 -  <p id=for-animated-raster-image-formats-such-a>For animated raster image
  2.1788 -   formats (such as <a
  2.1789 +  <p class=note> Note, images can define cavities and inline flow content
  2.1790 +   should wrap inside them. In order to avoid that, another exclusion element
  2.1791 +   can be overlaid.
  2.1792 +
  2.1793 +  <p>For animated raster image formats (such as <a
  2.1794     href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF</a>), the first
  2.1795     frame of the animation sequence is used. For <a
  2.1796     href="http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/">SVG</a> images (<a
  2.1797 @@ -1958,8 +1848,7 @@
  2.1798  
  2.1799    <h3 id=declaring-shapes><span class=secno>4.4. </span>Declaring Shapes</h3>
  2.1800  
  2.1801 -  <p id=shapes-are-declared-with-the-shape-outsi> Shapes are declared with
  2.1802 -   the ‘<a href="#shape-outside"><code
  2.1803 +  <p> Shapes are declared with the ‘<a href="#shape-outside"><code
  2.1804     class=property>shape-outside</code></a>’ or ‘<a
  2.1805     href="#shape-inside"><code class=property>shape-inside</code></a>’
  2.1806     properties. The ‘<a href="#shape-outside"><code
  2.1807 @@ -1972,12 +1861,12 @@
  2.1808     or a float, then the ‘<a href="#shape-outside"><code
  2.1809     class=property>shape-outside</code></a>’ property has no effect.
  2.1810  
  2.1811 -  <p id=the-shape-inside-property-defines-an-ele> The ‘<a
  2.1812 -   href="#shape-inside"><code class=property>shape-inside</code></a>’
  2.1813 -   property defines an element's <a href="#content-area">content area</a> and
  2.1814 -   the element's inline flow content wraps into that shape. The ‘<a
  2.1815 -   href="#shape-inside"><code class=property>shape-inside</code></a>’
  2.1816 -   property applies to all block-level elements.
  2.1817 +  <p> The ‘<a href="#shape-inside"><code
  2.1818 +   class=property>shape-inside</code></a>’ property defines an element's <a
  2.1819 +   href="#content-area">content area</a> and the element's inline flow
  2.1820 +   content wraps into that shape. The ‘<a href="#shape-inside"><code
  2.1821 +   class=property>shape-inside</code></a>’ property applies to all
  2.1822 +   block-level elements.
  2.1823  
  2.1824    <h4 id=shape-outside-property><span class=secno>4.4.1. </span>The ‘<a
  2.1825     href="#shape-outside"><code class=property>shape-outside</code></a>’
  2.1826 @@ -2027,8 +1916,7 @@
  2.1827        &lt;uri&gt;, otherwise as specified
  2.1828    </table>
  2.1829  
  2.1830 -  <p id=the-values-of-this-property-have-the-fol1>The values of this property
  2.1831 -   have the following meanings:
  2.1832 +  <p>The values of this property have the following meanings:
  2.1833  
  2.1834    <dl>
  2.1835     <dt><dfn id=auto0 title="'shape-outside'!!'auto'">auto</dfn>
  2.1836 @@ -2062,13 +1950,11 @@
  2.1837    <div class=figure> <img
  2.1838     alt="arbitrary shapes for excluions. Illustrates how content flows around shapes"
  2.1839     src="images/shapes-exclusions.png" width="70%">
  2.1840 -   <p class=caption id=arbitrary-shapes-for-exclusions>Arbitrary shapes for
  2.1841 -    exclusions</p>
  2.1842 +   <p class=caption>Arbitrary shapes for exclusions</p>
  2.1843    </div>
  2.1844  
  2.1845    <div>
  2.1846 -   <p id=the-above-figure-shows-how-shape-outside>The above figure shows how
  2.1847 -    ‘<a href="#shape-outside"><code
  2.1848 +   <p>The above figure shows how ‘<a href="#shape-outside"><code
  2.1849      class=property>shape-outside</code></a>’ shapes impact the exclusion
  2.1850      areas. The red box represents an element's content box and ‘<code
  2.1851      class=property>A</code>’, ‘<code class=property>B</code>’, ‘<code
  2.1852 @@ -2079,14 +1965,13 @@
  2.1853      class=property>start</code>’, ‘<code class=property>end</code>’ and
  2.1854      ‘<code class=property>clear</code>’, respectively.</p>
  2.1855  
  2.1856 -   <p id=as-illustrated-in-the-picture-when-an-ex>As illustrated in the
  2.1857 -    picture, when an exclusion allows wrapping on all sides, text can flow
  2.1858 -    inside ‘<code class=property>holes</code>’ in the exclusion (as for
  2.1859 -    exclusion ‘<code class=property>A</code>’). Otherwise, the exclusion
  2.1860 -    clears the area on the side(s) defined by ‘<a href="#wrap-flow"><code
  2.1861 -    class=property>wrap-flow</code></a>’, as illustrated for ‘<code
  2.1862 -    class=property>B</code>’, ‘<code class=property>C</code>’ and
  2.1863 -    ‘<code class=property>D</code>’ above.</p>
  2.1864 +   <p>As illustrated in the picture, when an exclusion allows wrapping on all
  2.1865 +    sides, text can flow inside ‘<code class=property>holes</code>’ in
  2.1866 +    the exclusion (as for exclusion ‘<code class=property>A</code>’).
  2.1867 +    Otherwise, the exclusion clears the area on the side(s) defined by ‘<a
  2.1868 +    href="#wrap-flow"><code class=property>wrap-flow</code></a>’, as
  2.1869 +    illustrated for ‘<code class=property>B</code>’, ‘<code
  2.1870 +    class=property>C</code>’ and ‘<code class=property>D</code>’ above.</p>
  2.1871    </div>
  2.1872    <!-- End section "The shape-outside Property" -->
  2.1873  
  2.1874 @@ -2094,10 +1979,10 @@
  2.1875     href="#shape-inside"><code class=property>shape-inside</code></a>’
  2.1876     Property</h4>
  2.1877  
  2.1878 -  <p id=the-shape-inside-modifies-the-shape-of-t> The ‘<a
  2.1879 -   href="#shape-inside"><code class=property>shape-inside</code></a>’
  2.1880 -   modifies the shape of the inner inline flow content from rectangular
  2.1881 -   content box to an arbitrary geometry.
  2.1882 +  <p> The ‘<a href="#shape-inside"><code
  2.1883 +   class=property>shape-inside</code></a>’ modifies the shape of the inner
  2.1884 +   inline flow content from rectangular content box to an arbitrary geometry.
  2.1885 +   
  2.1886  
  2.1887    <table class=propdef>
  2.1888     <tbody>
  2.1889 @@ -2149,9 +2034,8 @@
  2.1890      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16448">Issue-16448</a>
  2.1891      
  2.1892      <div class=issue-details>
  2.1893 -     <p class=short-desc id=should-we-revisit-the-decision-to-not-al>Should
  2.1894 -      we revisit the decision to not allow SVG path syntax in the
  2.1895 -      shape-inside, shape-outside properties</p>
  2.1896 +     <p class=short-desc>Should we revisit the decision to not allow SVG path
  2.1897 +      syntax in the shape-inside, shape-outside properties</p>
  2.1898      </div>
  2.1899     </div>
  2.1900  
  2.1901 @@ -2159,14 +2043,12 @@
  2.1902      href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460">Issue-16460</a>
  2.1903      
  2.1904      <div class=issue-details>
  2.1905 -     <p class=short-desc id=specify-overflow-behavior-for-shape-insi>Specify
  2.1906 -      overflow behavior for shape-inside</p>
  2.1907 +     <p class=short-desc>Specify overflow behavior for shape-inside</p>
  2.1908      </div>
  2.1909     </div>
  2.1910    </div>
  2.1911  
  2.1912 -  <p id=the-values-of-this-property-have-the-fol2>The values of this property
  2.1913 -   have the following meanings:
  2.1914 +  <p>The values of this property have the following meanings:
  2.1915  
  2.1916    <dl>
  2.1917     <dt><dfn id=outside-shape
  2.1918 @@ -2205,14 +2087,13 @@
  2.1919      class=property>auto</code>’ had been specified.
  2.1920    </dl>
  2.1921  
  2.1922 -  <p id=the-shape-inside-property-applies-to-flo>The ‘<a
  2.1923 -   href="#shape-inside"><code class=property>shape-inside</code></a>’
  2.1924 -   property applies to floats.
  2.1925 -
  2.1926 -  <p id=the-shape-inside-property-may-not-apply->The ‘<a
  2.1927 -   href="#shape-inside"><code class=property>shape-inside</code></a>’
  2.1928 -   property may not apply on some elements such as elements with a computed
  2.1929 -   ‘<code class=property>display</code>’ value of ‘<code
  2.1930 +  <p>The ‘<a href="#shape-inside"><code
  2.1931 +   class=property>shape-inside</code></a>’ property applies to floats.
  2.1932 +
  2.1933 +  <p>The ‘<a href="#shape-inside"><code
  2.1934 +   class=property>shape-inside</code></a>’ property may not apply on some
  2.1935 +   elements such as elements with a computed ‘<code
  2.1936 +   class=property>display</code>’ value of ‘<code
  2.1937     class=property>table</code>’.</p>
  2.1938    <!-- End section "The shape-inside property" -->
  2.1939  
  2.1940 @@ -2220,8 +2101,7 @@
  2.1941     ‘<a href="#shape-image-threshold"><code
  2.1942     class=property>shape-image-threshold</code></a>’ Property</h4>
  2.1943  
  2.1944 -  <p id=the-shape-image-threshold-defines-the-al> The ‘<a
  2.1945 -   href="#shape-image-threshold"><code
  2.1946 +  <p> The ‘<a href="#shape-image-threshold"><code
  2.1947     class=property>shape-image-threshold</code></a>’ defines the alpha
  2.1948     channel threshold used to extract the shape using an image. A value of 0.5
  2.1949     means that all the pixels that are more than 50% transparent define the
  2.1950 @@ -2231,8 +2111,8 @@
  2.1951     ‘<a href="#shape-inside"><code
  2.1952     class=property>shape-inside</code></a>’.
  2.1953  
  2.1954 -  <p class=note id=the-specified-value-of-shape-image-thres> The specified
  2.1955 -   value of ‘<a href="#shape-image-threshold"><code
  2.1956 +  <p class=note> The specified value of ‘<a
  2.1957 +   href="#shape-image-threshold"><code
  2.1958     class=property>shape-image-threshold</code></a>’ is applied to both
  2.1959     images used for ‘<a href="#shape-outside"><code
  2.1960     class=property>shape-outside</code></a>’ and ‘<a
  2.1961 @@ -2283,8 +2163,7 @@
  2.1962        &lt;alphavalue&gt; to the range [0.0,1.0].
  2.1963    </table>
  2.1964  
  2.1965 -  <p id=the-values-of-this-property-have-the-fol3>The values of this property
  2.1966 -   have the following meanings:
  2.1967 +  <p>The values of this property have the following meanings:
  2.1968  
  2.1969    <dl>
  2.1970     <dt><dfn id=ltalphavaluegt
  2.1971 @@ -2353,49 +2232,42 @@
  2.1972    <!-- End section "Shape Shorthand property -->
  2.1973    <!-- End section "Declaring Shapes" -->
  2.1974  
  2.1975 -  <p id=the-shape-properties-apply-to->The shape properties apply to
  2.1976 -   <!-- End section "Shapes" -->
  2.1977 +  <p>The shape properties apply to <!-- End section "Shapes" -->
  2.1978  
  2.1979    <h2 id=conformance><span class=secno>5. </span>Conformance</h2>
  2.1980  
  2.1981    <h3 id=conventions><span class=secno>5.1. </span>Document Conventions</h3>
  2.1982  
  2.1983 -  <p id=conformance-requirements-are-expressed-w> Conformance requirements
  2.1984 -   are expressed with a combination of descriptive assertions and RFC 2119
  2.1985 -   terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”,
  2.1986 -   “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
  2.1987 -   “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of
  2.1988 -   this document are to be interpreted as described in RFC 2119. However, for
  2.1989 -   readability, these words do not appear in all uppercase letters in this
  2.1990 -   specification.
  2.1991 -
  2.1992 -  <p id=all-of-the-text-of-this-specification-is> All of the text of this
  2.1993 -   specification is normative except sections explicitly marked as
  2.1994 -   non-normative, examples, and notes. <a href="#RFC2119"
  2.1995 -   rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
  2.1996 -
  2.1997 -  <p id=examples-in-this-specification-are-intro> Examples in this
  2.1998 -   specification are introduced with the words “for example” or are set
  2.1999 -   apart from the normative text with <code>class="example"</code>, like
  2.2000 -   this:
  2.2001 +  <p> Conformance requirements are expressed with a combination of
  2.2002 +   descriptive assertions and RFC 2119 terminology. The key words “MUST”,
  2.2003 +   “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”,
  2.2004 +   “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and
  2.2005 +   “OPTIONAL” in the normative parts of this document are to be
  2.2006 +   interpreted as described in RFC 2119. However, for readability, these
  2.2007 +   words do not appear in all uppercase letters in this specification.
  2.2008 +
  2.2009 +  <p> All of the text of this specification is normative except sections
  2.2010 +   explicitly marked as non-normative, examples, and notes. <a
  2.2011 +   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
  2.2012 +
  2.2013 +  <p> Examples in this specification are introduced with the words “for
  2.2014 +   example” or are set apart from the normative text with
  2.2015 +   <code>class="example"</code>, like this:
  2.2016  
  2.2017    <div class=example>
  2.2018 -   <p id=this-is-an-example-of-an-informative-exa>This is an example of an
  2.2019 -    informative example.</p>
  2.2020 +   <p>This is an example of an informative example.</p>
  2.2021    </div>
  2.2022  
  2.2023 -  <p id=informative-notes-begin-with-the-word-no> Informative notes begin
  2.2024 -   with the word “Note” and are set apart from the normative text with
  2.2025 -   <code>class="note"</code>, like this:
  2.2026 -
  2.2027 -  <p class=note id=note-this-is-an-informative-note.>Note, this is an
  2.2028 -   informative note.
  2.2029 +  <p> Informative notes begin with the word “Note” and are set apart from
  2.2030 +   the normative text with <code>class="note"</code>, like this:
  2.2031 +
  2.2032 +  <p class=note>Note, this is an informative note.
  2.2033  
  2.2034    <h3 id=conformance-classes><span class=secno>5.2. </span>Conformance
  2.2035     Classes</h3>
  2.2036  
  2.2037 -  <p id=conformance-to-css-exclusions-and-shapes>Conformance to CSS
  2.2038 -   Exclusions and Shapes is defined for three conformance classes:
  2.2039 +  <p>Conformance to CSS Exclusions and Shapes is defined for three
  2.2040 +   conformance classes:
  2.2041  
  2.2042    <dl>
  2.2043     <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
  2.2044 @@ -2416,76 +2288,69 @@
  2.2045      that writes a style sheet.
  2.2046    </dl>
  2.2047  
  2.2048 -  <p id=a-style-sheet-is-conformant-to-css-exclu> A style sheet is conformant
  2.2049 -   to CSS Exclusions and Shapes if all of its declarations that use
  2.2050 -   properties defined in this module have values that are valid according to
  2.2051 -   the generic CSS grammar and the individual grammars of each property as
  2.2052 -   given in this module.
  2.2053 -
  2.2054 -  <p id=a-renderer-is-conformant-to-css-exclusio> A renderer is conformant to
  2.2055 -   CSS Exclusions and Shapes if, in addition to interpreting the style sheet
  2.2056 -   as defined by the appropriate specifications, it supports all the features
  2.2057 -   defined by CSS Exclusions and Shapes by parsing them correctly and
  2.2058 -   rendering the document accordingly. However, the inability of a UA to
  2.2059 -   correctly render a document due to limitations of the device does not make
  2.2060 -   the UA non-conformant. (For example, a UA is not required to render color
  2.2061 -   on a monochrome monitor.)
  2.2062 -
  2.2063 -  <p id=an-authoring-tool-is-conformant-to-css-e> An authoring tool is
  2.2064 -   conformant to CSS Exclusions and Shapes if it writes style sheets that are
  2.2065 -   syntactically correct according to the generic CSS grammar and the
  2.2066 -   individual grammars of each feature in this module, and meet all other
  2.2067 -   conformance requirements of style sheets as described in this module.
  2.2068 +  <p> A style sheet is conformant to CSS Exclusions and Shapes if all of its
  2.2069 +   declarations that use properties defined in this module have values that
  2.2070 +   are valid according to the generic CSS grammar and the individual grammars
  2.2071 +   of each property as given in this module.
  2.2072 +
  2.2073 +  <p> A renderer is conformant to CSS Exclusions and Shapes if, in addition
  2.2074 +   to interpreting the style sheet as defined by the appropriate
  2.2075 +   specifications, it supports all the features defined by CSS Exclusions and
  2.2076 +   Shapes by parsing them correctly and rendering the document accordingly.
  2.2077 +   However, the inability of a UA to correctly render a document due to
  2.2078 +   limitations of the device does not make the UA non-conformant. (For
  2.2079 +   example, a UA is not required to render color on a monochrome monitor.)
  2.2080 +
  2.2081 +  <p> An authoring tool is conformant to CSS Exclusions and Shapes if it
  2.2082 +   writes style sheets that are syntactically correct according to the
  2.2083 +   generic CSS grammar and the individual grammars of each feature in this
  2.2084 +   module, and meet all other conformance requirements of style sheets as
  2.2085 +   described in this module.
  2.2086  
  2.2087    <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>
  2.2088  
  2.2089 -  <p id=so-that-authors-can-exploit-the-forward-> So that authors can exploit
  2.2090 -   the forward-compatible parsing rules to assign fallback values, CSS
  2.2091 -   renderers <strong>must</strong> treat as invalid (and <a
  2.2092 -   href="http://www.w3.org/TR/CSS21/conform.html#ignore"> ignore as
  2.2093 -   appropriate</a>) any at-rules, properties, property values, keywords, and
  2.2094 -   other syntactic constructs for which they have no usable level of support.
  2.2095 -   In particular, user agents <strong>must not</strong> selectively ignore
  2.2096 -   unsupported component values and honor supported values in a single
  2.2097 -   multi-value property declaration: if any value is considered invalid (as
  2.2098 -   unsupported values must be), CSS requires that the entire declaration be
  2.2099 -   ignored.
  2.2100 +  <p> So that authors can exploit the forward-compatible parsing rules to
  2.2101 +   assign fallback values, CSS renderers <strong>must</strong> treat as
  2.2102 +   invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">
  2.2103 +   ignore as appropriate</a>) any at-rules, properties, property values,
  2.2104 +   keywords, and other syntactic constructs for which they have no usable
  2.2105 +   level of support. In particular, user agents <strong>must not</strong>
  2.2106 +   selectively ignore unsupported component values and honor supported values
  2.2107 +   in a single multi-value property declaration: if any value is considered
  2.2108 +   invalid (as unsupported values must be), CSS requires that the entire
  2.2109 +   declaration be ignored.
  2.2110  
  2.2111    <h3 id=experimental><span class=secno>5.4. </span> Experimental
  2.2112     Implementations</h3>
  2.2113  
  2.2114 -  <p id=to-avoid-clashes-with-future-css-feature> To avoid clashes with
  2.2115 -   future CSS features, the CSS2.1 specification reserves a <a
  2.2116 +  <p> To avoid clashes with future CSS features, the CSS2.1 specification
  2.2117 +   reserves a <a
  2.2118     href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  2.2119     syntax</a> for proprietary and experimental extensions to CSS.
  2.2120  
  2.2121 -  <p id=prior-to-a-specification-reaching-the-ca> Prior to a specification
  2.2122 -   reaching the Candidate Recommendation stage in the W3C process, all
  2.2123 -   implementations of a CSS feature are considered experimental. The CSS
  2.2124 -   Working Group recommends that implementations use a vendor-prefixed syntax
  2.2125 -   for such features, including those in W3C Working Drafts. This avoids
  2.2126 -   incompatibilities with future changes in the draft.
  2.2127 +  <p> Prior to a specification reaching the Candidate Recommendation stage in
  2.2128 +   the W3C process, all implementations of a CSS feature are considered
  2.2129 +   experimental. The CSS Working Group recommends that implementations use a
  2.2130 +   vendor-prefixed syntax for such features, including those in W3C Working
  2.2131 +   Drafts. This avoids incompatibilities with future changes in the draft.
  2.2132  
  2.2133    <h3 id=testing><span class=secno>5.5. </span> Non-Experimental
  2.2134     Implementations</h3>
  2.2135  
  2.2136 -  <p id=once-a-specification-reaches-the-candida> Once a specification
  2.2137 -   reaches the Candidate Recommendation stage, non-experimental
  2.2138 -   implementations are possible, and implementors should release an
  2.2139 -   unprefixed implementation of any CR-level feature they can demonstrate to
  2.2140 -   be correctly implemented according to spec.
  2.2141 -
  2.2142 -  <p id=to-establish-and-maintain-the-interopera> To establish and maintain
  2.2143 -   the interoperability of CSS across implementations, the CSS Working Group
  2.2144 -   requests that non-experimental CSS renderers submit an implementation
  2.2145 -   report (and, if necessary, the testcases used for that implementation
  2.2146 -   report) to the W3C before releasing an unprefixed implementation of any
  2.2147 -   CSS features. Testcases submitted to W3C are subject to review and
  2.2148 -   correction by the CSS Working Group.
  2.2149 -
  2.2150 -  <p id=further-information-on-submitting-testca> Further information on
  2.2151 -   submitting testcases and implementation reports can be found from on the
  2.2152 -   CSS Working Group's website at <a
  2.2153 +  <p> Once a specification reaches the Candidate Recommendation stage,
  2.2154 +   non-experimental implementations are possible, and implementors should
  2.2155 +   release an unprefixed implementation of any CR-level feature they can
  2.2156 +   demonstrate to be correctly implemented according to spec.
  2.2157 +
  2.2158 +  <p> To establish and maintain the interoperability of CSS across
  2.2159 +   implementations, the CSS Working Group requests that non-experimental CSS
  2.2160 +   renderers submit an implementation report (and, if necessary, the
  2.2161 +   testcases used for that implementation report) to the W3C before releasing
  2.2162 +   an unprefixed implementation of any CSS features. Testcases submitted to
  2.2163 +   W3C are subject to review and correction by the CSS Working Group.
  2.2164 +
  2.2165 +  <p> Further information on submitting testcases and implementation reports
  2.2166 +   can be found from on the CSS Working Group's website at <a
  2.2167     href="http://www.w3.org/Style/CSS/Test/">
  2.2168     http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the
  2.2169     <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">
  2.2170 @@ -2493,12 +2358,12 @@
  2.2171  
  2.2172    <h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3>
  2.2173  
  2.2174 -  <p id=for-this-specification-to-be-advanced-to> For this specification to
  2.2175 -   be advanced to Proposed Recommendation, there must be at least two
  2.2176 -   independent, interoperable implementations of each feature. Each feature
  2.2177 -   may be implemented by a different set of products, there is no requirement
  2.2178 -   that all features be implemented by a single product. For the purposes of
  2.2179 -   this criterion, we define the following terms:
  2.2180 +  <p> For this specification to be advanced to Proposed Recommendation, there
  2.2181 +   must be at least two independent, interoperable implementations of each
  2.2182 +   feature. Each feature may be implemented by a different set of products,
  2.2183 +   there is no requirement that all features be implemented by a single
  2.2184 +   product. For the purposes of this criterion, we define the following
  2.2185 +   terms:
  2.2186  
  2.2187    <dl>
  2.2188     <dt>independent
  2.2189 @@ -2523,31 +2388,29 @@
  2.2190  
  2.2191     <dd> a user agent which:
  2.2192      <ol class=inline>
  2.2193 -     <li id=implements-the-specification.>implements the specification.
  2.2194 -
  2.2195 -     <li id=is-available-to-the-general-public.-the->is available to the
  2.2196 -      general public. The implementation may be a shipping product or other
  2.2197 -      publicly available version (i.e., beta version, preview release, or
  2.2198 -      “nightly build”). Non-shipping product releases must have
  2.2199 -      implemented the feature(s) for a period of at least one month in order
  2.2200 -      to demonstrate stability.
  2.2201 -
  2.2202 -     <li id=is-not-experimental-i.e.-a-version-speci>is not experimental
  2.2203 -      (i.e., a version specifically designed to pass the test suite and is
  2.2204 -      not intended for normal usage going forward).
  2.2205 +     <li>implements the specification.
  2.2206 +
  2.2207 +     <li>is available to the general public. The implementation may be a
  2.2208 +      shipping product or other publicly available version (i.e., beta
  2.2209 +      version, preview release, or “nightly build”). Non-shipping product
  2.2210 +      releases must have implemented the feature(s) for a period of at least
  2.2211 +      one month in order to demonstrate stability.
  2.2212 +
  2.2213 +     <li>is not experimental (i.e., a version specifically designed to pass
  2.2214 +      the test suite and is not intended for normal usage going forward).
  2.2215      </ol>
  2.2216    </dl>
  2.2217  
  2.2218 -  <p id=the-specification-will-remain-candidate-> The specification will
  2.2219 -   remain Candidate Recommendation for at least six months.
  2.2220 +  <p> The specification will remain Candidate Recommendation for at least six
  2.2221 +   months.
  2.2222  
  2.2223    <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
  2.2224  
  2.2225 -  <p id=this-specification-is-made-possible-by-i>This specification is made
  2.2226 -   possible by input from Andrei Bucur, Alexandru Chiculita, Arron Eicholz,
  2.2227 -   Daniel Glazman, Arno Gourdol, Chris Jones, Marcus Mielke, Alex Mogilevsky,
  2.2228 -   Mihnea Ovidenie, Virgil Palanciuc, Peter Sorotokin, Eugene Veselov,
  2.2229 -   Stephen Zilles and the CSS Working Group members.
  2.2230 +  <p>This specification is made possible by input from Andrei Bucur,
  2.2231 +   Alexandru Chiculita, Arron Eicholz, Daniel Glazman, Arno Gourdol, Chris
  2.2232 +   Jones, Marcus Mielke, Alex Mogilevsky, Mihnea Ovidenie, Virgil Palanciuc,
  2.2233 +   Peter Sorotokin, Eugene Veselov, Stephen Zilles and the CSS Working Group
  2.2234 +   members.
  2.2235  
  2.2236    <h2 class=no-num id=references>References</h2>
  2.2237  
  2.2238 @@ -2922,7 +2785,7 @@
  2.2239     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
  2.2240     
  2.2241     <div class=issue-details>
  2.2242 -    <p class=short-desc id=shortdesc>{{short_desc}}</p>
  2.2243 +    <p class=short-desc>{{short_desc}}</p>
  2.2244     </div>
  2.2245    </div>
  2.2246    <script src="../shared/scripts/BugzillaTrackerUtil.js"
  2.2247 @@ -2942,7 +2805,7 @@
  2.2248     2012</a></h3>
  2.2249  
  2.2250    <ul>
  2.2251 -   <li id=added-wrap-flowminimum>Added wrap-flow:minimum
  2.2252 +   <li>Added wrap-flow:minimum
  2.2253    </ul>
  2.2254  
  2.2255    <h3 id=since-december-13th-2011><span class=secno>5.8. </span>Since <a
  2.2256 @@ -2950,12 +2813,12 @@
  2.2257     13th 2011</a></h3>
  2.2258  
  2.2259    <ul>
  2.2260 -   <li id=clarified-processing-model>Clarified processing model
  2.2261 -
  2.2262 -   <li id=clarified-interaction-with-floats>Clarified interaction with floats
  2.2263 -
  2.2264 -   <li id=clarified-that-an-exclusion-element-esta>Clarified that an
  2.2265 -    exclusion element establishes a new block formatting context
  2.2266 +   <li>Clarified processing model
  2.2267 +
  2.2268 +   <li>Clarified interaction with floats
  2.2269 +
  2.2270 +   <li>Clarified that an exclusion element establishes a new block formatting
  2.2271 +    context
  2.2272    </ul>
  2.2273  </html>
  2.2274  <!-- Keep this comment at the end of the file