- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 11 Nov 2011 18:12:34 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-positioning
In directory hutz:/tmp/cvs-serv25937
Modified Files:
Overview.html Overview.src.html
Log Message:
Reformatted height calculations for absolute
Rewrote the section on center positioning height and width to account for all cases
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- Overview.html 9 Nov 2011 22:59:05 -0000 1.10
+++ Overview.html 11 Nov 2011 18:12:32 -0000 1.11
@@ -58,14 +58,14 @@
<h1>CSS Positioned Layout Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 November
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 November
2011</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css3-positioning-20111109/">http://dev.w3.org/csswg/css3-positioning/</a>
+ href="http://www.w3.org/TR/2011/ED-css3-positioning-20111111/">http://dev.w3.org/csswg/css3-positioning/</a>
<dt>Latest version:
@@ -1913,8 +1913,9 @@
‘<code class=css>ltr</code>’ (‘<code
class=css>rtl</code>’), set ‘<code
class=property>margin-left</code>’ (‘<code
- class=property>margin-right</code>’) to zero and solve for
- ‘<code class=property>margin-right</code>’ (‘<code
+ class=property>margin-right</code>’) to ‘<code
+ class=css>0</code>’ and solve for ‘<code
+ class=property>margin-right</code>’ (‘<code
class=property>margin-left</code>’). If one of ‘<code
class=property>margin-left</code>’ or ‘<code
class=property>margin-right</code>’ is ‘<code
@@ -1942,7 +1943,7 @@
class=css>auto</code>’ and ‘<a href="#right"><code
class=property>right</code></a>’ is not ‘<code
class=css>auto</code>’, then the width is shrink-to-fit. Then solve
- for ‘<a href="#left"><code class=property>left</code></a>’
+ for ‘<a href="#left"><code class=property>left</code></a>’.
<li id=if-left-and-right-are-auto-and-width-is-> If ‘<a
href="#left"><code class=property>left</code></a>’ and ‘<a
@@ -1969,7 +1970,8 @@
class=css>auto</code>’ and ‘<a href="#left"><code
class=property>left</code></a>’ is not ‘<code
class=css>auto</code>’, then the width is shrink-to-fit. Then solve
- for ‘<a href="#right"><code class=property>right</code></a>’
+ for ‘<a href="#right"><code class=property>right</code></a>’.
+
<li id=if-left-is-auto-width-and-right-are-not->If ‘<a
href="#left"><code class=property>left</code></a>’ is ‘<code
@@ -1977,7 +1979,7 @@
class=property>width</code>’ and ‘<a href="#right"><code
class=property>right</code></a>’ are not ‘<code
class=css>auto</code>’, then solve for ‘<a href="#left"><code
- class=property>left</code></a>’
+ class=property>left</code></a>’.
<li id=if-width-is-auto-left-and-right-are-not->If ‘<code
class=property>width</code>’ is ‘<code
@@ -1985,7 +1987,7 @@
class=property>left</code></a>’ and ‘<a href="#right"><code
class=property>right</code></a>’ are not ‘<code
class=css>auto</code>’, then solve for ‘<code
- class=property>width</code>’
+ class=property>width</code>’.
<li id=if-right-is-auto-left-and-width-are-not->If ‘<a
href="#right"><code class=property>right</code></a>’ is
@@ -1993,7 +1995,7 @@
class=property>left</code></a>’ and ‘<code
class=property>width</code>’ are not ‘<code
class=css>auto</code>’, then solve for ‘<a
- href="#right"><code class=property>right</code></a>’
+ href="#right"><code class=property>right</code></a>’.
</ol>
<!-- End section: The width of absolute, page or fixed positioned, non-replaced element -->
@@ -2010,58 +2012,98 @@
<span>'border-right-width'</span> + <span>'margin-right'</span> + 'right'
= <span>width of containing block</span> </code>
- <p id=first-set-any-auto-values-for-margin-lef>First set any ‘<code
+ <p id=if-all-three-of-left-width-and-right-are0> If all three of ‘<a
+ href="#left"><code class=property>left</code></a>’, ‘<code
+ class=property>width</code>’, and ‘<a href="#right"><code
+ class=property>right</code></a>’ are ‘<code
+ class=css>auto</code>’: First set any ‘<code
class=css>auto</code>’ values for ‘<code
class=property>margin-left</code>’ and ‘<code
class=property>margin-right</code>’ to ‘<code
- class=css>0</code>’.
+ class=css>0</code>’, then the ‘<code
+ class=property>width</code>’ calculated as shrink-to-fit, and
+ finally apply rule number <em>two</em> below.
- <p id=if-width-is-not-auto-and-margin-left-bor> If ‘<code
- class=property>width</code>’ is not ‘<code
- class=css>auto</code>’ and ‘<code
- class=property>margin-left</code>’ + ‘<code
- class=property>border-left-width</code>’ + ‘<code
- class=property>padding-left</code>’ + ‘<code
- class=property>width</code>’ + ‘<code
- class=property>padding-right</code>’ + ‘<code
- class=property>border-right-width</code>’ + ‘<code
- class=property>margin-right</code>’ (plus any of ‘<a
- href="#left"><code class=property>left</code></a>’ or ‘<a
- href="#right"><code class=property>right</code></a>’ that are not
- ‘<code class=css>auto</code>’) is larger than the width of the
- <a href="#containing-block0">containing block</a>, then any ‘<code
- class=css>auto</code>’ values for ‘<a href="#left"><code
- class=property>left</code></a>’ or ‘<a href="#right"><code
- class=property>right</code></a>’ are, for the following rules,
- treated as ‘<code class=css>0</code>’.
+ <p id=if-none-of-the-three-is-auto-if-both-mar0> If none of the three is
+ ‘<code class=css>auto</code>’: If both ‘<code
+ class=property>margin-left</code>’ and ‘<code
+ class=property>margin-right</code>’ are ‘<code
+ class=css>auto</code>’, solve the equation under the extra
+ constraint that the two margins get equal values, unless this would make
+ them negative, in which case when direction of the containing block is
+ ‘<code class=css>ltr</code>’ (‘<code
+ class=css>rtl</code>’), set ‘<code
+ class=property>margin-left</code>’ (‘<code
+ class=property>margin-right</code>’) to ‘<code
+ class=css>0</code>’ and solve for ‘<code
+ class=property>margin-right</code>’ (‘<code
+ class=property>margin-left</code>’). If one of ‘<code
+ class=property>margin-left</code>’ or ‘<code
+ class=property>margin-right</code>’ is ‘<code
+ class=css>auto</code>’, solve the equation for that value. If the
+ values are over-constrained, ignore the values for ‘<a
+ href="#left"><code class=property>left</code></a>’ and ‘<a
+ href="#right"><code class=property>right</code></a>’ and solve the
+ equation so both propeties get equal values. This horizontally centers the
+ element with respect to the edges of the <a
+ href="#containing-block0">containing block</a>.
- <p id=if-all-of-the-above-have-a-computed-valu> If all of the above have a
- computed value other than ‘<code class=css>auto</code>’, the
- values are said to be "over-constrained" and one of the used values will
- have to be different from its computed value. If the ‘<code
- class=property>direction</code>’ property of the <a
- href="#containing-block0">containing block</a> has the value ‘<code
- class=css>ltr</code>’, the specified value of ‘<a
- href="#right"><code class=property>right</code></a>’ is ignored and
- the value is calculated so as to make the equality true. If the value of
- ‘<code class=property>direction</code>’ is ‘<code
- class=css>rtl</code>’, this happens to ‘<a href="#left"><code
- class=property>left</code></a>’ instead.
+ <p id=otherwise-set-auto-values-for-margin-lef0> Otherwise, set
+ ‘<code class=css>auto</code>’ values for ‘<code
+ class=property>margin-left</code>’ and ‘<code
+ class=property>margin-right</code>’ to ‘<code
+ class=css>0</code>’, and pick one of the following six rules that
+ apply.
- <p id=if-there-is-exactly-one-value-specified-> If there is exactly one
- value specified as ‘<code class=css>auto</code>’, its used
- value follows from the equality.
+ <ol>
+ <li id=if-left-and-width-are-auto-and-right-is-0> If ‘<a
+ href="#left"><code class=property>left</code></a>’ and ‘<code
+ class=property>width</code>’ are ‘<code
+ class=css>auto</code>’ and ‘<a href="#right"><code
+ class=property>right</code></a>’ is not ‘<code
+ class=css>auto</code>’, then the width is shrink-to-fit. Then solve
+ for ‘<a href="#left"><code class=property>left</code></a>’.
- <p id=if-width-is-set-to-auto-then-the-width-i>If ‘<code
- class=property>width</code>’ is set to ‘<code
- class=css>auto</code>’, then the width is shrink-to-fit.
+ <li id=if-both-left-and-right-are-auto-their-us> If both ‘<a
+ href="#left"><code class=property>left</code></a>’ and ‘<a
+ href="#right"><code class=property>right</code></a>’ are
+ ‘<code class=css>auto</code>’, their used values are equal.
+ This horizontally centers the element with respect to the edges of the <a
+ href="#containing-block0">containing block</a>.
- <p id=if-both-left-and-right-are-auto-their-us> If both ‘<a
- href="#left"><code class=property>left</code></a>’ and ‘<a
- href="#right"><code class=property>right</code></a>’ are
- ‘<code class=css>auto</code>’, their used values are equal.
- This horizontally centers the element with respect to the edges of the <a
- href="#containing-block0">containing block</a>.</p>
+ <li id=if-width-and-right-are-auto-and-left-is-0> If ‘<code
+ class=property>width</code>’ and ‘<a href="#right"><code
+ class=property>right</code></a>’ are ‘<code
+ class=css>auto</code>’ and ‘<a href="#left"><code
+ class=property>left</code></a>’ is not ‘<code
+ class=css>auto</code>’, then the width is shrink-to-fit. Then solve
+ for ‘<a href="#right"><code class=property>right</code></a>’.
+
+
+ <li id=if-left-is-auto-width-and-right-are-not-0>If ‘<a
+ href="#left"><code class=property>left</code></a>’ is ‘<code
+ class=css>auto</code>’, ‘<code
+ class=property>width</code>’ and ‘<a href="#right"><code
+ class=property>right</code></a>’ are not ‘<code
+ class=css>auto</code>’, then solve for ‘<a href="#left"><code
+ class=property>left</code></a>’.
+
+ <li id=if-width-is-auto-left-and-right-are-not-0>If ‘<code
+ class=property>width</code>’ is ‘<code
+ class=css>auto</code>’, ‘<a href="#left"><code
+ class=property>left</code></a>’ and ‘<a href="#right"><code
+ class=property>right</code></a>’ are not ‘<code
+ class=css>auto</code>’, then solve for ‘<code
+ class=property>width</code>’.
+
+ <li id=if-right-is-auto-left-and-width-are-not-0>If ‘<a
+ href="#right"><code class=property>right</code></a>’ is
+ ‘<code class=css>auto</code>’, ‘<a href="#left"><code
+ class=property>left</code></a>’ and ‘<code
+ class=property>width</code>’ are not ‘<code
+ class=css>auto</code>’, then solve for ‘<a
+ href="#right"><code class=property>right</code></a>’.
+ </ol>
<!-- End section: The width of a center positioned, non-replaced element -->
<h3 id=width-of-absolute-replaced-elements><span class=secno>7.3.
@@ -2220,9 +2262,13 @@
href="#top"><code class=property>top</code></a>’, ‘<code
class=property>height</code>’, and ‘<a href="#bottom"><code
class=property>bottom</code></a>’ are ‘<code
- class=css>auto</code>’, set ‘<a href="#top"><code
- class=property>top</code></a>’ to the static position and apply rule
- number <em>three</em> below.
+ class=css>auto</code>’: First set any ‘<code
+ class=css>auto</code>’ values for ‘<code
+ class=property>margin-top</code>’ and ‘<code
+ class=property>margin-bottom</code>’ to ‘<code
+ class=css>0</code>’, then set ‘<a href="#top"><code
+ class=property>top</code></a>’ to the static position, and finally
+ apply rule number <em>three</em> below.
<p id=if-none-of-the-three-are-auto-if-both-ma> If none of the three are
‘<code class=css>auto</code>’: If both ‘<code
@@ -2237,86 +2283,67 @@
href="#bottom"><code class=property>bottom</code></a>’ and solve for
that value.
- <p id=otherwise-pick-the-one-of-the-following->Otherwise, pick the one of
- the following six rules that applies.
+ <p id=otherwise-set-auto-values-for-margin-top> Otherwise, set ‘<code
+ class=css>auto</code>’ values for ‘<code
+ class=property>margin-top</code>’ and ‘<code
+ class=property>margin-bottom</code>’ to ‘<code
+ class=css>0</code>’, and pick one of the following six rules that
+ apply.
<ol>
- <li id=top-and-height-are-auto-and-bottom-is-no> ‘<a
+ <li id=if-top-and-height-are-auto-and-bottom-is> If ‘<a
href="#top"><code class=property>top</code></a>’ and ‘<code
class=property>height</code>’ are ‘<code
class=css>auto</code>’ and ‘<a href="#bottom"><code
class=property>bottom</code></a>’ is not ‘<code
class=css>auto</code>’, then the height is based on the <a
href="#root-height">‘<code class=css>Auto</code>’ heights for
- block formatting context roots</a>, set ‘<code
- class=css>auto</code>’ values for ‘<code
- class=property>margin-top</code>’ and ‘<code
- class=property>margin-bottom</code>’ to ‘<code
- class=css>0</code>’, and solve for ‘<a href="#top"><code
- class=property>top</code></a>’.
+ block formatting context roots</a>, and solve for ‘<a
+ href="#top"><code class=property>top</code></a>’.
- <li id=top-and-bottom-are-auto-and-height-is-no> ‘<a
+ <li id=if-top-and-bottom-are-auto-and-height-is> If ‘<a
href="#top"><code class=property>top</code></a>’ and ‘<a
href="#bottom"><code class=property>bottom</code></a>’ are
‘<code class=css>auto</code>’ and ‘<code
class=property>height</code>’ is not ‘<code
class=css>auto</code>’, then set ‘<a href="#top"><code
- class=property>top</code></a>’ to the static position, set
- ‘<code class=css>auto</code>’ values for ‘<code
- class=property>margin-top</code>’ and ‘<code
- class=property>margin-bottom</code>’ to ‘<code
- class=css>0</code>’, and solve for ‘<a href="#bottom"><code
+ class=property>top</code></a>’ to the static position, then solve
+ for ‘<a href="#bottom"><code
class=property>bottom</code></a>’.
- <li id=height-and-bottom-are-auto-and-top-is-no> ‘<code
+ <li id=if-height-and-bottom-are-auto-and-top-is> If ‘<code
class=property>height</code>’ and ‘<a href="#bottom"><code
class=property>bottom</code></a>’ are ‘<code
class=css>auto</code>’ and ‘<a href="#top"><code
class=property>top</code></a>’ is not ‘<code
class=css>auto</code>’, then the height is based on the <a
href="#root-height">‘<code class=css>Auto</code>’ heights for
- block formatting context roots</a>, set ‘<code
- class=css>auto</code>’ values for ‘<code
- class=property>margin-top</code>’ and ‘<code
- class=property>margin-bottom</code>’ to ‘<code
- class=css>0</code>’, and solve for ‘<a href="#bottom"><code
- class=property>bottom</code></a>’.
+ block formatting context roots</a>, and solve for ‘<a
+ href="#bottom"><code class=property>bottom</code></a>’.
- <li id=top-is-auto-height-and-bottom-are-not-au> ‘<a
+ <li id=if-top-is-auto-height-and-bottom-are-not>If ‘<a
href="#top"><code class=property>top</code></a>’ is ‘<code
class=css>auto</code>’, ‘<code
class=property>height</code>’ and ‘<a href="#bottom"><code
class=property>bottom</code></a>’ are not ‘<code
- class=css>auto</code>’, then set ‘<code
- class=css>auto</code>’ values for ‘<code
- class=property>margin-top</code>’ and ‘<code
- class=property>margin-bottom</code>’ to ‘<code
- class=css>0</code>’, and solve for ‘<a href="#top"><code
+ class=css>auto</code>’, then solve for ‘<a href="#top"><code
class=property>top</code></a>’.
- <li id=height-is-auto-top-and-bottom-are-not-au> ‘<code
+ <li id=if-height-is-auto-top-and-bottom-are-not>If ‘<code
class=property>height</code>’ is ‘<code
class=css>auto</code>’, ‘<a href="#top"><code
class=property>top</code></a>’ and ‘<a href="#bottom"><code
class=property>bottom</code></a>’ are not ‘<code
- class=css>auto</code>’, then ‘<code
- class=css>auto</code>’ values for ‘<code
- class=property>margin-top</code>’ and ‘<code
- class=property>margin-bottom</code>’ are set to ‘<code
- class=css>0</code>’ and solve for ‘<code
+ class=css>auto</code>’, then solve for ‘<code
class=property>height</code>’.
- <li id=bottom-is-auto-top-and-height-are-not-au> ‘<a
+ <li id=if-bottom-is-auto-top-and-height-are-not>If ‘<a
href="#bottom"><code class=property>bottom</code></a>’ is
‘<code class=css>auto</code>’, ‘<a href="#top"><code
class=property>top</code></a>’ and ‘<code
class=property>height</code>’ are not ‘<code
- class=css>auto</code>’, then set ‘<code
- class=css>auto</code>’ values for ‘<code
- class=property>margin-top</code>’ and ‘<code
- class=property>margin-bottom</code>’ to ‘<code
- class=css>0</code>’ and solve for ‘<a href="#bottom"><code
- class=property>bottom</code></a>’.
+ class=css>auto</code>’, then solve for ‘<a
+ href="#bottom"><code class=property>bottom</code></a>’.
</ol>
<!-- End section: The height of absolute, page or fixed positioned, non-replaced element -->
@@ -2332,48 +2359,98 @@
<span>'border-bottom-width'</span> + <span>'margin-bottom'</span> +
'bottom' = <span>height of containing block</span> </code>
- <p id=if-height-is-not-auto-and-margin-top-bor> If ‘<code
- class=property>height</code>’ is not ‘<code
- class=css>auto</code>’ and ‘<code
- class=property>margin-top</code>’ + ‘<code
- class=property>border-top-width</code>’ + ‘<code
- class=property>padding-top</code>’ + ‘<code
- class=property>height</code>’ + ‘<code
- class=property>padding-bottom</code>’ + ‘<code
- class=property>border-bottom-width</code>’ + ‘<code
- class=property>margin-bottom</code>’ (plus any of ‘<a
- href="#top"><code class=property>top</code></a>’ or ‘<a
- href="#bottom"><code class=property>bottom</code></a>’ that are not
- ‘<code class=css>auto</code>’) is larger than the height of
- the <a href="#containing-block0">containing block</a>, then any
- ‘<code class=css>auto</code>’ values for ‘<a
- href="#top"><code class=property>top</code></a>’ or ‘<a
- href="#bottom"><code class=property>bottom</code></a>’ are, for the
- following rules, treated as zero.
+ <p id=if-all-three-of-top-height-and-bottom-ar0> If all three of ‘<a
+ href="#top"><code class=property>top</code></a>’, ‘<code
+ class=property>height</code>’, and ‘<a href="#bottom"><code
+ class=property>bottom</code></a>’ are ‘<code
+ class=css>auto</code>’: First set any ‘<code
+ class=css>auto</code>’ values for ‘<code
+ class=property>margin-top</code>’ and ‘<code
+ class=property>margin-bottom</code>’ to ‘<code
+ class=css>0</code>’, then the height is based on the <a
+ href="#root-height">‘<code class=css>Auto</code>’ heights for
+ block formatting context roots</a>, and finally apply rule number
+ <em>two</em> below.
- <p id=if-all-of-the-above-have-a-computed-valu0> If all of the above have a
- computed value other than ‘<code class=css>auto</code>’, the
- values are said to be "over-constrained" and one of the used values will
- have to be different from its computed value. Ignore the specified value
- of ‘<a href="#bottom"><code class=property>bottom</code></a>’
- and the value is calculated so as to make the equality true.
+ <p id=if-none-of-the-three-are-auto-if-both-ma0> If none of the three are
+ ‘<code class=css>auto</code>’: If both ‘<code
+ class=property>margin-top</code>’ and ‘<code
+ class=property>margin-bottom</code>’ are ‘<code
+ class=css>auto</code>’, solve the equation under the extra
+ constraint that the two margins get equal values. If one of ‘<code
+ class=property>margin-top</code>’ or ‘<code
+ class=property>margin-bottom</code>’ is ‘<code
+ class=css>auto</code>’, solve the equation for that value. If the
+ values are over-constrained, ignore the values for ‘<a
+ href="#top"><code class=property>top</code></a>’ and ‘<a
+ href="#bottom"><code class=property>bottom</code></a>’ and solve the
+ equation so both propeties get equal values. This vertically centers the
+ element with respect to the edges of the <a
+ href="#containing-block0">containing block</a>.
- <p id=if-there-is-exactly-one-value-specified-0> If there is exactly one
- value specified as ‘<code class=css>auto</code>’, its used
- value follows from the equality.
+ <p id=otherwise-set-auto-values-for-margin-top0> Otherwise, set
+ ‘<code class=css>auto</code>’ values for ‘<code
+ class=property>margin-top</code>’ and ‘<code
+ class=property>margin-bottom</code>’ to ‘<code
+ class=css>0</code>’, and pick one of the following six rules that
+ apply.
- <p id=if-height-is-set-to-auto-then-the-height> If ‘<code
- class=property>height</code>’ is set to ‘<code
- class=css>auto</code>’, then the height is based on the <a
- href="#root-height">‘<code class=css>Auto</code>’ heights for
- block formatting context roots</a>
+ <ol>
+ <li id=if-top-and-height-are-auto-and-bottom-is0> If ‘<a
+ href="#top"><code class=property>top</code></a>’ and ‘<code
+ class=property>height</code>’ are ‘<code
+ class=css>auto</code>’ and ‘<a href="#bottom"><code
+ class=property>bottom</code></a>’ is not ‘<code
+ class=css>auto</code>’, then the height is based on the <a
+ href="#root-height">‘<code class=css>Auto</code>’ heights for
+ block formatting context roots</a>, and solve for ‘<a
+ href="#top"><code class=property>top</code></a>’.
- <p id=if-both-top-and-bottom-are-auto-their-us> If both ‘<a
- href="#top"><code class=property>top</code></a>’ and ‘<a
- href="#bottom"><code class=property>bottom</code></a>’ are
- ‘<code class=css>auto</code>’, their used values are equal.
- This vertically centers the element with respect to the edges of the <a
- href="#containing-block0">containing block</a>.</p>
+ <li id=if-top-and-bottom-are-auto-and-height-is0> If ‘<a
+ href="#top"><code class=property>top</code></a>’ and ‘<a
+ href="#bottom"><code class=property>bottom</code></a>’ are
+ ‘<code class=css>auto</code>’ and ‘<code
+ class=property>height</code>’ is not ‘<code
+ class=css>auto</code>’, then set ‘<a href="#top"><code
+ class=property>top</code></a>’ and ‘<a href="#bottom"><code
+ class=property>bottom</code></a>’ to the have equal values. This
+ vertically centers the element with respect to the edges of the <a
+ href="#containing-block0">containing block</a>.
+
+ <li id=if-height-and-bottom-are-auto-and-top-is0> If ‘<code
+ class=property>height</code>’ and ‘<a href="#bottom"><code
+ class=property>bottom</code></a>’ are ‘<code
+ class=css>auto</code>’ and ‘<a href="#top"><code
+ class=property>top</code></a>’ is not ‘<code
+ class=css>auto</code>’, then the height is based on the <a
+ href="#root-height">‘<code class=css>Auto</code>’ heights for
+ block formatting context roots</a>, and solve for ‘<a
+ href="#bottom"><code class=property>bottom</code></a>’.
+
+ <li id=if-top-is-auto-height-and-bottom-are-not0>If ‘<a
+ href="#top"><code class=property>top</code></a>’ is ‘<code
+ class=css>auto</code>’, ‘<code
+ class=property>height</code>’ and ‘<a href="#bottom"><code
+ class=property>bottom</code></a>’ are not ‘<code
+ class=css>auto</code>’, then solve for ‘<a href="#top"><code
+ class=property>top</code></a>’.
+
+ <li id=if-height-is-auto-top-and-bottom-are-not0>If ‘<code
+ class=property>height</code>’ is ‘<code
+ class=css>auto</code>’, ‘<a href="#top"><code
+ class=property>top</code></a>’ and ‘<a href="#bottom"><code
+ class=property>bottom</code></a>’ are not ‘<code
+ class=css>auto</code>’, then solve for ‘<code
+ class=property>height</code>’.
+
+ <li id=if-bottom-is-auto-top-and-height-are-not0>If ‘<a
+ href="#bottom"><code class=property>bottom</code></a>’ is
+ ‘<code class=css>auto</code>’, ‘<a href="#top"><code
+ class=property>top</code></a>’ and ‘<code
+ class=property>height</code>’ are not ‘<code
+ class=css>auto</code>’, then solve for ‘<a
+ href="#bottom"><code class=property>bottom</code></a>’.
+ </ol>
<!-- End section: The height of a 'center' positioned, non-replaced element -->
<h3 id=height-of-absolute-replaced-elements><span class=secno>7.7.
@@ -2420,7 +2497,7 @@
href="#top"><code class=property>top</code></a>’ with the
element's static position.
- <li id=if-bottom-is-auto-replace-any-auto-on-ma>If ‘<a
+ <li id=if-bottom-is-auto-replace-any-auto-on-ma> If ‘<a
href="#bottom"><code class=property>bottom</code></a>’ is
‘<code class=css>auto</code>’, replace any ‘<code
class=css>auto</code>’ on ‘<code
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.src.html,v
retrieving revision 1.11
retrieving revision 1.12
diff -u -d -r1.11 -r1.12
--- Overview.src.html 9 Nov 2011 22:59:05 -0000 1.11
+++ Overview.src.html 11 Nov 2011 18:12:32 -0000 1.12
@@ -1032,8 +1032,8 @@
element.
For page positioned boxes, within paged media or regions, the offset is with respect to
- the bottom edge of the <span>initial containing block</span>; otherwise for page positioned
- boxes same as for absolutely positioned boxes.
+ the bottom edge of the <span>initial containing block</span>; otherwise for page
+ positioned boxes same as for absolutely positioned boxes.
</p>
<table id="propdef-left" class="propdef">
<tr>
@@ -1094,8 +1094,8 @@
element.
For page positioned boxes, within paged media or regions, the offset is with respect to
- the left edge of the <span>initial containing block</span>; otherwise for page positioned
- boxes same as for absolutely positioned boxes.
+ the left edge of the <span>initial containing block</span>; otherwise for page
+ positioned boxes same as for absolutely positioned boxes.
</p>
<p>The values for the four properties have the following meanings:</p>
<dl>
@@ -1136,44 +1136,45 @@
</code>
</p>
<p>
- If all three of 'left', 'width', and 'right' are ''auto'': First set any ''auto'' values for
- 'margin-left' and 'margin-right' to ''0''. Then, if the 'direction' property of the element
- establishing the static-position <span>containing block</span> is ''ltr'' set 'left' to the static
- position and apply rule number <em>three</em> below; otherwise, set 'right' to the
- static-position and apply rule number <em>one</em> below.
+ If all three of 'left', 'width', and 'right' are ''auto'': First set any ''auto'' values
+ for 'margin-left' and 'margin-right' to ''0''. Then, if the 'direction' property of the
+ element establishing the static-position <span>containing block</span> is ''ltr'' set
+ 'left' to the static position and apply rule number <em>three</em> below; otherwise, set
+ 'right' to the static-position and apply rule number <em>one</em> below.
</p>
<p>
If none of the three is ''auto'': If both 'margin-left' and 'margin-right' are ''auto'',
solve the equation under the extra constraint that the two margins get equal values,
unless this would make them negative, in which case when direction of the containing
- block is ''ltr'' (''rtl''), set 'margin-left' ('margin-right') to zero and solve for
+ block is ''ltr'' (''rtl''), set 'margin-left' ('margin-right') to ''0'' and solve for
'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is ''auto'',
solve the equation for that value. If the values are over-constrained, ignore the value
- for 'left' (in case the 'direction' property of the <span>containing block</span> is ''rtl'') or
- 'right' (in case 'direction' is ''ltr'') and solve for that value.
+ for 'left' (in case the 'direction' property of the <span>containing block</span> is
+ ''rtl'') or 'right' (in case 'direction' is ''ltr'') and solve for that value.
</p>
<p>
- Otherwise, set ''auto'' values for 'margin-left' and 'margin-right' to ''0'', and pick one of
- the following six rules that apply.
+ Otherwise, set ''auto'' values for 'margin-left' and 'margin-right' to ''0'', and pick
+ one of the following six rules that apply.
</p>
<ol>
<li>
If 'left' and 'width' are ''auto'' and 'right' is not ''auto'', then the width is
- shrink-to-fit. Then solve for 'left'
+ shrink-to-fit. Then solve for 'left'.
</li>
<li>
- If 'left' and 'right' are ''auto'' and 'width' is not ''auto'', then if the 'direction'
- property of the element establishing the static-position <span>containing block</span> is ''ltr''
- set 'left' to the static-position, otherwise set 'right' to the static-position.
- Then solve for 'left' (if 'direction is ''rtl'') or 'right' (if 'direction' is ''ltr'').
+ If 'left' and 'right' are ''auto'' and 'width' is not ''auto'', then if the
+ 'direction' property of the element establishing the static-position
+ <span>containing block</span> is ''ltr'' set 'left' to the static-position,
+ otherwise set 'right' to the static-position. Then solve for 'left' (if 'direction
+ is ''rtl'') or 'right' (if 'direction' is ''ltr'').
</li>
<li>
If 'width' and 'right' are ''auto'' and 'left' is not ''auto'', then the width is
- shrink-to-fit. Then solve for 'right'
+ shrink-to-fit. Then solve for 'right'.
</li>
- <li>If 'left' is ''auto'', 'width' and 'right' are not ''auto'', then solve for 'left'</li>
- <li>If 'width' is ''auto'', 'left' and 'right' are not ''auto'', then solve for 'width'</li>
- <li>If 'right' is ''auto'', 'left' and 'width' are not ''auto'', then solve for 'right'</li>
+ <li>If 'left' is ''auto'', 'width' and 'right' are not ''auto'', then solve for 'left'.</li>
+ <li>If 'width' is ''auto'', 'left' and 'right' are not ''auto'', then solve for 'width'.</li>
+ <li>If 'right' is ''auto'', 'left' and 'width' are not ''auto'', then solve for 'right'.</li>
</ol>
<!-- End section: The width of absolute, page or fixed positioned, non-replaced element -->
@@ -1186,30 +1187,44 @@
'right' = <span>width of containing block</span>
</code>
</p>
- <p>First set any ''auto'' values for 'margin-left' and 'margin-right' to ''0''.</p>
- <p>
- If 'width' is not ''auto'' and 'margin-left' + 'border-left-width' + 'padding-left' +
- 'width' + 'padding-right' + 'border-right-width' + 'margin-right' (plus any of 'left' or
- 'right' that are not ''auto'') is larger than the width of the <span>containing block</span>, then
- any ''auto'' values for 'left' or 'right' are, for the following rules, treated as ''0''.
- </p>
<p>
- If all of the above have a computed value other than ''auto'', the values are said to be
- "over-constrained" and one of the used values will have to be different from its
- computed value. If the 'direction' property of the <span>containing block</span> has the value
- ''ltr'', the specified value of 'right' is ignored and the value is calculated so as to
- make the equality true. If the value of 'direction' is ''rtl'', this happens to 'left'
- instead.
+ If all three of 'left', 'width', and 'right' are ''auto'': First set any ''auto'' values
+ for 'margin-left' and 'margin-right' to ''0'', then the 'width' calculated as
+ shrink-to-fit, and finally apply rule number <em>two</em> below.
</p>
<p>
- If there is exactly one value specified as ''auto'', its used value follows from the
- equality.
+ If none of the three is ''auto'': If both 'margin-left' and 'margin-right' are ''auto'',
+ solve the equation under the extra constraint that the two margins get equal values,
+ unless this would make them negative, in which case when direction of the containing
+ block is ''ltr'' (''rtl''), set 'margin-left' ('margin-right') to ''0'' and solve for
+ 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is ''auto'',
+ solve the equation for that value. If the values are over-constrained, ignore the values
+ for 'left' and 'right' and solve the equation so both propeties get equal values. This
+ horizontally centers the element with respect to the edges of the <span>containing
+ block</span>.
</p>
- <p>If 'width' is set to ''auto'', then the width is shrink-to-fit.</p>
<p>
- If both 'left' and 'right' are ''auto'', their used values are equal. This horizontally
- centers the element with respect to the edges of the <span>containing block</span>.
+ Otherwise, set ''auto'' values for 'margin-left' and 'margin-right' to ''0'', and pick
+ one of the following six rules that apply.
</p>
+ <ol>
+ <li>
+ If 'left' and 'width' are ''auto'' and 'right' is not ''auto'', then the width is
+ shrink-to-fit. Then solve for 'left'.
+ </li>
+ <li>
+ If both 'left' and 'right' are ''auto'', their used values are equal. This
+ horizontally centers the element with respect to the edges of the <span>containing
+ block</span>.
+ </li>
+ <li>
+ If 'width' and 'right' are ''auto'' and 'left' is not ''auto'', then the width is
+ shrink-to-fit. Then solve for 'right'.
+ </li>
+ <li>If 'left' is ''auto'', 'width' and 'right' are not ''auto'', then solve for 'left'.</li>
+ <li>If 'width' is ''auto'', 'left' and 'right' are not ''auto'', then solve for 'width'.</li>
+ <li>If 'right' is ''auto'', 'left' and 'width' are not ''auto'', then solve for 'right'.</li>
+ </ol>
<!-- End section: The width of a center positioned, non-replaced element -->
<h3 id="width-of-absolute-replaced-elements">The width of absolute, page or fixed positioned, replaced elements</h3>
@@ -1237,9 +1252,9 @@
</p>
<p>
Otherwise, if 'width' has a computed value of ''auto'', but none of the conditions above
- are met, and then the used value of 'width' becomes ''300px''. If ''300px'' is too wide to fit
- the device, user agents should use the width of the largest rectangle that has a 2:1
- ratio and fits the device instead.
+ are met, and then the used value of 'width' becomes ''300px''. If ''300px'' is too wide
+ to fit the device, user agents should use the width of the largest rectangle that has a
+ 2:1 ratio and fits the device instead.
</p>
<p>
After establishing the 'width', in order to position the replaced element, apply the
@@ -1247,31 +1262,31 @@
</p>
<ol>
<li>
- If both 'left' and 'right' have the value ''auto'', and if the 'direction' property of
- the element establishing the static-position <span>containing block</span> is ''ltr'', set 'left'
- to the static position and solve for 'right'; else if 'direction' is ''rtl'', set
- 'right' to the static position and solve for 'left'.
+ If both 'left' and 'right' have the value ''auto'', and if the 'direction' property
+ of the element establishing the static-position <span>containing block</span> is
+ ''ltr'', set 'left' to the static position and solve for 'right'; else if
+ 'direction' is ''rtl'', set 'right' to the static position and solve for 'left'.
</li>
<li>
- If 'left' is ''auto'' and 'right' is not ''auto'', replace any ''auto'' on 'margin-left'
- or 'margin-right' with ''0'', then solve for 'left'.
+ If 'left' is ''auto'' and 'right' is not ''auto'', replace any ''auto'' on
+ 'margin-left' or 'margin-right' with ''0'', then solve for 'left'.
</li>
<li>
- If 'right' is ''auto'' and 'left' is not ''auto'', replace any ''auto'' on 'margin-left'
- or 'margin-right' with ''0'', then solve for 'right'.
+ If 'right' is ''auto'' and 'left' is not ''auto'', replace any ''auto'' on
+ 'margin-left' or 'margin-right' with ''0'', then solve for 'right'.
</li>
<li>
If at this point both 'margin-left' and 'margin-right' are still ''auto'', solve the
equation under the extra constraint that the two margins must get equal values,
unless this would make them negative, in which case when the direction of the
- <span>containing block</span> is ''ltr'' (''rtl''), set 'margin-left' ('margin-right') to ''0'' and
- solve for 'margin-right' ('margin-left').
+ <span>containing block</span> is ''ltr'' (''rtl''), set 'margin-left'
+ ('margin-right') to ''0'' and solve for 'margin-right' ('margin-left').
</li>
<li>If at this point there is an ''auto'' remaining, solve the equation for that value.</li>
<li>
If at this point the values are over-constrained, ignore the value for either 'left'
- (in case the 'direction' property of the <span>containing block</span> is ''rtl'') or 'right' (in
- case 'direction' is ''ltr'') and solve for that value.
+ (in case the 'direction' property of the <span>containing block</span> is ''rtl'')
+ or 'right' (in case 'direction' is ''ltr'') and solve for that value.
</li>
</ol>
<!-- End section: The width of absolute, page or fixed positioned, replaced element -->
@@ -1301,8 +1316,9 @@
</code>
</p>
<p>
- If all three of 'top', 'height', and 'bottom' are ''auto'', set 'top' to the static position
- and apply rule number <em>three</em> below.
+ If all three of 'top', 'height', and 'bottom' are ''auto'': First set any ''auto''
+ values for 'margin-top' and 'margin-bottom' to ''0'', then set 'top' to the static
+ position, and finally apply rule number <em>three</em> below.
</p>
<p>
If none of the three are ''auto'': If both 'margin-top' and 'margin-bottom' are ''auto'',
@@ -1310,35 +1326,28 @@
one of 'margin-top' or 'margin-bottom' is ''auto'', solve the equation for that value. If
the values are over-constrained, ignore the value for 'bottom' and solve for that value.
</p>
- <p>Otherwise, pick the one of the following six rules that applies.</p>
+ <p>
+ Otherwise, set ''auto'' values for 'margin-top' and 'margin-bottom' to ''0'', and pick
+ one of the following six rules that apply.
+ </p>
<ol>
<li>
- 'top' and 'height' are ''auto'' and 'bottom' is not ''auto'', then the height is based on the
- <a href="#root-height">''Auto'' heights for block formatting context roots</a>,
- set ''auto'' values for 'margin-top' and 'margin-bottom' to ''0'', and solve for 'top'.
- </li>
- <li>
- 'top' and 'bottom' are ''auto'' and 'height' is not ''auto'', then set 'top' to the
- static position, set ''auto'' values for 'margin-top' and 'margin-bottom' to ''0'', and
- solve for 'bottom'.
- </li>
- <li>
- 'height' and 'bottom' are ''auto'' and 'top' is not ''auto'', then the height is based
- on the <a href="#root-height">''Auto'' heights for block formatting context roots</a>,
- set ''auto'' values for 'margin-top' and 'margin-bottom' to ''0'', and solve for 'bottom'.
- </li>
- <li>
- 'top' is ''auto'', 'height' and 'bottom' are not ''auto'', then set ''auto'' values for
- 'margin-top' and 'margin-bottom' to ''0'', and solve for 'top'.
+ If 'top' and 'height' are ''auto'' and 'bottom' is not ''auto'', then the height is
+ based on the <a href="#root-height">''Auto'' heights for block formatting context
+ roots</a>, and solve for 'top'.
</li>
<li>
- 'height' is ''auto'', 'top' and 'bottom' are not ''auto'', then ''auto'' values for
- 'margin-top' and 'margin-bottom' are set to ''0'' and solve for 'height'.
+ If 'top' and 'bottom' are ''auto'' and 'height' is not ''auto'', then set 'top' to
+ the static position, then solve for 'bottom'.
</li>
<li>
- 'bottom' is ''auto'', 'top' and 'height' are not ''auto'', then set ''auto'' values for
- 'margin-top' and 'margin-bottom' to ''0'' and solve for 'bottom'.
+ If 'height' and 'bottom' are ''auto'' and 'top' is not ''auto'', then the height is
+ based on the <a href="#root-height">''Auto'' heights for block formatting context
+ roots</a>, and solve for 'bottom'.
</li>
+ <li>If 'top' is ''auto'', 'height' and 'bottom' are not ''auto'', then solve for 'top'.</li>
+ <li>If 'height' is ''auto'', 'top' and 'bottom' are not ''auto'', then solve for 'height'.</li>
+ <li>If 'bottom' is ''auto'', 'top' and 'height' are not ''auto'', then solve for 'bottom'.</li>
</ol>
<!-- End section: The height of absolute, page or fixed positioned, non-replaced element -->
@@ -1352,29 +1361,43 @@
</code>
</p>
<p>
- If 'height' is not ''auto'' and 'margin-top' + 'border-top-width' + 'padding-top' +
- 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' (plus any of 'top' or
- 'bottom' that are not ''auto'') is larger than the height of the <span>containing block</span>, then
- any ''auto'' values for 'top' or 'bottom' are, for the following rules, treated as zero.
- </p>
- <p>
- If all of the above have a computed value other than ''auto'', the values are said to be
- "over-constrained" and one of the used values will have to be different from its
- computed value. Ignore the specified value of 'bottom' and the value is calculated so as
- to make the equality true.
- </p>
- <p>
- If there is exactly one value specified as ''auto'', its used value follows from the
- equality.
+ If all three of 'top', 'height', and 'bottom' are ''auto'': First set any ''auto''
+ values for 'margin-top' and 'margin-bottom' to ''0'', then the height is based on the
+ <a href="#root-height">''Auto'' heights for block formatting context roots</a>, and
+ finally apply rule number <em>two</em> below.
</p>
<p>
- If 'height' is set to ''auto'', then the height is based on the
- <a href="#root-height">''Auto'' heights for block formatting context roots</a>
+ If none of the three are ''auto'': If both 'margin-top' and 'margin-bottom' are ''auto'',
+ solve the equation under the extra constraint that the two margins get equal values. If
+ one of 'margin-top' or 'margin-bottom' is ''auto'', solve the equation for that value.
+ If the values are over-constrained, ignore the values for 'top' and 'bottom' and solve
+ the equation so both propeties get equal values. This vertically centers the element
+ with respect to the edges of the <span>containing block</span>.
</p>
<p>
- If both 'top' and 'bottom' are ''auto'', their used values are equal. This vertically
- centers the element with respect to the edges of the <span>containing block</span>.
+ Otherwise, set ''auto'' values for 'margin-top' and 'margin-bottom' to ''0'', and pick
+ one of the following six rules that apply.
</p>
+ <ol>
+ <li>
+ If 'top' and 'height' are ''auto'' and 'bottom' is not ''auto'', then the height is
+ based on the <a href="#root-height">''Auto'' heights for block formatting context
+ roots</a>, and solve for 'top'.
+ </li>
+ <li>
+ If 'top' and 'bottom' are ''auto'' and 'height' is not ''auto'', then set 'top' and
+ 'bottom' to the have equal values. This vertically centers the element with respect
+ to the edges of the <span>containing block</span>.
+ </li>
+ <li>
+ If 'height' and 'bottom' are ''auto'' and 'top' is not ''auto'', then the height is
+ based on the <a href="#root-height">''Auto'' heights for block formatting context
+ roots</a>, and solve for 'bottom'.
+ </li>
+ <li>If 'top' is ''auto'', 'height' and 'bottom' are not ''auto'', then solve for 'top'.</li>
+ <li>If 'height' is ''auto'', 'top' and 'bottom' are not ''auto'', then solve for 'height'.</li>
+ <li>If 'bottom' is ''auto'', 'top' and 'height' are not ''auto'', then solve for 'bottom'.</li>
+ </ol>
<!-- End section: The height of a 'center' positioned, non-replaced element -->
<h3 id="height-of-absolute-replaced-elements">The height of absolute, page or fixed positioned, replaced elements</h3>
@@ -1403,10 +1426,13 @@
</p>
<ol>
<li>
- If both 'top' and 'bottom' have the value ''auto'', replace 'top' with the element's
- static position.
+ If both 'top' and 'bottom' have the value ''auto'', replace 'top' with the
+ element's static position.
+ </li>
+ <li>
+ If 'bottom' is ''auto'', replace any ''auto'' on 'margin-top' or 'margin-bottom'
+ with ''0''.
</li>
- <li>If 'bottom' is ''auto'', replace any ''auto'' on 'margin-top' or 'margin-bottom' with ''0''.</li>
<li>
If at this point both 'margin-top' and 'margin-bottom' are still ''auto'', solve the
equation under the extra constraint that the two margins must get equal values.
Received on Friday, 11 November 2011 18:12:40 UTC