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