css3-exclusions/Overview.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"
     2 "http://www.w3.org/TR/html4/strict.dtd">
     4 <html lang=en>
     5  <head
     6   profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard">
     7   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
     8   <title>CSS Exclusions and Shapes Module Level 3</title>
    10   <link href="http://purl.org/dc/terms/" rel=schema.DC>
    11   <meta content="CSS Exclusions and Shapes Module Level 3" name=DC.title>
    12   <meta content=text name=DC.type>
    13   <meta content=2012-09-13 name=DC.issued>
    14   <meta content="http://dev.w3.org/csswg/css3-exclusions/" name=DC.creator>
    15   <meta content=W3C name=DC.publisher>
    16   <meta content="http://www.w3.org/TR/2012/ED-css3-exclusions-20120913/"
    17    name=DC.identifier>
    18   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    19    rel=DC.rights>
    20   <link href="../shared/style/default.css" rel=stylesheet type="text/css">
    21   <style type="text/css">
    22     .singleImgExample {
    23     	display: block;
    24     	margin: auto;
    25     }
    27     .example-table {
    28     	table-layout: fixed; 
    29     	width: 100%; 
    30     }
    32     .example-table tr td img {
    33     	width: 90%;
    34     }
    35   </style>
    36   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    37    type="text/css">
    38   <link href="../shared/style/issues.css" rel=stylesheet type="text/css">
    39   <link href="../shared/style/alternate-spec-style.css" id=st rel=stylesheet
    40    title="alternate spec style" type="text/css">
    42  <body>
    43   <div class=head id=div-head>
    44    <p><a href="http://www.w3.org/"><img alt=W3C height=53 id=mobile-logo
    45     src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width=90></a>
    46     <!--begin-logo-->
    48    <p><a href="http://www.w3.org/"><img alt=W3C height=48
    49     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
    51    <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
    53    <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 September
    54     2012</h2>
    56    <dl>
    57     <dt>This version:
    59     <dd><a
    60      href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
    61     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120913/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120913/</a></dd>-->
    63     <dt>Latest version:
    65     <dd><a
    66      href="http://www.w3.org/TR/css3-exclusions/">http://www.w3.org/TR/css3-exclusions/</a>
    68     <dt>Editor's Draft:
    70     <dd><a
    71      href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a>
    73     <dt>Previous version:
    75     <dd>None
    77     <dt>Editors:
    79     <dd class=vcard><span class=fn>Vincent Hardy</span>, <span
    80      class=org>Adobe Systems, Inc.</span>, <span
    81      class=email>vhardy@adobe.com</span>
    83     <dd class=vcard><span class=fn>Rossen Atanassov</span>, <span
    84      class=org>Microsoft Corporation</span>, <span
    85      class=email>ratan@microsoft.com</span>
    87     <dd class=vcard><span class=fn>Alan Stearns</span>, <span class=org>Adobe
    88      Systems, Inc.</span>, <span class=email>stearns@adobe.com</span>
    90     <dt>Issues List:
    92     <dd><a
    93      href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Exclusions&amp;resolution=---&amp;cmdtype=doit">in
    94      Bugzilla</a>
    96     <dt>Discussion:
    98     <dd><a
    99      href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
   100      with subject line "<code>[css3-exclusions] message topic</code>"
   101    </dl>
   102    <!--begin-copyright-->
   103    <p class=copyright><a
   104     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   105     rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
   106     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
   107     href="http://www.csail.mit.edu/"><abbr
   108     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
   109     href="http://www.ercim.eu/"><abbr
   110     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
   111     <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
   112     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
   113     <a
   114     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
   115     and <a
   116     href="http://www.w3.org/Consortium/Legal/copyright-documents">document
   117     use</a> rules apply.</p>
   118    <!--end-copyright-->
   119    <hr title="Separator for header">
   120   </div>
   122   <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   124   <p> CSS Exclusions define arbitrary areas around which <a
   125    href="http://www.w3.org/TR/CSS2/visuren.html#inline-boxes">inline
   126    content</a> (<a href="#CSS21"
   127    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) content can flow. CSS
   128    Exclusions can be defined on any CSS block-level elements. CSS Exclusions
   129    extend the notion of content wrapping previously limited to floats.
   131   <p>CSS Shapes control the geometric shapes used for wrapping inline flow
   132    content outside or inside an element. CSS Shapes can be applied to any
   133    element. A circle shape on a float will cause inline content to wrap
   134    around the circle shape instead of the float's bounding box.
   136   <p>Combining CSS Exclusions and CSS Shapes allows sophisticated layouts,
   137    allowing interactions between shapes in complex positioning schemes.
   139   <h2 class="no-num no-toc" id=status>Status of this document</h2>
   140   <!--begin-status-->
   142   <p>This is a public copy of the editors' draft. It is provided for
   143    discussion only and may change at any moment. Its publication here does
   144    not imply endorsement of its contents by W3C. Don't cite this document
   145    other than as work in progress.
   147   <p>The (<a
   148    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   149    mailing list <a
   150    href="mailto:www-style@w3.org?Subject=%5Bcss3-exclusions%5D%20PUT%20SUBJECT%20HERE">
   151    www-style@w3.org</a> (see <a
   152    href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   153    discussion of this specification. When sending e-mail, please put the text
   154    “css3-exclusions” in the subject, preferably like this:
   155    “[<!---->css3-exclusions<!---->] <em>…summary of comment…</em>”
   157   <p>This document was produced by the <a href="/Style/CSS/members">CSS
   158    Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
   160   <p>This document was produced by a group operating under the <a
   161    href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
   162    Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
   163    rel=disclosure>public list of any patent disclosures</a> made in
   164    connection with the deliverables of the group; that page also includes
   165    instructions for disclosing a patent. An individual who has actual
   166    knowledge of a patent which the individual believes contains <a
   167    href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
   168    Claim(s)</a> must disclose the information in accordance with <a
   169    href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
   170    W3C Patent Policy</a>.</p>
   171   <!--end-status-->
   173   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   174   <!--begin-toc-->
   176   <ul class=toc>
   177    <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
   179    <li><a href="#definitions"><span class=secno>2. </span>Definitions</a>
   181    <li><a href="#exclusions"><span class=secno>3. </span>Exclusions</a>
   182     <ul class=toc>
   183      <li><a href="#declaring-exclusions"><span class=secno>3.1.
   184       </span>Declaring exclusions</a>
   185       <ul class=toc>
   186        <li><a href="#wrap-flow-property"><span class=secno>3.1.1. </span>The
   187         ‘<code class=property>wrap-flow</code>’ property</a>
   188       </ul>
   190      <li><a href="#scope-and-effect-of-exclusions"><span class=secno>3.2.
   191       </span>Scope and effect of exclusions</a>
   193      <li><a href="#propagation-of-exclusions"><span class=secno>3.3.
   194       </span>Propagation of Exclusions</a>
   195       <ul class=toc>
   196        <li><a href="#wrap-through-property"><span class=secno>3.3.1.
   197         </span>The ‘<code class=property>wrap-through</code>’
   198         Property</a>
   199       </ul>
   201      <li><a href="#exclusions-order"><span class=secno>3.4. </span>Exclusions
   202       order</a>
   204      <li><a href="#exclusions-processing-model"><span class=secno>3.5.
   205       </span>Processing model</a>
   206       <ul class=toc>
   207        <li><a href="#exclusions-processing-model-description"><span
   208         class=secno>3.5.1. </span>Description</a>
   210        <li><a
   211         href="#step-1-resolve-exclusion-boxes-belonging-to-each-wrapping-context"><span
   212         class=secno>3.5.2. </span>Step 1: resolve exclusion boxes belonging
   213         to each <span>wrapping context</span></a>
   215        <li><a
   216         href="#step-2-resolve-wrapping-contexts-layout-containing-blocks"><span
   217         class=secno>3.5.3. </span>Step 2: resolve wrapping contexts and lay
   218         out containing blocks</a>
   220        <li><a href="#step-2-A-resolve-exclusions-position-and-size"><span
   221         class=secno>3.5.4. </span>Step 2-A: resolve the position and size of
   222         exclusion boxes</a>
   224        <li><a
   225         href="#step-2-B-layout-containing-block-applying-wrapping"><span
   226         class=secno>3.5.5. </span>Step 2-B: lay out containing block applying
   227         wrapping</a>
   229        <li><a href="#exclusions-processing-model-example"><span
   230         class=secno>3.5.6. </span>Example</a>
   231         <ul class=toc>
   232          <li><a href="#step-1-resolve-exclusion-boxes-belonging"><span
   233           class=secno>3.5.6.1. </span>Step 1: resolve exclusion boxes
   234           belonging to each <span>wrapping context</span></a>
   236          <li><a href="#step-2-resolve-wrapping-contexts-and-lay"><span
   237           class=secno>3.5.6.2. </span>Step 2: resolve wrapping contexts and
   238           lay out containing blocks</a>
   239           <ul class=toc>
   240            <li><a href="#resolving-rwc-1"><span class=secno>3.5.6.2.1.
   241             </span>Resolving RWC-1</a>
   243            <li><a href="#resolving-rwc-2"><span class=secno>3.5.6.2.2.
   244             </span>Resolving RWC-2</a>
   245           </ul>
   246         </ul>
   247       </ul>
   249      <li><a href="#floats-and-exclusions"><span class=secno>3.6.
   250       </span>Floats and exclusions</a>
   251       <ul class=toc>
   252        <li><a href="#floats-and-exclusions-similarities"><span
   253         class=secno>3.6.1. </span>Similarities</a>
   255        <li><a href="#floats-and-exclusions-differences"><span
   256         class=secno>3.6.2. </span>Differences</a>
   258        <li><a href="#floats-and-exclusions-interoperability"><span
   259         class=secno>3.6.3. </span>Interoperability</a>
   260         <ul class=toc>
   261          <li><a href="#effect-of-floats-on-exclusions"><span
   262           class=secno>3.6.3.1. </span>Effect of floats on exclusions</a>
   264          <li><a href="#effect-of-exclusions-on-floats"><span
   265           class=secno>3.6.3.2. </span>Effect of exclusions on floats</a>
   266         </ul>
   267       </ul>
   268     </ul>
   270    <li><a href="#shapes"><span class=secno>4. </span>Shapes</a>
   271     <ul class=toc>
   272      <li><a href="#relation-to-box-model-and-float-behavior"><span
   273       class=secno>4.1. </span>Relation to the box model and float
   274       behavior</a>
   276      <li><a href="#basic-shapes-from-svg-syntax"><span class=secno>4.2.
   277       </span>Basic Shapes</a>
   278       <ul class=toc>
   279        <li><a href="#supported-basic-shapes"><span class=secno>4.2.1.
   280         </span>Supported Shapes</a>
   282        <li><a href="#referencing-svg-shapes"><span class=secno>4.2.2.
   283         </span>Referencing SVG shapes</a>
   284       </ul>
   286      <li><a href="#shapes-from-image"><span class=secno>4.3. </span>Shapes
   287       from Image</a>
   289      <li><a href="#declaring-shapes"><span class=secno>4.4. </span>Declaring
   290       Shapes</a>
   291       <ul class=toc>
   292        <li><a href="#shape-outside-property"><span class=secno>4.4.1.
   293         </span>The ‘<code class=property>shape-outside</code>’
   294         Property</a>
   296        <li><a href="#shape-inside-property"><span class=secno>4.4.2.
   297         </span>The ‘<code class=property>shape-inside</code>’
   298         Property</a>
   300        <li><a href="#shape-image-threshold-property"><span class=secno>4.4.3.
   301         </span>The ‘<code class=property>shape-image-threshold</code>’
   302         Property</a>
   304        <li><a href="#shape-margin-property"><span class=secno>4.4.4.
   305         </span>The ‘<code class=property>shape-margin</code>’
   306         property</a>
   308        <li><a href="#shape-padding-property"><span class=secno>4.4.5.
   309         </span>The ‘<code class=property>shape-padding</code>’
   310         Property</a>
   311       </ul>
   312     </ul>
   314    <li><a href="#conformance"><span class=secno>5. </span>Conformance</a>
   315     <ul class=toc>
   316      <li><a href="#conventions"><span class=secno>5.1. </span>Document
   317       Conventions</a>
   319      <li><a href="#conformance-classes"><span class=secno>5.2.
   320       </span>Conformance Classes</a>
   322      <li><a href="#partial"><span class=secno>5.3. </span> Partial
   323       Implementations</a>
   325      <li><a href="#experimental"><span class=secno>5.4. </span> Experimental
   326       Implementations</a>
   328      <li><a href="#testing"><span class=secno>5.5. </span> Non-Experimental
   329       Implementations</a>
   331      <li><a href="#cr-exit-criteria"><span class=secno>5.6. </span> CR Exit
   332       Criteria</a>
   333     </ul>
   335    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
   337    <li class=no-num><a href="#references">References</a>
   338     <ul class=toc>
   339      <li class=no-num><a href="#normative-references">Normative
   340       references</a>
   342      <li class=no-num><a href="#other-references">Other references</a>
   343     </ul>
   345    <li class=no-num><a href="#index">Index</a>
   347    <li class=no-num><a href="#property-index">Property index</a>
   349    <li class=no-num><a href="#change-log">Change Log</a>
   350     <ul class=toc>
   351      <li><a href="#since-may-3rd-2012"><span class=secno>5.7. </span>Since
   352       May 3rd 2012</a>
   354      <li><a href="#since-december-13th-2011"><span class=secno>5.8.
   355       </span>Since December 13th 2011</a>
   356     </ul>
   357   </ul>
   358   <!--end-toc-->
   360   <h2 id=intro><span class=secno>1. </span>Introduction</h2>
   362   <p><em>This section is not normative.</em>
   364   <p> The exclusions section of this specification defines features that
   365    allow inline flow content to wrap around outside the <a
   366    href="#exclusion-area">exclusion area</a> of elements.
   368   <p> The shapes section of the specification defines properties to control
   369    the geometry of an element's <a href="#exclusion-area">exclusion area</a>
   370    as well as the geometry used for wrapping an element's inline flow
   371    content.
   373   <h2 id=definitions><span class=secno>2. </span>Definitions</h2>
   375   <p><dfn id=exclusion-box>Exclusion box</dfn>
   377   <p> A <a href="http://www.w3.org/TR/css3-box/">box</a> (<a href="#CSS3BOX"
   378    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>) that defines an <a
   379    href="#exclusion-area">exclusion area</a> for other boxes. The ‘<a
   380    href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property is
   381    used to make an element's generated box an exclusion box. An exclusion box
   382    contributes its <a href="#exclusion-area">exclusion area</a> to its <a
   383    href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
   384    containing block's</a> <a href="#wrapping-context">wrapping context</a>.
   385    An element with a ‘<code class=property>float</code>’ computed value
   386    other than ‘<code class=property>none</code>’ does not become an
   387    exclusion.
   389   <p><dfn id=exclusion-area>Exclusion area</dfn>
   391   <div class=issue-marker data-bug_id=15087 data-bug_status=NEW> <a
   392    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Issue-15087</a>
   394    <div class=issue-details>
   395     <p class=short-desc>Interaction of floats and exclusions (Howcome's
   396      questions)
   397    </div>
   398   </div>
   400   <p> The area used for excluding inline flow content around an exclusion
   401    box. The <a href="#exclusion-area">exclusion area</a> is equivalent to the
   402    <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions"> border
   403    box</a>. This specification's ‘<a href="#shape-outside"><code
   404    class=property>shape-outside</code></a>’ property can be used to define
   405    arbitrary, non-rectangular <a href="#exclusion-area">exclusion areas</a>.
   407   <p><dfn id=float-area>Float area</dfn>
   409   <p> The area used for excluding inline flow content around a float element.
   410    By default, the float area is the float element's <a
   411    href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">margin box</a>.
   412    This specification's ‘<a href="#shape-outside"><code
   413    class=property>shape-outside</code></a>’ property can be used to define
   414    arbitrary, non-rectangular float areas.
   416   <p><dfn id=exclusion-element>Exclusion element</dfn>
   418   <p>An block-level element which is not a float and generates an <a
   419    href="#exclusion-box">exclusion box</a>. An element generates an exclusion
   420    box when its ‘<a href="#wrap-flow"><code
   421    class=property>wrap-flow</code></a>’ property's computed value is not
   422    ‘<code class=property>auto</code>’.
   424   <p><dfn id=wrapping-context>Wrapping context</dfn>
   426   <div class=issue-marker data-bug_id=15086 data-bug_status=NEW> <a
   427    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Issue-15086</a>
   429    <div class=issue-details>
   430     <p class=short-desc>should the wrapping context be generic and include
   431      floats?
   432    </div>
   433   </div>
   435   <p> The <a href="#wrapping-context">wrapping context</a> of a box is a
   436    collection of <a href="#exclusion-area">exclusion areas</a> contributed by
   437    its associated <a href="#exclusion-box">exclusion boxes</a>. During
   438    layout, a box wraps its inline flow content in the area that corresponds
   439    to the subtraction of its <a href="#wrapping-context">wrapping context</a>
   440    from its own <a href="#content-area">content area</a>.
   442   <p> A box inherits its <a
   443    href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
   444    block's</a> <a href="#wrapping-context">wrapping context</a> unless it
   445    specifically resets it using the ‘<a href="#wrap-through"><code
   446    class=property>wrap-through</code></a>’ property.
   448   <p><dfn id=content-area>Content area</dfn>
   450   <p> The area used for layout of the inline flow content of a box. By
   451    default the area is equivalent to the <a
   452    href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">content box</a>.
   453    This specification's ‘<a href="#shape-inside"><code
   454    class=property>shape-inside</code></a>’ property can define arbitrary,
   455    non-rectangular content areas.
   457   <div class=issue-marker data-bug_id=15089 data-bug_status=NEW> <a
   458    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15089">Issue-15089</a>
   460    <div class=issue-details>
   461     <p class=short-desc>shrink-to-fit circle / shape
   462    </div>
   463   </div>
   465   <p><dfn id=outside-and-inside title=outside-inside>Outside and inside</dfn>
   467   <p> In this specification, ‘<code class=property>outside</code>’ refers
   468    to DOM content that is not a descendant of an element while ‘<code
   469    class=property>inside</code>’ refers to the element's descendants.
   471   <h2 id=exclusions><span class=secno>3. </span>Exclusions</h2>
   473   <p> Exclusion elements define <a href="#exclusion-area">exclusion areas</a>
   474    that contribute to their containing block's <a
   475    href="#wrapping-context">wrapping context</a>. As a consequence,
   476    exclusions impact the layout of their containing block's descendants.
   478   <p>
   480   <p> Elements layout their inline content in their <a
   481    href="#content-area">content area</a> and wrap around the <a
   482    href="#exclusion-area">exclusion areas</a> in their associated <a
   483    href="#wrapping-context">wrapping context</a>. If the element is itself an
   484    exclusion, it does not wrap around its own exclusion shape and the impact
   485    of other exclusions on other exclusions is controlled by the ‘<code
   486    class=property>z-index</code>’ property as explained in the <a
   487    href="#exclusions-order">exclusions order</a> section.
   489   <p> The <a href="#shapes">shape properties</a> can be used to change the
   490    shape of <a href="#exclusion-area">exclusion areas</a>.
   492   <h3 id=declaring-exclusions><span class=secno>3.1. </span>Declaring
   493    exclusions</h3>
   495   <p> An element becomes an exclusion when its ‘<a href="#wrap-flow"><code
   496    class=property>wrap-flow</code></a>’ property has a computed value other
   497    than ‘<code class=property>auto</code>’.
   499   <h4 id=wrap-flow-property><span class=secno>3.1.1. </span>The ‘<a
   500    href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property</h4>
   502   <table class=propdef>
   503    <tbody>
   504     <tr>
   505      <th>Name:
   507      <td><dfn id=wrap-flow title="'wrap-flow'">wrap-flow</dfn>
   509     <tr>
   510      <th>Value:
   512      <td><var>auto</var> | <var>both</var> | <var>start</var> |
   513       <var>end</var> | <var>minimum</var> | <var>maximum</var> |
   514       <var>clear</var>
   516     <tr>
   517      <th>Initial:
   519      <td>auto
   521     <tr>
   522      <th>Applies to:
   524      <td>block-level elements.
   526     <tr>
   527      <th>Inherited:
   529      <td>no
   531     <tr>
   532      <th>Percentages:
   534      <td>N/A
   536     <tr>
   537      <th>Media:
   539      <td>visual
   541     <tr>
   542      <th>Computed value:
   544      <td>as specified except for element's whose ‘<code
   545       class=property>float</code>’ computed value is not <code
   546       class=css>none</code>, in which case the computed value is ‘<code
   547       class=property>auto</code>’.
   548   </table>
   550   <div class=issue-marker data-bug_id=16437 data-bug_status=ASSIGNED> <a
   551    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16437">Issue-16437</a>
   553    <div class=issue-details>
   554     <p class=short-desc>Consistent use of start/end/top/bottom
   555    </div>
   556   </div>
   558   <p>The values of this property have the following meanings:
   560   <dl>
   561    <dt><dfn id=auto title="'wrap-flow'!!'auto'">auto</dfn>
   563    <dd> No exclusion is created. Inline flow content interacts with the
   564     element as usual. In particular, if the element is a <a
   565     href="http://www.w3.org/TR/CSS2/visuren.html#floats">float</a> (see <a
   566     href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>), the behavior
   567     is unchanged.
   569    <dt><dfn id=both title="'wrap-flow'!!'both'">both</dfn>
   571    <dd> Inline flow content can flow on all sides of the exclusion.
   573    <dt><dfn id=start title="'wrap-flow'!!'start'">start</dfn>
   575    <dd> Inline flow content can flow before the start edge of the <a
   576     href="#exclusion-area">exclusion area</a> but must leave the area after
   577     the end edge of the exclusion empty.
   579    <dt><dfn id=end title="'wrap-flow'!!'end'">end</dfn>
   581    <dd> Inline flow content can flow after the end edge of the <a
   582     href="#exclusion-area">exclusion area</a> but must leave the area before
   583     the start edge of the exclusion empty.
   585    <dt><dfn id=minimum title="'wrap-flow'!!'minimum'">minimum</dfn>
   587    <dd> Inline flow content can flow on the edge of the exclusion with the
   588     smallest available space within its containing block, and must leave the
   589     other edge of the exclusion empty.
   591    <dt><dfn id=maximum title="'wrap-flow'!!'maximum'">maximum</dfn>
   593    <dd> Inline flow content can flow on the edge of the exclusion with the
   594     largest available space within its containing block, and must leave the
   595     other edge of the exclusion empty.
   597    <dt><dfn id=clear title="'wrap-flow'!!'clear'">clear</dfn>
   599    <dd> Inline flow content can only flow on top and bottom edges of the
   600     exclusion and must leave the areas before the start and after the end
   601     edges of the exclusion empty.
   602   </dl>
   604   <p> If the property's computed value is ‘<code
   605    class=property>auto</code>’, the element does not become an
   606    <span>exclusion</span>.
   608   <p> Otherwise, a computed ‘<a href="#wrap-flow"><code
   609    class=property>wrap-flow</code></a>’ property value of ‘<code
   610    class=property>both</code>’, ‘<code class=property>start</code>’,
   611    ‘<code class=property>end</code>’, ‘<code
   612    class=property>minimum</code>’, ‘<code
   613    class=property>maximum</code>’ or ‘<code
   614    class=property>clear</code>’ on an element makes that element an
   615    <span>exclusion element. It's <span>exclusion shape</span> is contributed
   616    to its containing block's <a href="#wrapping-context">wrapping
   617    context</a>, causing the containing block's descendants to wrap around its
   618    <a href="#exclusion-area">exclusion area</a>. </span>
   620   <p>An <a href="#exclusion-element">exclusion element</a> establishes a new
   621    <a href="">block formatting context</a> (see <a href="#CSS21"
   622    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) for its content.
   624   <div class=figure> <img
   625    alt="General illustration showing how exclusions combine"
   626    src="images/exclusions-illustration.png" width="70%">
   627    <p class=caption>Combining exclusions
   628   </div>
   630   <p> The above figure illustrates how exclusions are combined. The outermost
   631    box represents an element's content box. The A, B, C and D darker gray
   632    boxes represent exclusions in the element's <a
   633    href="#wrapping-context">wrapping context</a>. A, B, C and D have their
   634    respective ‘<a href="#wrap-flow"><code
   635    class=property>wrap-flow</code></a>’ set to ‘<code
   636    class=property>both</code>’, ‘<code class=property>start</code>’,
   637    ‘<code class=property>end</code>’ and ‘<code
   638    class=property>clear</code>’ respectively. The lighter gray areas show
   639    the additional areas that are excluded for inline layout as a result of
   640    the ‘<a href="#wrap-flow"><code class=property>wrap-flow</code></a>’
   641    value. For example, the area to the right of ‘<code
   642    class=property>B</code>’ cannot be used for inline layout because the
   643    ‘<a href="#wrap-flow"><code class=property>wrap-flow</code></a>’ for
   644    ‘<code class=property>B</code>’ is ‘<code
   645    class=property>start</code>’.
   647   <p> The background ‘<code class=property>blue</code>’ area shows what
   648    areas are available for the element's inline content layout. All areas
   649    represented with a light or dark shade of gray are not available for
   650    inline content layout.
   652   <div class="issue-marker wrapper">
   653    <div class=issue-marker data-bug_id=15084 data-bug_status=NEW> <a
   654     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Issue-15084</a>
   656     <div class=issue-details>
   657      <p class=short-desc>Fluidity of the layout with respect to different
   658       amounts of content
   659     </div>
   660    </div>
   661   </div>
   663   <div class=example>
   664    <p> The ‘<a href="#wrap-flow"><code
   665     class=property>wrap-flow</code></a>’ property values applied to
   666     exclusions as grid items.</p>
   667    <code class=html></code>
   668    <pre>
   670 &lt;div id="grid"&gt;
   671     &lt;div id="top-right" class="exclusion"&gt;&lt;/div&gt;
   672     &lt;div id="bottom-left" class="exclusion"&gt;&lt;/div&gt;
   673     &lt;div id="content"&gt;Lorem ipsum…&lt;/div&gt;
   674 &lt;/div&gt;
   676 &lt;style type="text/css"&gt; 
   677 #grid {
   678     width: 30em;
   679     height: 30em;
   680     display: grid;
   681     grid-columns: 25% 25% 25% 25%;
   682     grid-rows: 25% 25% 25% 25%;
   684 #top-right {
   685     grid-column: 3;
   686     grid-row: 2;
   687 }
   689 #bottom-left {
   690     grid-column: 2;
   691     grid-row: 3;
   692 }
   694 .exclusion {
   695     wrap-flow: &lt;see below&gt;
   696 }
   698 #content {
   699     grid-row: 1;
   700     grid-row-span: 4;
   701     grid-column: 1;
   702     grid-column-span: 4;
   703 }
   704 &lt;/style&gt; 
   705 </pre>
   707    <p>The following figures illustrate the visual rendering for different
   708     values of the ‘<a href="#wrap-flow"><code
   709     class=property>wrap-flow</code></a>’ property. The gray grid lines are
   710     marking the grid cells. and the blue area is the exclusion box
   711     (positioned by the grid).
   713    <table class=example-table>
   714     <tbody>
   715      <tr>
   716       <td><code class=html>.exclusion{ wrap-flow: auto; }</code>
   718       <td><code class=html>.exclusion{ wrap-flow: both; }</code>
   720      <tr>
   721       <td><img alt="Example rendering for wrap-side: auto"
   722        src="images/exclusion_wrap_side_auto.png">
   724       <td><img alt="Example rendering for wrap-side: both"
   725        src="images/exclusion_wrap_side_both.png">
   727      <tr>
   728       <td><code class=html>.exclusion{ wrap-flow: start; }</code>
   730       <td><code class=html>.exclusion{ wrap-flow: end; }</code>
   732      <tr>
   733       <td><img alt="Example rendering for wrap-side: start"
   734        src="images/exclusion_wrap_side_left.png">
   736       <td><img alt="Example rendering for wrap-side: end"
   737        src="images/exclusion_wrap_side_right.png">
   739      <tr>
   740       <td><code class=html>.exclusion{ wrap-flow: minimum; }</code>
   742       <td><code class=html>.exclusion{ wrap-flow: maximum; }</code>
   744      <tr>
   745       <td><img alt="Example rendering for wrap-side: minimum"
   746        src="images/exclusion_wrap_side_minimum.png">
   748       <td><img alt="Example rendering for wrap-side: maximum"
   749        src="images/exclusion_wrap_side_maximum.png">
   751      <tr>
   752       <td><code class=html>.exclusion{ wrap-flow: clear; }</code>
   754       <td>
   756      <tr>
   757       <td><img alt="Example rendering for wrap-side: clear"
   758        src="images/exclusion_wrap_side_clear.png">
   760       <td>
   761    </table>
   762   </div>
   763   <!-- End section "wrap-flow Property" -->
   764   <!-- End section "Declaring Exclusions" -->
   766   <h3 id=scope-and-effect-of-exclusions><span class=secno>3.2. </span>Scope
   767    and effect of exclusions</h3>
   769   <p> An <span>exclusion</span> affects the inline flow content descended
   770    from the exclusion's containing block (defined in <a
   771    href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">
   772    CSS 2.1 10.1</a>) and that of all descendant elements of the same
   773    containing block. All inline flow content inside the containing block of
   774    the exclusions is affected. To stop the effect of exclusions defined
   775    outside an element, the ‘<a href="#wrap-through"><code
   776    class=property>wrap-through</code></a>’ property can be used (see the <a
   777    href="#propagation-of-exclusions">propagation of exclusions</a> section
   778    below).
   780   <p> As a reminder, for exclusions with ‘<code
   781    class=css>position:fixed</code>’, the containing block is that of the
   782    root element.</p>
   783   <!-- End section "Scope and Effect of Exclusions" -->
   785   <h3 id=propagation-of-exclusions><span class=secno>3.3. </span>Propagation
   786    of Exclusions</h3>
   788   <p> By default, an element inherits its parent <a
   789    href="#wrapping-context">wrapping context</a>. In other words it is
   790    subject to the exclusions defined <a href="#outside-and-inside"
   791    title=outside-inside>outside the element. </a>
   793   <p>Setting the ‘<a href="#wrap-through"><code
   794    class=property>wrap-through</code></a>’ property to ‘<code
   795    class=property>none</code>’ prevents an element from inheriting its
   796    parent <a href="#wrapping-context">wrapping context</a>. In other words,
   797    exclusions defined ‘<code class=property>outside</code>’ the element,
   798    have not effect on the element's children layout.
   800   <div class=note> Exclusions defined by an element's descendants still
   801    contribute to their containing block's <a
   802    href="#wrapping-context">wrapping context</a>. If that containing block is
   803    a child of an element with ‘<a href="#wrap-through"><code
   804    class=property>wrap-through</code></a>’ set to none, or the element
   805    itself, then exclusion still have an effect on the children of that
   806    containing block element.</div>
   808   <h4 id=wrap-through-property><span class=secno>3.3.1. </span>The ‘<a
   809    href="#wrap-through"><code class=property>wrap-through</code></a>’
   810    Property</h4>
   812   <div class=issue-marker data-bug_id=15085 data-bug_status=NEW> <a
   813    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Issue-15085</a>
   815    <div class=issue-details>
   816     <p class=short-desc>do we need wrap-through?
   817    </div>
   818   </div>
   820   <table class=propdef>
   821    <tbody>
   822     <tr>
   823      <th>Name:
   825      <td><dfn id=wrap-through title="'wrap-through'">wrap-through</dfn>
   827     <tr>
   828      <th>Value:
   830      <td><var>wrap</var> | <var>none</var>
   832     <tr>
   833      <th>Initial:
   835      <td>wrap
   837     <tr>
   838      <th>Applies to:
   840      <td>block-level elements
   842     <tr>
   843      <th>Inherited:
   845      <td>no
   847     <tr>
   848      <th>Percentages:
   850      <td>N/A
   852     <tr>
   853      <th>Media:
   855      <td>visual
   857     <tr>
   858      <th>Computed value:
   860      <td>as specified
   861   </table>
   863   <p>The values of this property have the following meanings:
   865   <dl>
   866    <dt><dfn id=wrap title="'wrap-through'!!'wrap'">wrap</dfn>
   868    <dd> The element inherits its parent node's <a
   869     href="#wrapping-context">wrapping context</a>. Its descendant inline
   870     content wraps around exclusions defined <a href="#outside-and-inside"
   871     title=outside-inside>outside</a> the element.
   872   </dl>
   874   <dl>
   875    <dt><dfn id=none title="'wrap-through'!!'none'">none</dfn>
   877    <dd> The element does not inherit its parent node's <a
   878     href="#wrapping-context">wrapping context</a>. Its descendants are only
   879     subject to exclusion shapes defined <a href="#outside-and-inside"
   880     title=outside-inside>inside</a> the element.
   881   </dl>
   883   <div class=example>
   884    <p> Using the ‘<a href="#wrap-through"><code
   885     class=property>wrap-through</code></a>’ property to control the effect
   886     of exclusions.
   888    <pre><code class=html>
   890 &lt;style type="text/css"&gt; 
   891     #grid {
   892         display: grid;
   893         grid-columns: 25% 50% 25%;
   894         grid-rows: 25% 25% 25% 25%;
   895     }
   897     #exclusion {
   898         grid-row: 2;
   899         grid-row-span: 2;
   900         grid-column: 2;
   901         wrap-flow: &lt;see below&gt;
   902     }
   904     #rowA, #rowB {
   905         grid-row-span: 2;
   906         grid-column: 1;
   907         grid-column-span: 3;
   908     }
   910     #rowA {
   911         grid-row: 1;
   912     }
   914     #rowB {
   915         grid-row: 3;
   916     }
   917     &lt;/style&gt;
   919 &lt;style type="text/css"&gt; 
   920     .exclusion  {
   921     	wrap-flow: both; 
   922     	position: absolute; 
   923     	left: 20%;
   924     	top: 20%;
   925     	width: 50%;
   926     	height: 50%;
   927     	background-color: rgba(220, 230, 242, 0.5); 
   928     } 
   929 &lt;/style&gt; 
   931 &lt;div id="grid"&gt; 
   932     &lt;div class=”exclusion”&gt;&lt;/div&gt; 
   933     &lt;div id="rowA" style=”wrap-through: wrap;”&gt; Lorem ipsum dolor sit amet...&lt;/div&gt; 
   934     &lt;div id="rowB" style=”wrap-through: none;”&gt; Lorem ipsum dolor sit amet...&lt;/div&gt; 
   935 &lt;/div&gt;
   936 </code></pre>
   937    <img alt="Example rendering of wrap-through: wrap | none"
   938    class=singleImgExample src="images/exclusion_wrap_through.png"
   939    style="max-width:40%"></div>
   940   <!-- End section "wrap-through property" -->
   941   <!-- removed as wrap-margin and wrap-padding changed to shape-margin and shape-padding
   943     <h4 id="wrap-shorthand-property">The 'wrap' Shorthand Property</h4>
   944     <table class="propdef">
   945         <tr>
   946             <th>Name:</th>
   947             <td><dfn title="'wrap'">wrap</dfn></td>
   948         </tr>
   949         <tr>
   950             <th>Value:</th>
   951             <td><var>&lt;wrap-flow&gt;</var> || <var>&lt;wrap-margin&gt;</var> [ / <var>&lt;wrap-padding&gt;</var>]</td>
   952         </tr>
   953         <tr>
   954             <th>Initial:</th>
   955             <td>see individual properties</td>
   956         </tr>
   957         <tr>
   958             <th>Applies to:</th>
   959             <td>block-level elements</td>
   960         </tr>
   961         <tr>
   962             <th>Inherited:</th>
   963             <td>no</td>
   964         </tr>
   965         <tr>
   966             <th>Percentages:</th>
   967             <td>N/A</td>
   968         </tr>
   969         <tr>
   970             <th>Media:</th>
   971             <td>visual</td>
   972         </tr>
   973         <tr>
   974             <th>Computed value:</th>
   975             <td>see individual properties</td>
   976         </tr>
   977     </table>
   978     <p>
   979         The 'wrap' property is a shorthand property for setting the exclusions properties
   980         at the same place in the style sheet.
   981     </p>
   982 -->
   983   <!-- End section "wrap shorthand property" -->
   984   <!-- End section "Propagation of Exclusions" -->
   986   <h3 id=exclusions-order><span class=secno>3.4. </span>Exclusions order</h3>
   988   <p> Exclusions follow the painting order (See <a href="#CSS21"
   989    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Appendix E). Exclusions are
   990    applied in reverse to the document order in which they are defined. The
   991    last exclusion appears on top of all other exclusion, thus it affects the
   992    inline flow content of all other preceding exclusions or elements
   993    descendant of the same containing block. The ‘<code
   994    class=property>z-index</code>’ property can be used to change the
   995    ordering of <a
   996    href="http://www.w3.org/TR/CSS2/visuren.html#choose-position">positioned</a>
   997    exclusion boxes (see <a href="#CSS21"
   998    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). Statically positioned
   999    exclusions are not affected by the ‘<code
  1000    class=property>z-index</code>’ property and thus follow the painting
  1001    order.
  1003   <div class=issue-marker data-bug_id=16474 data-bug_status=NEW> <a
  1004    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16474">Issue-16474</a>
  1006    <div class=issue-details>
  1007     <p class=short-desc>Improve Example 3 about exclusion order
  1008    </div>
  1009   </div>
  1011   <div class=example>
  1012    <p>Ordering of exclusions.
  1014    <pre><code class=html>
  1015 &lt;style type="text/css"&gt; 
  1016     .exclusion  {
  1017     	wrap-flow: both; 
  1018     	position: absolute; 
  1019     	width: 50%; 
  1020     	height: auto; 
  1022 &lt;/style&gt; 
  1024 &lt;div class=”exclusion” style=”top: 0px; left: 0px;”&gt; 
  1025     Lorem ipsum dolor sit amet... 
  1026 &lt;/div&gt; 
  1027 &lt;div id="orderedExclusion" class=”exclusion” style=”top: 25%; left: 25%;”&gt; 
  1028     Lorem ipsum dolor sit amet... 
  1029 &lt;/div&gt; 
  1030 &lt;div class=”exclusion” style=”top: 50%; left: 50%;”&gt; 
  1031     Lorem ipsum dolor sit amet... 
  1032 &lt;/div&gt;
  1033 </code></pre>
  1035    <table class=example-table>
  1036     <tbody>
  1037      <tr>
  1038       <td style="width:50%"><code class=html>#orderedExclusion{ z-index:
  1039        auto; }</code>
  1041       <td style="width:50%"><code class=html>#orderedExclusion{ z-index: 1;
  1042        }</code>
  1044      <tr>
  1045       <td><img alt="Example rendering of default exclusion ordering."
  1046        class=singleImgExample src="images/exclusion_ordering.png">
  1048       <td><img alt="Example rendering of default exclusion ordering."
  1049        class=singleImgExample src="images/exclusion_ordering_z_order.png">
  1050    </table>
  1051   </div>
  1052   <!-- End section "Order of Exclusions" -->
  1054   <div class="issue-marker wrapper">
  1055    <div class=issue-marker data-bug_id=15183 data-bug_status=NEW> <a
  1056     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Issue-15183</a>
  1058     <div class=issue-details>
  1059      <p class=short-desc>Is the CSS exclusions processing model incorrect?
  1060     </div>
  1061    </div>
  1062   </div>
  1064   <div class=issue>
  1065    <p>The current draft provides a model for exclusions without a
  1066     collision-avoidance model. The existing exclusion model in CSS uses
  1067     floats, which have both exclusion and collision-avoidance behavior.
  1068     Concerns have been raised that allowing exclusions without collision
  1069     avoidance could be harmful, particularly with absolutely-positioned
  1070     elements. Three options should be considered:
  1072    <p>
  1074    <ol>
  1075     <li>Allow exclusions in positioning schemes with no collision avoidance.
  1077     <li>Disallow exclusions in positioning schemes with no collision
  1078      avoidance.
  1080     <li>Define collision-avoidance behavior for positioning schemes without
  1081      it, and use this behavior by default with exclusions.
  1082    </ol>
  1084    <ol></ol>
  1085   </div>
  1087   <div class="issue-marker wrapper">
  1088    <div class=issue-marker data-bug_id=15083 data-bug_status=NEW> <a
  1089     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Issue-15083</a>
  1091     <div class=issue-details>
  1092      <p class=short-desc>Concerns over Error accumulation vs. performance
  1093     </div>
  1094    </div>
  1095   </div>
  1097   <h3 id=exclusions-processing-model><span class=secno>3.5. </span>Processing
  1098    model</h3>
  1100   <h4 id=exclusions-processing-model-description><span class=secno>3.5.1.
  1101    </span>Description</h4>
  1103   <p>Applying exclusions is a two-step process:
  1105   <ul>
  1106    <li><strong>Step 1</strong>: resolve exclusion boxes belonging to each <a
  1107     href="#wrapping-context">wrapping context</a>
  1109    <li><strong>Step 2</strong>: resolve <a href="#wrapping-context">wrapping
  1110     context</a>s and lay out each containing block in turn:
  1111     <ul>
  1112      <li><strong>Step 2-A</strong>: resolve the position and size of
  1113       exclusion boxes
  1115      <li><strong>Step 2-B</strong>: lay out containing block, wrapping around
  1116       <a href="#exclusion-area">exclusion areas</a>
  1117     </ul>
  1118   </ul>
  1120   <h4
  1121    id=step-1-resolve-exclusion-boxes-belonging-to-each-wrapping-context><span
  1122    class=secno>3.5.2. </span>Step 1: resolve exclusion boxes belonging to
  1123    each <a href="#wrapping-context">wrapping context</a></h4>
  1125   <p>In this step, the user agent determines which <a
  1126    href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
  1127    block</a> each <a href="#exclusion-area">exclusion area</a> belongs to.
  1128    This is a simple step, based on the definition of containing blocks and
  1129    elements with a computed value for ‘<a href="#wrap-flow"><code
  1130    class=property>wrap-flow</code></a>’ that is not <code
  1131    class=css>auto</code>.
  1133   <h4 id=step-2-resolve-wrapping-contexts-layout-containing-blocks><span
  1134    class=secno>3.5.3. </span>Step 2: resolve wrapping contexts and lay out
  1135    containing blocks</h4>
  1137   <p>In this step, starting from the top of the <a
  1138    href="http://www.w3.org/TR/CSS2/visuren.html#z-index">rendering tree</a>
  1139    (see <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), the
  1140    the agent processes each containing block in two sub-steps.
  1142   <h4 id=step-2-A-resolve-exclusions-position-and-size><span
  1143    class=secno>3.5.4. </span>Step 2-A: resolve the position and size of
  1144    exclusion boxes</h4>
  1146   <p>Resolving the position and size of <a href="#exclusion-box">exclusion
  1147    boxes</a> in the <a href="#wrapping-context">wrapping context</a> may or
  1148    may not require a layout. For example, if an <a
  1149    href="#exclusion-box">exclusion box</a> is absolutely positioned and
  1150    sized, a layout may not be needed to resolve its position and size. In
  1151    other situations, laying out the containing block's content is required.
  1153   <p>When a layout is required, it is carried out without applying any <a
  1154    href="#exclusion-area">exclusion area</a>. In other words, the containing
  1155    block is laid out without a <a href="#wrapping-context">wrapping
  1156    context</a>.
  1158   <p>Step 2-A yields a position and size for all <a
  1159    href="#exclusion-box">exclusion boxes</a> in the <a
  1160    href="#wrapping-context">wrapping context</a>. Each exclusion box is
  1161    processed in turn, starting from the top-most, and each <a
  1162    href="#exclusion-area">exclusion area</a> is computed and contributed to
  1163    the <a
  1164    href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
  1165    block's</a> <a href="#wrapping-context">wrapping context</a>.
  1167   <p>Scrolling is ignored in this step when resolving the position and size
  1168    of ‘<code class=css>position:fixed</code>’ <a
  1169    href="#exclusion-box">exclusion boxes</a>.
  1171   <p>Once the <a
  1172    href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
  1173    block's</a> <a href="#wrapping-context">wrapping context</a> is computed,
  1174    all <a href="#exclusion-box">exclusion boxes</a> in that <a
  1175    href="#wrapping-context">wrapping context</a> are removed from the normal
  1176    flow.
  1178   <h4 id=step-2-B-layout-containing-block-applying-wrapping><span
  1179    class=secno>3.5.5. </span>Step 2-B: lay out containing block applying
  1180    wrapping</h4>
  1182   <p>Finally, the content of the containing block is laid out, with the
  1183    inline content wrapping around the <span>wrapping content</span>‘<code
  1184    class=css>s <a href="#exclusion-area">exclusion areas</a> (which may be
  1185    different from the <a href="#exclusion-box">exclusion box</a> because of
  1186    the </code>’shape-outside' property).
  1188   <p>When the containing block itself is an <a
  1189    href="#exclusion-box">exclusion box</a>, then rules on <a
  1190    href="#exclusions-order">exclusions order</a> define which exclusions
  1191    affect the inline and descendant content of the box.
  1193   <h4 id=exclusions-processing-model-example><span class=secno>3.5.6.
  1194    </span>Example</h4>
  1196   <p>This section illustrates the exclusions processing model with an
  1197    example. It is meant to be simple. Yet, it contains enough complexity to
  1198    address the issues of layout dependencies and re-layout.
  1200   <p>The code snippet in the following example has two exclusions affecting
  1201    the document's inline content.
  1203   <div class=example>
  1204    <pre class=html>&lt;html&gt;
  1205 &lt;style&gt;
  1206 #d1 {
  1207     position:relative;
  1208     height: auto;
  1209     color: #46A4E9;
  1210     border: 1px solid gray;
  1213 #e1 {
  1214     wrap-flow: both;
  1215     position: absolute; 
  1216     left: 50%; 
  1217     top: 50%; 
  1218     width: 40%; 
  1219     height: 40%; 
  1220     border: 1px solid red;
  1221     margin-left: -20%;
  1222     margin-top: -20%;
  1225 #d2 {
  1226     position: static;
  1227     width: 100%;
  1228     height: auto;
  1229     color: #808080;
  1232 #e2 {
  1233     wrap-flow: both;
  1234     position: absolute; 
  1235     right: 5ex; 
  1236     top: 1em; 
  1237     width: 12ex;
  1238     height: 10em; 
  1239     border: 1px solid lime;
  1241 &lt;/style&gt;
  1242 &lt;body&gt;
  1243     &lt;div id="d1"&gt;
  1244         Lorem ipsusm ...
  1245         &lt;p id="e1"&gt;&lt;/p&gt;
  1246     &lt;/div&gt;
  1247     &lt;div id="d2"&gt;
  1248         Lorem ipsusm ...
  1249         &lt;p id="e2" &gt;&lt;/p&gt;
  1250     &lt;/div&gt;
  1251 &lt;/body&gt;
  1252 &lt;/html&gt;</pre>
  1253   </div>
  1255   <p>The following figures illustrate:
  1257   <ul>
  1258    <li>the document's DOM tree
  1260    <li>the layout tree of generated block boxes
  1261   </ul>
  1263   <div class=figure> <img alt="DOM tree nodes"
  1264    src="images/processing-model-example-dom.svg" width=200>
  1265    <p class=caption>DOM tree
  1266   </div>
  1268   <div class=figure> <img alt="Layout tree boxes"
  1269    src="images/processing-model-example-layout-tree.svg" width=350>
  1270    <p class=caption>Layout tree of generated block boxes
  1271   </div>
  1273   <h5 id=step-1-resolve-exclusion-boxes-belonging><span class=secno>3.5.6.1.
  1274    </span>Step 1: resolve exclusion boxes belonging to each <a
  1275    href="#wrapping-context">wrapping context</a></h5>
  1277   <p>The figures illustrate how the boxes corresponding to the element
  1278    sometimes have a different containment hierarchy in the layout tree than
  1279    in the DOM tree. For example, the box generated by <code
  1280    class=idl>e1</code> is positioned in its containing block's box, which is
  1281    the <code class=idl>d1-box</code>, because <code class=idl>e1</code> is
  1282    absolutely positioned and <code class=idl>d1</code> is relatively
  1283    positioned. However, while <code class=idl>e2</code> is also absolutely
  1284    positioned, its containing block is the initial containing block (ICB).
  1285    See the section 10.1 of the CSS 2.1 specification (<a href="#CSS21"
  1286    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) for details.
  1288   <p>As a result of the computation of containing blocks for the tree, the
  1289    boxes belonging to the <a href="#wrapping-context">wrapping context</a>s
  1290    of all the elements can be determined:
  1292   <ul>
  1293    <li>The <a href="#wrapping-context">wrapping context</a> for the html
  1294     element contains the <code class=idl>e2</code> box: WC-1 (Wrapping
  1295     Context 1)
  1297    <li>The <a href="#wrapping-context">wrapping context</a> for the body
  1298     element inherits the html element's <a href="#wrapping-context">wrapping
  1299     context</a>: WC-1
  1301    <li>The <a href="#wrapping-context">wrapping context</a> for <code
  1302     class=idl>d1</code> inherits the body element's <a
  1303     href="#wrapping-context">wrapping context</a> and adds the <code
  1304     class=idl>e1-box</code> to it. So the wrapping context is made of both
  1305     the <code class=idl>e1-box</code> and the <code class=idl>e2-box</code>:
  1306     WC-2
  1308    <li>The <a href="#wrapping-context">wrapping context</a> for <code
  1309     class=idl>d2</code> inherits the body element's <a
  1310     href="#wrapping-context">wrapping context</a>: WC-1
  1311   </ul>
  1313   <h5 id=step-2-resolve-wrapping-contexts-and-lay><span class=secno>3.5.6.2.
  1314    </span>Step 2: resolve wrapping contexts and lay out containing blocks</h5>
  1316   <p>In this step, each containing block is processed in turn. For each
  1317    containing block, we (conceptually) go through two phases:
  1319   <ol>
  1320    <li>resolve the <a href="#wrapping-context">wrapping context</a>: resolve
  1321     the position and size of its exclusions
  1323    <li>lay out the containing block
  1324   </ol>
  1326   <p>In our example, this breaks down to:
  1328   <ol>
  1329    <li>resolve the position and size of the exclusions belonging to WC-1:
  1330     RWC-1 (Resolved Wrapping Context 1).
  1332    <li>lay out the initial containing block (i.e., lay out its content):
  1333     <ol>
  1334      <li>resolve the html element's <a href="#wrapping-context">wrapping
  1335       context</a>: RWC-1
  1337      <li>lay out the html element:
  1338       <ol>
  1339        <li>resolve the body element's <a href="#wrapping-context">wrapping
  1340         context</a>: RWC-1
  1342        <li>lay out the body element:
  1343         <ol>
  1344          <li>resolve the <code class=idl>d1</code> element's <a
  1345           href="#wrapping-context">wrapping context</a>: RWC-2
  1347          <li>lay out the <code class=idl>d1</code> element
  1349          <li>resolve the <code class=idl>d2</code> element's <a
  1350           href="#wrapping-context">wrapping context</a>: RWC-1
  1352          <li>lay out the <code class=idl>d2</code> element
  1353         </ol>
  1354       </ol>
  1355     </ol>
  1356   </ol>
  1358   <h6 id=resolving-rwc-1><span class=secno>3.5.6.2.1. </span>Resolving RWC-1</h6>
  1360   <p>The top-most <a href="#wrapping-context">wrapping context</a> in the
  1361    layout tree contains the <code class=idl>e2</code> exclusion. Its position
  1362    and size needs to be resolved. In general, computing an exclusion's
  1363    position and size may or may not require laying out other content. In our
  1364    example, no content needs to be laid out to resolve the <code
  1365    class=idl>e2</code> exclusion's position because it is absolutely
  1366    positioned and its size can be resolved without layout either. At this
  1367    point, RWC-1 is resolved and can be used when laying inline content out.
  1369   <h6 id=resolving-rwc-2><span class=secno>3.5.6.2.2. </span>Resolving RWC-2</h6>
  1371   <p>The process is similar: the position of the <code class=idl>e1</code>
  1372    exclusion needs to be resolved. Again, resolving the exclusion's position
  1373    and size may require processing the containing block (d1 here). It is the
  1374    case here because the size and position of <code class=idl>e1</code>
  1375    depend on resolving the percentage lengths. The percentages are relative
  1376    to the size of <code class=idl>d1</code>‘<code class=css>s box. As a
  1377    result, in order to resolve a size for <code
  1378    class=idl>d1</code></code>’s box, a first layout of <code
  1379    class=idl>d1</code> is done without any <a
  1380    href="#wrapping-context">wrapping context</a> (i.e., no exclusions
  1381    applied). The layout yields a position and size for <code
  1382    class=idl>e1</code>‘<code class=css>s box. </code>
  1384   <p>At this point, RWC-2 is resolved because the position and size of both
  1385    e1 and e2 are resolved.
  1387   <p class=note>The important aspect of the above processing example is that
  1388    once an element’s <a href="#wrapping-context">wrapping context</a> is
  1389    resolved (by resolving its exclusions' position and size), the position
  1390    and size of the exclusions are not re-processed if the element's size
  1391    changes between the layout that may be done without considering any <a
  1392    href="#wrapping-context">wrapping context</a> (as for RWC-2) and the
  1393    layout done with the resolved <a href="#wrapping-context">wrapping
  1394    context</a>. This is what breaks the possible circular dependency between
  1395    the resolution of <a href="#wrapping-context">wrapping context</a>s and
  1396    the layout of containing blocks.
  1398   <h3 id=floats-and-exclusions><span class=secno>3.6. </span>Floats and
  1399    exclusions</h3>
  1401   <h4 id=floats-and-exclusions-similarities><span class=secno>3.6.1.
  1402    </span>Similarities</h4>
  1404   <p>There are similarities between floats an exclusions in that inline
  1405    content wraps around floats and also wraps around <a
  1406    href="#exclusion-area">exclusion areas</a>. However, there are very
  1407    significant differences.
  1409   <h4 id=floats-and-exclusions-differences><span class=secno>3.6.2.
  1410    </span>Differences</h4>
  1412   <ul>
  1413    <li><strong>scope</strong>. While floats apply to content that follows in
  1414     the document, exclusions apply to content in their containing block.
  1416    <li><strong>positioning</strong>. Floats are part of the inline flow and
  1417     ‘<code class=property>float</code>’ on the line box. Authors can
  1418     control how the floats move on the line box, to the right or to the left.
  1419     By contrast, exclusions can be positioned using any positioning scheme
  1420     such as grid layout (<a href="#CSS3-GRID-LAYOUT"
  1421     rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>),
  1422     flexible box (<a href="#CSS3-FLEXBOX"
  1423     rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>) or any other
  1424     CSS positioning scheme.
  1426    <li><strong>separation of concerns</strong>. Making an element a float
  1427     determines both its positioning scheme and its effect on inline content.
  1428     Making an element an exclusion only determines its impact on inline
  1429     content and does not impose constraints on its positioning method.
  1430   </ul>
  1432   <h4 id=floats-and-exclusions-interoperability><span class=secno>3.6.3.
  1433    </span>Interoperability</h4>
  1435   <h5 id=effect-of-floats-on-exclusions><span class=secno>3.6.3.1.
  1436    </span>Effect of floats on exclusions</h5>
  1438   <p>Floats have an effect on the positioning of exclusions and the layout of
  1439    their inline content. For example, if an exclusion is an inline-box which
  1440    happens to be on the same line as a float, its' position, as computed in
  1441    <a href="#step-2-A-resolve-exclusions-position-and-size">Step 2-A</a> will
  1442    be impacted by the float, as is any other inline content.
  1444   <h5 id=effect-of-exclusions-on-floats><span class=secno>3.6.3.2.
  1445    </span>Effect of exclusions on floats</h5>
  1447   <p>Exclusions have an effect on the positioning of floats as they have an
  1448    effect on inline content. Therefore, in <a
  1449    href="#step-2-B-layout-containing-block-applying-wrapping">Step 2-B</a>,
  1450    floats will avoid <a href="#exclusion-area">exclusion areas</a>.</p>
  1451   <!-- End section "Exclusions" -->
  1453   <h2 id=shapes><span class=secno>4. </span>Shapes</h2>
  1455   <div class="issue-marker wrapper">
  1456    <div class=issue-marker data-bug_id=15091 data-bug_status=NEW> <a
  1457     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Issue-15091</a><br>
  1459     <div class=issue-details>
  1460      <p class=short-desc>Simplify the syntax for shapes
  1461     </div>
  1462    </div>
  1464    <div class=issue-marker data-bug_id=16716 data-bug_status=NEW> <a
  1465     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16716">Issue-16716</a>
  1467     <div class=issue-details>
  1468      <p class=short-desc>Handling visible content as a shape for Exclusions
  1469     </div>
  1470    </div>
  1471   </div>
  1473   <p> Shapes define arbitrary geometric contours around which or into which
  1474    inline flow content flows. There are two different types of shapes –
  1475    ‘<code class=property>outside</code>’ and ‘<code
  1476    class=property>inside</code>’. The outside shape defines the <a
  1477    href="#exclusion-area">exclusion area</a> for an <a
  1478    href="#exclusion-element">exclusion element</a> or the <a
  1479    href="#float-area">float area</a> for a float. The inside shape defines an
  1480    element's <span>content shape</span> and the element's inline content will
  1481    flow within that shape.
  1483   <p class=note>It is important to note that while outside shapes only apply
  1484    to <span>exclusions</span> and floats, inside shapes apply to all
  1485    block-level elements.
  1487   <h3 id=relation-to-box-model-and-float-behavior><span class=secno>4.1.
  1488    </span>Relation to the box model and float behavior</h3>
  1490   <p> While the boundaries used for wrapping inline flow content outside and
  1491    inside an element can be defined using shapes, the actual box model does
  1492    not change. If the element has specified margins, borders or paddings they
  1493    will be computed and rendered according to the <a href="#CSS3BOX"
  1494    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> module.
  1496   <p> However, floats are an exception. If a float has an outside shape, its
  1497    positioning is resolved as <a
  1498    href="http://www.w3.org/TR/CSS2/visuren.html#float-position">defined</a>
  1499    in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> but using
  1500    the outside shape's bounding box is used in lieu of the float's margin
  1501    box.
  1503   <div class=example>
  1504    <p>CSS ‘<a href="#shape-outside"><code
  1505     class=property>shape-outside</code></a>’ and CSS box model relation:
  1506     the red box illustrates the exclusion element's content box, which is
  1507     unmodified and subject to normal CSS positioning (here absolute
  1508     positioning).
  1510    <pre><code class=html>
  1511 &lt;style type="text/css"&gt; 
  1512     .exclusion  {
  1513     	wrap-flow: both; 
  1514     	position: absolute; 
  1515     	top: 25%;
  1516     	left: 25%;
  1517     	width: 50%;
  1518     	height: 50%;
  1519     	shape-outside: circle(50%, 50%, 50%); 
  1520     	border: 1px solid red; 
  1522 &lt;/style&gt; 
  1524 &lt;div style=”position: relative;”&gt; 
  1525     &lt;div class=”exclusion”&gt;&lt;/div&gt; 
  1526     Lorem ipsum dolor sit amet... 
  1527 &lt;/div&gt;
  1528 </code></pre>
  1529    <img alt="Example rendering of circle shape and box model."
  1530    class=singleImgExample src="images/shapes_CSS2.1_MBP.png"
  1531    style="max-width:40%"></div>
  1533   <div class=example>
  1534    <p>In the following example the left and right floating <code
  1535     class=html>div</code> elements specify a triangular shape using the ‘<a
  1536     href="#shape-outside"><code class=property>shape-outside</code></a>’
  1537     property.
  1539    <pre><code class=html>
  1540 &lt;div style="text-align:center;"&gt;
  1541       &lt;div id="float-left"&gt;&lt;/div&gt;
  1542       &lt;div id="float-right"&gt;&lt;/div&gt;
  1543       &lt;div&gt;
  1544       Sometimes a web page's text content appears to be
  1545       funneling your attention towards a spot on the page
  1546       to drive you to follow a particular link.  Sometimes
  1547       you don't notice.
  1548       &lt;/div&gt;
  1549 &lt;/div&gt;
  1551 &lt;style type="text/css"&gt;
  1552 #float-left {
  1553       shape-outside: polygon(0,0 100%,100% 0,100%);
  1554       float: left;
  1555       width: 40%;
  1556       height: 12ex;
  1559 #float-right {
  1560       shape-outside: polygon(100%,0 100%,100% 0,100%);
  1561       float: right;
  1562       width: 40%;
  1563       height: 12ex;
  1565   &lt;/style&gt;
  1566 &lt;/div&gt;</code></pre>
  1567    <img alt="Using the shape-outside property with a float"
  1568    class=singleImgExample src="images/float-shape-outside.png"></div>
  1570   <h3 id=basic-shapes-from-svg-syntax><span class=secno>4.2. </span>Basic
  1571    Shapes</h3>
  1573   <p> Shapes can be specified using syntax similar to <a
  1574    href="http://www.w3.org/TR/SVG/shapes.html">SVG basic shapes</a>. The
  1575    definitions use <code><a
  1576    href="http://www.w3.org/TR/css3-values/#lengths">&lt;length&gt;</a></code>
  1577    type and the <code><a href="">&lt;percentage&gt;</a></code> types (see <a
  1578    href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>).
  1579    Percentages are resolved from the border box of the element to which the
  1580    property applies. For the radius <code>r</code> of the <a
  1581    href="#circle"><code>circle</code></a> shape, a percentage value is
  1582    resolved as <a
  1583    href="http://www.w3.org/TR/SVG/coords.html#Units">specified</a> in the SVG
  1584    recommendation (see <a href="#SVG11"
  1585    rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>). SVG strokes are not
  1586    considered part of the shape, thus only the following geometries are
  1587    valid.
  1589   <h4 id=supported-basic-shapes><span class=secno>4.2.1. </span>Supported
  1590    Shapes</h4>
  1592   <p> The following SVG shapes are supported by the CSS shapes module.
  1594   <dl>
  1595    <dt><dfn
  1596     id=rectangle>rectangle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4} [
  1597     curve [&lt;length&gt;|&lt;percentage&gt;]{1,2} ]? )
  1599    <dd>
  1600     <ul>
  1601      <li> The four values represent <strong>x, y, width</strong> and
  1602       <strong>height</strong>. They define the bounding box of the rectangle.
  1603       Negative values for width and height are invalid.
  1605      <li> The two ‘<code class=property>curve</code>’ values represent
  1606       <strong> rx</strong> and <strong>ry</strong>. For rounded rectangles
  1607       they define the x-axis radius and y-axis radius of the ellipse used to
  1608       round off the corners of the rectangle. Negative values for rx and ry
  1609       are invalid.
  1610     </ul>
  1612    <dt><dfn id=circle>circle</dfn>([&lt;length&gt;|&lt;percentage&gt;]{3})
  1614    <dd>
  1615     <ul>
  1616      <li> The three values values represent <strong>cx</strong>,
  1617       <strong>cy</strong>, and <strong>r</strong>. They define the x-axis and
  1618       y-axis coordinates of the center of the circle and the radius of the
  1619       circle. A negative value for r is invalid.
  1620     </ul>
  1622    <dt><dfn id=ellipse>ellipse</dfn>([&lt;length&gt;|&lt;percentage&gt;]{4})
  1624    <dd>
  1625     <ul>
  1626      <li> The four values represent <strong>cx</strong>, <strong>cy</strong>,
  1627       <strong>rx</strong>, and <strong>ry</strong>. They define the x-axis
  1628       and y-axis coordinates of the center of the ellipse and the x-axis and
  1629       y-axis radius of the ellipse. Negative values for rx and ry are
  1630       invalid.
  1631     </ul>
  1633    <dt><dfn id=polygon>polygon</dfn>([&lt;fill-rule&gt;,]?
  1634     [&lt;length&gt;|&lt;percentage&gt;]{2}#)
  1636    <dd>
  1637     <ul>
  1638      <li><strong>fillRule</strong> - The filling rule used to determine the
  1639       interior of the polygon. See <a
  1640       href="http://www.w3.org/TR/SVG/painting.html#FillRuleProperty">fill-rule</a>
  1641       property in SVG for details. Possible values are nonzero or evenodd.
  1642       Default value when omitted is nonzero.
  1644      <li> The two length values represent <strong>xi</strong> and
  1645       <strong>yi</strong> - the <strong>x</strong> and <strong>y</strong>
  1646       axis coordinates of the i-th vertex of the polygon.
  1647     </ul>
  1649     <p> If the polygon is not closed the user-agent will automatically add a
  1650      new vertex at the end.</p>
  1651     <br>
  1652   </dl>
  1654   <h4 id=referencing-svg-shapes><span class=secno>4.2.2. </span>Referencing
  1655    SVG shapes</h4>
  1657   <p>An SVG shape can be referenced using the <code>url()</code> syntax. The
  1658    shape can be any of the <a href="http://www.w3.org/TR/SVG/shapes.html">SVG
  1659    basic shapes</a> or a <a href="http://www.w3.org/TR/SVG/paths.html">path
  1660    element</a>.
  1662   <div class=example>
  1663    <div style="float:right"> <img alt="results of referencing SVG shapes"
  1664     src="images/svg-shape-reference.png"></div>
  1665    <code class=html></code>
  1666    <pre>
  1667 &lt;style&gt;
  1668 div {
  1669     height: 400px;
  1670     width: 400px;
  1672 .in-a-circle {
  1673     shape-inside: url(#circle_shape);
  1676 .in-a-path {
  1677     shape-inside: url(#path-shape);
  1680 &lt;/style&gt;
  1682 &lt;svg ...&gt;
  1683 &lt;circle id="circle_shape" cx="50%" cy="50%" r="50%" /&gt;
  1684 &lt;path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" /&gt;
  1685 &lt;/svg&gt;
  1687 &lt;div class="in-a-circle"&gt;...&lt;/div&gt;
  1688 &lt;div class="in-a-path"&gt;...&lt;/div&gt;
  1689           </pre>
  1690   </div>
  1692   <p> When using the SVG syntax or referencing SVG elements to define shapes,
  1693    all the lengths expressed in percentages are resolved from the border box
  1694    of the element. The coordinate system for the shape has its origin on the
  1695    top-left corner of the border box with the x-axis running to the right and
  1696    the y-axis running downwards. If the SVG element uses unitless coordinate
  1697    values, they are equivalent to using ‘<code class=property>px</code>’
  1698    units. If the border box of the element is dependent on auto sizing (i.e.,
  1699    the element's ‘<code class=property>width</code>’ or ‘<code
  1700    class=property>height</code>’ property is ‘<code
  1701    class=property>auto</code>’), then the percentage values resolve to 0.</p>
  1702   <!-- End section "Shapes from SVG Syntax -->
  1704   <h3 id=shapes-from-image><span class=secno>4.3. </span>Shapes from Image</h3>
  1706   <div class="issue-marker wrapper">
  1707    <div class=issue-marker data-bug_id=15093 data-bug_status=NEW> <a
  1708     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Issue-15093</a><br>
  1710     <div class=issue-details>
  1711      <p class=short-desc>Do we need to provide properties to repeat exclusion
  1712       images as for the background-image property?
  1713     </div>
  1714    </div>
  1716    <div class=issue-marker data-bug_id=15090 data-bug_status=NEW> <a
  1717     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Issue-15090</a>
  1719     <div class=issue-details>
  1720      <p class=short-desc>Use the contour keyword in shape-outside property?
  1721     </div>
  1722    </div>
  1724    <div class=issue-marker data-bug_id=15092 data-bug_status=NEW> <a
  1725     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Issue-15092</a>
  1727     <div class=issue-details>
  1728      <p class=short-desc>Specify what happens with animated images
  1729     </div>
  1730    </div>
  1732    <div class=issue-marker data-bug_id=16112 data-bug_status=NEW> <a
  1733     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16112">Issue-16112</a>
  1735     <div class=issue-details>
  1736      <p class=short-desc>Address security concern with automatic shape
  1737       extractions for images
  1738     </div>
  1739    </div>
  1740   </div>
  1742   <p> Another way of defining shapes is by specifying a source image whose
  1743    alpha channel is used to compute the inside or outside shape. The shape is
  1744    computed to be the path that encloses the area where the opacity of the
  1745    specified image is greater than the ‘<a
  1746    href="#shape-image-threshold"><code
  1747    class=property>shape-image-threshold</code></a>’ value. If the ‘<a
  1748    href="#shape-image-threshold"><code
  1749    class=property>shape-image-threshold</code></a>’ is not specified, the
  1750    initial value to be considered is 0.5.
  1752   <p class=note> Note, images can define cavities and inline flow content
  1753    should wrap inside them. In order to avoid that, another exclusion element
  1754    can be overlaid.
  1756   <p>For animated raster image formats (such as <a
  1757    href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF</a>), the first
  1758    frame of the animation sequence is used. For <a
  1759    href="http://www.w3.org/TR/2002/WD-SVG2Reqs-20020422/">SVG</a> images (<a
  1760    href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>), the image is
  1761    rendered without animations applied.</p>
  1762   <!-- End section "Shapes from image" -->
  1764   <h3 id=declaring-shapes><span class=secno>4.4. </span>Declaring Shapes</h3>
  1766   <p> Shapes are declared with the ‘<a href="#shape-outside"><code
  1767    class=property>shape-outside</code></a>’ or ‘<a
  1768    href="#shape-inside"><code class=property>shape-inside</code></a>’
  1769    properties. The ‘<a href="#shape-outside"><code
  1770    class=property>shape-outside</code></a>’ property changes the geometry
  1771    of an <a href="#exclusion-element">exclusion element</a>‘<code
  1772    class=css>s <a href="#exclusion-area">exclusion area</a> or or a float
  1773    element</code>’s <a href="#float-area">float area</a>. If the element is
  1774    not an <a href="#exclusion-element">exclusion element</a> (see the ‘<a
  1775    href="#wrap-flow"><code class=property>wrap-flow</code></a>’ property)
  1776    or a float, then the ‘<a href="#shape-outside"><code
  1777    class=property>shape-outside</code></a>’ property has no effect.
  1779   <p> The ‘<a href="#shape-inside"><code
  1780    class=property>shape-inside</code></a>’ property defines an element's <a
  1781    href="#content-area">content area</a> and the element's inline flow
  1782    content wraps into that shape. The ‘<a href="#shape-inside"><code
  1783    class=property>shape-inside</code></a>’ property applies to all
  1784    block-level elements.
  1786   <h4 id=shape-outside-property><span class=secno>4.4.1. </span>The ‘<a
  1787    href="#shape-outside"><code class=property>shape-outside</code></a>’
  1788    Property</h4>
  1790   <table class=propdef>
  1791    <tbody>
  1792     <tr>
  1793      <th>Name:
  1795      <td><dfn id=shape-outside title="'shape-outside'">shape-outside</dfn>
  1797     <tr>
  1798      <th>Value:
  1800      <td><var>auto</var> | <var>&lt;shape&gt;</var> | <var>&lt;uri&gt;</var>
  1802     <tr>
  1803      <th>Initial:
  1805      <td>auto
  1807     <tr>
  1808      <th>Applies to:
  1810      <td>exclusion elements and floats
  1812     <tr>
  1813      <th>Inherited:
  1815      <td>no
  1817     <tr>
  1818      <th>Percentages:
  1820      <td>N/A
  1822     <tr>
  1823      <th>Media:
  1825      <td>visual
  1827     <tr>
  1828      <th>Computed value:
  1830      <td>computed lengths for &lt;shape&gt;, the absolute URI for
  1831       &lt;uri&gt;, otherwise as specified
  1832   </table>
  1834   <p>The values of this property have the following meanings:
  1836   <dl>
  1837    <dt><dfn id=auto0 title="'shape-outside'!!'auto'">auto</dfn>
  1839    <dd>The shape is computed based on the border box of the element.
  1840   </dl>
  1842   <dl>
  1843    <dt><dfn id=ltshapegt
  1844     title="'shape-outside'!!'&lt;shape&gt;'">&lt;shape&gt;</dfn>
  1846    <dd> The shape is computed based on the values of one of ‘<a
  1847     href="#rectangle"><code class=property>rectangle</code></a>’, ‘<a
  1848     href="#circle"><code class=property>circle</code></a>’, ‘<a
  1849     href="#ellipse"><code class=property>ellipse</code></a>’ or ‘<a
  1850     href="#polygon"><code class=property>polygon</code></a>’.
  1851   </dl>
  1853   <dl>
  1854    <dt><dfn id=lturigt
  1855     title="'shape-outside'!!'&lt;uri&gt;'">&lt;uri&gt;</dfn>
  1857    <dd> If the &lt;uri&gt; references an SVG shape element, that element
  1858     defines the shape. Otherwise, if the &lt;uri&gt; references an image, the
  1859     shape is extracted and computed based on the alpha channel of the
  1860     specified image. If the &lt;uri&gt; does not reference an SVG shape
  1861     element or an image, the effect is as if the value ‘<code
  1862     class=property>auto</code>’ had been specified.
  1863   </dl>
  1865   <div class=figure> <img
  1866    alt="arbitrary shapes for exclusions. Illustrates how content flows around shapes"
  1867    src="images/shapes-exclusions.png" width="70%">
  1868    <p class=caption>Arbitrary shapes for exclusions
  1869   </div>
  1871   <div>
  1872    <p>The above figure shows how ‘<a href="#shape-outside"><code
  1873     class=property>shape-outside</code></a>’ shapes impact the <a
  1874     href="#exclusion-area">exclusion areas</a>. The red box represents an
  1875     element's content box and ‘<code class=property>A</code>’, ‘<code
  1876     class=property>B</code>’, ‘<code class=property>C</code>’ and
  1877     ‘<code class=property>C</code>’ represent exclusions with a complex
  1878     shape and their ‘<a href="#wrap-flow"><code
  1879     class=property>wrap-flow</code></a>’ property set to ‘<code
  1880     class=property>both</code>’, ‘<code class=property>start</code>’,
  1881     ‘<code class=property>end</code>’ and ‘<code
  1882     class=property>clear</code>’, respectively.
  1884    <p>As illustrated in the picture, when an exclusion allows wrapping on all
  1885     sides, text can flow inside ‘<code class=property>holes</code>’ in
  1886     the exclusion (as for exclusion ‘<code class=property>A</code>’).
  1887     Otherwise, the exclusion clears the area on the side(s) defined by ‘<a
  1888     href="#wrap-flow"><code class=property>wrap-flow</code></a>’, as
  1889     illustrated for ‘<code class=property>B</code>’, ‘<code
  1890     class=property>C</code>’ and ‘<code class=property>D</code>’ above.
  1891   </div>
  1892   <!-- End section "The shape-outside Property" -->
  1894   <h4 id=shape-inside-property><span class=secno>4.4.2. </span>The ‘<a
  1895    href="#shape-inside"><code class=property>shape-inside</code></a>’
  1896    Property</h4>
  1898   <p> The ‘<a href="#shape-inside"><code
  1899    class=property>shape-inside</code></a>’ modifies the shape of the inner
  1900    inline flow content from rectangular content box to an arbitrary geometry.
  1902   <table class=propdef>
  1903    <tbody>
  1904     <tr>
  1905      <th>Name:
  1907      <td><dfn id=shape-inside title="'shape-inside'">shape-inside</dfn>
  1909     <tr>
  1910      <th>Value:
  1912      <td><var>outside-shape</var> | <var>auto</var> |
  1913       <var>&lt;shape&gt;</var> | <var>&lt;uri&gt;</var>
  1915     <tr>
  1916      <th>Initial:
  1918      <td>outside-shape
  1920     <tr>
  1921      <th>Applies to:
  1923      <td>block-level elements
  1925     <tr>
  1926      <th>Inherited:
  1928      <td>no
  1930     <tr>
  1931      <th>Percentages:
  1933      <td>N/A
  1935     <tr>
  1936      <th>Media:
  1938      <td>visual
  1940     <tr>
  1941      <th>Computed value:
  1943      <td>computed lengths for &lt;shape&gt;, the absolute URI for
  1944       &lt;uri&gt;, otherwise as specified
  1945   </table>
  1947   <div class="issue-marker wrapper">
  1948    <div class=issue-marker data-bug_id=16448 data-bug_status=ASSIGNED> <a
  1949     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16448">Issue-16448</a>
  1951     <div class=issue-details>
  1952      <p class=short-desc>Should we revisit the decision to not allow SVG path
  1953       syntax in the shape-inside, shape-outside properties
  1954     </div>
  1955    </div>
  1957    <div class=issue-marker data-bug_id=16460 data-bug_status=NEW> <a
  1958     href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16460">Issue-16460</a>
  1960     <div class=issue-details>
  1961      <p class=short-desc>Specify overflow behavior for shape-inside
  1962     </div>
  1963    </div>
  1964   </div>
  1966   <p>The values of this property have the following meanings:
  1968   <dl>
  1969    <dt><dfn id=outside-shape
  1970     title="'shape-inside'!!'outside-shape'">outside-shape</dfn>
  1972    <dd> The shape is computed based on the computed value of the ‘<a
  1973     href="#shape-outside"><code class=property>shape-outside</code></a>’
  1974     property.
  1975   </dl>
  1977   <dl>
  1978    <dt><dfn id=auto1 title="'shape-inside'!!'auto'">auto</dfn>
  1980    <dd> The shape is computed based on the content box of the element.
  1981   </dl>
  1983   <dl>
  1984    <dt><dfn id=ltshapegt0
  1985     title="'shape-inside'!!'&lt;shape&gt;'">&lt;shape&gt;</dfn>
  1987    <dd> The shape is computed based on the values of one of ‘<a
  1988     href="#rectangle"><code class=property>rectangle</code></a>’, ‘<a
  1989     href="#circle"><code class=property>circle</code></a>’, ‘<a
  1990     href="#ellipse"><code class=property>ellipse</code></a>’ or ‘<a
  1991     href="#polygon"><code class=property>polygon</code></a>’.
  1992   </dl>
  1994   <dl>
  1995    <dt><dfn id=lturigt0
  1996     title="'shape-inside'!!'&lt;uri&gt;'">&lt;uri&gt;</dfn>
  1998    <dd> If the &lt;uri&gt; references an SVG shape element, that element
  1999     defines the shape. Otherwise, if the &lt;uri&gt; references an image, the
  2000     shape is extracted and computed based on the alpha channel of the
  2001     specified image. If the &lt;uri&gt; does not reference an SVG shape
  2002     element or an image, the effect is as if the value ‘<code
  2003     class=property>auto</code>’ had been specified.
  2004   </dl>
  2006   <p>The ‘<a href="#shape-inside"><code
  2007    class=property>shape-inside</code></a>’ property applies to floats.
  2009   <p>The ‘<a href="#shape-inside"><code
  2010    class=property>shape-inside</code></a>’ property may not apply on some
  2011    elements such as elements with a computed ‘<code
  2012    class=property>display</code>’ value of ‘<code
  2013    class=property>table</code>’.
  2015   <div class=figure> <img
  2016    alt="Content flowing with and without a shape-inside"
  2017    src="images/shape-inside-content.png">
  2018    <p class=caption>Effect of shape-inside on inline content.
  2019   </div>
  2020   <!-- End section "The shape-inside property" -->
  2022   <h4 id=shape-image-threshold-property><span class=secno>4.4.3. </span>The
  2023    ‘<a href="#shape-image-threshold"><code
  2024    class=property>shape-image-threshold</code></a>’ Property</h4>
  2026   <p> The ‘<a href="#shape-image-threshold"><code
  2027    class=property>shape-image-threshold</code></a>’ defines the alpha
  2028    channel threshold used to extract the shape using an image. A value of 0.5
  2029    means that all the pixels that are more than 50% transparent define the
  2030    path of the exclusion shape. The ‘<a href="#shape-image-threshold"><code
  2031    class=property>shape-image-threshold</code></a>’ applies to both ‘<a
  2032    href="#shape-outside"><code class=property>shape-outside</code></a>’ and
  2033    ‘<a href="#shape-inside"><code
  2034    class=property>shape-inside</code></a>’.
  2036   <p class=note> The specified value of ‘<a
  2037    href="#shape-image-threshold"><code
  2038    class=property>shape-image-threshold</code></a>’ is applied to both
  2039    images used for ‘<a href="#shape-outside"><code
  2040    class=property>shape-outside</code></a>’ and ‘<a
  2041    href="#shape-inside"><code class=property>shape-inside</code></a>’.
  2043   <table class=propdef>
  2044    <tbody>
  2045     <tr>
  2046      <th>Name:
  2048      <td><dfn id=shape-image-threshold
  2049       title="'shape-image-threshold'">shape-image-threshold</dfn>
  2051     <tr>
  2052      <th>Value:
  2054      <td><var>&lt;alphavalue&gt;</var>
  2056     <tr>
  2057      <th>Initial:
  2059      <td>0.5
  2061     <tr>
  2062      <th>Applies to:
  2064      <td>block-level elements
  2066     <tr>
  2067      <th>Inherited:
  2069      <td>no
  2071     <tr>
  2072      <th>Percentages:
  2074      <td>alpha channel of the image specified by &lt;uri&gt;
  2076     <tr>
  2077      <th>Media:
  2079      <td>visual
  2081     <tr>
  2082      <th>Computed value:
  2084      <td>The same as the specified value after clipping the
  2085       &lt;alphavalue&gt; to the range [0.0,1.0].
  2086   </table>
  2088   <p>The values of this property have the following meanings:
  2090   <dl>
  2091    <dt><dfn id=ltalphavaluegt
  2092     title="'shape-image-threshold'!!'&lt;alphavalue&gt;'">&lt;alphavalue&gt;</dfn>
  2094    <dd> A &lt;number&gt; value used to set the threshold used for extracting
  2095     a shape from an image. Any values outside the range 0.0 (fully
  2096     transparent) to 1.0 (fully opaque) will be clamped to this range.
  2097   </dl>
  2098   <!-- End section "The shape-image-threshold property" -->
  2099   <!--
  2100     <h4 id="shape-shorthand-property">The 'shape' Shorthand Property</h4>
  2102     <table class="propdef">
  2103         <tr>
  2104             <th>Name:</th>
  2105             <td><dfn title="'shape'">shape</dfn></td>
  2106         </tr>
  2107         <tr>
  2108             <th>Value:</th>
  2109             <td><var>&lt;shape-outside&gt;</var> [ / <var>&lt;shape-inside&gt;</var> ] || <var>&lt;shape-image-threshold&gt;</var></td>
  2110         </tr>
  2111         <tr>
  2112             <th>Initial:</th>
  2113             <td>see individual properties</td>
  2114         </tr>
  2115         <tr>
  2116             <th>Applies to:</th>
  2117             <td>block-level elements</td>
  2118         </tr>
  2119         <tr>
  2120             <th>Inherited:</th>
  2121             <td>no</td>
  2122         </tr>
  2123         <tr>
  2124             <th>Percentages:</th>
  2125             <td>N/A</td>
  2126         </tr>
  2127         <tr>
  2128             <th>Media:</th>
  2129             <td>visual</td>
  2130         </tr>
  2131         <tr>
  2132             <th>Computed value:</th>
  2133             <td>see individual properties</td>
  2134         </tr>
  2135     </table>
  2136     <p>
  2137         The 'shape' property is a shorthand property for setting the individual shape properties
  2138         at the same place in a style sheet.
  2139     </p>
  2141     <div class="example">
  2142         <p>Style declaration using the 'shape' shorthand property.</p>
  2143 <pre><code class="html">
  2144 &lt;style type="text/css"&gt;
  2145     .shape {
  2146         shape: rectangle(50px, 50px, 200px, 100px) / url("shape_image.png")  0.7;
  2148 &lt;/style&gt;
  2149 </code></pre>
  2150     </div>
  2151     <p class="issue">The example above must be finished.</p>
  2153     -->
  2154   <!-- End section "Shape Shorthand property -->
  2155   <!-- End section "Declaring Shapes" -->
  2157   <h4 id=shape-margin-property><span class=secno>4.4.4. </span>The ‘<a
  2158    href="#shape-margin"><code class=property>shape-margin</code></a>’
  2159    property</h4>
  2161   <p> The ‘<a href="#shape-margin"><code
  2162    class=property>shape-margin</code></a>’ property adds a margin to a
  2163    shape-outside. This defines a new shape where every point is the specified
  2164    distance from the shape-outside. This property takes on positive values
  2165    only.
  2167   <table class=propdef>
  2168    <tbody>
  2169     <tr>
  2170      <th>Name:
  2172      <td><dfn id=shape-margin title="'shape-margin'">shape-margin</dfn>
  2174     <tr>
  2175      <th>Value:
  2177      <td><var>&lt;length&gt;</var>
  2179     <tr>
  2180      <th>Initial:
  2182      <td>0
  2184     <tr>
  2185      <th>Applies to:
  2187      <td>exclusion elements and floats
  2189     <tr>
  2190      <th>Inherited:
  2192      <td>no
  2194     <tr>
  2195      <th>Percentages:
  2197      <td>N/A
  2199     <tr>
  2200      <th>Media:
  2202      <td>visual
  2204     <tr>
  2205      <th>Computed value:
  2207      <td>the absolute length
  2208   </table>
  2210   <div class=example>
  2211    <p>A ‘<a href="#shape-margin"><code
  2212     class=property>shape-margin</code></a>’ creating an offset from a
  2213     circlular shape-outside. The blue rectangles represent inline content
  2214     affected by the shape created by the margin.</p>
  2215    <img alt="Example of a shape-margin offset" src="images/wrap-margin.png"></div>
  2216   <!-- End secion "shape-margin property" -->
  2218   <h4 id=shape-padding-property><span class=secno>4.4.5. </span>The ‘<a
  2219    href="#shape-padding"><code class=property>shape-padding</code></a>’
  2220    Property</h4>
  2222   <p> The ‘<a href="#shape-padding"><code
  2223    class=property>shape-padding</code></a>’ property adds padding to a
  2224    shape-inside. This defines a new shape where every point is the specified
  2225    distance from the shape-inside. This property takes on positive values
  2226    only.
  2228   <table class=propdef>
  2229    <tbody>
  2230     <tr>
  2231      <th>Name:
  2233      <td><dfn id=shape-padding title="'shape-padding'">shape-padding</dfn>
  2235     <tr>
  2236      <th>Value:
  2238      <td><var>&lt;length&gt;</var>
  2240     <tr>
  2241      <th>Initial:
  2243      <td>0
  2245     <tr>
  2246      <th>Applies to:
  2248      <td>block-level elements
  2250     <tr>
  2251      <th>Inherited:
  2253      <td>no
  2255     <tr>
  2256      <th>Percentages:
  2258      <td>N/A
  2260     <tr>
  2261      <th>Media:
  2263      <td>visual
  2265     <tr>
  2266      <th>Computed value:
  2268      <td>the absolute length
  2269   </table>
  2271   <div class=example>
  2272    <p>A ‘<a href="#shape-padding"><code
  2273     class=property>shape-padding</code></a>’ creating an offset from a
  2274     circlular shape-inside. The light blue rectangles represent inline
  2275     content affected by the shape created by the padding.</p>
  2276    <img alt="Example of a shape-padding offset"
  2277    src="images/shape-padding.png"></div>
  2278   <!-- End section "shape-padding property" -->
  2280   <div class=note>Note that the ‘<a href="#shape-padding"><code
  2281    class=property>shape-padding</code></a>’ property only affects layout of
  2282    content inside the element it applies to while the ‘<a
  2283    href="#shape-margin"><code class=property>shape-margin</code></a>’
  2284    property only affects layout of content outside the element.</div>
  2285   <!-- End section "Shapes" -->
  2287   <h2 id=conformance><span class=secno>5. </span>Conformance</h2>
  2289   <h3 id=conventions><span class=secno>5.1. </span>Document Conventions</h3>
  2291   <p> Conformance requirements are expressed with a combination of
  2292    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
  2293    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”,
  2294    “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and
  2295    “OPTIONAL” in the normative parts of this document are to be
  2296    interpreted as described in RFC 2119. However, for readability, these
  2297    words do not appear in all uppercase letters in this specification.
  2299   <p> All of the text of this specification is normative except sections
  2300    explicitly marked as non-normative, examples, and notes. <a
  2301    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
  2303   <p> Examples in this specification are introduced with the words “for
  2304    example” or are set apart from the normative text with
  2305    <code>class="example"</code>, like this:
  2307   <div class=example>
  2308    <p>This is an example of an informative example.
  2309   </div>
  2311   <p> Informative notes begin with the word “Note” and are set apart from
  2312    the normative text with <code>class="note"</code>, like this:
  2314   <p class=note>Note, this is an informative note.
  2316   <h3 id=conformance-classes><span class=secno>5.2. </span>Conformance
  2317    Classes</h3>
  2319   <p>Conformance to CSS Exclusions and Shapes is defined for three
  2320    conformance classes:
  2322   <dl>
  2323    <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
  2324     sheet</dfn>
  2326    <dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  2327     style sheet</a>.
  2329    <dt><dfn id=renderer>renderer</dfn>
  2331    <dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  2332     that interprets the semantics of a style sheet and renders documents that
  2333     use them.
  2335    <dt><dfn id=authoring-tool>authoring tool</dfn>
  2337    <dd> A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  2338     that writes a style sheet.
  2339   </dl>
  2341   <p> A style sheet is conformant to CSS Exclusions and Shapes if all of its
  2342    declarations that use properties defined in this module have values that
  2343    are valid according to the generic CSS grammar and the individual grammars
  2344    of each property as given in this module.
  2346   <p> A renderer is conformant to CSS Exclusions and Shapes if, in addition
  2347    to interpreting the style sheet as defined by the appropriate
  2348    specifications, it supports all the features defined by CSS Exclusions and
  2349    Shapes by parsing them correctly and rendering the document accordingly.
  2350    However, the inability of a UA to correctly render a document due to
  2351    limitations of the device does not make the UA non-conformant. (For
  2352    example, a UA is not required to render color on a monochrome monitor.)
  2354   <p> An authoring tool is conformant to CSS Exclusions and Shapes if it
  2355    writes style sheets that are syntactically correct according to the
  2356    generic CSS grammar and the individual grammars of each feature in this
  2357    module, and meet all other conformance requirements of style sheets as
  2358    described in this module.
  2360   <h3 id=partial><span class=secno>5.3. </span> Partial Implementations</h3>
  2362   <p> So that authors can exploit the forward-compatible parsing rules to
  2363    assign fallback values, CSS renderers <strong>must</strong> treat as
  2364    invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">
  2365    ignore as appropriate</a>) any at-rules, properties, property values,
  2366    keywords, and other syntactic constructs for which they have no usable
  2367    level of support. In particular, user agents <strong>must not</strong>
  2368    selectively ignore unsupported component values and honor supported values
  2369    in a single multi-value property declaration: if any value is considered
  2370    invalid (as unsupported values must be), CSS requires that the entire
  2371    declaration be ignored.
  2373   <h3 id=experimental><span class=secno>5.4. </span> Experimental
  2374    Implementations</h3>
  2376   <p> To avoid clashes with future CSS features, the CSS2.1 specification
  2377    reserves a <a
  2378    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  2379    syntax</a> for proprietary and experimental extensions to CSS.
  2381   <p> Prior to a specification reaching the Candidate Recommendation stage in
  2382    the W3C process, all implementations of a CSS feature are considered
  2383    experimental. The CSS Working Group recommends that implementations use a
  2384    vendor-prefixed syntax for such features, including those in W3C Working
  2385    Drafts. This avoids incompatibilities with future changes in the draft.
  2387   <h3 id=testing><span class=secno>5.5. </span> Non-Experimental
  2388    Implementations</h3>
  2390   <p> Once a specification reaches the Candidate Recommendation stage,
  2391    non-experimental implementations are possible, and implementors should
  2392    release an unprefixed implementation of any CR-level feature they can
  2393    demonstrate to be correctly implemented according to spec.
  2395   <p> To establish and maintain the interoperability of CSS across
  2396    implementations, the CSS Working Group requests that non-experimental CSS
  2397    renderers submit an implementation report (and, if necessary, the
  2398    testcases used for that implementation report) to the W3C before releasing
  2399    an unprefixed implementation of any CSS features. Testcases submitted to
  2400    W3C are subject to review and correction by the CSS Working Group.
  2402   <p> Further information on submitting testcases and implementation reports
  2403    can be found from on the CSS Working Group's website at <a
  2404    href="http://www.w3.org/Style/CSS/Test/">
  2405    http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the
  2406    <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">
  2407    public-css-testsuite@w3.org</a> mailing list.
  2409   <h3 id=cr-exit-criteria><span class=secno>5.6. </span> CR Exit Criteria</h3>
  2411   <p> For this specification to be advanced to Proposed Recommendation, there
  2412    must be at least two independent, interoperable implementations of each
  2413    feature. Each feature may be implemented by a different set of products,
  2414    there is no requirement that all features be implemented by a single
  2415    product. For the purposes of this criterion, we define the following
  2416    terms:
  2418   <dl>
  2419    <dt>independent
  2421    <dd> each implementation must be developed by a different party and cannot
  2422     share, reuse, or derive from code used by another qualifying
  2423     implementation. Sections of code that have no bearing on the
  2424     implementation of this specification are exempt from this requirement.
  2426    <dt>interoperable
  2428    <dd> passing the respective test case(s) in the official CSS test suite,
  2429     or, if the implementation is not a Web browser, an equivalent test. Every
  2430     relevant test in the test suite should have an equivalent test created if
  2431     such a user agent (UA) is to be used to claim interoperability. In
  2432     addition if such a UA is to be used to claim interoperability, then there
  2433     must one or more additional UAs which can also pass those equivalent
  2434     tests in the same way for the purpose of interoperability. The equivalent
  2435     tests must be made publicly available for the purposes of peer review.
  2437    <dt>implementation
  2439    <dd> a user agent which:
  2440     <ol class=inline>
  2441      <li>implements the specification.
  2443      <li>is available to the general public. The implementation may be a
  2444       shipping product or other publicly available version (i.e., beta
  2445       version, preview release, or “nightly build”). Non-shipping product
  2446       releases must have implemented the feature(s) for a period of at least
  2447       one month in order to demonstrate stability.
  2449      <li>is not experimental (i.e., a version specifically designed to pass
  2450       the test suite and is not intended for normal usage going forward).
  2451     </ol>
  2452   </dl>
  2454   <p> The specification will remain Candidate Recommendation for at least six
  2455    months.
  2457   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
  2459   <p>This specification is made possible by input from Andrei Bucur,
  2460    Alexandru Chiculita, Arron Eicholz, Daniel Glazman, Arno Gourdol, Chris
  2461    Jones, Marcus Mielke, Alex Mogilevsky, Hans Muller, Mihnea Ovidenie,
  2462    Virgil Palanciuc, Peter Sorotokin, Bear Travis, Eugene Veselov, Stephen
  2463    Zilles and the CSS Working Group members.
  2465   <h2 class=no-num id=references>References</h2>
  2467   <h3 class=no-num id=normative-references>Normative references</h3>
  2468   <!--begin-normative-->
  2469   <!-- Sorted by label -->
  2471   <dl class=bibliography>
  2472    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  2473     <!---->
  2475    <dt id=CSS21>[CSS21]
  2477    <dd>Bert Bos; et al. <a
  2478     href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
  2479     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
  2480     2011. W3C Recommendation. URL: <a
  2481     href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
  2482    </dd>
  2483    <!---->
  2485    <dt id=CSS3BOX>[CSS3BOX]
  2487    <dd>Bert Bos. <a
  2488     href="http://www.w3.org/TR/2007/WD-css3-box-20070809"><cite>CSS basic box
  2489     model.</cite></a> 9 August 2007. W3C Working Draft. (Work in progress.)
  2490     URL: <a
  2491     href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a>
  2492    </dd>
  2493    <!---->
  2495    <dt id=CSS3VAL>[CSS3VAL]
  2497    <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
  2498     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
  2499     Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
  2500     Recommendation. (Work in progress.) URL: <a
  2501     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
  2502    </dd>
  2503    <!---->
  2505    <dt id=RFC2119>[RFC2119]
  2507    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
  2508     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
  2509     RFC 2119. URL: <a
  2510     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
  2511    </dd>
  2512    <!---->
  2514    <dt id=SVG11>[SVG11]
  2516    <dd>Erik Dahlström; et al. <a
  2517     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
  2518     Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
  2519     W3C Recommendation. URL: <a
  2520     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
  2521    </dd>
  2522    <!---->
  2523   </dl>
  2524   <!--end-normative-->
  2526   <h3 class=no-num id=other-references>Other references</h3>
  2527   <!--begin-informative-->
  2528   <!-- Sorted by label -->
  2530   <dl class=bibliography>
  2531    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
  2532     <!---->
  2534    <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX]
  2536    <dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a
  2537     href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/"><cite>CSS
  2538     Flexible Box Layout Module.</cite></a> 12 June 2012. W3C Working Draft.
  2539     (Work in progress.) URL: <a
  2540     href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a>
  2541    </dd>
  2542    <!---->
  2544    <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT]
  2546    <dd>Alex Mogilevsky; et al. <a
  2547     href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/"><cite>CSS
  2548     Grid Layout.</cite></a> 22 March 2012. W3C Working Draft. (Work in
  2549     progress.) URL: <a
  2550     href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/</a>
  2551    </dd>
  2552    <!---->
  2553   </dl>
  2554   <!--end-informative-->
  2556   <h2 class=no-num id=index>Index</h2>
  2557   <!--begin-index-->
  2559   <ul class=indexlist>
  2560    <li>authoring tool, <a href="#authoring-tool"
  2561     title="authoring tool"><strong>5.2.</strong></a>
  2563    <li>circle, <a href="#circle" title=circle><strong>4.2.1.</strong></a>
  2565    <li>Content area, <a href="#content-area"
  2566     title="Content area"><strong>2.</strong></a>
  2568    <li>ellipse, <a href="#ellipse" title=ellipse><strong>4.2.1.</strong></a>
  2570    <li>Exclusion area, <a href="#exclusion-area"
  2571     title="Exclusion area"><strong>2.</strong></a>
  2573    <li>Exclusion box, <a href="#exclusion-box"
  2574     title="Exclusion box"><strong>2.</strong></a>
  2576    <li>Exclusion element, <a href="#exclusion-element"
  2577     title="Exclusion element"><strong>2.</strong></a>
  2579    <li>Float area, <a href="#float-area"
  2580     title="Float area"><strong>2.</strong></a>
  2582    <li>outside-inside, <a href="#outside-and-inside"
  2583     title=outside-inside><strong>2.</strong></a>
  2585    <li>polygon, <a href="#polygon" title=polygon><strong>4.2.1.</strong></a>
  2587    <li>rectangle, <a href="#rectangle"
  2588     title=rectangle><strong>4.2.1.</strong></a>
  2590    <li>renderer, <a href="#renderer" title=renderer><strong>5.2.</strong></a>
  2592    <li>‘<a href="#shape-image-threshold"><code
  2593     class=property>shape-image-threshold</code></a>’, <a
  2594     href="#shape-image-threshold"
  2595     title="'shape-image-threshold'"><strong>4.4.3.</strong></a>
  2596     <ul>
  2597      <li>‘<code class=css>&lt;alphavalue&gt;</code>’, <a
  2598       href="#ltalphavaluegt"
  2599       title="'shape-image-threshold', '&lt;alphavalue&gt;'"><strong>4.4.3.</strong></a>
  2600     </ul>
  2602    <li>‘<a href="#shape-inside"><code
  2603     class=property>shape-inside</code></a>’, <a href="#shape-inside"
  2604     title="'shape-inside'"><strong>4.4.2.</strong></a>
  2605     <ul>
  2606      <li>‘<code class=property>auto</code>’, <a href="#auto1"
  2607       title="'shape-inside', 'auto'"><strong>4.4.2.</strong></a>
  2609      <li>‘<code class=property>outside-shape</code>’, <a
  2610       href="#outside-shape"
  2611       title="'shape-inside', 'outside-shape'"><strong>4.4.2.</strong></a>
  2613      <li>‘<code class=css>&lt;shape&gt;</code>’, <a href="#ltshapegt0"
  2614       title="'shape-inside', '&lt;shape&gt;'"><strong>4.4.2.</strong></a>
  2616      <li>‘<code class=css>&lt;uri&gt;</code>’, <a href="#lturigt0"
  2617       title="'shape-inside', '&lt;uri&gt;'"><strong>4.4.2.</strong></a>
  2618     </ul>
  2620    <li>‘<a href="#shape-margin"><code
  2621     class=property>shape-margin</code></a>’, <a href="#shape-margin"
  2622     title="'shape-margin'"><strong>4.4.4.</strong></a>
  2624    <li>‘<a href="#shape-outside"><code
  2625     class=property>shape-outside</code></a>’, <a href="#shape-outside"
  2626     title="'shape-outside'"><strong>4.4.1.</strong></a>
  2627     <ul>
  2628      <li>‘<code class=property>auto</code>’, <a href="#auto0"
  2629       title="'shape-outside', 'auto'"><strong>4.4.1.</strong></a>
  2631      <li>‘<code class=css>&lt;shape&gt;</code>’, <a href="#ltshapegt"
  2632       title="'shape-outside', '&lt;shape&gt;'"><strong>4.4.1.</strong></a>
  2634      <li>‘<code class=css>&lt;uri&gt;</code>’, <a href="#lturigt"
  2635       title="'shape-outside', '&lt;uri&gt;'"><strong>4.4.1.</strong></a>
  2636     </ul>
  2638    <li>‘<a href="#shape-padding"><code
  2639     class=property>shape-padding</code></a>’, <a href="#shape-padding"
  2640     title="'shape-padding'"><strong>4.4.5.</strong></a>
  2642    <li>style sheet
  2643     <ul>
  2644      <li>as conformance class, <a href="#style-sheet"
  2645       title="style sheet, as conformance class"><strong>5.2.</strong></a>
  2646     </ul>
  2648    <li>‘<a href="#wrap-flow"><code class=property>wrap-flow</code></a>’,
  2649     <a href="#wrap-flow" title="'wrap-flow'"><strong>3.1.1.</strong></a>
  2650     <ul>
  2651      <li>‘<code class=property>auto</code>’, <a href="#auto"
  2652       title="'wrap-flow', 'auto'"><strong>3.1.1.</strong></a>
  2654      <li>‘<code class=property>both</code>’, <a href="#both"
  2655       title="'wrap-flow', 'both'"><strong>3.1.1.</strong></a>
  2657      <li>‘<code class=property>clear</code>’, <a href="#clear"
  2658       title="'wrap-flow', 'clear'"><strong>3.1.1.</strong></a>
  2660      <li>‘<code class=property>end</code>’, <a href="#end"
  2661       title="'wrap-flow', 'end'"><strong>3.1.1.</strong></a>
  2663      <li>‘<code class=property>maximum</code>’, <a href="#maximum"
  2664       title="'wrap-flow', 'maximum'"><strong>3.1.1.</strong></a>
  2666      <li>‘<code class=property>minimum</code>’, <a href="#minimum"
  2667       title="'wrap-flow', 'minimum'"><strong>3.1.1.</strong></a>
  2669      <li>‘<code class=property>start</code>’, <a href="#start"
  2670       title="'wrap-flow', 'start'"><strong>3.1.1.</strong></a>
  2671     </ul>
  2673    <li>Wrapping context, <a href="#wrapping-context"
  2674     title="Wrapping context"><strong>2.</strong></a>
  2676    <li>‘<a href="#wrap-through"><code
  2677     class=property>wrap-through</code></a>’, <a href="#wrap-through"
  2678     title="'wrap-through'"><strong>3.3.1.</strong></a>
  2679     <ul>
  2680      <li>‘<code class=property>none</code>’, <a href="#none"
  2681       title="'wrap-through', 'none'"><strong>3.3.1.</strong></a>
  2683      <li>‘<code class=property>wrap</code>’, <a href="#wrap"
  2684       title="'wrap-through', 'wrap'"><strong>3.3.1.</strong></a>
  2685     </ul>
  2686   </ul>
  2687   <!--end-index-->
  2689   <h2 class=no-num id=property-index>Property index</h2>
  2690   <!--begin-properties-->
  2692   <table class=proptable>
  2693    <thead>
  2694     <tr>
  2695      <th>Property
  2697      <th>Values
  2699      <th>Initial
  2701      <th>Applies to
  2703      <th>Inh.
  2705      <th>Percentages
  2707      <th>Media
  2709    <tbody>
  2710     <tr>
  2711      <th><a class=property
  2712       href="#shape-image-threshold">shape-image-threshold</a>
  2714      <td>&lt;alphavalue&gt;
  2716      <td>0.5
  2718      <td>block-level elements
  2720      <td>no
  2722      <td>alpha channel of the image specified by &lt;uri&gt;
  2724      <td>visual
  2726     <tr>
  2727      <th><a class=property href="#shape-inside">shape-inside</a>
  2729      <td>outside-shape | auto | &lt;shape&gt; | &lt;uri&gt;
  2731      <td>outside-shape
  2733      <td>block-level elements
  2735      <td>no
  2737      <td>N/A
  2739      <td>visual
  2741     <tr>
  2742      <th><a class=property href="#shape-margin">shape-margin</a>
  2744      <td>&lt;length&gt;
  2746      <td>0
  2748      <td>exclusion elements and floats
  2750      <td>no
  2752      <td>N/A
  2754      <td>visual
  2756     <tr>
  2757      <th><a class=property href="#shape-outside">shape-outside</a>
  2759      <td>auto | &lt;shape&gt; | &lt;uri&gt;
  2761      <td>auto
  2763      <td>exclusion elements and floats
  2765      <td>no
  2767      <td>N/A
  2769      <td>visual
  2771     <tr>
  2772      <th><a class=property href="#shape-padding">shape-padding</a>
  2774      <td>&lt;length&gt;
  2776      <td>0
  2778      <td>block-level elements
  2780      <td>no
  2782      <td>N/A
  2784      <td>visual
  2786     <tr>
  2787      <th><a class=property href="#wrap-flow">wrap-flow</a>
  2789      <td>auto | both | start | end | minimum | maximum | clear
  2791      <td>auto
  2793      <td>block-level elements.
  2795      <td>no
  2797      <td>N/A
  2799      <td>visual
  2801     <tr>
  2802      <th><a class=property href="#wrap-through">wrap-through</a>
  2804      <td>wrap | none
  2806      <td>wrap
  2808      <td>block-level elements
  2810      <td>no
  2812      <td>N/A
  2814      <td>visual
  2815   </table>
  2816   <!--end-properties-->
  2817   <!-- template markup for issues pulled from Bugzilla -->
  2819   <script id=issue-template type="text/template">
  2820       </script>
  2821   <div class=issue-marker data-bug_id="{{bug_id}}"
  2822    data-bug_status="{{bug_status}}"> <a
  2823    href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
  2825    <div class=issue-details>
  2826     <p class=short-desc>{{short_desc}}
  2827    </div>
  2828   </div>
  2830   <script src="../shared/scripts/BugzillaTrackerUtil.js"
  2831    type="text/javascript"></script>
  2832   <script src="../shared/scripts/BugzillaTracker.js" type="text/javascript"></script>
  2833   <script type="text/javascript">
  2834               checkSpecificationIssues(‘</script>
  2835   <p><code class=property>CSS</code>’, ‘<code
  2836    class=property>Exclusions</code>’);
  2838   <h2 class=no-num id=change-log>Change Log</h2>
  2840   <h3 id=since-may-3rd-2012><span class=secno>5.7. </span>Since <a
  2841    href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd
  2842    2012</a></h3>
  2844   <ul>
  2845    <li>Added wrap-flow:minimum
  2847    <li>Clarified processing model
  2849    <li>Changed wrap-margin and wrap-padding to shape-margin and shape-padding
  2851    <li>Removed wrap shorthand
  2852   </ul>
  2854   <h3 id=since-december-13th-2011><span class=secno>5.8. </span>Since <a
  2855    href="http://www.w3.org/TR/2011/WD-css3-exclusions-20111213/">December
  2856    13th 2011</a></h3>
  2858   <ul>
  2859    <li>Clarified processing model
  2861    <li>Clarified interaction with floats
  2863    <li>Clarified that an exclusion element establishes a new block formatting
  2864     context
  2865   </ul>
  2866 </html>
  2867 <!-- Keep this comment at the end of the file
  2868 Local variables:
  2869 mode: sgml
  2870 sgml-declaration:"~/SGML/HTML4.decl"
  2871 sgml-default-doctype-name:"html"
  2872 sgml-minimize-attributes:t
  2873 sgml-nofill-elements:("pre" "style" "br")
  2874 sgml-live-element-indicator:t
  2875 sgml-omittag:nil
  2876 sgml-shorttag:nil
  2877 sgml-namecase-general:t
  2878 sgml-general-insert-case:lower
  2879 sgml-always-quote-attributes:t
  2880 sgml-indent-step:nil
  2881 sgml-indent-data:t
  2882 sgml-parent-document:nil
  2883 sgml-exposed-tags:nil
  2884 sgml-local-catalogs:nil
  2885 sgml-local-ecat-files:nil
  2886 End:
  2887 -->

mercurial