index.html 69.1 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head profile="http://www.w3.org/2006/03/hcard"><meta
  content="text/html; charset=utf-8" http-equiv=Content-Type>

  <title>CSS Exclusions and Shapes Module Level 3</title>
  <link href=default.css rel=stylesheet type="text/css">

  <style type="text/css">

  /* Alternate stylesheet fonts are here because in some browsers (Opera 11.5) */
  /* The fonts are not applied if only loaded from the alternate stylesheet    */

  /* License font the following two fonts: fonts/Droid-Serif-fontfacekit/Google Android License.txt */
  @import url(fonts/Droid-Serif-fontfacekit/stylesheet.css);
  @import url(fonts/Droid-Sans-Mono-fontfacekit/stylesheet.css);

    .singleImgExample {
    	display: block;
    	margin: auto;
    }

    .example-table {
    	table-layout: fixed;
    	width: 100%;
    }

    .example-table tr td img {
    	width: 90%;
    }

    a.toggle {
        position: fixed;
        top: 0.5em;
        right: 0.5em;
    	font-size: smaller;
    	color: gray;
    	opacity: 0.2;
    }

    a.toggle:hover {
        opacity: 1;
        color: #46A4E9;
    }

    .issue-marker a {
         background: #c00;
         color: white;
         font-weight: bold;
         padding: 0.5em;
     }
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">
  <link href=alternate-spec-style.css id=st rel="alternate stylesheet"
  title="alternate spec styles" type="text/css">

 <body>
  <div class=head id=div-head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>

   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 13 December
    2011</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/</a>

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-exclusions/">http://www.w3.org/TR/css3-exclusions/</a>

    <dt>Previous version:

    <dd>None

    <dt>Editors:

    <dd class=vcard><span class=fn>Vincent Hardy</span>, <span
     class=org>Adobe Systems, Inc.</span>, <span
     class=email>vhardy@adobe.com</span>

    <dd class=vcard><span class=fn>Rossen Atanassov</span>, <span
     class=org>Microsoft Corporation</span>, <span
     class=email>ratan@microsoft.com</span>

    <dt>Issues List

    <dd><a
     href="http://wiki.csswg.org/ideas/css3-exclusions">http://wiki.csswg.org/ideas/css3-exclusions</a>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2011 <a
    href="http://www.w3.org/"><acronym
    title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym
    title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p> CSS exclusions define arbitrary areas around which inline content can
   flow. Unlike CSS floats, which they extend, CSS exclusions can be
   positioned with any CSS positioning schemes.

  <p> CSS Shapes control the geometric shapes used for wrapping inline flow
   content outside or inside an element.

  <p> Combining CSS Exclusions and CSS Shapes allows sophisticated layouts,
   for example having content flow into and/or around circles or other,
   arbitrarily complex shapes.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-exclusions&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-exclusions<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>This is the First Public Working Draft of the CSS Exclusions and Shapes
   Level 3 Module.

  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#intro"><span class=secno>1. </span>Introduction</a>

   <li><a href="#definitions"><span class=secno>2. </span>Definitions</a>

   <li><a href="#exclusions"><span class=secno>3. </span>Exclusions</a>
    <ul class=toc>
     <li><a href="#declaring-exclusions"><span class=secno>3.1.
      </span>Declaring exclusions</a>
      <ul class=toc>
       <li><a href="#wrap-flow-property"><span class=secno>3.1.1. </span>The
        &lsquo;<code class=property>wrap-flow</code>&rsquo; property</a>
      </ul>

     <li><a href="#scope-and-effect-of-exclusions"><span class=secno>3.2.
      </span>Scope and Effect of Exclusions</a>
      <ul class=toc>
       <li><a href="#wrap-margin-property"><span class=secno>3.2.1.
        </span>The &lsquo;<code class=property>wrap-margin</code>&rsquo;
        Property</a>

       <li><a href="#wrap-padding-property"><span class=secno>3.2.2.
        </span>The &lsquo;<code class=property>wrap-padding</code>&rsquo;
        Property</a>
      </ul>

     <li><a href="#propagation-of-exclusions"><span class=secno>3.3.
      </span>Propagation of Exclusions</a>
      <ul class=toc>
       <li><a href="#wrap-through-property"><span class=secno>3.3.1.
        </span>The &lsquo;<code class=property>wrap-through</code>&rsquo;
        Property</a>

       <li><a href="#wrap-shorthand-property"><span class=secno>3.3.2.
        </span>The &lsquo;<code class=property>wrap</code>&rsquo; Shorthand
        Property</a>
      </ul>

     <li><a href="#exclusions-order"><span class=secno>3.4. </span>Exclusions
      order</a>

     <li><a href="#exclusions-implementation-note"><span class=secno>3.5.
      </span>Exclusions implementation note</a>
    </ul>

   <li><a href="#shapes"><span class=secno>4. </span>Shapes</a>
    <ul class=toc>
     <li><a href="#shapes-from-svg-syntax"><span class=secno>4.1.
      </span>Shapes from SVG Syntax</a>
      <ul class=toc>
       <li><a href="#supported-svg-shapes"><span class=secno>4.1.1.
        </span>Supported SVG Shapes</a>

       <li><a href="#referencing-svg-shapes"><span class=secno>4.1.2.
        </span>Referencing SVG shapes</a>
      </ul>

     <li><a href="#shapes-from-image"><span class=secno>4.2. </span>Shapes
      from Image</a>

     <li><a href="#declaring-shapes"><span class=secno>4.3. </span>Declaring
      Shapes</a>
      <ul class=toc>
       <li><a href="#shape-outside-property"><span class=secno>4.3.1.
        </span>The &lsquo;<code class=property>shape-outside</code>&rsquo;
        Property</a>

       <li><a href="#shape-inside-property"><span class=secno>4.3.2.
        </span>The &lsquo;<code class=property>shape-inside</code>&rsquo;
        Property</a>

       <li><a href="#shape-image-threshold-property"><span class=secno>4.3.3.
        </span>The &lsquo;<code
        class=property>shape-image-threshold</code>&rsquo; Property</a>
      </ul>
    </ul>

   <li><a href="#conformance"><span class=secno>5. </span>Conformance</a>
    <ul class=toc>
     <li><a href="#conventions"><span class=secno>5.1. </span>Document
      Conventions</a>

     <li><a href="#conformance-classes"><span class=secno>5.2.
      </span>Conformance Classes</a>

     <li><a href="#partial"><span class=secno>5.3. </span> Partial
      Implementations</a>

     <li><a href="#experimental"><span class=secno>5.4. </span> Experimental
      Implementations</a>

     <li><a href="#testing"><span class=secno>5.5. </span> Non-Experimental
      Implementations</a>

     <li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit
      Criteria</a>
    </ul>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>

   <li class=no-num><a href="#property-index">Property index</a>
  </ul>
  <!--end-toc-->

  <h2 id=intro><span class=secno>1. </span>Introduction</h2>

  <p><em>This section is not normative.</em>

  <p> The exclusions section of this specification defines features that
   allow inline flow content to wrap around outside the <a
   href="#exclusion-area">exclusion area</a> of elements.

  <p> The shapes section of the specification defines properties to control
   the geometry of an element's <a href="#exclusion-area">exclusion area</a>
   as well as the geometry used for wrapping an element's inline flow
   content.

  <h2 id=definitions><span class=secno>2. </span>Definitions</h2>

  <p><dfn id=exclusion-element>Exclusion element</dfn>

  <p> An element that defines an <a href="#exclusion-area">exclusion area</a>
   for other elements. The &lsquo;<a href="#wrap-flow"><code
   class=property>wrap-flow</code></a>&rsquo; property is used to make an
   element an exclusion element. An exclusion element contributes its <a
   href="#exclusion-area">exclusion area</a> to its <a
   href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
   containing block's</a> <a href="#wrapping-context">wrapping context</a>

  <p><dfn id=exclusion-area>Exclusion area</dfn>

  <div class=issue-marker><a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a></div>

  <p> The area used for excluding inline flow content around an exclusion
   element. The exclusion area is equivalent to the <a
   href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> border box</a>
   for elements with &lsquo;<code class=property>float</code>&rsquo; property
   computed to &lsquo;<code class=property>none</code>&rsquo; and the <a
   href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>
   for elements with &lsquo;<code class=property>float</code>&rsquo; property
   computed to a value other than &lsquo;<code
   class=property>none</code>&rsquo;. This specification's &lsquo;<a
   href="#shape-outside"><code class=property>shape-outside</code></a>&rsquo;
   property can be used to define arbitrary, non-rectangular exclusion areas.


  <p><dfn id=wrapping-context>Wrapping context</dfn>

  <div class=issue-marker><a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a></div>

  <p> The wrapping context of an element is a collection of &lsquo;<code
   class=css>exclusion areas</code>&rsquo;. The wrapping context is used to
   wrap around inline flow content during layout. An element will wrap its
   inline flow content in the area that corresponds to the subtraction of its
   wrapping context from its own <a href="#content-area">content area</a>.

  <p> An element inherits its <a
   href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
   block's</a> wrapping context unless it specifically resets it using the
   &lsquo;<a href="#wrap-through"><code
   class=property>wrap-through</code></a>&rsquo; property.

  <p><dfn id=content-area>Content area</dfn>

  <p> The area used for layout of the inline flow content of an element. By
   default the area is equivalent to the <a
   href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content box</a>.
   This specification's &lsquo;<a href="#shape-inside"><code
   class=property>shape-inside</code></a>&rsquo; property can define
   arbitrary, non-rectangular content areas.

  <p><dfn id=outside-and-inside title=outside-inside>Outside and inside</dfn>


  <p> In this specification, &lsquo;<code
   class=property>outside</code>&rsquo; refers to DOM content that is not a
   descendant of an element while &lsquo;<code
   class=property>inside</code>&rsquo; refers to the element's descendants.

  <h2 id=exclusions><span class=secno>3. </span>Exclusions</h2>

  <p> Exclusion elements define exclusion areas that contribute to their
   containing block's wrapping context. As a consequence, exclusions impact
   the layout of their containing block's descendants.

  <p>

  <p> Elements layout their inline content in their <a
   href="#content-area">content area</a> and avoid the areas in their
   associated wrapping context. If the element is itself an exclusion, it
   does not wrap around its own exclusion shape and the impact of other
   exclusions on other exclusions is controlled by the &lsquo;<code
   class=property>z-index</code>&rsquo; property as explained in the <a
   href="#exclusions-order">exclusions order</a> section.

  <p> The shape properties can is used to change the shape of exclusions.

  <h3 id=declaring-exclusions><span class=secno>3.1. </span>Declaring
   exclusions</h3>

  <p> An element becomes an exclusion when its &lsquo;<a
   href="#wrap-flow"><code class=property>wrap-flow</code></a>&rsquo;
   property has a computed value other than &lsquo;<code
   class=property>auto</code>&rsquo;.

  <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The &lsquo;<a
   href="#wrap-flow"><code class=property>wrap-flow</code></a>&rsquo;
   property</h4>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=wrap-flow title="'wrap-flow'">wrap-flow</dfn>

    <tr>
     <th>Value:

     <td><var>auto</var> | <var>both</var> | <var>start</var> |
      <var>end</var> | <var>maximum</var> | <var>clear</var>

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>block-level elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>as specified, except for floats all values compute to &lsquo;<code
      class=property>auto</code>&rsquo;
  </table>

  <p>The values of this property have the following meanings:

  <dl>
   <dt><dfn id=auto title="'wrap-flow'!!'auto'">auto</dfn>

   <dd> For floats an exclusion is created, for all other elements an
    exclusion is not created.

   <dt><dfn id=both title="'wrap-flow'!!'both'">both</dfn>

   <dd> Inline flow content can flow on all sides of the exclusion.

   <dt><dfn id=start title="'wrap-flow'!!'start'">start</dfn>

   <dd> Inline flow content can wrap on the start edge of the exclusion area
    but must leave the area to end edge of the exclusion area empty.

   <dt><dfn id=end title="'wrap-flow'!!'end'">end</dfn>

   <dd> Inline flow content can wrap on the end side of the exclusion area
    but must leave the area to the start edge of the exclusion area empty.

   <dt><dfn id=maximum title="'wrap-flow'!!'maximum'">maximum</dfn>

   <dd> Inline flow content can wrap on the side of the exclusion with the
    largest available space for the given line, and must leave the other side
    of the exclusion empty.

   <dt><dfn id=clear title="'wrap-flow'!!'clear'">clear</dfn>

   <dd> Inline flow content can only wrap on top and bottom of the exclusion
    and must leave the areas to the start and end edges of the exclusion box
    empty.
  </dl>

  <p> Setting the &lsquo;<a href="#wrap-flow"><code
   class=property>wrap-flow</code></a>&rsquo; property to &lsquo;<code
   class=property>both</code>&rsquo;, &lsquo;<code
   class=property>start</code>&rsquo;, &lsquo;<code
   class=property>end</code>&rsquo;, &lsquo;<code
   class=property>maximum</code>&rsquo; or &lsquo;<code
   class=property>clear</code>&rsquo; on an element makes that element an
   <span>exclusion element. It's <span>exclusion shape</span> is contributed
   to its containing block's wrapping context, causing the containing block's
   descendants to wrap around its exclusion area. </span>

  <p> The initial value for this property is &lsquo;<code
   class=property>auto</code>&rsquo;.

  <p> When the property's computed value is &lsquo;<code
   class=property>auto</code>&rsquo;, the element does not become an <a
   href="#exclusion-element">exclusion element</a> unless its &lsquo;<code
   class=property>float</code>&rsquo; property computed value is not
   &lsquo;<code class=property>none</code>&rsquo;. In that case, the element
   contributes its &lsquo;<code class=css>border box</code>&rsquo; to its
   containing block's <a href="#wrapping-context">wrapping context</a> and
   content flows around it according to the &lsquo;<code
   class=property>clear</code>&rsquo; property.

  <p> The element will be considered as an exclusion for all inline flow
   content descendants of the exclusions' containing block.

  <div class=figure> <img
   alt="General illustration showing how exclusions combine"
   src="images/exclusions-illustration.png" width="70%">
   <p class=caption>Combining exclusions</p>
  </div>

  <div>
   <p>The above figure illustrates how exclusions combine. The red box
    represents an element's content box. The A, B, C and D darker gray boxes
    represent exclusions in the element's wrapping context. A, B, C and D
    have their respective &lsquo;<a href="#wrap-flow"><code
    class=property>wrap-flow</code></a>&rsquo; set to &lsquo;<code
    class=property>both</code>&rsquo;, &lsquo;<code
    class=property>start</code>&rsquo;, &lsquo;<code
    class=property>end</code>&rsquo; and &lsquo;<code
    class=property>clear</code>&rsquo; respectively. The lighter gray areas
    show the additional areas that are excluded for inline layout as a result
    of the &lsquo;<a href="#wrap-flow"><code
    class=property>wrap-flow</code></a>&rsquo; value. For example, the area
    to the right of &lsquo;<code class=property>B</code>&rsquo; cannot be
    used for inline layout because the &lsquo;<a href="#wrap-flow"><code
    class=property>wrap-flow</code></a>&rsquo; for &lsquo;<code
    class=property>B</code>&rsquo; is &lsquo;<code
    class=property>start</code>&rsquo;.</p>

   <p>The background &lsquo;<code class=property>blue</code>&rsquo; area
    shows what areas are available for inline content layout. All areas
    represented with a light or dark shade of gray are not available for
    inline content layout.</p>
  </div>

  <div class=issue-marker><a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a></div>

  <div class=issue-marker><a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a></div>

  <div class=example>
   <p> The &lsquo;<a href="#wrap-flow"><code
    class=property>wrap-flow</code></a>&rsquo; property values applied to an
    absolutely positioned element.</p>
   <code class=html></code>
   <pre>
