- From: Rossen Atanassov via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 07 Feb 2012 16:58:42 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-exclusions
In directory hutz:/tmp/cvs-serv26557
Modified Files:
Exclusions.src.html Overview.html
Log Message:
Adding new styling for issues in the spec.
Removed the section for the proposed Processing model since it relied on a particular positioning scheme which is not in the scope of this module.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Overview.html,v
retrieving revision 1.27
retrieving revision 1.28
diff -u -d -r1.27 -r1.28
--- Overview.html 29 Jan 2012 06:29:55 -0000 1.27
+++ Overview.html 7 Feb 2012 16:58:40 -0000 1.28
@@ -30,31 +30,79 @@
.example-table tr td img {
width: 90%;
}
-
- a.toggle {
- position: fixed;
- top: 0.5em;
- right: 0.5em;
- font-size: smaller;
- color: gray;
- opacity: 0.2;
+
+ @media screen and (min-width: 68em){
+ .issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -22ex;
+ text-align: right;
+ margin-bottom: 1em;
+ }
+
+ div.issue-marker .issue-marker {
+ position: static;
+ width: auto;
+ margin-left: 0;
+ text-align: right;
+ }
+
+ div.issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -22ex;
+ }
}
- a.toggle:hover {
- opacity: 1;
- color: #46A4E9;
+ @media screen and (max-width: 68em){
+ .issue-marker {
+ margin-bottom: 1em;
+ }
+
+ .issue-marker a:link {
+ padding-left: 0.5em;
+ }
+ }
+
+ .issue-marker {
+ background:#eee;
+ border:1px solid #ddd;
+ font-size: 1em;
+ }
+
+ .issue-marker.wrapper {
+ background: none;
+ border: none;
+ }
+
+ .issue-marker a:link {
+ color: #c00;
+ background: none;
+ font-weight: normal;
+ padding-right: 0.5em;
+ }
+
+ .issue-details {
+ padding:0.5em;
+ font-size: 0.8em;
+ line-height: 1.5;
}
-
- .issue-marker a {
- background: #c00;
- color: white;
- font-weight: bold;
- padding: 0.5em;
- }
-
- .issue-marker-resolved a {
- background: green;
- }
+
+ .issue-details p{
+ padding:0;
+ margin:0;
+ }
+
+ .issue-details .status{
+ background:#333;
+ color:white;
+ float:left;
+ padding:0.15em 0.8em;
+ font-size:0.8em;
+ margin-right:0.8em;
+ text-transform:uppercase;
+ }
+
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
@@ -68,7 +116,7 @@
<h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 January
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 February
2012</h2>
<dl>
@@ -76,7 +124,7 @@
<dd><a
href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
- <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120129/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120129/</a></dd>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-exclusions-20120207/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120207/</a></dd>-->
<dt>Latest version:
@@ -138,9 +186,8 @@
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<p id=css-exclusions-define-arbitrary-areas-ar> CSS exclusions define
- arbitrary areas around which inline content can flow. Unlike CSS floats,
- which they extend, CSS exclusions can be positioned with any CSS
- positioning schemes.
+ arbitrary areas around which inline content can flow. CSS exclusions can
+ be defined on any CSS block-level elements.
<p id=css-shapes-control-the-geometric-shapes-> CSS Shapes control the
geometric shapes used for wrapping inline flow content outside or inside
@@ -241,10 +288,6 @@
<li id=exclusions-order-><a href="#exclusions-order"><span
class=secno>3.4. </span>Exclusions order</a>
-
- <li id=exclusions-implementation-note-><a
- href="#exclusions-implementation-note"><span class=secno>3.5.
- </span>Exclusions implementation note</a>
</ul>
<li id=shapes-4.1.-shapes-from-svg-syntax-4.1.1><a href="#shapes"><span
@@ -355,8 +398,14 @@
<p id=exclusion-area-><dfn id=exclusion-area>Exclusion area</dfn>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a></div>
+ <div class=issue-marker data-bug_id=15087 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a>
+ <div class=issue-details>
+ <p class=short-desc
+ id=interaction-of-floats-and-exclusions-how>Interaction of floats and
+ exclusions (Howcome's questions)</p>
+ </div>
+ </div>
<p id=the-area-used-for-excluding-inline-flow-> The area used for excluding
inline flow content around an exclusion element. The exclusion area is
@@ -374,8 +423,13 @@
<p id=wrapping-context-><dfn id=wrapping-context>Wrapping context</dfn>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a></div>
+ <div class=issue-marker data-bug_id=15086 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a>
+ <div class=issue-details>
+ <p class=short-desc id=should-the-wrapping-context-be-generic-a>should
+ the wrapping context be generic and include floats?</p>
+ </div>
+ </div>
<p id=the-wrapping-context-of-an-element-is-a-> The wrapping context of an
element is a collection of ‘<code class=css>exclusion
@@ -490,8 +544,9 @@
<dl>
<dt><dfn id=auto title="'wrap-flow'!!'auto'">auto</dfn>
- <dd> For floats an exclusion is created, for all other elements an
- exclusion is not created.
+ <dd> Exclusion is not created and inline flow content interacts with the
+ element as usual. For example it will wrap around floats and other
+ elements.
<dt><dfn id=both title="'wrap-flow'!!'both'">both</dfn>
@@ -555,37 +610,45 @@
<p class=caption id=combining-exclusions>Combining exclusions</p>
</div>
- <div>
- <p id=the-above-figure-illustrates-how-exclusi>The above figure
- illustrates how exclusions combine. The red box represents an element's
- content box. The A, B, C and D darker gray boxes represent exclusions in
- the element's wrapping context. A, B, C and D have their respective
- ‘<a href="#wrap-flow"><code
- class=property>wrap-flow</code></a>’ set to ‘<code
- class=property>both</code>’, ‘<code
- class=property>start</code>’, ‘<code
- class=property>end</code>’ and ‘<code
- class=property>clear</code>’ respectively. The lighter gray areas
- show the additional areas that are excluded for inline layout as a result
- of the ‘<a href="#wrap-flow"><code
- class=property>wrap-flow</code></a>’ value. For example, the area
- to the right of ‘<code class=property>B</code>’ cannot be
- used for inline layout because the ‘<a href="#wrap-flow"><code
- class=property>wrap-flow</code></a>’ for ‘<code
- class=property>B</code>’ is ‘<code
- class=property>start</code>’.</p>
+ <p id=the-above-figure-illustrates-how-exclusi> The above figure
+ illustrates how exclusions are combined. The outermost box represents an
+ element's content box. The A, B, C and D darker gray boxes represent
+ exclusions in the element's wrapping context. A, B, C and D have their
+ respective ‘<a href="#wrap-flow"><code
+ class=property>wrap-flow</code></a>’ set to ‘<code
+ class=property>both</code>’, ‘<code
+ class=property>start</code>’, ‘<code
+ class=property>end</code>’ and ‘<code
+ class=property>clear</code>’ respectively. The lighter gray areas
+ show the additional areas that are excluded for inline layout as a result
+ of the ‘<a href="#wrap-flow"><code
+ class=property>wrap-flow</code></a>’ value. For example, the area to
+ the right of ‘<code class=property>B</code>’ cannot be used
+ for inline layout because the ‘<a href="#wrap-flow"><code
+ class=property>wrap-flow</code></a>’ for ‘<code
+ class=property>B</code>’ is ‘<code
+ class=property>start</code>’.
- <p id=the-background-blue-area-shows-what-area>The background ‘<code
- class=property>blue</code>’ area shows what areas are available for
- inline content layout. All areas represented with a light or dark shade
- of gray are not available for inline content layout.</p>
- </div>
+ <p id=the-background-blue-area-shows-what-area> The background ‘<code
+ class=property>blue</code>’ area shows what areas are available for
+ inline content layout. All areas represented with a light or dark shade of
+ gray are not available for inline content layout.
- <div class="issue-marker issue-marker-resolved"><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a></div>
+ <div class=issue-marker data-bug_id=15088 data-bug_status=FIXED> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a>
+ <div class=issue-details>
+ <p class=short-desc id=add-an-example-with-auto-height-content->Add an
+ example with auto-height content and z-index for exclusions order.</p>
+ </div>
+ </div>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a></div>
+ <div class=issue-marker data-bug_id=15084 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a>
+ <div class=issue-details>
+ <p class=short-desc id=fluidity-of-the-layout-with-respect-to-d>Fluidity
+ of the layout with respect to different amounts of content</p>
+ </div>
+ </div>
<div class=example>
<p id=the-wrap-flow-property-values-applied-to> The ‘<a
@@ -820,8 +883,12 @@
href="#wrap-through"><code class=property>wrap-through</code></a>’
Property</h4>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a></div>
+ <div class=issue-marker data-bug_id=15085 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a>
+ <div class=issue-details>
+ <p class=short-desc id=do-we-need-wrap-through>do we need wrap-through?</p>
+ </div>
+ </div>
<table class=propdef>
<tbody>
@@ -1028,14 +1095,21 @@
</div>
<!-- End section "Order of Exclusions" -->
- <h3 id=exclusions-implementation-note><span class=secno>3.5.
- </span>Exclusions implementation note</h3>
-
- <div class=issue-marker> <a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Bug-15183</a></div>
+ <div class=issue-marker data-bug_id=15183 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Bug-15183</a>
+ <div class=issue-details>
+ <p class=short-desc id=is-the-css-exclusions-processing-model-i>Is the
+ CSS exclusions processing model incorrect?</p>
+ </div>
+ </div>
- <div class=issue-marker> <a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Bug-15083</a></div>
+ <div class=issue-marker data-bug_id=15083 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Bug-15083</a>
+ <div class=issue-details>
+ <p class=short-desc id=concerns-over-error-accumulation-vs.-per>Concerns
+ over Error accumulation vs. performance</p>
+ </div>
+ </div>
<p class=issue id=the-rules-for-exclusions-order-and-exclu> The rules for
exclusions order and exclusions on absolutely positioned elements
@@ -1047,47 +1121,19 @@
positioning (as these sections of this specification do) or on top of
floats.
- <p id=this-section-is-not-normative.0><em>This section is not
- normative.</em>
-
- <p id=exclusions-can-be-specified-on-positione> Exclusions can be specified
- on positioned elements and elements can be positioned from their <a
- href="http://www.w3.org/TR/CSS21/visudet.html#static-position">static
- position</a>. Since, the static position of such elements depends on the
- inline flow content affected by the exclusion itself; there is a circular
- dependency between the two layout tasks. To break this circular dependency
- a two-pass layout approach is recommended. The first layout pass computes
- the static positions of all auto-positioned exclusions by laying out all
- content besides exclusions. The second pass is layout of all elements
- including all exclusions. Exclusions that depend on their static position
- will use the position calculated during the first layout pass.
-
- <p class=note id=note-this-may-cause-exclusions-to-overla> Note, this may
- cause exclusions to overlap or be distant from their static position
- (compared to non-exclusions auto-positioned elements).
-
- <p id=similar-dependency-exists-for-exclusions> Similar dependency exists
- for exclusions whose size or position is specified in percentage and the
- containing block size is specified as ‘<code
- class=property>auto</code>’. In such cases the size or position of
- the exclusion is calculated based on the size of the containing block
- calculated in the first layout pass.
-
- <p id=exclusions-can-be-positioned-on-all-leve> Exclusions can be
- positioned on all levels of nested elements. If layout is restarted on
- every level of nesting, the time to complete layout will be exponential.
- To avoid multiple layout passes, the restart of the second layout pass
- should be scoped to the top-most containing block of exclusions.
- Similarly, restarting layout for the entire document is not necessary
- unless there are exclusions whose containing block is the initial
- containing block.</p>
- <!-- End section "Processing Model of Exclusions" -->
+ <p class=note id=this-module-does-not-depend-on-any-parti> This module does
+ not depend on any particular positioning scheme.</p>
<!-- End section "Exclusions" -->
<h2 id=shapes><span class=secno>4. </span>Shapes</h2>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15091 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Bug-15091</a><br>
+
+ <div class=issue-details>
+ <p class=short-desc id=simplify-the-syntax-for-shapes>Simplify the syntax
+ for shapes</p>
+ </div>
</div>
<p id=shapes-define-arbitrary-geometric-contou> Shapes define arbitrary
@@ -1100,14 +1146,6 @@
an element's <span>content shape</span> and the element's inline content
will flow within that shape.
- <p id=flow-container-><dfn id=flow-container>Flow Container</dfn>
-
- <p id=a-flow-container-is-an-element-with-a-di> A flow container is an
- element with a ‘<code class=property>display</code>’ value
- that is computed as ‘<code class=property>block</code>’,
- ‘<code class=property>table-cell</code>’ or ‘<code
- class=property>inline-block</code>’.
-
<p class=note id=note-while-the-boundaries-used-for-wrapp> Note, while the
boundaries used for wrapping inline flow content outside and inside an
element can be defined using shapes, the actual box model does not change.
@@ -1151,7 +1189,9 @@
are supported by the CSS shapes module.
<dl>
- <dt>rectangle(x, y, width, height, [[rx], ry])
+ <dt>rectangle(<length>{4} [<‘<code
+ class=property>border-corner-shape</code>’>
+ <length>{1,2}]? )
<dd>
<ul>
@@ -1167,7 +1207,7 @@
off the corners of the rectangle
</ul>
- <dt>circle(cx, cy, r)
+ <dt>circle(<lentgh>{3})
<dd>
<ul>
@@ -1181,7 +1221,7 @@
the circle
</ul>
- <dt>ellipse(cx, cy, rx, ry)
+ <dt>ellipse(<lentgh>{4})
<dd>
<ul>
@@ -1198,7 +1238,7 @@
y-axis radius of the ellipse
</ul>
- <dt>polygon([fillRule], x1, y1, x2, y2, x3, y3, … xn, yn)
+ <dt>polygon([<fill-rule>,]? <length>{2}#)
<dd>
<ul>
@@ -1270,12 +1310,35 @@
<h3 id=shapes-from-image><span class=secno>4.2. </span>Shapes from Image</h3>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15093 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Bug-15093</a><br>
- <a
+
+ <div class=issue-details>
+ <p class=short-desc id=do-we-need-to-provide-properties-to-repe> Do we
+ need to provide properties to repeat exclusion images as for the
+ background-image property?</p>
+ </div>
+ </div>
+
+ <div class=issue-marker data-bug_id=15090 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Bug-15090</a><br>
- <a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Bug-15092</a></div>
+
+ <div class=issue-details>
+ <p class=short-desc id=use-the-contour-keyword.-ltimg-idshape-m> Use the
+ contour() keyword. <img id=shape-me url=foo><style>#shape-me
+ { shape-outside: contour; }</style> //equal to ‘<code
+ class=css>shape-outside: url(foo)</code>’ shape-outside: attr(src
+ as url);</p>
+ </div>
+ </div>
+
+ <div class=issue-marker data-bug_id=15092 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Bug-15092</a>
+ <div class=issue-details>
+ <p class=short-desc id=specify-what-happens-with-animated-image>Specify
+ what happens with animated images</p>
+ </div>
+ </div>
<p id=another-way-of-defining-shapes-is-by-spe> Another way of defining
shapes is by specifying a source image whose alpha channel is used to
@@ -1909,9 +1972,6 @@
<li>Exclusion element, <a href="#exclusion-element"
title="Exclusion element"><strong>2.</strong></a>
- <li>Flow Container, <a href="#flow-container"
- title="Flow Container"><strong>4.</strong></a>
-
<li>outside-inside, <a href="#outside-and-inside"
title=outside-inside><strong>2.</strong></a>
Index: Exclusions.src.html
===================================================================
RCS file: /sources/public/csswg/css3-exclusions/Exclusions.src.html,v
retrieving revision 1.26
retrieving revision 1.27
diff -u -d -r1.26 -r1.27
--- Exclusions.src.html 29 Jan 2012 06:29:55 -0000 1.26
+++ Exclusions.src.html 7 Feb 2012 16:58:40 -0000 1.27
@@ -28,31 +28,79 @@
.example-table tr td img {
width: 90%;
}
-
- a.toggle {
- position: fixed;
- top: 0.5em;
- right: 0.5em;
- font-size: smaller;
- color: gray;
- opacity: 0.2;
+
+ @media screen and (min-width: 68em){
+ .issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -22ex;
+ text-align: right;
+ margin-bottom: 1em;
+ }
+
+ div.issue-marker .issue-marker {
+ position: static;
+ width: auto;
+ margin-left: 0;
+ text-align: right;
+ }
+
+ div.issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -22ex;
+ }
}
- a.toggle:hover {
- opacity: 1;
- color: #46A4E9;
+ @media screen and (max-width: 68em){
+ .issue-marker {
+ margin-bottom: 1em;
+ }
+
+ .issue-marker a:link {
+ padding-left: 0.5em;
+ }
+ }
+
+ .issue-marker {
+ background:#eee;
+ border:1px solid #ddd;
+ font-size: 1em;
+ }
+
+ .issue-marker.wrapper {
+ background: none;
+ border: none;
+ }
+
+ .issue-marker a:link {
+ color: #c00;
+ background: none;
+ font-weight: normal;
+ padding-right: 0.5em;
+ }
+
+ .issue-details {
+ padding:0.5em;
+ font-size: 0.8em;
+ line-height: 1.5;
}
-
- .issue-marker a {
- background: #c00;
- color: white;
- font-weight: bold;
- padding: 0.5em;
- }
-
- .issue-marker-resolved a {
- background: green;
- }
+
+ .issue-details p{
+ padding:0;
+ margin:0;
+ }
+
+ .issue-details .status{
+ background:#333;
+ color:white;
+ float:left;
+ padding:0.15em 0.8em;
+ font-size:0.8em;
+ margin-right:0.8em;
+ text-transform:uppercase;
+ }
+
</style>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" />
@@ -99,8 +147,7 @@
<p>
CSS exclusions define arbitrary areas around which inline content can flow.
- Unlike CSS floats, which they extend, CSS exclusions can be positioned with any
- CSS positioning schemes.
+ CSS exclusions can be defined on any CSS block-level elements.
</p>
<p>
CSS Shapes control the geometric shapes used for wrapping inline
@@ -143,8 +190,12 @@
</p>
<dfn>Exclusion area</dfn>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a></div>
+ <div class="issue-marker" data-bug_id="15087" data-bug_status="NEW">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15087">Bug-15087</a>
+ <div class="issue-details">
+ <p class="short-desc">Interaction of floats and exclusions (Howcome's questions)</p>
+ </div>
+ </div>
<p>
The area used for excluding inline flow content around an exclusion element. The
exclusion area is equivalent to the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">
@@ -156,8 +207,12 @@
</p>
<dfn>Wrapping context</dfn>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a></div>
+ <div class="issue-marker" data-bug_id="15086" data-bug_status="NEW">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15086">Bug-15086</a>
+ <div class="issue-details">
+ <p class="short-desc">should the wrapping context be generic and include floats?</p>
+ </div>
+ </div>
<p>
The wrapping context of an element is a collection of 'exclusion areas'. The wrapping
@@ -249,7 +304,8 @@
<dl>
<dt><dfn title="'wrap-flow'!!'auto'">auto</dfn></dt>
<dd>
- For floats an exclusion is created, for all other elements an exclusion is not created.
+ Exclusion is not created and inline flow content interacts with the element as usual.
+ For example it will wrap around floats and other elements.
</dd>
<dt><dfn title="'wrap-flow'!!'both'">both</dfn></dt>
<dd>
@@ -304,25 +360,34 @@
<p class="caption">Combining exclusions</p>
</div>
- <div>
- <p>The above figure illustrates how exclusions combine. The red box represents an element's
- content box. The A, B, C and D darker gray boxes represent exclusions in the element's
- wrapping context. A, B, C and D have their respective
- 'wrap-flow' set to 'both', 'start', 'end' and 'clear' respectively. The lighter gray
- areas show the additional areas that are excluded for inline layout as a result of the
- 'wrap-flow' value. For example, the area to the right of 'B' cannot be used for inline
- layout because the 'wrap-flow' for 'B' is 'start'.</p>
-
- <p>The background 'blue' area shows what areas are available for inline content layout.
- All areas represented with a light or dark shade of gray are not available for inline
- content layout.</p>
- </div>
+ <p>
+ The above figure illustrates how exclusions are combined. The outermost box represents
+ an element's content box. The A, B, C and D darker gray boxes represent exclusions
+ in the element's wrapping context. A, B, C and D have their respective 'wrap-flow'
+ set to 'both', 'start', 'end' and 'clear' respectively. The lighter gray areas show
+ the additional areas that are excluded for inline layout as a result of the 'wrap-flow'
+ value. For example, the area to the right of 'B' cannot be used for inline layout
+ because the 'wrap-flow' for 'B' is 'start'.
+ </p>
+ <p>
+ The background 'blue' area shows what areas are available for inline content layout.
+ All areas represented with a light or dark shade of gray are not available for inline
+ content layout.
+ </p>
- <div class="issue-marker issue-marker-resolved"><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a></div>
+ <div class="issue-marker" data-bug_id="15088" data-bug_status="FIXED">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15088">Bug-15088</a>
+ <div class="issue-details">
+ <p class="short-desc">Add an example with auto-height content and z-index for exclusions order.</p>
+ </div>
+ </div>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a></div>
+ <div class="issue-marker" data-bug_id="15084" data-bug_status="NEW">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15084">Bug-15084</a>
+ <div class="issue-details">
+ <p class="short-desc">Fluidity of the layout with respect to different amounts of content</p>
+ </div>
+ </div>
<div class="example">
<p>
@@ -500,8 +565,12 @@
<h4 id="wrap-through-property">The 'wrap-through' Property</h4>
- <div class=issue-marker><a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a></div>
+ <div class="issue-marker" data-bug_id="15085" data-bug_status="NEW">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15085">Bug-15085</a>
+ <div class="issue-details">
+ <p class="short-desc">do we need wrap-through?</p>
+ </div>
+ </div>
<table class="propdef">
<tr>
@@ -672,15 +741,19 @@
</div>
<!-- End section "Order of Exclusions" -->
-
- <h3 id="exclusions-implementation-note">Exclusions implementation note</h3>
-
- <div class="issue-marker">
+
+ <div class="issue-marker" data-bug_id="15183" data-bug_status="NEW">
<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15183">Bug-15183</a>
+ <div class="issue-details">
+ <p class="short-desc">Is the CSS exclusions processing model incorrect?</p>
+ </div>
</div>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15083" data-bug_status="NEW">
<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15083">Bug-15083</a>
+ <div class="issue-details">
+ <p class="short-desc">Concerns over Error accumulation vs. performance</p>
+ </div>
</div>
<p class="issue">
The rules for exclusions order and exclusions on absolutely positioned elements
@@ -692,44 +765,19 @@
top of floats.
</p>
- <p><em>This section is not normative.</em></p>
- <p>
- Exclusions can be specified on positioned elements and elements can be positioned
- from their <a href="http://www.w3.org/TR/CSS21/visudet.html#static-position">static
- position</a>. Since, the static position of such elements depends on the inline
- flow content affected by the exclusion itself; there is a circular dependency between
- the two layout tasks. To break this circular dependency a two-pass layout approach
- is recommended. The first layout pass computes the static positions of all auto-positioned
- exclusions by laying out all content besides exclusions. The second pass is layout
- of all elements including all exclusions. Exclusions that depend on their static
- position will use the position calculated during the first layout pass.
- </p>
<p class="note">
- Note, this may cause exclusions to overlap or be distant from their static position
- (compared to non-exclusions auto-positioned elements).
- </p>
- <p>
- Similar dependency exists for exclusions whose size or position is specified in
- percentage and the containing block size is specified as 'auto'. In such cases the
- size or position of the exclusion is calculated based on the size of the containing
- block calculated in the first layout pass.
- </p>
- <p>
- Exclusions can be positioned on all levels of nested elements. If layout is
- restarted on every level of nesting, the time to complete layout will be exponential.
- To avoid multiple layout passes, the restart of the second layout pass
- should be scoped to the top-most containing block of exclusions. Similarly, restarting
- layout for the entire document is not necessary unless there are exclusions whose
- containing block is the initial containing block.
+ This module does not depend on any particular positioning scheme.
</p>
- <!-- End section "Processing Model of Exclusions" -->
<!-- End section "Exclusions" -->
<h2 id="shapes">Shapes</h2>
- <div class="issue-marker">
- <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Bug-15091</a><br />
+ <div class="issue-marker" data-bug_id="15091" data-bug_status="NEW">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15091">Bug-15091</a><br />
+ <div class="issue-details">
+ <p class="short-desc">Simplify the syntax for shapes</p>
+ </div>
</div>
<p>
@@ -740,11 +788,6 @@
content will flow within that shape.
</p>
- <dfn>Flow Container</dfn>
- <p>
- A flow container is an element with a 'display' value that is computed as 'block',
- 'table-cell' or 'inline-block'.
- </p>
<p class="note">
Note, while the boundaries used for wrapping inline flow content outside and inside
an element can be defined using shapes, the actual box model does not change. If
@@ -781,7 +824,7 @@
<h4 id="supported-svg-shapes">Supported SVG Shapes</h4>
The following SVG shapes are supported by the CSS shapes module.
<dl>
- <dt>rectangle(x, y, width, height, [[rx], ry])</dt>
+ <dt>rectangle(<length>{4} [<'border-corner-shape'> <length>{1,2}]? )</dt>
<dd>
<ul>
<li><strong>x, y, width and height</strong> - define the bounding box of the rectangle</li>
@@ -791,7 +834,7 @@
to round off the corners of the rectangle</li>
</ul>
</dd>
- <dt>circle(cx, cy, r)</dt>
+ <dt>circle(<lentgh>{3})</dt>
<dd>
<ul>
<li><strong>cx</strong> - The x-axis coordinate of the center of the circle</li>
@@ -799,7 +842,7 @@
<li><strong>r</strong> - The radius of the circle</li>
</ul>
</dd>
- <dt>ellipse(cx, cy, rx, ry)</dt>
+ <dt>ellipse(<lentgh>{4})</dt>
<dd>
<ul>
<li><strong>cx</strong> - The x-axis coordinate of the center of the ellipse</li>
@@ -808,7 +851,7 @@
<li><strong>ry</strong> - The y-axis radius of the ellipse</li>
</ul>
</dd>
- <dt>polygon([fillRule], x1, y1, x2, y2, x3, y3, … xn, yn)</dt>
+ <dt>polygon([<fill-rule>,]? <length>{2}#)</dt>
<dd>
<ul>
<li><strong>fillRule</strong> - The filling rule used to determine the interior of the
@@ -820,7 +863,7 @@
<p>
If the polygon is not closed the user-agent will automatically add a new vertex
at the end.</p>
- <br>
+ <br/>
</dd>
</dl>
@@ -868,10 +911,32 @@
<h3 id="shapes-from-image">Shapes from Image</h3>
- <div class=issue-marker>
+ <div class="issue-marker" data-bug_id="15093" data-bug_status="NEW">
<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15093">Bug-15093</a><br />
+ <div class="issue-details">
+ <p class="short-desc">
+ Do we need to provide properties to repeat exclusion images as for the
+ background-image property?
+ </p>
+ </div>
+ </div>
+
+ <div class="issue-marker" data-bug_id="15090" data-bug_status="NEW">
<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15090">Bug-15090</a><br />
+ <div class="issue-details">
+ <p class="short-desc">
+ Use the contour() keyword. <img id=shape-me url=foo><style>#shape-me
+ { shape-outside: contour; }</style> //equal to 'shape-outside: url(foo)'
+ shape-outside: attr(src as url);
+ </p>
+ </div>
+ </div>
+
+ <div class="issue-marker" data-bug_id="15092" data-bug_status="NEW">
<a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15092">Bug-15092</a>
+ <div class="issue-details">
+ <p class="short-desc">Specify what happens with animated images</p>
+ </div>
</div>
<p>
Received on Tuesday, 7 February 2012 17:00:46 UTC