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

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

mercurial