&lt;style type="text/css"&gt;
    #exclusion {
    	position: absolute;
    	background: lightblue;
    	border: 3px solid blue;
    }
&lt;/style&gt;

&lt;div style=”position: relative; border: 1px solid black;”&gt;
    &lt;div id=”exclusion”&gt;Donec metus messa, mollis...&lt;/div&gt;
    Lorem ipsum dolor sit amet...
&lt;/div&gt;
</pre>

   <table class=example-table>
    <tbody>
     <tr>
      <td><code class=html>#exclusion{ wrap-flow: auto; }</code>

      <td><code class=html>#exclusion{ wrap-flow: both; }</code>

     <tr>
      <td><img alt="Example rendering for wrap-side: auto"
       src="images/exclusion_wrap_side_auto.png">

      <td><img alt="Example rendering for wrap-side: both"
       src="images/exclusion_wrap_side_both.png">

     <tr>
      <td><code class=html>#exclusion{ wrap-flow: start; }</code>

      <td><code class=html>#exclusion{ wrap-flow: end; }</code>

     <tr>
      <td><img alt="Example rendering for wrap-side: start"
       src="images/exclusion_wrap_side_left.png">

      <td><img alt="Example rendering for wrap-side: end"
       src="images/exclusion_wrap_side_right.png">

     <tr>
      <td><code class=html>#exclusion{ wrap-flow: maximum; }</code>

      <td><code class=html>#exclusion{ wrap-flow: maximum; }</code>

     <tr>
      <td><img alt="Example rendering for wrap-side: maximum"
       src="images/exclusion_wrap_side_maximum_L.png">

      <td><img alt="Example rendering for wrap-side: maximum"
       src="images/exclusion_wrap_side_maximum_R.png">

     <tr>
      <td><code class=html>#exclusion{ wrap-flow: clear; }</code>

      <td><code class=html>&nbsp;</code>

     <tr>
      <td><img alt="Example rendering for wrap-side: clear"
       src="images/exclusion_wrap_side_clear.png">

      <td>&nbsp;
   </table>
  </div>
  <!-- End section "wrap-flow Property" -->
  <!-- End section "Declaring Exclusions" -->

  <h3 id=scope-and-effect-of-exclusions><span class=secno>3.2. </span>Scope
   and Effect of Exclusions</h3>

  <p> An exclusion affects the inline flow content descended from the
   exclusion's containing blocks (defined in <a
   href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
   CSS 2.1 10.1</a>) and that of all descendant elements of the same
   containing block. All inline flow content inside the containing block of
   the exclusions is affected. To stop the effect of exclusions defined
   outside any element, the &lsquo;<a href="#wrap-through"><code
   class=property>wrap-through</code></a>&rsquo; property can be used (see
   definition of Propagation of Exclusions below).

  <h4 id=wrap-margin-property><span class=secno>3.2.1. </span>The &lsquo;<a
   href="#wrap-margin"><code class=property>wrap-margin</code></a>&rsquo;
   Property</h4>

  <p> The &lsquo;<a href="#wrap-margin"><code
   class=property>wrap-margin</code></a>&rsquo; property can be used to
   offset the inline flow content wrapping on the outside of exclusions.
   Offsets created by the &lsquo;<a href="#wrap-margin"><code
   class=property>wrap-margin</code></a>&rsquo; property are offset from the
   outside of the exclusion. This property takes on positive values only.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=wrap-margin title="'wrap-margin'">wrap-margin</dfn>

    <tr>
     <th>Value:

     <td><var>&lt;length&gt;</var>

    <tr>
     <th>Initial:

     <td>0

    <tr>
     <th>Applies to:

     <td>block-level elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>the absolute length
  </table>
  <!-- End secion "wrap-margin property" -->

  <h4 id=wrap-padding-property><span class=secno>3.2.2. </span>The &lsquo;<a
   href="#wrap-padding"><code class=property>wrap-padding</code></a>&rsquo;
   Property</h4>

  <p> The &lsquo;<a href="#wrap-padding"><code
   class=property>wrap-padding</code></a>&rsquo; property can be used to
   offset to the inline flow content wrapping on the inside of elements.
   Offsets created by the &lsquo;<a href="#wrap-padding"><code
   class=property>wrap-padding</code></a>&rsquo; property are offset from the
   <a href="#content-area">content area</a> of the element. This property
   takes on positive values only.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=wrap-padding title="'wrap-padding'">wrap-padding</dfn>

    <tr>
     <th>Value:

     <td><var>&lt;length&gt;</var>

    <tr>
     <th>Initial:

     <td>0

    <tr>
     <th>Applies to:

     <td>block-level elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>the absolute length
  </table>
  <!-- End section "wrap-padding property" -->

  <div class=note>Note that the &lsquo;<a href="#wrap-padding"><code
   class=property>wrap-padding</code></a>&rsquo; property affects layout of
   content inside the element it applies to while the &lsquo;<a
   href="#wrap-margin"><code class=property>wrap-margin</code></a>&rsquo;
   property affects layout of content outside the element.</div>
  <!-- End section "Scope and Effect of Exclusions" -->

  <h3 id=propagation-of-exclusions><span class=secno>3.3. </span>Propagation
   of Exclusions</h3>

  <p> By default, an element inherits its parent <a
   href="#wrapping-context">wrapping context</a>. In other words it is
   subject to the exclusions defined <a href="#outside-and-inside"
   title=outside-inside>outside the element. </a>

  <p>Setting the &lsquo;<a href="#wrap-through"><code
   class=property>wrap-through</code></a>&rsquo; property to &lsquo;<code
   class=property>none</code>&rsquo; prevents an element from inheriting its
   parent wrapping context. In other words, exclusions defined &lsquo;<code
   class=property>outside</code>&rsquo; the element, have not effect on the
   element's children layout.

  <div class=note> Exclusions defined by an element's descendants still
   contribute to their containing block's <a
   href="#wrapping-context">wrapping context</a>. If that containing block is
   a child of an element with &lsquo;<a href="#wrap-through"><code
   class=property>wrap-through</code></a>&rsquo; set to none, or the element
   itself, then exclusion still have an effect on the children of that
   containing block element.</div>

  <h4 id=wrap-through-property><span class=secno>3.3.1. </span>The &lsquo;<a
   href="#wrap-through"><code class=property>wrap-through</code></a>&rsquo;
   Property</h4>

  <div class=issue-marker><a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a></div>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=wrap-through title="'wrap-through'">wrap-through</dfn>

    <tr>
     <th>Value:

     <td><a href="#wrap0"><var>wrap</var></a> | <var>none</var>

    <tr>
     <th>Initial:

     <td>wrap

    <tr>
     <th>Applies to:

     <td>block-level elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>as specified
  </table>

  <p>The values of this property have the following meanings:

  <dl>
   <dt><dfn id=wrap title="'wrap-through'!!'wrap'">wrap</dfn>

   <dd> The element inherits its parent node's <a
    href="#wrapping-context">wrapping context</a>. Its descendant inline
    content wraps around exclusions defined <a href="#outside-and-inside"
    title=outside-inside>outside</a> the element.
  </dl>

  <dl>
   <dt><dfn id=none title="'wrap-through'!!'none'">none</dfn>

   <dd> The element does not inherit its parent node's <a
    href="#wrapping-context">wrapping context</a>. Its descendants are only
    subject to exclusion shapes defined <a href="#outside-and-inside"
    title=outside-inside>inside</a> the element.
  </dl>

  <div class=example>
   <p> Using the &lsquo;<a href="#wrap-through"><code
    class=property>wrap-through</code></a>&rsquo; property to control the
    effect of exclusions.</p>

   <pre><code class=html>
