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