css3-exclusions/Exclusions.src.html

Thu, 13 Sep 2012 13:30:16 -0700

author
Alan Stearns <stearns@adobe.com>
date
Thu, 13 Sep 2012 13:30:16 -0700
changeset 6708
d238b1e9c4ac
parent 6654
2b98ef0e3cc6
child 6803
9d57ffc5916f
permissions
-rwxr-xr-x

[css3-exclusions] re-word issue 1

     1 <!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
     2 <html lang="en">
     3 <head profile="http://www.w3.org/2006/03/hcard">
     4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5   <title>CSS Exclusions and Shapes Module Level 3</title>
     6   <link rel="stylesheet" type="text/css" href="../shared/style/default.css" />
     9   <style type="text/css">
    10     .singleImgExample {
    11     	display: block;
    12     	margin: auto;
    13     }
    15     .example-table {
    16     	table-layout: fixed; 
    17     	width: 100%; 
    18     }
    20     .example-table tr td img {
    21     	width: 90%;
    22     }
    23   </style>  
    25        <link rel="stylesheet" type="text/css"
    26         href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
    28         <link rel="stylesheet" type="text/css"
    29          href="../shared/style/issues.css">
    31        <link id="st" href="../shared/style/alternate-spec-style.css" rel="stylesheet" 
    32               type="text/css" title="alternate spec style">     
    35 </head>
    36 <body>
    37     <div id="div-head" class="head">
    38         <p><a href="http://www.w3.org/"><img id="mobile-logo" alt="W3C" height="53" src=
    39         "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width="90"></a> 
    42         <!--begin-logo-->
    44         <p><a href="http://www.w3.org/"><img id="logo" alt="W3C" height="48" src=
    45         "http://www.w3.org/Icons/w3c_home" width="72"></a> <!--end-logo--></p>
    46         <h1 id="css-exclusions-module">CSS Exclusions and Shapes Module Level 3</h1>
    47         <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
    48         <dl>
    49             <dt>This version:</dt>
    50             <dd><a href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
    51             <!--<dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-css3-exclusions-[CDATE]/</a></dd>-->
    53             <dt>Latest version:</dt>
    54             <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd>
    56             <dt>Editor's Draft:</dt>
    57             <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
    59             <dt>Previous version:</dt>
    60             <dd>None</dd>
    62             <dt>Editors:</dt>
    63             <dd class="vcard"><span class="fn">Vincent Hardy</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">vhardy@adobe.com</span></dd>
    64             <dd class="vcard"><span class="fn">Rossen Atanassov</span>, <span class="org">Microsoft Corporation</span>, <span class="email">ratan@microsoft.com</span></dd>
    65             <dd class="vcard"><span class="fn">Alan Stearns</span>, <span class="org">Adobe Systems, Inc.</span>, <span class="email">stearns@adobe.com</span></dd>
    67             <dt>Issues List:</dt>
    68             <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Exclusions&amp;resolution=---&amp;cmdtype=doit">in Bugzilla</a></dd>
    70             <dt>Discussion:</dt>
    71             <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line "<code>[css3-exclusions] message topic</code>"
    73         </dl>
    74         <!--copyright-->
    75         <hr title="Separator for header">
    76     </div>
    78     <h2 class="no-num no-toc" id="abstract">Abstract</h2>
    81     <p>
    82         CSS Exclusions define arbitrary areas around which <a href="http://www.w3.org/TR/CSS2/visuren.html#inline-boxes">inline content</a> ([[!CSS21]]) content can flow.
    83     CSS Exclusions can be defined on any CSS block-level elements. CSS
    84     Exclusions extend the notion of content wrapping previously limited to
    85     floats.</p>
    87     <p>CSS Shapes control the geometric shapes used for wrapping inline flow
    88     content outside or inside an element. CSS Shapes can be applied to any
    89     element. A circle shape on a float will cause inline content to wrap around
    90     the circle shape instead of the float's bounding box.</p>
    92     <p>Combining CSS Exclusions and CSS Shapes allows sophisticated layouts,
    93     allowing interactions between shapes in complex positioning schemes.</p>
    95     <h2 class="no-num no-toc" id="status">Status of this document</h2>
    96     <!--status-->
    98     <h2 class="no-num no-toc" id="contents">Table of contents</h2>
    99     <!--toc-->
   101     <h2 id="intro">Introduction</h2>
   102     <p><em>This section is not normative.</em></p>
   103     <p>
   104         The exclusions section of this specification defines features that allow inline flow 
   105         content to wrap around outside the <span>exclusion area</span> of elements. 
   106     </p>
   107     <p>
   108         The shapes section of the specification defines properties to control the geometry of
   109         an element's <span>exclusion area</span> as well as the geometry used for wrapping 
   110         an element's inline flow content.
   111     </p>
   113     <h2 id="definitions">Definitions</h2>
   115     <dfn>Exclusion box</dfn>
   117     <p>
   118         A <a href="http://www.w3.org/TR/css3-box/">box</a> ([[!CSS3BOX]]) that defines an <span>exclusion area</span> for other boxes. The 'wrap-flow'
   119         property is used to make an element's generated box an exclusion box. An exclusion box contributes
   120         its <span>exclusion area</span> to its <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
   121         containing block's</a> <span>wrapping context</span>. An element with a 'float'
   122         computed value other than 'none' does not become an exclusion.
   123     </p>
   125     <dfn>Exclusion area</dfn>
   126     <div class="issue-marker" data-bug_id="15087" data-bug_status="NEW">
   127         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Issue-15087</a>
   128         <div class="issue-details">
   129             <p class="short-desc">Interaction of floats and exclusions (Howcome's questions)</p>
   130         </div>
   131     </div>
   132     <p>
   133         The area used for excluding inline flow content around an exclusion box. The
   134         <span>exclusion area</span> is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">
   135         border box</a>.
   136         This specification's
   137         'shape-outside' property 
   138         can be used to define arbitrary, 
   139         non-rectangular <span>exclusion areas</span>.
   140     </p>
   142     <dfn>Float area</dfn>
   144     <p>
   145         The area used for excluding inline flow content around a float element. By default, the
   146         float area is the float element's 
   147         <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>.
   148         This specification's
   149         'shape-outside' property can be used to define arbitrary, non-rectangular float
   150         areas.
   151     </p>
   153     <dfn>Exclusion element</dfn>
   155     <p>An block-level element which is not a float and generates an <span>exclusion box</span>. 
   156         An element generates an exclusion box when its 'wrap-flow' property's computed value is not 'auto'.
   157     </p>
   160     <dfn>Wrapping context</dfn>
   161     <div class="issue-marker" data-bug_id="15086" data-bug_status="NEW">
   162         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Issue-15086</a>
   163         <div class="issue-details">
   164             <p class="short-desc">should the wrapping context be generic and include floats?</p>
   165         </div>
   166     </div>
   168     <p>
   169         The <span>wrapping context</span> of a box is a collection of <span>exclusion areas</span> 
   170         contributed by its associated <span>exclusion boxes</span>. During layout,
   171         a box wraps its inline flow content in the area that corresponds to the subtraction of
   172         its <span>wrapping context</span> from its own <span>content area</span>.
   173     </p>
   175     <p>
   176         A box inherits its 
   177         <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block's</a> 
   178         <span>wrapping context</span> unless it specifically 
   179         resets it using the 'wrap-through' property.
   180     </p>
   182     <dfn>Content area</dfn>
   183     <p>
   184         The area used for layout of the inline flow content of a box. By default the
   185         area is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content box</a>. 
   186         This specification's 'shape-inside' property can define arbitrary, non-rectangular content areas.
   187     </p>
   189     <div class="issue-marker" data-bug_id="15089" data-bug_status="NEW">
   190       <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15089">Issue-15089</a>
   191       <div class="issue-details">
   192           <p class="short-desc">shrink-to-fit circle / shape</p>
   193       </div>  
   194     </div>
   196     <dfn title="outside-inside">Outside and inside</dfn>
   198     <p>
   199         In this specification, 'outside' refers to DOM content that is not a descendant of an element 
   200         while 'inside' refers to the element's descendants.
   201     </p>
   203     <h2 id="exclusions">Exclusions</h2>
   204     <p>
   205         Exclusion elements define <span>exclusion areas</span> that contribute to their containing block's 
   206         <span>wrapping context</span>. As a consequence, exclusions impact the layout of their 
   207         containing block's descendants.
   208     <p>
   210     <p>
   211         Elements layout their inline content in their <span>content area</span> and wrap around the 
   212         <span>exclusion areas</span> in their associated <span>wrapping context</span>. If the element is itself an exclusion, it 
   213         does not wrap around its own exclusion shape and the impact of other exclusions on other 
   214         exclusions is controlled by the 'z-index' property as explained in the 
   215         <a href="#exclusions-order">exclusions order</a> section.
   216     </p>
   217         The <a href="#shapes">shape properties</a> can be used to change the shape of 
   218         <span>exclusion areas</span>.
   219     </p>
   221     <h3 id="declaring-exclusions">Declaring exclusions</h3>
   222     <p>
   223         An element becomes an exclusion when its 'wrap-flow' property has a computed value other than 
   224         'auto'.
   225     </p>
   227     <h4 id="wrap-flow-property">The 'wrap-flow' property</h4>
   228     <table class="propdef">
   229         <tr>
   230             <th>Name:</th>
   231             <td><dfn title="'wrap-flow'">wrap-flow</dfn></td>
   232         </tr>
   233         <tr>
   234             <th>Value:</th>
   235             <td><var>auto</var> | <var>both</var> | <var>start</var> | <var>end</var> | <var>minimum</var> | <var>maximum</var> | <var>clear</var></td>
   236         </tr>
   237         <tr>
   238             <th>Initial:</th>
   239             <td>auto</td>
   240         </tr>
   241         <tr>
   242             <th>Applies to:</th>
   243             <td>block-level elements.</td>
   244         </tr>
   245         <tr>
   246             <th>Inherited:</th>
   247             <td>no</td>
   248         </tr>
   249         <tr>
   250             <th>Percentages:</th>
   251             <td>N/A</td>
   252         </tr>
   253         <tr>
   254             <th>Media:</th>
   255             <td>visual</td>
   256         </tr>
   257         <tr>
   258             <th>Computed&nbsp;value:</th>
   259             <td>as specified except for element's whose 'float' computed  value is not
   260                 <code class="css">none</code>, in which case the computed value is 'auto'.</td>
   261         </tr>
   262     </table>
   264     <div class="issue-marker" data-bug_id="16437" data-bug_status="ASSIGNED">
   265       <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16437">Issue-16437</a>
   266       <div class="issue-details">
   267           <p class="short-desc">Consistent use of start/end/top/bottom</p>
   268       </div>  
   269     </div>
   271     <p>The values of this property have the following meanings:</p>
   272     <dl>
   273         <dt><dfn title="'wrap-flow'!!'auto'">auto</dfn></dt>
   274         <dd>
   275             No exclusion is created. Inline flow content interacts with the element as usual.
   276             In particular, if the element is a 
   277             <a href="http://www.w3.org/TR/CSS2/visuren.html#floats">float</a> (see [[CSS21]]), the 
   278             behavior is unchanged.
   279         </dd>
   280         <dt><dfn title="'wrap-flow'!!'both'">both</dfn></dt>
   281         <dd>
   282             Inline flow content can flow on all sides of the exclusion.
   283         </dd>
   284         <dt><dfn title="'wrap-flow'!!'start'">start</dfn></dt>
   285         <dd>
   286             Inline flow content can flow before the start edge of the <span>exclusion area</span> but 
   287             must leave the area after the end edge of the exclusion empty.
   288         </dd>
   289         <dt><dfn title="'wrap-flow'!!'end'">end</dfn></dt>
   290         <dd>
   291             Inline flow content can flow after the end edge of the <span>exclusion area</span> but 
   292             must leave the area before the start edge of the exclusion empty.
   293         </dd>
   294         <dt><dfn title="'wrap-flow'!!'minimum'">minimum</dfn></dt>
   295         <dd>
   296             Inline flow content can flow on the edge of the exclusion with the smallest 
   297             available space within its containing block, and must leave the other edge 
   298             of the exclusion empty.
   299         </dd>
   300         <dt><dfn title="'wrap-flow'!!'maximum'">maximum</dfn></dt>
   301         <dd>
   302             Inline flow content can flow on the edge of the exclusion with the largest 
   303             available space within its containing block, and must leave the other edge 
   304             of the exclusion empty.
   305         </dd>
   306         <dt><dfn title="'wrap-flow'!!'clear'">clear</dfn></dt>
   307         <dd>
   308             Inline flow content can only flow on top and bottom edges of the exclusion 
   309             and must leave the areas before the start and after the end edges of the 
   310             exclusion empty.
   311         </dd>
   312     </dl>
   314     <p>
   315         If the property's computed value is 'auto', the element does not become an 
   316         <span>exclusion</span>.
   317     </p>
   318     <p>
   319         Otherwise, a computed 'wrap-flow' property value of 'both', 'start', 'end', 'minimum', 
   320         'maximum' or 'clear' on an  element makes that element an <span>exclusion element</a>. 
   321         It's <span>exclusion shape</span> is contributed to its containing block's 
   322         <span>wrapping context</span>, causing the containing block's descendants to wrap around 
   323         its <span>exclusion area</span>.
   324     </p>
   326     <p>An <span>exclusion element</span> establishes a 
   327         new <a href="">block formatting context</a> (see [[!CSS21]]) for its content.</p>
   329     <div class="figure">
   330         <img alt="General illustration showing how exclusions combine" src="images/exclusions-illustration.png" width="70%" />
   331         <p class="caption">Combining exclusions</p>
   332     </div>
   334     <p>
   335         The above figure illustrates how exclusions are combined. The outermost box represents
   336         an element's content box. The A, B, C and D darker gray boxes represent exclusions
   337         in the element's <span>wrapping context</span>. A, B, C and D have their respective 'wrap-flow'
   338         set to 'both', 'start', 'end' and 'clear' respectively. The lighter gray areas show
   339         the additional areas that are excluded for inline layout as a result of the 'wrap-flow'
   340         value. For example, the area to the right of 'B' cannot be used for inline layout
   341         because the 'wrap-flow' for 'B' is 'start'.
   342     </p>
   343     <p>
   344         The background 'blue' area shows what areas are available for the element's inline content layout.
   345         All areas represented with a light or dark shade of gray are not available for inline
   346         content layout.
   347     </p>
   349 <div class="issue-marker wrapper">
   350     <div class="issue-marker" data-bug_id="15084" data-bug_status="NEW">
   351         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Issue-15084</a>
   352         <div class="issue-details">
   353             <p class="short-desc">Fluidity of the layout with respect to different amounts of content</p>
   354         </div>
   355     </div>
   356 </div>
   358     <div class="example">
   359         <p>
   360             The 'wrap-flow' property values applied to exclusions as grid items.
   361         </p>
   362 <code class="html"><pre>
   364 &lt;div id="grid"&gt;
   365     &lt;div id="top-right" class="exclusion"&gt;&lt;/div&gt;
   366     &lt;div id="bottom-left" class="exclusion"&gt;&lt;/div&gt;
   367     &lt;div id="content"&gt;Lorem ipsum…&lt;/div&gt;
   368 &lt;/div&gt;
   370 &lt;style type="text/css"&gt; 
   371 #grid {
   372     width: 30em;
   373     height: 30em;
   374     display: grid;
   375     grid-columns: 25% 25% 25% 25%;
   376     grid-rows: 25% 25% 25% 25%;
   378 #top-right {
   379     grid-column: 3;
   380     grid-row: 2;
   381 }
   383 #bottom-left {
   384     grid-column: 2;
   385     grid-row: 3;
   386 }
   388 .exclusion {
   389     wrap-flow: &lt;see below&gt;
   390 }
   392 #content {
   393     grid-row: 1;
   394     grid-row-span: 4;
   395     grid-column: 1;
   396     grid-column-span: 4;
   397 }
   398 &lt;/style&gt; 
   399 </pre></code>
   400         <p>The following figures illustrate the visual rendering for different values
   401             of the 'wrap-flow' property. The gray grid lines are marking the grid cells. and the 
   402             blue area is the exclusion box (positioned by the grid).</p>
   403         <table class="example-table">
   404             <tr>
   405                 <td><code class="html">.exclusion{ wrap-flow: auto; }</code></td>
   406                 <td><code class="html">.exclusion{ wrap-flow: both; }</code></td>
   407             </tr>
   408             <tr>
   409                 <td><img src="images/exclusion_wrap_side_auto.png" alt="Example rendering for wrap-side: auto" /></td>
   410                 <td><img src="images/exclusion_wrap_side_both.png" alt="Example rendering for wrap-side: both" /></td>
   411             </tr>
   412             <tr>
   413                 <td><code class="html">.exclusion{ wrap-flow: start; }</code></td>
   414                 <td><code class="html">.exclusion{ wrap-flow: end; }</code></td>
   415             </tr>
   416             <tr>
   417                 <td><img src="images/exclusion_wrap_side_left.png" alt="Example rendering for wrap-side: start" /></td>
   418                 <td><img src="images/exclusion_wrap_side_right.png" alt="Example rendering for wrap-side: end" /></td>
   419             </tr>
   420             <tr>
   421                 <td><code class="html">.exclusion{ wrap-flow: minimum; }</code></td>
   422                 <td><code class="html">.exclusion{ wrap-flow: maximum; }</code></td>
   423             </tr>
   424             <tr>
   425                 <td><img src="images/exclusion_wrap_side_minimum.png" alt="Example rendering for wrap-side: minimum" /></td>
   426                 <td><img src="images/exclusion_wrap_side_maximum.png" alt="Example rendering for wrap-side: maximum" /></td>
   427             </tr>
   428             <tr>
   429                 <td><code class="html">.exclusion{ wrap-flow: clear; }</code></td>
   430                 <td></td>
   431             </tr>
   432             <tr>
   433                 <td><img src="images/exclusion_wrap_side_clear.png" alt="Example rendering for wrap-side: clear" /></td>
   434                 <td></td>
   435             </tr>
   436         </table>
   437     </div>
   439     <!-- End section "wrap-flow Property" -->
   440     <!-- End section "Declaring Exclusions" -->
   442     <h3 id="scope-and-effect-of-exclusions">Scope and effect of exclusions</h3>
   443     <p>
   444         An <span>exclusion</span> affects 
   445         the inline flow content descended 
   446         from the exclusion's containing block 
   447         (defined in <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
   448         CSS 2.1 10.1</a>) 
   449         and that of all descendant elements 
   450         of the same containing block. 
   451         All inline flow content 
   452         inside the containing block 
   453         of the exclusions is affected. 
   454         To stop the effect of exclusions 
   455         defined outside an element, 
   456         the 'wrap-through' property can be used 
   457         (see the <a href="#propagation-of-exclusions">propagation of exclusions</a>
   458         section below).
   459     </p>
   461     <p>
   462         As a reminder, 
   463         for exclusions with 'position:fixed', 
   464         the containing block is that 
   465         of the root element.
   466     </p>
   468     <!-- End section "Scope and Effect of Exclusions" -->
   470     <h3 id="propagation-of-exclusions">Propagation of Exclusions</h3>
   471     <p>
   472         By default, an element inherits its parent <span>wrapping context</span>. In other words
   473         it is subject to the exclusions defined <span title="outside-inside">outside</sapn> the element.
   474     </p>
   475     <p>Setting the 'wrap-through' property to 'none' prevents an element from inheriting its parent
   476         <span>wrapping context</span>. In other words, exclusions defined 'outside' the element, have not effect
   477         on the element's children layout.
   478     </p>
   479     <div class="note">
   480         Exclusions defined by an element's descendants still contribute to their containing block's
   481         <span>wrapping context</span>. If that containing block is a child of an element with 'wrap-through'
   482         set to none, or the element itself, then exclusion still have an effect on the children of that 
   483         containing block element.
   484     </div>
   486     <h4 id="wrap-through-property">The 'wrap-through' Property</h4>
   488     <div class="issue-marker" data-bug_id="15085" data-bug_status="NEW">
   489         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Issue-15085</a>
   490         <div class="issue-details">
   491             <p class="short-desc">do we need wrap-through?</p>
   492         </div>
   493     </div>
   495     <table class="propdef">
   496         <tr>
   497             <th>Name:</th>
   498             <td><dfn title="'wrap-through'">wrap-through</dfn></td>
   499         </tr>
   500         <tr>
   501             <th>Value:</th>
   502             <td><var>wrap</var> | <var>none</var></td>
   503         </tr>
   504         <tr>
   505             <th>Initial:</th>
   506             <td>wrap</td>
   507         </tr>
   508         <tr>
   509             <th>Applies to:</th>
   510             <td>block-level elements</td>
   511         </tr>
   512         <tr>
   513             <th>Inherited:</th>
   514             <td>no</td>
   515         </tr>
   516         <tr>
   517             <th>Percentages:</th>
   518             <td>N/A</td>
   519         </tr>
   520         <tr>
   521             <th>Media:</th>
   522             <td>visual</td>
   523         </tr>
   524         <tr>
   525             <th>Computed&nbsp;value:</th>
   526             <td>as specified</td>
   527         </tr>
   528     </table>
   530     <p>The values of this property have the following meanings:</p>
   531     <dl>
   532         <dt><dfn title="'wrap-through'!!'wrap'">wrap</dfn></dt>
   533         <dd>
   534             The element inherits its parent node's <span>wrapping context</span>. Its descendant
   535             inline content wraps around exclusions defined <span title="outside-inside">outside</span>
   536             the element.
   537         </dd>
   538     </dl>
   539     <dl>
   540         <dt><dfn title="'wrap-through'!!'none'">none</dfn></dt>
   541         <dd>
   542             The element does not inherit its parent node's <span>wrapping context</span>. Its 
   543             descendants are only subject to exclusion shapes defined <span title="outside-inside">inside</span>
   544             the element.
   545         </dd>
   546     </dl>
   547     <div class="example">
   548         <p>
   549             Using the 'wrap-through' property to control the effect of exclusions.
   550         </p>
   551 <pre><code class="html">
   553 &lt;style type="text/css"&gt; 
   554     #grid {
   555         display: grid;
   556         grid-columns: 25% 50% 25%;
   557         grid-rows: 25% 25% 25% 25%;
   558     }
   560     #exclusion {
   561         grid-row: 2;
   562         grid-row-span: 2;
   563         grid-column: 2;
   564         wrap-flow: &lt;see below&gt;
   565     }
   567     #rowA, #rowB {
   568         grid-row-span: 2;
   569         grid-column: 1;
   570         grid-column-span: 3;
   571     }
   573     #rowA {
   574         grid-row: 1;
   575     }
   577     #rowB {
   578         grid-row: 3;
   579     }
   580     &lt;/style&gt;
   582 &lt;style type="text/css"&gt; 
   583     .exclusion  {
   584     	wrap-flow: both; 
   585     	position: absolute; 
   586     	left: 20%;
   587     	top: 20%;
   588     	width: 50%;
   589     	height: 50%;
   590     	background-color: rgba(220, 230, 242, 0.5); 
   591     } 
   592 &lt;/style&gt; 
   594 &lt;div id="grid"&gt; 
   595     &lt;div class=”exclusion”&gt;&lt;/div&gt; 
   596     &lt;div id="rowA" style=”wrap-through: wrap;”&gt; Lorem ipsum dolor sit amet...&lt;/div&gt; 
   597     &lt;div id="rowB" style=”wrap-through: none;”&gt; Lorem ipsum dolor sit amet...&lt;/div&gt; 
   598 &lt;/div&gt;
   599 </code></pre>
   601         <img class="singleImgExample" src="images/exclusion_wrap_through.png" alt="Example rendering of wrap-through: wrap | none" style="max-width:40%"/>
   602     </div>
   603     <!-- End section "wrap-through property" -->
   605 <!-- removed as wrap-margin and wrap-padding changed to shape-margin and shape-padding
   607     <h4 id="wrap-shorthand-property">The 'wrap' Shorthand Property</h4>
   608     <table class="propdef">
   609         <tr>
   610             <th>Name:</th>
   611             <td><dfn title="'wrap'">wrap</dfn></td>
   612         </tr>
   613         <tr>
   614             <th>Value:</th>
   615             <td><var>&lt;wrap-flow&gt;</var> || <var>&lt;wrap-margin&gt;</var> [ / <var>&lt;wrap-padding&gt;</var>]</td>
   616         </tr>
   617         <tr>
   618             <th>Initial:</th>
   619             <td>see individual properties</td>
   620         </tr>
   621         <tr>
   622             <th>Applies to:</th>
   623             <td>block-level elements</td>
   624         </tr>
   625         <tr>
   626             <th>Inherited:</th>
   627             <td>no</td>
   628         </tr>
   629         <tr>
   630             <th>Percentages:</th>
   631             <td>N/A</td>
   632         </tr>
   633         <tr>
   634             <th>Media:</th>
   635             <td>visual</td>
   636         </tr>
   637         <tr>
   638             <th>Computed&nbsp;value:</th>
   639             <td>see individual properties</td>
   640         </tr>
   641     </table>
   642     <p>
   643         The 'wrap' property is a shorthand property for setting the exclusions properties
   644         at the same place in the style sheet.
   645     </p>
   646 -->
   647     <!-- End section "wrap shorthand property" -->
   648     <!-- End section "Propagation of Exclusions" -->
   650     <h3 id="exclusions-order">Exclusions order</h3>
   651     <p>
   652         Exclusions follow the painting order (See [[!CSS21]] Appendix E). Exclusions are
   653         applied in reverse to the document order in which they are defined. The last exclusion
   654         appears on top of all other exclusion, thus it affects the inline flow content of
   655         all other preceding exclusions or elements descendant of the same containing block.
   656         The 'z-index' property can be used to change the ordering of 
   657         <a href="http://www.w3.org/TR/CSS2/visuren.html#choose-position">positioned</a> exclusion
   658         boxes (see [[!CSS21]]). Statically positioned exclusions are not affected by the 
   659         'z-index' property and thus follow the painting order.
   660     </p>
   662     <div class="issue-marker" data-bug_id="16474" data-bug_status="NEW">
   663       <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16474">Issue-16474</a>
   664       <div class="issue-details">
   665           <p class="short-desc">Improve Example 3 about exclusion order</p>
   666       </div>  
   667     </div>
   669     <div class="example">
   670         <p>Ordering of exclusions.</p>
   671 <pre><code class="html">
   672 &lt;style type="text/css"&gt; 
   673     .exclusion  {
   674     	wrap-flow: both; 
   675     	position: absolute; 
   676     	width: 50%; 
   677     	height: auto; 
   678     } 
   679 &lt;/style&gt; 
   681 &lt;div class=”exclusion” style=”top: 0px; left: 0px;”&gt; 
   682     Lorem ipsum dolor sit amet... 
   683 &lt;/div&gt; 
   684 &lt;div id="orderedExclusion" class=”exclusion” style=”top: 25%; left: 25%;”&gt; 
   685     Lorem ipsum dolor sit amet... 
   686 &lt;/div&gt; 
   687 &lt;div class=”exclusion” style=”top: 50%; left: 50%;”&gt; 
   688     Lorem ipsum dolor sit amet... 
   689 &lt;/div&gt;
   690 </code></pre>
   692     <table class="example-table">
   693         <tr>
   694             <td style="width:50%"><code class="html">#orderedExclusion{ z-index: auto; }</code></td>
   695             <td style="width:50%"><code class="html">#orderedExclusion{ z-index: 1; }</code></td>
   696         </tr>
   697         <tr>
   698             <td><img class="singleImgExample" src="images/exclusion_ordering.png" alt="Example rendering of default exclusion ordering." /></td>
   699             <td><img class="singleImgExample" src="images/exclusion_ordering_z_order.png" alt="Example rendering of default exclusion ordering." /></td>
   700         </tr>
   701     </table>
   703     </div>
   704     <!-- End section "Order of Exclusions" -->
   706     <div class="issue-marker wrapper">
   707     <div class="issue-marker" data-bug_id="15183" data-bug_status="NEW">
   708         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Issue-15183</a>
   709         <div class="issue-details">
   710             <p class="short-desc">Is the CSS exclusions processing model incorrect?</p>
   711         </div>
   712     </div>
   713     </div>
   715     <div class="issue">
   717         <p>The current draft provides a model for exclusions
   718         without a collision-avoidance model. 
   719         The existing exclusion model in CSS uses floats, 
   720         which have both exclusion and collision-avoidance behavior. 
   721         Concerns have been raised that allowing exclusions 
   722         without collision avoidance could be harmful, 
   723         particularly with absolutely-positioned elements. 
   724         Three options should be considered:<p>
   725         <ol>
   726             <li>Allow exclusions in positioning schemes 
   727                 with no collision avoidance.</li>
   728             <li>Disallow exclusions in positioning schemes 
   729                 with no collision avoidance.</li>
   730             <li>Define collision-avoidance behavior 
   731                 for positioning schemes without it, 
   732                 and use this behavior by default with exclusions.</li>
   733         <ol>
   734     </div>
   736     <div class="issue-marker wrapper">
   737     <div class="issue-marker" data-bug_id="15083" data-bug_status="NEW">
   738         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Issue-15083</a>
   739         <div class="issue-details">
   740             <p class="short-desc">Concerns over Error accumulation vs. performance</p>
   741         </div>
   742     </div>
   743     </div>
   745         <h3 id="exclusions-processing-model">Processing model</h3>
   747         <h4 id="exclusions-processing-model-description">Description</h4>
   749         <p>Applying exclusions is a two-step process:</p>
   751         <ul>
   752             <li><strong>Step 1</strong>: resolve exclusion boxes belonging to each <span>wrapping context</span></li>
   753             <li><strong>Step 2</strong>: resolve <span>wrapping context</span>s and lay out each containing block in turn:
   754                 <ul>
   755                     <li><strong>Step 2-A</strong>: resolve the position and size of exclusion boxes</li>
   756                     <li><strong>Step 2-B</strong>: lay out containing block, wrapping around <span>exclusion areas</span></li>
   757                 </ul>
   758                 </li>
   759         </ul>
   761         <h4 id="step-1-resolve-exclusion-boxes-belonging-to-each-wrapping-context">Step 1: resolve exclusion boxes belonging to each <span>wrapping context</span></h4>
   763         <p>In this step, the user agent determines which <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a> each 
   764             <span>exclusion area</span> belongs to. This is a simple step, based on the 
   765             definition of containing blocks and elements with a computed value for 'wrap-flow'
   766             that is not <code class="css">auto</code>.</p>
   768         <h4 id="step-2-resolve-wrapping-contexts-layout-containing-blocks">Step 2: resolve wrapping contexts and lay out containing blocks</h4>
   770         <p>In this step, starting from the 
   771             top of the <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">rendering tree</a> (see [[!CSS21]]), 
   772             the the agent processes each containing block in two sub-steps.</p>
   774         <h4 id="step-2-A-resolve-exclusions-position-and-size">Step 2-A: resolve the position and size of exclusion boxes</h4>
   776         <p>Resolving the position and size 
   777             of <span>exclusion boxes</span> 
   778             in the <span>wrapping context</span> 
   779             may or may not require a layout. 
   780             For example, 
   781             if an <span>exclusion box</span> 
   782             is absolutely positioned and sized,
   783             a layout may not be needed 
   784             to resolve its position and size. 
   785             In other situations, 
   786             laying out the containing block's content is required.</p>
   788         <p>When a layout is required, 
   789             it is carried out
   790             without applying any <span>exclusion area</span>.
   791             In other words, 
   792             the containing block is laid out
   793             without a <span>wrapping context</span>. </p>
   795         <p>Step 2-A yields a position and size
   796             for all <span>exclusion boxes</span> 
   797             in the <span>wrapping context</span>. 
   798             Each exclusion box is processed in turn, 
   799             starting from the top-most, 
   800             and each <span>exclusion area</span> 
   801             is computed and contributed 
   802             to the <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block's</a> 
   803             <span>wrapping context</span>. </p>
   805         <p>Scrolling is ignored in this step 
   806             when resolving the position and size 
   807             of 'position:fixed' <span>exclusion boxes</span>.</p>
   809         <p>Once the <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block's</a>
   810             <span>wrapping context</span> is computed, 
   811             all <span>exclusion boxes</span> 
   812             in that <span>wrapping context</span> 
   813             are removed from the normal flow.</p>
   815         <h4 id="step-2-B-layout-containing-block-applying-wrapping">Step 2-B: lay out containing block applying wrapping</h4>
   817         <p>Finally, the content 
   818             of the containing block is laid out, 
   819             with the inline content wrapping around 
   820             the <span>wrapping content</span>'s
   821             <span>exclusion areas</span> 
   822             (which may be different 
   823             from the <span>exclusion box</span>
   824             because of the 'shape-outside' property).</p>
   826         <p>When the containing block itself is an <span>exclusion box</span>, then 
   827             rules on <a href="#exclusions-order">exclusions order</a> define which exclusions
   828             affect the inline and descendant content of the box.</p>
   830         <h4 id="exclusions-processing-model-example">Example</h4>
   832         <p>This section illustrates the exclusions processing model with an example. It is meant 
   833             to be simple. Yet, it contains enough complexity to address the issues of 
   834             layout dependencies and re-layout.</p>
   837         <p>The code snippet in the following example has two exclusions affecting 
   838             the document's inline content.</p>
   840         <div class="example">
   841         <pre class="html">&lt;html&gt;
   842 &lt;style&gt;
   843 #d1 {
   844     position:relative;
   845     height: auto;
   846     color: #46A4E9;
   847     border: 1px solid gray;
   848 }
   850 #e1 {
   851     wrap-flow: both;
   852     position: absolute; 
   853     left: 50%; 
   854     top: 50%; 
   855     width: 40%; 
   856     height: 40%; 
   857     border: 1px solid red;
   858     margin-left: -20%;
   859     margin-top: -20%;
   860 }
   862 #d2 {
   863     position: static;
   864     width: 100%;
   865     height: auto;
   866     color: #808080;
   867 }
   869 #e2 {
   870     wrap-flow: both;
   871     position: absolute; 
   872     right: 5ex; 
   873     top: 1em; 
   874     width: 12ex;
   875     height: 10em; 
   876     border: 1px solid lime;
   877 }
   878 &lt;/style&gt;
   879 &lt;body&gt;
   880     &lt;div id="d1"&gt;
   881         Lorem ipsusm ...
   882         &lt;p id="e1"&gt;&lt/p&gt;
   883     &lt;/div&gt;
   884     &lt;div id="d2"&gt;
   885         Lorem ipsusm ...
   886         &lt;p id="e2" &gt;&lt/p&gt;
   887     &lt;/div&gt;
   888 &lt;/body&gt;
   889 &lt;/html&gt;</pre>
   890         </div>
   891         <p>The following figures illustrate:</p>
   893         <ul>
   894             <li>the document's DOM tree</li>
   895             <li>the layout tree of generated block boxes</p>
   896         </ul>
   898         <div class="figure">
   899             <img src="images/processing-model-example-dom.svg" width="200" 
   900                 alt="DOM tree nodes"/>
   901             <p class="caption">DOM tree</p>
   902         </div>
   904         <div class="figure">
   905             <img src="images/processing-model-example-layout-tree.svg" width="350" 
   906                 alt="Layout tree boxes"/>
   907             <p class="caption">Layout tree of generated block boxes</p>
   908         </div>
   910         <h5>Step 1: resolve exclusion boxes belonging to each <span>wrapping context</span></h5>
   912         <p>The figures illustrate how the boxes corresponding to the element sometimes
   913             have a different containment hierarchy in the layout tree than in the DOM tree. 
   914             For example, the box generated by <code class="idl">e1</code> is positioned in
   915             its containing block's box, which is the <code class="idl">d1-box</code>, because 
   916             <code class="idl">e1</code> is absolutely positioned and <code class="idl">d1</code>
   917             is relatively positioned. However, while <code class="idl">e2</code> is also absolutely 
   918             positioned, its containing block is the initial containing block (ICB). See the 
   919             section 10.1 of the CSS 2.1 specification ([[!CSS21]]) for details.</p>
   921         <p>As a result of the computation of containing blocks for the tree, the boxes belonging 
   922             to the <span>wrapping context</span>s of all the elements can be determined:</p>
   924         <ul>
   925             <li>The <span>wrapping context</span> for the html element contains the <code class="idl">e2</code> box: WC-1 (Wrapping Context 1)</li>
   926             <li>The <span>wrapping context</span> for the body element inherits the html element's <span>wrapping context</span>: WC-1</li>
   927             <li>The <span>wrapping context</span> for <code class="idl">d1</code> inherits the body element's 
   928                 <span>wrapping context</span> and adds the <code class="idl">e1-box</code> to it. So the wrapping
   929                 context is made of both the <code class="idl">e1-box</code> and the 
   930                 <code class="idl">e2-box</code>: WC-2</li>
   931             <li>The <span>wrapping context</span> for <code class="idl">d2</code> inherits the body element's 
   932                 <span>wrapping context</span>: WC-1</li>
   933         </ul>
   935         <h5>Step 2: resolve wrapping contexts and lay out containing blocks</h5>
   937         <p>In this step, each containing block is processed in turn. For each containing block,
   938             we (conceptually) go through two phases:</p>
   939         <ol>
   940             <li>resolve the <span>wrapping context</span>: resolve the position and size of its exclusions</li>
   941             <li>lay out the containing block</li>
   942         </ol>
   944         <p>In our example, this breaks down to:</p>
   945         <ol>
   946             <li>resolve the position and size of the exclusions belonging to WC-1: RWC-1 (Resolved Wrapping Context 1).</li>
   947             <li>lay out the initial containing block (i.e., lay out its content):
   948                 <ol>
   949                     <li>resolve the html element's <span>wrapping context</span>: RWC-1</li>
   950                     <li>lay out the html element:
   951                         <ol>
   952                             <li>resolve the body element's <span>wrapping context</span>: RWC-1</li>
   953                             <li>lay out the body element:
   954                                 <ol>
   955                                     <li>resolve the <code class="idl">d1</code> element's <span>wrapping context</span>: RWC-2</li>
   956                                     <li>lay out the <code class="idl">d1</code> element</li>
   957                                     <li>resolve the <code class="idl">d2</code> element's <span>wrapping context</span>: RWC-1</li>
   958                                     <li>lay out the <code class="idl">d2</code> element</li>
   959                                 </ol>
   960                             </li>
   961                         </ol>
   962                     </li>
   963                 </ol>
   964                 </li>
   965         </ol>
   967         <h6>Resolving RWC-1</h6>
   969         <p>The top-most <span>wrapping context</span> in the layout tree contains the <code class="idl">e2</code>
   970             exclusion. Its position and size needs to be resolved. In general, computing an 
   971             exclusion's position and size may or may not require laying out other content.
   972             In our example, no content needs to be laid out to resolve the <code class="idl">e2</code>
   973             exclusion's position because it is absolutely positioned and its size can be resolved
   974             without layout either. At this point, RWC-1 is resolved and can be used when
   975             laying inline content out.</p>
   977         <h6>Resolving RWC-2</h6>
   979         <p>The process is similar: the position of the 
   980             <code class="idl">e1</code> exclusion needs to be resolved. Again, resolving the exclusion's 
   981             position and size may require processing the containing block (d1 here). 
   982             It is the case here because the size and position of
   983             <code class="idl">e1</code> depend on resolving the percentage lengths. The percentages are relative 
   984             to the size of 
   985             <code class="idl">d1</code>'s box. As a result, in order to resolve
   986             a size for <code class="idl">d1</code>'s box, a first layout of <code class="idl">d1</code>
   987             is done without any <span>wrapping context</span> (i.e., no exclusions applied). The layout yields a 
   988             position and size for <code class="idl">e1</code>'s box. 
   989         </p>
   990         <p>At this point, RWC-2 is resolved because the position and size of both 
   991             e1 and e2 are resolved.</p>
   993         <p class="note">The important aspect of the above processing example is that once an element's <span>wrapping context</span>
   994             is resolved (by resolving its exclusions' position and size), the position and size of the
   995             exclusions are not re-processed if the element's size changes between the layout that may be done 
   996             without considering any <span>wrapping context</span> (as for RWC-2) and the layout done with the resolved <span>wrapping context</span>. 
   997             This is what breaks the possible circular dependency between the resolution of <span>wrapping context</span>s
   998             and the layout of containing blocks.</p>
  1000     <h3 id="floats-and-exclusions">Floats and exclusions</h3>
  1002     <h4 id="floats-and-exclusions-similarities">Similarities</h4>
  1004     <p>There are similarities between floats an exclusions in that inline content wraps around floats 
  1005         and also wraps around <span>exclusion areas</span>. However, there are very significant differences.</p>
  1007     <h4 id="floats-and-exclusions-differences">Differences</h4>
  1009     <ul>
  1010         <li><strong>scope</strong>. While floats apply to content that follows in the 
  1011             document, exclusions apply to content in their containing block.</li>
  1012         <li><strong>positioning</strong>. Floats are part of the inline flow and 'float' on the
  1013             line box. Authors can control how the floats move on the line box, to the right or to the
  1014             left. By contrast, exclusions can be positioned using any positioning scheme such
  1015             as grid layout ([[CSS3-GRID-LAYOUT]]), flexible box ([[CSS3-FLEXBOX]]) or any other
  1016             CSS positioning scheme.</li>
  1017         <li><strong>separation of concerns</strong>. Making an element a float determines both
  1018             its positioning scheme and its effect on inline content. Making an element an
  1019             exclusion only determines its impact on inline content and does not impose constraints 
  1020             on its positioning method.</li>
  1021     </ul>
  1023     <h4 id="floats-and-exclusions-interoperability">Interoperability</h4>
  1025     <h5 id="effect-of-floats-on-exclusions">Effect of floats on exclusions</h5>
  1027     <p>Floats have an effect on the positioning of exclusions and the layout of their inline content. For 
  1028         example, if an exclusion is an inline-box which happens to be on the same line as a float,
  1029         its' position, as computed in <a href="#step-2-A-resolve-exclusions-position-and-size">Step 2-A</a> will be impacted by the float, as 
  1030         is any other inline content.</p>
  1032     <h5 id="effect-of-exclusions-on-floats">Effect of exclusions on floats</h5>
  1034     <p>Exclusions have an effect on the positioning of floats as they have an effect on inline content. 
  1035         Therefore, in <a href="#step-2-B-layout-containing-block-applying-wrapping">Step 2-B</a>, floats will avoid <span>exclusion areas</span>.</p>
  1037     <!-- End section "Exclusions" -->
  1039     <h2 id="shapes">Shapes</h2>
  1041 <div class="issue-marker wrapper">
  1042     <div class="issue-marker" data-bug_id="15091" data-bug_status="NEW">
  1043         <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Issue-15091</a><br />
  1044         <div class="issue-details">
  1045             <p class="short-desc">Simplify the syntax for shapes</p>
  1046         </div>
  1047     </div>
  1049     <div class="issue-marker" data-bug_id="16716" data-bug_status="NEW">
  1050       <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16716">Issue-16716</a>
  1051       <div class="issue-details">
  1052           <p class="short-desc">Handling visible content as a shape for Exclusions</p>
  1053       </div>  
  1054     </div>
  1055 </div>
  1057     <p>
  1058         Shapes define arbitrary geometric contours around which or into which inline flow
  1059         content flows. There are two different types of shapes – 'outside' and 'inside'.
  1060         The outside shape defines the <span>exclusion area</span> for an <span>exclusion element</span>
  1061         or the <span>float area</span> for a float. 
  1062         The inside shape defines an element's <span>content shape</span> and the element's inline 
  1063         content will flow within that shape.
  1064     </p>
  1066     <p class="note">It is important to note that while outside shapes only apply to 
  1067         <span>exclusions</span> and floats, inside shapes apply to all block-level elements.</p>
  1069     <h3 id="relation-to-box-model-and-float-behavior">Relation to the box model and float behavior</h3>
  1071     <p>
  1072         While the boundaries used for wrapping inline flow content outside and inside
  1073         an element can be defined using shapes, the actual box model does not change. If
  1074         the element has specified margins, borders or paddings they will be computed and
  1075         rendered according to the [[!CSS3BOX]] module.
  1076     </p>
  1078     <p>
  1079         However, floats are an exception. If a float has an outside shape, its positioning 
  1080         is resolved as
  1081         <a href="http://www.w3.org/TR/CSS2/visuren.html#float-position">defined</a> in 
  1082         [[!CSS21]] but using the
  1083         outside shape's bounding box is used in lieu of the float's margin box. 
  1084     </p>
  1086     <div class="example">
  1087         <p>CSS 'shape-outside' and CSS box model relation: the red box illustrates the exclusion element's
  1088             content box, which is unmodified and subject to normal CSS positioning (here absolute positioning).</p>
  1089 <pre><code class="html">
  1090 &lt;style type="text/css"&gt; 
  1091     .exclusion  {
  1092     	wrap-flow: both; 
  1093     	position: absolute; 
  1094     	top: 25%;
  1095     	left: 25%;
  1096     	width: 50%;
  1097     	height: 50%;
  1098     	shape-outside: circle(50%, 50%, 50%); 
  1099     	border: 1px solid red; 
  1101 &lt;/style&gt; 
  1103 &lt;div style=”position: relative;”&gt; 
  1104     &lt;div class=”exclusion”&gt;&lt;/div&gt; 
  1105     Lorem ipsum dolor sit amet... 
  1106 &lt;/div&gt;
  1107 </code></pre>
  1108         <img class="singleImgExample" src="images/shapes_CSS2.1_MBP.png" alt="Example rendering of circle shape and box model."  style="max-width:40%"/>
  1109     </div>
  1111       <div class="example">
  1112           <p>In the following example the left and right floating <code class="html">div</code> elements 
  1113               specify a triangular shape using the 'shape-outside' property.</p>
  1115 <pre><code class="html">
  1116 &lt;div style="text-align:center;"&gt;
  1117       &lt;div id="float-left"&gt;&lt;/div&gt;
  1118       &lt;div id="float-right"&gt;&lt;/div&gt;
  1119       &lt;div&gt;
  1120       Sometimes a web page's text content appears to be
  1121       funneling your attention towards a spot on the page
  1122       to drive you to follow a particular link.  Sometimes
  1123       you don't notice.
  1124       &lt;/div&gt;
  1125 &lt;/div&gt;
  1127 &lt;style type="text/css"&gt;
  1128 #float-left {
  1129       shape-outside: polygon(0,0 100%,100% 0,100%);
  1130       float: left;
  1131       width: 40%;
  1132       height: 12ex;
  1135 #float-right {
  1136       shape-outside: polygon(100%,0 100%,100% 0,100%);
  1137       float: right;
  1138       width: 40%;
  1139       height: 12ex;
  1141   &lt;/style&gt;
  1142 &lt;/div&gt;</code></pre>
  1144         <img class="singleImgExample" src="images/float-shape-outside.png" alt="Using the shape-outside property with a float"/>
  1145       </div>
  1146       <h3 id="basic-shapes-from-svg-syntax">Basic Shapes</h3>
  1147       <p>
  1148           Shapes can be specified using 
  1149           syntax similar to <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>. 
  1150           The definitions use 
  1151           <code><a href="http://www.w3.org/TR/css3-values/#lengths">&lt;length&gt;</a></code> type 
  1152           and the <code><a href="">&lt;percentage&gt;</a></code> types (see [[!CSS3VAL]]). 
  1153           Percentages are resolved 
  1154           from the border box 
  1155           of the element to which the property applies. 
  1156           For the radius <code>r</code> of the <code>circle</code> shape, 
  1157           a percentage value is resolved as
  1158           <a href="http://www.w3.org/TR/SVG/coords.html#Units">specified</a> 
  1159           in the SVG recommendation (see [[!SVG11]]). 
  1160 		  SVG strokes are not considered part of the shape, 
  1161           thus only the following geometries are valid.
  1162       </p>
  1165       <h4 id="supported-basic-shapes">Supported Shapes</h4>
  1166       The following SVG shapes are supported by the CSS shapes module.
  1167       <dl>
  1168           <dt><dfn id="rectangle">rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4} [ curve [&lt;length&gt;|&lt;percentage&gt;]{1,2} ]? )</dt>
  1169           <dd>
  1170               <ul>
  1171                   <li>
  1172                       The four values represent 
  1173                       <strong>x, y, width</strong> and 
  1174                       <strong>height</strong>.
  1175                       They define the bounding box 
  1176                       of the rectangle. 
  1177                       Negative values for width and height are invalid.
  1178                   </li>
  1179                   <li>
  1180                       The two 'curve' values represent 
  1181                       <strong> rx</strong> and <strong>ry</strong>. 
  1182                       For rounded rectangles they define 
  1183                       the x-axis radius and y-axis radius 
  1184                       of the ellipse used to round off 
  1185                       the corners of the rectangle. 
  1186                       Negative values for rx and ry are invalid.
  1187                   </li>
  1188               </ul>
  1189           </dd>
  1190           <dt><dfn id="circle">circle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{3})</dt>
  1191           <dd>
  1192               <ul>
  1193                   <li>
  1194                       The three values values represent 
  1195                       <strong>cx</strong>, 
  1196                       <strong>cy</strong>, 
  1197                       and <strong>r</strong>. 
  1198                       They define the x-axis and y-axis coordinates
  1199                       of the center of the circle 
  1200                       and the radius of the circle. 
  1201                       A negative value for r is invalid.
  1202                   </li>
  1203               </ul>
  1204           </dd>
  1205           <dt><dfn id="ellipse">ellipse</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4})</dt>
  1206           <dd>
  1207               <ul>
  1208                   <li>
  1209                       The four values represent 
  1210                       <strong>cx</strong>, 
  1211                       <strong>cy</strong>, 
  1212                       <strong>rx</strong>, and 
  1213                       <strong>ry</strong>.  
  1214                       They define the x-axis and y-axis coordinates
  1215                       of the center of the ellipse 
  1216                       and the x-axis and y-axis radius
  1217                       of the ellipse. 
  1218                       Negative values for rx and ry are invalid.
  1219                   </li>
  1220               </ul>
  1221           </dd>
  1222           <dt><dfn id="polygon">polygon</dfn>([&lt;fill-rule&gt;,]? [&lt;length&gt;|&lt;percentage&gt;]{2}#)</dt>
  1223           <dd>
  1224               <ul>
  1225                   <li><strong>fillRule</strong> - The filling rule used to determine the interior of the
  1226                       polygon. See <a href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a> property in SVG for details. Possible values are nonzero
  1227                       or evenodd. Default value when omitted is nonzero.</li>
  1228                   <li>
  1229                       The two length values represent <strong>xi</strong> and <strong>yi</strong> - 
  1230                       the <strong>x</strong> and <strong>y</strong> axis coordinates of the i-th vertex of the polygon.
  1231                   </li>
  1232               </ul>
  1233               <p>
  1234                   If the polygon is not closed the user-agent will automatically add a new vertex
  1235                   at the end.</p>
  1236               <br/>
  1237           </dd>
  1238       </dl>
  1240       <h4 id='referencing-svg-shapes'>Referencing SVG shapes</h4>
  1242       <p>An SVG shape can be referenced using the <code>url()</code> syntax. The shape can be 
  1243           any of the <a href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a> or a 
  1244           <a href="http://www.w3.org/TR/SVG/paths.html">path element</a>.</p>
  1246       <div class="example">
  1247           <div style="float:right">
  1248             <img alt="results of referencing SVG shapes" src="images/svg-shape-reference.png">
  1249           </div>
  1250           <code class="html"><pre>
  1251 &lt;style&gt;
  1252 div {
  1253     height: 400px;
  1254     width: 400px;
  1256 .in-a-circle {
  1257     shape-inside: url(#circle_shape);
  1260 .in-a-path {
  1261     shape-inside: url(#path-shape);
  1264 &lt;/style&gt;
  1266 &lt;svg ...&gt;
  1267 &lt;circle id="circle_shape" cx="50%" cy="50%" r="50%" /&gt;
  1268 &lt;path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" /&gt;
  1269 &lt;/svg&gt;
  1271 &lt;div class="in-a-circle"&gt;...&lt;/div&gt;
  1272 &lt;div class="in-a-path"&gt;...&lt;/div&gt;
  1273           </pre></code>
  1274       </div>
  1275         <p>
  1276             When using the SVG syntax or referencing SVG elements to define shapes, all the
  1277             lengths expressed in percentages are resolved from the border box of the element.
  1278             The coordinate system for the shape has its origin on the top-left corner of the
  1279             border box with the x-axis running to the right and the y-axis running downwards.
  1280             If the SVG element uses unitless coordinate values, they are equivalent to using
  1281             'px' units. If the border box of the element is dependent on auto sizing (i.e.,
  1282             the element's 'width' or 'height' property is 'auto'), then the percentage values
  1283             resolve to 0.
  1284         </p>
  1285         <!-- End section "Shapes from SVG Syntax -->
  1287       <h3 id="shapes-from-image">Shapes from Image</h3>
  1289    <div class="issue-marker wrapper">
  1290       <div class="issue-marker" data-bug_id="15093" data-bug_status="NEW">
  1291           <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Issue-15093</a><br />
  1292           <div class="issue-details">
  1293               <p class="short-desc">Do we need to provide properties to repeat exclusion images as for the background-image property?</p>
  1294           </div>
  1295       </div>
  1296       <div class="issue-marker" data-bug_id="15090" data-bug_status="NEW">
  1297           <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Issue-15090</a>
  1298           <div class="issue-details">
  1299               <p class="short-desc">Use the contour keyword in shape-outside property?</p>
  1300           </div>  
  1301       </div>
  1303       <div class="issue-marker" data-bug_id="15092" data-bug_status="NEW">
  1304           <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Issue-15092</a>
  1305           <div class="issue-details">
  1306               <p class="short-desc">Specify what happens with animated images</p>
  1307           </div>
  1308       </div>
  1310       <div class="issue-marker" data-bug_id="16112" data-bug_status="NEW">
  1311       <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16112">Issue-16112</a>
  1312       <div class="issue-details">
  1313           <p class="short-desc">Address security concern with automatic shape extractions for images</p>
  1314       </div>  
  1315       </div>
  1316     </div>
  1318       <p>
  1319           Another way of defining shapes is by specifying a source image whose alpha channel
  1320           is used to compute the inside or outside shape. The shape is computed to be the
  1321           path that encloses the area where the opacity of the specified image is greater
  1322           than the 'shape-image-threshold' value. If the 'shape-image-threshold' is not specified,
  1323           the initial value to be considered is 0.5.
  1324       </p>
  1326       <p class="note">
  1327           Note, images can define cavities and inline flow content should wrap inside
  1328           them. In order to avoid that, another exclusion element can be overlaid.
  1329       </p>
  1331       <p>For animated raster image formats (such as <a href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF</a>), the first frame of the animation
  1332           sequence is used. For <a href="http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/">SVG</a> images 
  1333           ([[SVG11]]), the image is rendered without animations applied.</p>
  1335       <!-- End section "Shapes from image" -->
  1337       <h3 id="declaring-shapes">Declaring Shapes</h3>
  1338       <p>
  1339           Shapes are declared with the 'shape-outside' or 'shape-inside' properties. 
  1340           The 'shape-outside' property changes the geometry of an <span>exclusion element</span>'s
  1341           <span>exclusion area</span> or or a float element's <span>float area</span>. 
  1342           If the element is not an <span>exclusion element</span>
  1343           (see the 'wrap-flow' property) or a float, then the 'shape-outside' property has no effect.
  1344       </p>
  1345       <p>
  1346           The 'shape-inside' property defines an element's <span>content area</span> and 
  1347           the element's inline flow content wraps into that shape. The 'shape-inside' property
  1348           applies to all block-level elements.
  1349       </p>
  1351       <h4 id="shape-outside-property">The 'shape-outside' Property</h4>
  1353         <table class="propdef">
  1354             <tr>
  1355                 <th>Name:</th>
  1356                 <td><dfn title="'shape-outside'">shape-outside</dfn></td>
  1357             </tr>
  1358             <tr>
  1359                 <th>Value:</th>
  1360                 <td><var>auto</var> | <var>&lt;shape&gt;</var> | <var>&lt;uri&gt;</var></td>
  1361             </tr>
  1362             <tr>
  1363                 <th>Initial:</th>
  1364                 <td>auto</td>
  1365             </tr>
  1366             <tr>
  1367                 <th>Applies to:</th>
  1368                 <td>exclusion elements and floats</td>
  1369             </tr>
  1370             <tr>
  1371                 <th>Inherited:</th>
  1372                 <td>no</td>
  1373             </tr>
  1374             <tr>
  1375                 <th>Percentages:</th>
  1376                 <td>N/A</td>
  1377             </tr>
  1378             <tr>
  1379                 <th>Media:</th>
  1380                 <td>visual</td>
  1381             </tr>
  1382             <tr>
  1383                 <th>Computed&nbsp;value:</th>
  1384                 <td>computed lengths for &lt;shape&gt;, the absolute URI for &lt;uri&gt;, otherwise as specified</td>
  1385             </tr>
  1386         </table>
  1388       <p>The values of this property have the following meanings:</p>
  1389       <dl>
  1390           <dt><dfn title="'shape-outside'!!'auto'">auto</dfn></dt>
  1391           <dd>The shape is computed based on the border box of the element.</dd>
  1392       </dl>
  1393       <dl>
  1394           <dt><dfn title="'shape-outside'!!'&lt;shape&gt;'">&lt;shape&gt;</dfn></dt>
  1395           <dd>
  1396               The shape is computed based on the values of one of 'rectangle', 'circle', 'ellipse'
  1397               or 'polygon'.
  1398           </dd>
  1399       </dl>
  1400       <dl>
  1401           <dt><dfn title="'shape-outside'!!'&lt;uri&gt;'">&lt;uri&gt;</dfn></dt>
  1402           <dd>
  1403               If the &lt;uri&gt; references an SVG shape element, that element defines the shape.
  1404               Otherwise, if the &lt;uri&gt; references an image, the shape is extracted and computed 
  1405               based on the alpha channel of the specified image.
  1407               If the &lt;uri&gt; does not reference an SVG shape element or an image, the 
  1408               effect is as if the value 'auto' had been specified.
  1409           </dd>
  1410       </dl>
  1412       <div class='figure'>
  1413           <img alt="arbitrary shapes for exclusions. Illustrates how content flows around shapes" src="images/shapes-exclusions.png" width="70%"/>
  1414           <p class="caption">Arbitrary shapes for exclusions</p>
  1415       </div>
  1417       <div>
  1418           <p>The above figure shows how 
  1419             'shape-outside' shapes 
  1420             impact the <span>exclusion areas</span>. 
  1421             The red box represents an element's content box 
  1422             and 'A', 'B', 'C' and 'C' represent exclusions 
  1423             with a complex shape 
  1424             and their 'wrap-flow' property 
  1425             set to 'both', 'start', 'end' and 'clear', 
  1426             respectively.</p>
  1428           <p>As illustrated in the picture, 
  1429             when an exclusion allows wrapping 
  1430             on all sides, 
  1431             text can flow inside 'holes' 
  1432             in the exclusion 
  1433             (as for exclusion 'A'). 
  1434             Otherwise, the exclusion clears 
  1435             the area on the side(s) 
  1436             defined by 'wrap-flow', 
  1437             as illustrated 
  1438             for 'B', 'C' and 'D' above.</p>
  1439       </div>
  1440       <!-- End section "The shape-outside Property" -->
  1442       <h4 id="shape-inside-property">The 'shape-inside' Property</h4>
  1443       <p>
  1444           The 'shape-inside' modifies the shape of the inner inline flow content from rectangular
  1445           content box to an arbitrary geometry.
  1446       </p>
  1448       <table class="propdef">
  1449           <tr>
  1450               <th>Name:</th>
  1451               <td><dfn title="'shape-inside'">shape-inside</dfn></td>
  1452           </tr>
  1453           <tr>
  1454               <th>Value:</th>
  1455               <td><var>outside-shape</var> | <var>auto</var> | <var>&lt;shape&gt;</var> | <var>&lt;uri&gt;</var></td>
  1456           </tr>
  1457           <tr>
  1458               <th>Initial:</th>
  1459               <td>outside-shape</td>
  1460           </tr>
  1461           <tr>
  1462               <th>Applies to:</th>
  1463               <td>block-level elements</td>
  1464           </tr>
  1465           <tr>
  1466               <th>Inherited:</th>
  1467               <td>no</td>
  1468           </tr>
  1469           <tr>
  1470               <th>Percentages:</th>
  1471               <td>N/A</td>
  1472           </tr>
  1473           <tr>
  1474               <th>Media:</th>
  1475               <td>visual</td>
  1476           </tr>
  1477           <tr>
  1478               <th>Computed&nbsp;value:</th>
  1479               <td>computed lengths for &lt;shape&gt;, the absolute URI for &lt;uri&gt;, otherwise as specified</td>
  1480           </tr>
  1481       </table>
  1483 <div class="issue-marker wrapper">
  1484     <div class="issue-marker" data-bug_id="16448" data-bug_status="ASSIGNED">
  1485       <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16448">Issue-16448</a>
  1486       <div class="issue-details">
  1487           <p class="short-desc">Should we revisit the decision to not allow SVG path syntax in the shape-inside, shape-outside properties</p>
  1488       </div>  
  1489     </div>
  1491     <div class="issue-marker" data-bug_id="16460" data-bug_status="NEW">
  1492       <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460">Issue-16460</a>
  1493       <div class="issue-details">
  1494           <p class="short-desc">Specify overflow behavior for shape-inside</p>
  1495       </div>  
  1496     </div>
  1497 </div>
  1499     <p>The values of this property have the following meanings:</p>
  1500     <dl>
  1501         <dt><dfn title="'shape-inside'!!'outside-shape'">outside-shape</dfn></dt>
  1502         <dd>
  1503             The shape is computed based on the computed value of the 'shape-outside' property.
  1504         </dd>
  1505     </dl>
  1506     <dl>
  1507         <dt><dfn title="'shape-inside'!!'auto'">auto</dfn></dt>
  1508         <dd>
  1509             The shape is computed based on the content box of the element.
  1510         </dd>
  1511     </dl>
  1512     <dl>
  1513         <dt><dfn title="'shape-inside'!!'&lt;shape&gt;'">&lt;shape&gt;</dfn></dt>
  1514         <dd>
  1515             The shape is computed based on the values of one of 'rectangle', 'circle', 'ellipse'
  1516             or 'polygon'.
  1517         </dd>
  1518     </dl>
  1519     <dl>
  1520         <dt><dfn title="'shape-inside'!!'&lt;uri&gt;'">&lt;uri&gt;</dfn></dt>
  1521         <dd>
  1522             If the &lt;uri&gt; references an SVG shape element, that element defines the shape.
  1523               Otherwise, if the &lt;uri&gt; references an image, the shape is extracted and computed 
  1524               based on the alpha channel of the specified image.
  1526               If the &lt;uri&gt; does not reference an SVG shape element or an image, the 
  1527               effect is as if the value 'auto' had been specified.
  1528         </dd>
  1529     </dl>
  1531     <p>The 'shape-inside' property applies to floats.</p>
  1533     <p>The 'shape-inside' property may not apply on some elements such as elements with a 
  1534         computed 'display' value of 'table'.</p>
  1536     <div class='figure'>
  1537         <img alt="Content flowing with and without a shape-inside" src="images/shape-inside-content.png"/>
  1538         <p class="caption">Effect of shape-inside on inline content.</p>
  1539     </div>
  1541     <!-- End section "The shape-inside property" -->
  1542     <h4 id="shape-image-threshold-property">The 'shape-image-threshold' Property</h4>
  1545     <p>
  1546         The 'shape-image-threshold' defines the alpha channel threshold used to extract
  1547         the shape using an image. A value of 0.5 means that all the pixels that are more
  1548         than 50% transparent define the path of the exclusion shape. The 'shape-image-threshold'
  1549         applies to both 'shape-outside' and 'shape-inside'.
  1550     </p>
  1551     <p class="note">
  1552         The specified value of 'shape-image-threshold' is applied to both images used for
  1553         'shape-outside' and 'shape-inside'.
  1554     </p>
  1556     <table class="propdef">
  1557         <tr>
  1558             <th>Name:</th>
  1559             <td><dfn title="'shape-image-threshold'">shape-image-threshold</dfn></td>
  1560         </tr>
  1561         <tr>
  1562             <th>Value:</th>
  1563             <td><var>&lt;alphavalue&gt;</var></td>
  1564         </tr>
  1565         <tr>
  1566             <th>Initial:</th>
  1567             <td>0.5</td>
  1568         </tr>
  1569         <tr>
  1570             <th>Applies to:</th>
  1571             <td>block-level elements</td>
  1572         </tr>
  1573         <tr>
  1574             <th>Inherited:</th>
  1575             <td>no</td>
  1576         </tr>
  1577         <tr>
  1578             <th>Percentages:</th>
  1579             <td>alpha channel of the image specified by &lt;uri&gt;</td>
  1580         </tr>
  1581         <tr>
  1582             <th>Media:</th>
  1583             <td>visual</td>
  1584         </tr>
  1585         <tr>
  1586             <th>Computed&nbsp;value:</th>
  1587             <td>The same as the specified value after clipping the &lt;alphavalue&gt; to the range [0.0,1.0].</td>
  1588         </tr>
  1589     </table>
  1590     <p>The values of this property have the following meanings:</p>
  1591     <dl>
  1592         <dt><dfn title="'shape-image-threshold'!!'&lt;alphavalue&gt;'">&lt;alphavalue&gt;</dfn></dt>
  1593         <dd>
  1594             A &lt;number&gt; value used to set the threshold used for extracting a shape from
  1595             an image. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque)
  1596             will be clamped to this range.
  1597         </dd>
  1598     </dl>
  1599     <!-- End section "The shape-image-threshold property" -->
  1600     <!--
  1601     <h4 id="shape-shorthand-property">The 'shape' Shorthand Property</h4>
  1603     <table class="propdef">
  1604         <tr>
  1605             <th>Name:</th>
  1606             <td><dfn title="'shape'">shape</dfn></td>
  1607         </tr>
  1608         <tr>
  1609             <th>Value:</th>
  1610             <td><var>&lt;shape-outside&gt;</var> [ / <var>&lt;shape-inside&gt;</var> ] || <var>&lt;shape-image-threshold&gt;</var></td>
  1611         </tr>
  1612         <tr>
  1613             <th>Initial:</th>
  1614             <td>see individual properties</td>
  1615         </tr>
  1616         <tr>
  1617             <th>Applies to:</th>
  1618             <td>block-level elements</td>
  1619         </tr>
  1620         <tr>
  1621             <th>Inherited:</th>
  1622             <td>no</td>
  1623         </tr>
  1624         <tr>
  1625             <th>Percentages:</th>
  1626             <td>N/A</td>
  1627         </tr>
  1628         <tr>
  1629             <th>Media:</th>
  1630             <td>visual</td>
  1631         </tr>
  1632         <tr>
  1633             <th>Computed&nbsp;value:</th>
  1634             <td>see individual properties</td>
  1635         </tr>
  1636     </table>
  1637     <p>
  1638         The 'shape' property is a shorthand property for setting the individual shape properties
  1639         at the same place in a style sheet.
  1640     </p>
  1642     <div class="example">
  1643         <p>Style declaration using the 'shape' shorthand property.</p>
  1644 <pre><code class="html">
  1645 &lt;style type="text/css"&gt;
  1646     .shape {
  1647         shape: rectangle(50px, 50px, 200px, 100px) / url("shape_image.png")  0.7;
  1649 &lt;/style&gt
  1650 </code></pre>
  1651     </div>
  1652     <p class="issue">The example above must be finished.</p>
  1654     -->
  1655     <!-- End section "Shape Shorthand property -->
  1656     <!-- End section "Declaring Shapes" -->
  1658     <h4 id="shape-margin-property">The 'shape-margin' property</h4>
  1659     <p>
  1660         The 'shape-margin' property adds a margin to a shape-outside. 
  1661         This defines a new shape where every point 
  1662         is the specified distance from the shape-outside. 
  1663         This property takes on positive values only.
  1664     </p>
  1665     <table class="propdef">
  1666         <tr>
  1667             <th>Name:</th>
  1668             <td><dfn title="'shape-margin'">shape-margin</dfn></td>
  1669         </tr>
  1670         <tr>
  1671             <th>Value:</th>
  1672             <td><var>&lt;length&gt;</var></td>
  1673         </tr>
  1674         <tr>
  1675             <th>Initial:</th>
  1676             <td>0</td>
  1677         </tr>
  1678         <tr>
  1679             <th>Applies to:</th>
  1680             <td>exclusion elements and floats</td>
  1681         </tr>
  1682         <tr>
  1683             <th>Inherited:</th>
  1684             <td>no</td>
  1685         </tr>
  1686         <tr>
  1687             <th>Percentages:</th>
  1688             <td>N/A</td>
  1689         </tr>
  1690         <tr>
  1691             <th>Media:</th>
  1692             <td>visual</td>
  1693         </tr>
  1694         <tr>
  1695             <th>Computed&nbsp;value:</th>
  1696             <td>the absolute length</td>
  1697         </tr>
  1698     </table>
  1700     <div class="example">
  1701         <p>A 'shape-margin' creating an offset 
  1702             from a circlular shape-outside. 
  1703             The blue rectangles represent 
  1704             inline content affected 
  1705             by the shape created 
  1706             by the margin.</p>
  1707         <img src="images/wrap-margin.png" 
  1708             alt="Example of a shape-margin offset"/>
  1709     </div>
  1711     <!-- End secion "shape-margin property" -->
  1713     <h4 id="shape-padding-property">The 'shape-padding' Property</h4>
  1714     <p>
  1715         The 'shape-padding' property adds padding to a shape-inside. 
  1716         This defines a new shape where every point 
  1717         is the specified distance from the shape-inside. 
  1718         This property takes on positive values only.
  1719     </p>
  1720     <table class="propdef">
  1721         <tr>
  1722             <th>Name:</th>
  1723             <td><dfn title="'shape-padding'">shape-padding</dfn></td>
  1724         </tr>
  1725         <tr>
  1726             <th>Value:</th>
  1727             <td><var>&lt;length&gt;</var></td>
  1728         </tr>
  1729         <tr>
  1730             <th>Initial:</th>
  1731             <td>0</td>
  1732         </tr>
  1733         <tr>
  1734             <th>Applies to:</th>
  1735             <td>block-level elements</td>
  1736         </tr>
  1737         <tr>
  1738             <th>Inherited:</th>
  1739             <td>no</td>
  1740         </tr>
  1741         <tr>
  1742             <th>Percentages:</th>
  1743             <td>N/A</td>
  1744         </tr>
  1745         <tr>
  1746             <th>Media:</th>
  1747             <td>visual</td>
  1748         </tr>
  1749         <tr>
  1750             <th>Computed&nbsp;value:</th>
  1751             <td>the absolute length</td>
  1752         </tr>
  1753     </table>
  1755     <div class="example">
  1756         <p>A 'shape-padding' creating an offset 
  1757             from a circlular shape-inside. 
  1758             The light blue rectangles represent 
  1759             inline content affected 
  1760             by the shape created 
  1761             by the padding.</p>
  1762         <img src="images/shape-padding.png" 
  1763             alt="Example of a shape-padding offset"/>
  1764     </div>
  1765     <!-- End section "shape-padding property" -->
  1767     <div class="note">Note that the 'shape-padding' property only affects layout of content inside 
  1768         the element it applies to while the 'shape-margin' property only affects layout of content 
  1769         outside the element.</div>
  1771     <!-- End section "Shapes" -->
  1772     <h2 id="conformance">Conformance</h2>
  1773     <h3 id="conventions">Document Conventions</h3>
  1774     <p>
  1775         Conformance requirements are expressed with a combination of descriptive assertions
  1776         and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”,
  1777         “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
  1778         normative parts of this document are to be interpreted as described in RFC 2119.
  1779         However, for readability, these words do not appear in all uppercase letters in
  1780         this specification.
  1781     </p>
  1782     <p>
  1783         All of the text of this specification is normative except sections explicitly marked
  1784         as non-normative, examples, and notes. [[!RFC2119]]
  1785     </p>
  1786     <p>
  1787         Examples in this specification are introduced with the words “for example” or are
  1788         set apart from the normative text with <code>class="example"</code>, like this:
  1789     </p>
  1790     <div class="example">
  1791         <p>This is an example of an informative example.</p>
  1792     </div>
  1793     <p>
  1794         Informative notes begin with the word “Note” and are set apart from the normative
  1795         text with <code>class="note"</code>, like this:
  1796     </p>
  1797     <p class="note">Note, this is an informative note.</p>
  1798       <h3 id="conformance-classes">Conformance Classes</h3>
  1799       <p>Conformance to CSS Exclusions and Shapes is defined for three conformance classes:</p>
  1800       <dl>
  1801           <dt><dfn title="style sheet!!as conformance class">style sheet</dfn></dt>
  1802           <dd>
  1803               A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>.</dd>
  1804           <dt><dfn>renderer</dfn></dt>
  1805           <dd>
  1806               A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets
  1807               the semantics of a style sheet and renders documents that use them.</dd>
  1808           <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
  1809           <dd>
  1810               A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes
  1811               a style sheet.</dd>
  1812       </dl>
  1813       <p>
  1814           A style sheet is conformant to CSS Exclusions and Shapes if all of its declarations
  1815           that use properties defined in this module have values that are valid according
  1816           to the generic CSS grammar and the individual grammars of each property as given
  1817           in this module.
  1818       </p>
  1819       <p>
  1820           A renderer is conformant to CSS Exclusions and Shapes if, in addition to interpreting
  1821           the style sheet as defined by the appropriate specifications, it supports all the
  1822           features defined by CSS Exclusions and Shapes by parsing them correctly and rendering
  1823           the document accordingly. However, the inability of a UA to correctly render a document
  1824           due to limitations of the device does not make the UA non-conformant. (For example,
  1825           a UA is not required to render color on a monochrome monitor.)
  1826       </p>
  1827       <p>
  1828           An authoring tool is conformant to CSS Exclusions and Shapes if it writes style
  1829           sheets that are syntactically correct according to the generic CSS grammar and the
  1830           individual grammars of each feature in this module, and meet all other conformance
  1831           requirements of style sheets as described in this module.
  1832       </p>
  1833       <h3 id="partial">
  1834           Partial Implementations</h3>
  1835       <p>
  1836           So that authors can exploit the forward-compatible parsing rules to assign fallback
  1837           values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">
  1838               ignore as appropriate</a>) any at-rules, properties, property values, keywords,
  1839           and other syntactic constructs for which they have no usable level of support. In
  1840           particular, user agents <strong>must not</strong> selectively ignore unsupported
  1841           component values and honor supported values in a single multi-value property declaration:
  1842           if any value is considered invalid (as unsupported values must be), CSS requires
  1843           that the entire declaration be ignored.
  1844       </p>
  1845       <h3 id="experimental">
  1846           Experimental Implementations</h3>
  1847       <p>
  1848           To avoid clashes with future CSS features, the CSS2.1 specification reserves a <a
  1849               href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed syntax</a>
  1850           for proprietary and experimental extensions to CSS.</p>
  1851       <p>
  1852           Prior to a specification reaching the Candidate Recommendation stage in the W3C
  1853           process, all implementations of a CSS feature are considered experimental. The CSS
  1854           Working Group recommends that implementations use a vendor-prefixed syntax for such
  1855           features, including those in W3C Working Drafts. This avoids incompatibilities with
  1856           future changes in the draft.
  1857       </p>
  1858       <h3 id="testing">
  1859           Non-Experimental Implementations</h3>
  1860       <p>
  1861           Once a specification reaches the Candidate Recommendation stage, non-experimental
  1862           implementations are possible, and implementors should release an unprefixed implementation
  1863           of any CR-level feature they can demonstrate to be correctly implemented according
  1864           to spec.
  1865       </p>
  1866       <p>
  1867           To establish and maintain the interoperability of CSS across implementations, the
  1868           CSS Working Group requests that non-experimental CSS renderers submit an implementation
  1869           report (and, if necessary, the testcases used for that implementation report) to
  1870           the W3C before releasing an unprefixed implementation of any CSS features. Testcases
  1871           submitted to W3C are subject to review and correction by the CSS Working Group.
  1872       </p>
  1873       <p>
  1874           Further information on submitting testcases and implementation reports can be found
  1875           from on the CSS Working Group's website at <a href="http://www.w3.org/Style/CSS/Test/">
  1876               http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">
  1877                   public-css-testsuite@w3.org</a> mailing list.
  1878       </p>
  1879       <h3 id="cr-exit-criteria">
  1880           CR Exit Criteria</h3>
  1881       <p>
  1882           For this specification to be advanced to Proposed Recommendation, there must be
  1883           at least two independent, interoperable implementations of each feature. Each feature
  1884           may be implemented by a different set of products, there is no requirement that
  1885           all features be implemented by a single product. For the purposes of this criterion,
  1886           we define the following terms:
  1887       </p>
  1888       <dl>
  1889           <dt>independent </dt>
  1890           <dd>
  1891               each implementation must be developed by a different party and cannot share, reuse,
  1892               or derive from code used by another qualifying implementation. Sections of code
  1893               that have no bearing on the implementation of this specification are exempt from
  1894               this requirement.</dd>
  1895           <dt>interoperable</dt>
  1896           <dd>
  1897               passing the respective test case(s) in the official CSS test suite, or, if the implementation
  1898               is not a Web browser, an equivalent test. Every relevant test in the test suite
  1899               should have an equivalent test created if such a user agent (UA) is to be used to
  1900               claim interoperability. In addition if such a UA is to be used to claim interoperability,
  1901               then there must one or more additional UAs which can also pass those equivalent
  1902               tests in the same way for the purpose of interoperability. The equivalent tests
  1903               must be made publicly available for the purposes of peer review.
  1904           </dd>
  1905           <dt>implementation</dt>
  1906           <dd>
  1907               a user agent which:
  1908               <ol class="inline">
  1909                   <li>implements the specification.</li>
  1910                   <li>is available to the general public. The implementation may be a shipping product
  1911                       or other publicly available version (i.e., beta version, preview release, or “nightly
  1912                       build”). Non-shipping product releases must have implemented the feature(s) for
  1913                       a period of at least one month in order to demonstrate stability.</li>
  1914                   <li>is not experimental (i.e., a version specifically designed to pass the test suite
  1915                       and is not intended for normal usage going forward).</li>
  1916               </ol>
  1917           </dd>
  1918       </dl>
  1919       <p>
  1920           The specification will remain Candidate Recommendation for at least six months.
  1921       </p>
  1922       <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
  1923       <p>This specification is made possible by input from 
  1924           Andrei Bucur, 
  1925           Alexandru Chiculita,
  1926           Arron Eicholz, 
  1927           Daniel Glazman,  
  1928           Arno Gourdol, 
  1929           Chris Jones, 
  1930           Marcus Mielke, 
  1931           Alex Mogilevsky, 
  1932           Hans Muller, 
  1933           Mihnea Ovidenie, 
  1934           Virgil Palanciuc, 
  1935           Peter Sorotokin, 
  1936           Bear Travis, 
  1937           Eugene Veselov, 
  1938           Stephen Zilles 
  1939           and the CSS Working Group members.
  1940       </p>
  1941       <h2 class="no-num" id="references">References</h2>
  1942       <h3 class="no-num" id="normative-references">Normative references</h3>
  1943       <!--normative-->
  1944       <h3 class="no-num" id="other-references">Other references</h3>
  1945       <!--informative-->
  1946       <h2 class="no-num" id="index">Index</h2>
  1947       <!--index-->
  1948       <h2 class="no-num" id="property-index">Property index</h2>
  1949       <!-- properties -->
  1951           <!-- template markup for issues pulled from Bugzilla -->
  1952           <script type="text/template" id="issue-template">
  1953       <div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}">
  1954           <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
  1955           <div class="issue-details">
  1956               <p class="short-desc">{{short_desc}}</p>
  1957           </div>  
  1958       </div>
  1959           </script>   
  1961           <script type="text/javascript" src="../shared/scripts/BugzillaTrackerUtil.js"></script>
  1962           <script type="text/javascript" src="../shared/scripts/BugzillaTracker.js"></script>
  1963           <script type="text/javascript">
  1964               checkSpecificationIssues('CSS', 'Exclusions');        
  1965           </script>
  1967       <h2 class="no-num" id="change-log">Change Log</h2>
  1969       <h3>Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3>
  1970       <ul>
  1971           <li>Added wrap-flow:minimum</li>
  1972           <li>Clarified processing model</li>
  1973           <li>Changed wrap-margin and wrap-padding to shape-margin and shape-padding</li>
  1974           <li>Removed wrap shorthand</li>
  1975       </ul>
  1977       <h3>Since <a href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">December 13th 2011</a></h3>
  1978       <ul>
  1979           <li>Clarified processing model</li>
  1980           <li>Clarified interaction with floats</li>
  1981           <li>Clarified that an exclusion element establishes a new block formatting context</li>
  1982       </ul>
  1984   </body>
  1985 </html>
  1986 <!-- Keep this comment at the end of the file
  1987 Local variables:
  1988 mode: sgml
  1989 sgml-declaration:"~/SGML/HTML4.decl"
  1990 sgml-default-doctype-name:"html"
  1991 sgml-minimize-attributes:t
  1992 sgml-nofill-elements:("pre" "style" "br")
  1993 sgml-live-element-indicator:t
  1994 sgml-omittag:nil
  1995 sgml-shorttag:nil
  1996 sgml-namecase-general:t
  1997 sgml-general-insert-case:lower
  1998 sgml-always-quote-attributes:t
  1999 sgml-indent-step:nil
  2000 sgml-indent-data:t
  2001 sgml-parent-document:nil
  2002 sgml-exposed-tags:nil
  2003 sgml-local-catalogs:nil
  2004 sgml-local-ecat-files:nil
  2005 End:
  2006 -->

mercurial