&lt;style type="text/css"&gt;
    .exclusion  {
    	wrap-flow: both;
    	position: absolute;
    	background-color: rgba(220, 230, 242, 0.5);
    }
&lt;/style&gt;

&lt;div style=”position: relative;”&gt;
    &lt;div class=”exclusion”&gt;&lt;/div&gt;
    &lt;div style=”wrap-through: wrap;”&gt; Lorem ipsum dolor sit amet...&lt;/div&gt;
    &lt;div style=”wrap-through: none;”&gt; Lorem ipsum dolor sit amet...&lt;/div&gt;
&lt;/div&gt;
</code></pre>
   <img alt="Example rendering of wrap-through: wrap | none"
   class=singleImgExample src="images/exclusion_wrap_through.png"
   style="max-width:40%"></div>
  <!-- End section "wrap-through property" -->

  <h4 id=wrap-shorthand-property><span class=secno>3.3.2. </span>The
   &lsquo;<a href="#wrap0"><code class=property>wrap</code></a>&rsquo;
   Shorthand Property</h4>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=wrap0 title="'wrap'">wrap</dfn>

    <tr>
     <th>Value:

     <td><var>&lt;wrap-flow&gt;</var> || <var>&lt;wrap-margin&gt;</var> [ /
      <var>&lt;wrap-padding&gt;</var>]

    <tr>
     <th>Initial:

     <td>see individual properties

    <tr>
     <th>Applies to:

     <td>block-level elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>see individual properties
  </table>

  <p> The &lsquo;<a href="#wrap0"><code class=property>wrap</code></a>&rsquo;
   property is a shorthand property for setting the exclusions properties at
   the same place in the style sheet.</p>
  <!-- End section "wrap shorthand property" -->
  <!-- End section "Propagation of Exclusions" -->

  <h3 id=exclusions-order><span class=secno>3.4. </span>Exclusions order</h3>

  <p> Exclusions follow the painting order (See <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Appendix E). Exclusions are
   applied in reverse to the document order in which they are defined. The
   last exclusion appears on top of all other exclusion, thus it affects the
   inline flow content of all other preceding exclusions or elements
   descendant of the same containing block. To change the ordering of
   exclusions with &lsquo;<code class=property>position</code>&rsquo;
   property computed to a value other than &lsquo;<code
   class=property>static</code>&rsquo;, &lsquo;<code
   class=property>z-index</code>&rsquo; can be used. Exclusions with
   &lsquo;<code class=property>position</code>&rsquo; property computed to
   &lsquo;<code class=property>static</code>&rsquo; are not affected by the
   &lsquo;<code class=property>z-index</code>&rsquo; property, thus follow
   the painting order.

  <div class=example>
   <p>Ordering of exclusions.</p>

   <pre><code class=html>
&lt;style type="text/css"&gt;
    .exclusion  {
    	wrap-flow: both;
    	position: absolute;
    	width: 50%;
    	height: 50%;
    }
&lt;/style&gt;

&lt;div class=”exclusion” style=”top: 0px; left: 0px;”&gt;
    Lorem ipsum dolor sit amet...
&lt;/div&gt;
&lt;div id="orderedExclusion" class=”exclusion” style=”top: 25%; left: 25%;”&gt;
    Lorem ipsum dolor sit amet...
&lt;/div&gt;
&lt;div class=”exclusion” style=”top: 50%; left: 50%;”&gt;
    Lorem ipsum dolor sit amet...
&lt;/div&gt;
</code></pre>

   <table class=example-table>
    <tbody>
     <tr>
      <td style="width:50%"><code class=html>#orderedExclusion{ z-index:
       auto; }</code>

      <td style="width:50%"><code class=html>#orderedExclusion{ z-index: 1;
       }</code>

     <tr>
      <td><img alt="Example rendering of default exclusion ordering."
       class=singleImgExample src="images/exclusion_ordering.png">

      <td><img alt="Example rendering of default exclusion ordering."
       class=singleImgExample src="images/exclusion_ordering_z_order.png">
   </table>
  </div>
  <!-- End section "Order of Exclusions" -->

  <h3 id=exclusions-implementation-note><span class=secno>3.5.
   </span>Exclusions implementation note</h3>

  <div class=issue-marker><a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Bug-15083</a></div>

  <p><em>This section is not normative.</em>

  <p> Exclusions can be specified on positioned elements and elements can be
   positioned from their <a
   href="http://www.w3.org/TR/CSS21/visudet.html#static-position">static
   position</a>. Since, the static position of such elements depends on the
   inline flow content affected by the exclusion itself; there is a circular
   dependency between the two layout tasks. To break this circular dependency
   a two-pass layout approach is recommended. The first layout pass computes
   the static positions of all auto-positioned exclusions by laying out all
   content besides exclusions. The second pass is layout of all elements
   including all exclusions. Exclusions that depend on their static position
   will use the position calculated during the first layout pass.

  <p class=note> Note, this may cause exclusions to overlap or be distant
   from their static position (compared to non-exclusions auto-positioned
   elements).

  <p> Similar dependency exists for exclusions whose size or position is
   specified in percentage and the containing block size is specified as
   &lsquo;<code class=property>auto</code>&rsquo;. In such cases the size or
   position of the exclusion is calculated based on the size of the
   containing block calculated in the first layout pass.

  <p> Exclusions can be positioned on all levels of nested elements. If
   layout is restarted on every level of nesting, the time to complete layout
   will be exponential. To avoid multiple layout passes, the restart of the
   second layout pass should be scoped to the top-most containing block of
   exclusions. Similarly, restarting layout for the entire document is not
   necessary unless there are exclusions whose containing block is the
   initial containing block.</p>
  <!-- End section "Processing Model of Exclusions" -->
  <!-- End section "Exclusions" -->

  <h2 id=shapes><span class=secno>4. </span>Shapes</h2>

  <div class=issue-marker> <a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Bug-15091</a><br>
  </div>

  <p> Shapes define arbitrary geometric contours around which or into which
   inline flow content flows. There are two different types of shapes –
   &lsquo;<code class=property>outside</code>&rsquo; and &lsquo;<code
   class=property>inside</code>&rsquo;. The outside shape defines the <a
   href="#exclusion-area">exclusion area</a> for an <a
   href="#exclusion-element">exclusion element</a>. The inside shape defines
   an element's <span>content shape</span> and the element's inline content
   will flow within that shape.

  <p><dfn id=flow-container>Flow Container</dfn>

  <p> A flow container is an element with a &lsquo;<code
   class=property>display</code>&rsquo; value that is computed as
   &lsquo;<code class=property>block</code>&rsquo;, &lsquo;<code
   class=property>table-cell</code>&rsquo; or &lsquo;<code
   class=property>inline-block</code>&rsquo;.

  <p class=note> Note, while the boundaries used for wrapping inline flow
   content outside and inside an element can be defined using shapes, the
   actual box model does not change. If the element has specified margins,
   borders or paddings they will be computed and rendered according to the
   [[CSS3-Box]] module.

  <div class=example>
   <p>CSS &lsquo;<code class=property>shape</code>&rsquo; and CSS box model
    relation.</p>

   <pre><code class=html>
&lt;style type="text/css"&gt;
    .exclusion  {
    	wrap-flow: both;
    	position: absolute;
    	shape-outside: circle(50%, 50%, 50%);
    	border: 1px solid red;
    }
&lt;/style&gt;

&lt;div style=”position: relative; border: 1px solid black;”&gt;
    &lt;div class=”exclusion”&gt;&lt;/div&gt;
    Lorem ipsum dolor sit amet...
&lt;/div&gt;
</code></pre>
   <img alt="Example rendering of circle shape and box model."
   class=singleImgExample src="images/shapes_CSS2.1_MBP.png"
   style="max-width:40%"></div>

  <h3 id=shapes-from-svg-syntax><span class=secno>4.1. </span>Shapes from SVG
   Syntax</h3>

  <p> Shapes can be specified using <a
   href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>.

  <h4 id=supported-svg-shapes><span class=secno>4.1.1. </span>Supported SVG
   Shapes</h4>

  <p> The following SVG shapes are supported by the CSS shapes module.

  <dl>
   <dt>rectangle(x, y, width, height, [[rx], ry])

   <dd>
    <ul>
     <li><strong>x, y, width and height</strong> - define the bounding box of
      the rectangle

     <li><strong>rx</strong> - For rounded rectangles, the x-axis radius of
      the ellipse used to round off the corners of the rectangle

     <li><strong>ry</strong> - For rounded rectangles, the y-axis radius of
      the ellipse used to round off the corners of the rectangle
    </ul>

   <dt>circle(cx, cy, r)

   <dd>
    <ul>
     <li><strong>cx</strong> - The x-axis coordinate of the center of the
      circle

     <li><strong>cy</strong> - The y-axis coordinate of the center of the
      circle

     <li><strong>r</strong> - The radius of the circle
    </ul>

   <dt>ellipse(cx, cy, rx, ry)

   <dd>
    <ul>
     <li><strong>cx</strong> - The x-axis coordinate of the center of the
      ellipse

     <li><strong>cy</strong> - The y-axis coordinate of the center of the
      ellipse

     <li><strong>rx</strong> - The x-axis radius of the ellipse

     <li><strong>ry</strong> - The y-axis radius of the ellipse
    </ul>

   <dt>polygon([fillRule], x1, y1, x2, y2, x3, y3, … xn, yn)

   <dd>
    <ul>
     <li><strong>fillRule</strong> - The filling rule used to determine the
      interior of the polygon. See fill-rule property in SVG for details.
      Possible values are nonzero or evenodd. Default value when omitted is
      nonzero.

     <li><strong>xi</strong> - The x-axis coordinate of the i-th vertex of
      the polygon

     <li><strong>yi</strong> - The y-axis coordinate of the i-th vertex of
      the polygon
    </ul>

    <p> If the polygon is not closed the user-agent will automatically add a
     new vertex at the end.</p>
    <br>
  </dl>

  <h4 id=referencing-svg-shapes><span class=secno>4.1.2. </span>Referencing
   SVG shapes</h4>

  <p>An SVG shape can be referenced using the <code>url()</code> syntax. The
   shape can be any of the <a href="http://www.w3.org/TR/SVG/shapes.html">SVG
   basic shapes</a> or a <a href="http://www.w3.org/TR/SVG/paths.html">path
   element</a>.

  <p>In all cases, percentages are resolved from the border box of the
   element.

  <div class=example> <code class=html></code>
   <pre>
&lt;style&gt;
.in-a-circle {
    shape-inside: url(#circle_shape);
}

.in-a-path {
    shape-inside: url(#path-shape);
}

&lt;/style&gt;

&lt;svg ...&gt;
&lt;circle id="circle_shape" cx="50%x" cy="50%" r="50%" /&gt;
&lt;path id="path-shape" d="..." /&gt;
&lt;/svg&gt;

&lt;div class="in-a-circle"&gt;...&lt;/div&gt;
&lt;div class="in-a-path"&gt;...&lt;/div&gt;
          </pre>
  </div>

  <p> When using the SVG syntax or referencing SVG elements to define shapes,
   all the lengths expressed in percentages are resolved from the border box
   of the element. The coordinate system for the shape has its origin on the
   top-left corder of the border box with the x-axis running to the right and
   the y-axis running downwards. If the SVG element uses unitless coordinate
   values, they are equivalent to using &lsquo;<code
   class=property>px</code>&rsquo; units. If the border box of the element is
   dependent on auto sizing (i.e., the element's &lsquo;<code
   class=property>width</code>&rsquo; or &lsquo;<code
   class=property>height</code>&rsquo; property is &lsquo;<code
   class=property>auto</code>&rsquo;), then the percentage values are
   computed agains &lsquo;<code class=css>0</code>&rsquo; and resolve to 0.</p>
  <!-- End section "Shapes from SVG Syntax -->

  <h3 id=shapes-from-image><span class=secno>4.2. </span>Shapes from Image</h3>

  <div class=issue-marker> <a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Bug-15093</a><br>
   <a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Bug-15090</a><br>
   <a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Bug-15092</a></div>

  <p> Another way of defining shapes is by specifying a source image whose
   alpha channel is used to compute the inside or outside shape. The shape is
   computed to be the path that encloses the area where the opacity of the
   specified image is greater than the &lsquo;<a
   href="#shape-image-threshold"><code
   class=property>shape-image-threshold</code></a>&rsquo; value. If the
   &lsquo;<a href="#shape-image-threshold"><code
   class=property>shape-image-threshold</code></a>&rsquo; is not specified,
   the initial value to be considered is 0.5.

  <p class=note> Note, images can define cavities and inline flow content
   should wrap inside them. In order to avoid that, another exclusion element
   can be overlaid.</p>
  <!-- End section "Shapes from image" -->

  <h3 id=declaring-shapes><span class=secno>4.3. </span>Declaring Shapes</h3>

  <p> Shapes are declared with the &lsquo;<a href="#shape-outside"><code
   class=property>shape-outside</code></a>&rsquo; or &lsquo;<a
   href="#shape-inside"><code class=property>shape-inside</code></a>&rsquo;
   properties. The &lsquo;<a href="#shape-outside"><code
   class=property>shape-outside</code></a>&rsquo; property changes the
   geometry of an <a href="#exclusion-element">exclusion
   element</a>&lsquo;<code class=css>s <span>exclusion are</span>. If the
   element is not an <a href="#exclusion-element">exclusion element</a> (see
   the </code>&rsquo;wrap-flow' property), then the &lsquo;<a
   href="#shape-outside"><code class=property>shape-outside</code></a>&rsquo;
   property has no effect.

  <p> The &lsquo;<a href="#shape-inside"><code
   class=property>shape-inside</code></a>&rsquo; property defines an
   element's <a href="#content-area">content area</a> and the element's
   inline flow content wraps into that shape.

  <h4 id=shape-outside-property><span class=secno>4.3.1. </span>The &lsquo;<a
   href="#shape-outside"><code class=property>shape-outside</code></a>&rsquo;
   Property</h4>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=shape-outside title="'shape-outside'">shape-outside</dfn>

    <tr>
     <th>Value:

     <td><var>auto</var> | <var>&lt;shape&gt;</var> | <var>&lt;uri&gt;</var>

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>block-level elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>computed lengths for &lt;shape&gt;, the absolute URI for
      &lt;uri&gt;, otherwise as specified
  </table>

  <p>The values of this property have the following meanings:

  <dl>
   <dt><dfn id=auto0 title="'shape-outside'!!'auto'">auto</dfn>

   <dd>The shape is computed based on the border box of the element.
  </dl>

  <dl>
   <dt><dfn id=ltshapegt
    title="'shape-outside'!!'&lt;shape&gt;'">&lt;shape&gt;</dfn>

   <dd> The shape is computed based on the values of one of &lsquo;<code
    class=property>rectangle</code>&rsquo;,&lsquo;<code class=css>
    circle</code>&rsquo;, &lsquo;<code class=property>ellipse</code>&rsquo;
    or &lsquo;<code class=property>polygon</code>&rsquo;.
  </dl>

  <dl>
   <dt><dfn id=lturigt
    title="'shape-outside'!!'&lt;uri&gt;'">&lt;uri&gt;</dfn>

   <dd> If the &lt;uri&gt; references an SVG shape element, that element
    defines the shape. Otherwise, if the &lt;uri&gt; references an image, the
    shape is extracted and computed based on the alpha channel of the
    specified image. If the &lt;uri&gt; does not reference an SVG shape
    element or an image, the effect is as if the value &lsquo;<code
    class=property>auto</code>&rsquo; had been specified.
  </dl>

  <div class=figure> <img
   alt="arbitrary shapes for excluions. Illustrates how content flows around shapes"
   src="images/shapes-exclusions.png" width="70%">
   <p class=caption>Arbitrary shapes for exclusions</p>
  </div>

  <div>
   <p>The above figure shows how &lsquo;<a href="#shape-outside"><code
    class=property>shape-outside</code></a>&rsquo; shapes impact the
    exclusion areas. The red box represents an element's content box and
    &lsquo;<code class=property>A</code>&rsquo;, &lsquo;<code
    class=property>B</code>&rsquo;, &lsquo;<code
    class=property>C</code>&rsquo; and &lsquo;<code
    class=property>C</code>&rsquo; represent exclusions with a complex shape
    and their &lsquo;<a href="#wrap-flow"><code
    class=property>wrap-flow</code></a>&rsquo; property set to &lsquo;<code
    class=property>both</code>&rsquo;, &lsquo;<code
    class=property>start</code>&rsquo;, &lsquo;<code
    class=property>end</code>&rsquo; and &lsquo;<code
    class=property>clear</code>&rsquo;, respectively.</p>

   <p>As illustrated in the picture, when an exclusion allows wrapping on all
    sides, text can flow inside &lsquo;<code
    class=property>holes</code>&rsquo; in the exclusion (as for exclusion
    &lsquo;<code class=property>A</code>&rsquo;). Otherwise, the exclusion
    clears the area on the side(s) defined by wrap flow, as illustrated for
    &lsquo;<code class=property>B</code>&rsquo;, &lsquo;<code
    class=property>C</code>&rsquo; and &lsquo;<code
    class=property>D</code>&rsquo; above.</p>
  </div>
  <!-- End section "The shape-outside Property" -->

  <h4 id=shape-inside-property><span class=secno>4.3.2. </span>The &lsquo;<a
   href="#shape-inside"><code class=property>shape-inside</code></a>&rsquo;
   Property</h4>

  <p> The &lsquo;<a href="#shape-inside"><code
   class=property>shape-inside</code></a>&rsquo; modifies the shape of the
   inner inline flow content from rectangular content box to an arbitrary
   geometry.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=shape-inside title="'shape-inside'">shape-inside</dfn>

    <tr>
     <th>Value:

     <td><var>outside-shape</var> | <var>auto</var> |
      <var>&lt;shape&gt;</var> | <var>&lt;uri&gt;</var>

    <tr>
     <th>Initial:

     <td>outside-shape

    <tr>
     <th>Applies to:

     <td>block-level elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>computed lengths for &lt;shape&gt;, the absolute URI for
      &lt;uri&gt;, otherwise as specified
  </table>

  <p>The values of this property have the following meanings:

  <dl>
   <dt><dfn id=outside-shape
    title="'shape-inside'!!'outside-shape'">outside-shape</dfn>

   <dd> The shape is computed based on the computed value of the &lsquo;<a
    href="#shape-outside"><code
    class=property>shape-outside</code></a>&rsquo; property.
  </dl>

  <dl>
   <dt><dfn id=auto1 title="'shape-inside'!!'auto'">auto</dfn>

   <dd> The shape is computed based on the content box of the element.
  </dl>

  <dl>
   <dt><dfn id=ltshapegt0
    title="'shape-inside'!!'&lt;shape&gt;'">&lt;shape&gt;</dfn>

   <dd> The shape is computed based on the values of one of &lsquo;<code
    class=property>rectangle</code>&rsquo;,&lsquo;<code class=css>
    circle</code>&rsquo;, &lsquo;<code class=property>ellipse</code>&rsquo;
    or &lsquo;<code class=property>polygon</code>&rsquo;.
  </dl>

  <dl>
   <dt><dfn id=lturigt0
    title="'shape-inside'!!'&lt;uri&gt;'">&lt;uri&gt;</dfn>

   <dd> If the &lt;uri&gt; references an SVG shape element, that element
    defines the shape. Otherwise, if the &lt;uri&gt; references an image, the
    shape is extracted and computed based on the alpha channel of the
    specified image. If the &lt;uri&gt; does not reference an SVG shape
    element or an image, the effect is as if the value &lsquo;<code
    class=property>auto</code>&rsquo; had been specified.
  </dl>
  <!-- End section "The shape-inside property" -->

  <h4 id=shape-image-threshold-property><span class=secno>4.3.3. </span>The
   &lsquo;<a href="#shape-image-threshold"><code
   class=property>shape-image-threshold</code></a>&rsquo; Property</h4>

  <p> The &lsquo;<a href="#shape-image-threshold"><code
   class=property>shape-image-threshold</code></a>&rsquo; defines the alpha
   channel threshold used to extract the shape using an image. A value of 0.5
   means that all the pixels that are more than 50% transparent define the
   path of the exclusion shape. The &lsquo;<a
   href="#shape-image-threshold"><code
   class=property>shape-image-threshold</code></a>&rsquo; applies to both
   &lsquo;<a href="#shape-outside"><code
   class=property>shape-outside</code></a>&rsquo; and &lsquo;<a
   href="#shape-inside"><code class=property>shape-inside</code></a>&rsquo;.

  <p class=note> The specified value of &lsquo;<a
   href="#shape-image-threshold"><code
   class=property>shape-image-threshold</code></a>&rsquo; is applied to both
   images used for &lsquo;<a href="#shape-outside"><code
   class=property>shape-outside</code></a>&rsquo; and &lsquo;<a
   href="#shape-inside"><code class=property>shape-inside</code></a>&rsquo;.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=shape-image-threshold
      title="'shape-image-threshold'">shape-image-threshold</dfn>

    <tr>
     <th>Value:

     <td><var>&lt;alphavalue&gt;</var>

    <tr>
     <th>Initial:

     <td>0.5

    <tr>
     <th>Applies to:

     <td>block-level elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Percentages:

     <td>alpha channel of the image specified by &lt;uri&gt;

    <tr>
     <th>Media:

     <td>visual

    <tr>
     <th>Computed&nbsp;value:

     <td>The same as the specified value after clipping the
      &lt;alphavalue&gt; to the range [0.0,1.0].
  </table>

  <p>The values of this property have the following meanings:

  <dl>
   <dt><dfn id=ltalphavaluegt
    title="'shape-image-threshold'!!'&lt;alphavalue&gt;'">&lt;alphavalue&gt;</dfn>

   <dd> A &lt;number&gt; value used to set the threshold used for extracting
    a shape from an image. Any values outside the range 0.0 (fully
    transparent) to 1.0 (fully opaque) will be clamped to this range.
  </dl>
  <!-- End section "The shape-image-threshold property" -->
  <!--
    <h4 id="shape-shorthand-property">The 'shape' Shorthand Property</h4>

    <table class="propdef">
        <tr>
            <th>Name:</th>
            <td><dfn title="'shape'">shape</dfn></td>
        </tr>
        <tr>
            <th>Value:</th>
            <td><var>&lt;shape-outside&gt;</var> [ / <var>&lt;shape-inside&gt;</var> ] || <var>&lt;shape-image-threshold&gt;</var></td>
        </tr>
        <tr>
            <th>Initial:</th>
            <td>see individual properties</td>
        </tr>
        <tr>
            <th>Applies to:</th>
            <td>block-level elements</td>
        </tr>
        <tr>
            <th>Inherited:</th>
            <td>no</td>
        </tr>
        <tr>
            <th>Percentages:</th>
            <td>N/A</td>
        </tr>
        <tr>
            <th>Media:</th>
            <td>visual</td>
        </tr>
        <tr>
            <th>Computed&nbsp;value:</th>
            <td>see individual properties</td>
        </tr>
    </table>
    <p>
        The 'shape' property is a shorthand property for setting the individual shape properties
        at the same place in a style sheet.
    </p>

    <div class="example">
        <p>Style declaration using the 'shape' shorthand property.</p>
<pre><code class="html">
&lt;style type="text/css"&gt;
    .shape {
        shape: rectangle(50px, 50px, 200px, 100px) / url("shape_image.png")  0.7;
    }
&lt;/style&gt
</code></pre>
    </div>
    <p class="issue">The example above must be finished.</p>

    -->
  <!-- End section "Shape Shorthand property -->
  <!-- End section "Declaring Shapes" -->
  <!-- End section "Shapes" -->

  <h2 id=conformance><span class=secno>5. </span>Conformance</h2>

  <h3 id=conventions><span class=secno>5.1. </span>Document Conventions</h3>

  <p> Conformance requirements are expressed with a combination of
   descriptive assertions and RFC 2119 terminology. The key words “MUST”,
   “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”,
   “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and
   “OPTIONAL” in the normative parts of this document are to be
   interpreted as described in RFC 2119. However, for readability, these
   words do not appear in all uppercase letters in this specification.

  <p> All of the text of this specification is normative except sections
   explicitly marked as non-normative, examples, and notes. <a
   href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>

  <p> Examples in this specification are introduced with the words “for
   example” or are set apart from the normative text with
   <code>class="example"</code>, like this:

  <div class=example>
   <p>This is an example of an informative example.</p>
  </div>

  <p> Informative notes begin with the word “Note” and are set apart from
   the normative text with <code>class="note"</code>, like this:

  <p class=note>Note, this is an informative note.

  <h3 id=conformance-classes><span class=secno>5.2. </span>Conformance
   Classes</h3>

  <p>Conformance to CSS Exclusions and Shapes is defined for three
   conformance classes:

  <dl>
   <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
    sheet</dfn>

   <dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
    style sheet</a>.

   <dt><dfn id=renderer>renderer</dfn>

   <dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
    that interprets the semantics of a style sheet and renders documents that
    use them.

   <dt><dfn id=authoring-tool>authoring tool</dfn>

   <dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
    that writes a style sheet.
  </dl>

  <p> A style sheet is conformant to CSS Exclusions and Shapes if all of its
   declarations that use properties defined in this module have values that
   are valid according to the generic CSS grammar and the individual grammars
   of each property as given in this module.

  <p> A renderer is conformant to CSS Exclusions and Shapes if, in addition
   to interpreting the style sheet as defined by the appropriate
   specifications, it supports all the features defined by CSS Exclusions and
   Shapes by parsing them correctly and rendering the document accordingly.
   However, the inability of a UA to correctly render a document due to
   limitations of the device does not make the UA non-conformant. (For
   example, a UA is not required to render color on a monochrome monitor.)

  <p> An authoring tool is conformant to CSS Exclusions and Shapes if it
   writes style sheets that are syntactically correct according to the
   generic CSS grammar and the individual grammars of each feature in this
   module, and meet all other conformance requirements of style sheets as
   described in this module.

  <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>

  <p> So that authors can exploit the forward-compatible parsing rules to
   assign fallback values, CSS renderers <strong>must</strong> treat as
   invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">
   ignore as appropriate</a>) any at-rules, properties, property values,
   keywords, and other syntactic constructs for which they have no usable
   level of support. In particular, user agents <strong>must not</strong>
   selectively ignore unsupported component values and honor supported values
   in a single multi-value property declaration: if any value is considered
   invalid (as unsupported values must be), CSS requires that the entire
   declaration be ignored.

  <h3 id=experimental><span class=secno>5.4. </span> Experimental
   Implementations</h3>

  <p> To avoid clashes with future CSS features, the CSS2.1 specification
   reserves a <a
   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   syntax</a> for proprietary and experimental extensions to CSS.

  <p> Prior to a specification reaching the Candidate Recommendation stage in
   the W3C process, all implementations of a CSS feature are considered
   experimental. The CSS Working Group recommends that implementations use a
   vendor-prefixed syntax for such features, including those in W3C Working
   Drafts. This avoids incompatibilities with future changes in the draft.

  <h3 id=testing><span class=secno>5.5. </span> Non-Experimental
   Implementations</h3>

  <p> Once a specification reaches the Candidate Recommendation stage,
   non-experimental implementations are possible, and implementors should
   release an unprefixed implementation of any CR-level feature they can
   demonstrate to be correctly implemented according to spec.

  <p> To establish and maintain the interoperability of CSS across
   implementations, the CSS Working Group requests that non-experimental CSS
   renderers submit an implementation report (and, if necessary, the
   testcases used for that implementation report) to the W3C before releasing
   an unprefixed implementation of any CSS features. Testcases submitted to
   W3C are subject to review and correction by the CSS Working Group.

  <p> Further information on submitting testcases and implementation reports
   can be found from on the CSS Working Group's website at <a
   href="http://www.w3.org/Style/CSS/Test/">
   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">
   public-css-testsuite@w3.org</a> mailing list.

  <h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3>

  <p> For this specification to be advanced to Proposed Recommendation, there
   must be at least two independent, interoperable implementations of each
   feature. Each feature may be implemented by a different set of products,
   there is no requirement that all features be implemented by a single
   product. For the purposes of this criterion, we define the following
   terms:

  <dl>
   <dt>independent

   <dd> each implementation must be developed by a different party and cannot
    share, reuse, or derive from code used by another qualifying
    implementation. Sections of code that have no bearing on the
    implementation of this specification are exempt from this requirement.

   <dt>interoperable

   <dd> passing the respective test case(s) in the official CSS test suite,
    or, if the implementation is not a Web browser, an equivalent test. Every
    relevant test in the test suite should have an equivalent test created if
    such a user agent (UA) is to be used to claim interoperability. In
    addition if such a UA is to be used to claim interoperability, then there
    must one or more additional UAs which can also pass those equivalent
    tests in the same way for the purpose of interoperability. The equivalent
    tests must be made publicly available for the purposes of peer review.

   <dt>implementation

   <dd> a user agent which:
    <ol class=inline>
     <li>implements the specification.

     <li>is available to the general public. The implementation may be a
      shipping product or other publicly available version (i.e., beta
      version, preview release, or “nightly build”). Non-shipping product
      releases must have implemented the feature(s) for a period of at least
      one month in order to demonstrate stability.

     <li>is not experimental (i.e., a version specifically designed to pass
      the test suite and is not intended for normal usage going forward).
    </ol>
  </dl>

  <p> The specification will remain Candidate Recommendation for at least six
   months.

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p> This specification is made possible by input from Stephen Zilles,
   Alexandru Chiculita, Andrei Bucur, Mihnea Ovidenie, Peter Sorotokin,
   Virgil Palanciuc, Alan Stearns, Arno Gourdol, Eugene Veselov, Arron
   Eicholz, Alex Mogilevsky, Chris Jones, Marcus Mielke, and the CSS Working
   Group members.

  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
    </dd>
   <!---->

   <dt id=RFC2119>[RFC2119]

   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
    words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
    RFC 2119. URL: <a
    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>authoring tool, <a href="#authoring-tool"
    title="authoring tool"><strong>5.2.</strong></a>

   <li>Content area, <a href="#content-area"
    title="Content area"><strong>2.</strong></a>

   <li>Exclusion area, <a href="#exclusion-area"
    title="Exclusion area"><strong>2.</strong></a>

   <li>Exclusion element, <a href="#exclusion-element"
    title="Exclusion element"><strong>2.</strong></a>

   <li>Flow Container, <a href="#flow-container"
    title="Flow Container"><strong>4.</strong></a>

   <li>outside-inside, <a href="#outside-and-inside"
    title=outside-inside><strong>2.</strong></a>

   <li>renderer, <a href="#renderer" title=renderer><strong>5.2.</strong></a>


   <li>&lsquo;<a href="#shape-image-threshold"><code
    class=property>shape-image-threshold</code></a>&rsquo;, <a
    href="#shape-image-threshold"
    title="'shape-image-threshold'"><strong>4.3.3.</strong></a>
    <ul>
     <li>&lsquo;<code class=css>&lt;alphavalue&gt;</code>&rsquo;, <a
      href="#ltalphavaluegt"
      title="'shape-image-threshold', '&lt;alphavalue&gt;'"><strong>4.3.3.</strong></a>

    </ul>

   <li>&lsquo;<a href="#shape-inside"><code
    class=property>shape-inside</code></a>&rsquo;, <a href="#shape-inside"
    title="'shape-inside'"><strong>4.3.2.</strong></a>
    <ul>
     <li>&lsquo;<code class=property>auto</code>&rsquo;, <a href="#auto1"
      title="'shape-inside', 'auto'"><strong>4.3.2.</strong></a>

     <li>&lsquo;<code class=property>outside-shape</code>&rsquo;, <a
      href="#outside-shape"
      title="'shape-inside', 'outside-shape'"><strong>4.3.2.</strong></a>

     <li>&lsquo;<code class=css>&lt;shape&gt;</code>&rsquo;, <a
      href="#ltshapegt0"
      title="'shape-inside', '&lt;shape&gt;'"><strong>4.3.2.</strong></a>

     <li>&lsquo;<code class=css>&lt;uri&gt;</code>&rsquo;, <a
      href="#lturigt0"
      title="'shape-inside', '&lt;uri&gt;'"><strong>4.3.2.</strong></a>
    </ul>

   <li>&lsquo;<a href="#shape-outside"><code
    class=property>shape-outside</code></a>&rsquo;, <a href="#shape-outside"
    title="'shape-outside'"><strong>4.3.1.</strong></a>
    <ul>
     <li>&lsquo;<code class=property>auto</code>&rsquo;, <a href="#auto0"
      title="'shape-outside', 'auto'"><strong>4.3.1.</strong></a>

     <li>&lsquo;<code class=css>&lt;shape&gt;</code>&rsquo;, <a
      href="#ltshapegt"
      title="'shape-outside', '&lt;shape&gt;'"><strong>4.3.1.</strong></a>

     <li>&lsquo;<code class=css>&lt;uri&gt;</code>&rsquo;, <a href="#lturigt"
      title="'shape-outside', '&lt;uri&gt;'"><strong>4.3.1.</strong></a>
    </ul>

   <li>style sheet
    <ul>
     <li>as conformance class, <a href="#style-sheet"
      title="style sheet, as conformance class"><strong>5.2.</strong></a>
    </ul>

   <li>&lsquo;<a href="#wrap0"><code class=property>wrap</code></a>&rsquo;,
    <a href="#wrap0" title="'wrap'"><strong>3.3.2.</strong></a>

   <li>&lsquo;<a href="#wrap-flow"><code
    class=property>wrap-flow</code></a>&rsquo;, <a href="#wrap-flow"
    title="'wrap-flow'"><strong>3.1.1.</strong></a>
    <ul>
     <li>&lsquo;<code class=property>auto</code>&rsquo;, <a href="#auto"
      title="'wrap-flow', 'auto'"><strong>3.1.1.</strong></a>

     <li>&lsquo;<code class=property>both</code>&rsquo;, <a href="#both"
      title="'wrap-flow', 'both'"><strong>3.1.1.</strong></a>

     <li>&lsquo;<code class=property>clear</code>&rsquo;, <a href="#clear"
      title="'wrap-flow', 'clear'"><strong>3.1.1.</strong></a>

     <li>&lsquo;<code class=property>end</code>&rsquo;, <a href="#end"
      title="'wrap-flow', 'end'"><strong>3.1.1.</strong></a>

     <li>&lsquo;<code class=property>maximum</code>&rsquo;, <a
      href="#maximum"
      title="'wrap-flow', 'maximum'"><strong>3.1.1.</strong></a>

     <li>&lsquo;<code class=property>start</code>&rsquo;, <a href="#start"
      title="'wrap-flow', 'start'"><strong>3.1.1.</strong></a>
    </ul>

   <li>&lsquo;<a href="#wrap-margin"><code
    class=property>wrap-margin</code></a>&rsquo;, <a href="#wrap-margin"
    title="'wrap-margin'"><strong>3.2.1.</strong></a>

   <li>&lsquo;<a href="#wrap-padding"><code
    class=property>wrap-padding</code></a>&rsquo;, <a href="#wrap-padding"
    title="'wrap-padding'"><strong>3.2.2.</strong></a>

   <li>Wrapping context, <a href="#wrapping-context"
    title="Wrapping context"><strong>2.</strong></a>

   <li>&lsquo;<a href="#wrap-through"><code
    class=property>wrap-through</code></a>&rsquo;, <a href="#wrap-through"
    title="'wrap-through'"><strong>3.3.1.</strong></a>
    <ul>
     <li>&lsquo;<code class=property>none</code>&rsquo;, <a href="#none"
      title="'wrap-through', 'none'"><strong>3.3.1.</strong></a>

     <li>&lsquo;<a href="#wrap0"><code class=property>wrap</code></a>&rsquo;,
      <a href="#wrap"
      title="'wrap-through', 'wrap'"><strong>3.3.1.</strong></a>
    </ul>
  </ul>
  <!--end-index-->

  <h2 class=no-num id=property-index>Property index</h2>
  <!--begin-properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies&nbsp;to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr>
     <th><a class=property
      href="#shape-image-threshold">shape-image-threshold</a>

     <td>&lt;alphavalue&gt;

     <td>0.5

     <td>block-level elements

     <td>no

     <td>alpha channel of the image specified by &lt;uri&gt;

     <td>visual

    <tr>
     <th><a class=property href="#shape-inside">shape-inside</a>

     <td>outside-shape | auto | &lt;shape&gt; | &lt;uri&gt;

     <td>outside-shape

     <td>block-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#shape-outside">shape-outside</a>

     <td>auto | &lt;shape&gt; | &lt;uri&gt;

     <td>auto

     <td>block-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#wrap0">wrap</a>

     <td>&lt;wrap-flow&gt; || &lt;wrap-margin&gt; [ / &lt;wrap-padding&gt;]

     <td>see individual properties

     <td>block-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#wrap-flow">wrap-flow</a>

     <td>auto | both | start | end | maximum | clear

     <td>auto

     <td>block-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#wrap-margin">wrap-margin</a>

     <td>&lt;length&gt;

     <td>0

     <td>block-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#wrap-padding">wrap-padding</a>

     <td>&lt;length&gt;

     <td>0

     <td>block-level elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#wrap-through">wrap-through</a>

     <td>wrap | none

     <td>wrap

     <td>block-level elements

     <td>no

     <td>N/A

     <td>visual
  </table>
  <!--end-properties-->
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->