csswg/css3-cascade Overview.html,1.13,1.14 Overview.src.html,1.18,1.19

Update of /sources/public/csswg/css3-cascade
In directory hutz:/tmp/cvs-serv27017

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Move Stages of Value Computation from css3-values to css3-cascade per <http://lists.w3.org/Archives/Public/www-style/2011Oct/0773.html>

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-cascade/Overview.html,v
retrieving revision 1.13
retrieving revision 1.14
diff -u -d -r1.13 -r1.14
--- Overview.html	31 Oct 2011 19:09:48 -0000	1.13
+++ Overview.html	12 Dec 2011 22:13:50 -0000	1.14
@@ -22,14 +22,14 @@
 
    <h1>CSS Cascading and Inheritance Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 October
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 December
     2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-cascade-20111031/">http://www.w3.org/TR/2011/ED-css3-cascade-20111031/</a>
+     href="http://www.w3.org/TR/2011/ED-css3-cascade-20111212/">http://www.w3.org/TR/2011/ED-css3-cascade-20111212/</a>
      
 
     <dt>Latest version:
@@ -38,6 +38,12 @@
      href="http://www.w3.org/TR/css3-cascade">http://www.w3.org/TR/css3-cascade</a>
      
 
+    <dt>Editor's draft:
+
+    <dd><a
+     href="http://dev.w3.org/csswg/css3-cascade/">http://dev.w3.org/csswg/css3-cascade/</a>
+     
+
     <dt>Previous version:
 
     <dd><a
@@ -71,20 +77,10 @@
 
   <h2 class="no-num no-toc" id=abstract>Abstract</h2>
 
-  <p>This CSS3 module describes how to find the specified value for all
-   properties on all elements. Values either come from style sheets or the
-   property's initial value. By way of cascading and inheritance, values are
-   propagated to all properties on all elements.
-
-  <p>This module interfaces with several other modules. It relies on <a
-   href="#CSS3SYN" rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> to parse
-   the style sheets, on <a href="#SELECT"
-   rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> to calculate specificity,
-   and on <a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a> to
-   determine if a declaration applies to the media. The output from this
-   module is a <em>specified value</em> for all element/property
-   combinations. The processing of specified values is described in <a
-   href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
+  <p>This CSS3 module describes how to collate style rules and assign values
+   to all properties on all elements. Values either come from style sheets or
+   the property's initial value. By way of cascading and inheritance, values
+   are propagated to all properties on all elements.
 
   <h2 class="no-num no-toc" id=status-of-this-document>Status of this
    document</h2>
@@ -153,7 +149,26 @@
       weight</a>
     </ul>
 
-   <li><a href="#conformance"><span class=secno>4. </span>Conformance</a>
+   <li><a href="#value-stages"><span class=secno>4. </span> Stages of Value
+    Computation</a>
+    <ul class=toc>
+     <li><a href="#specified"><span class=secno>4.1. </span> Finding the
+      specified value</a>
+
+     <li><a href="#computed"><span class=secno>4.2. </span> Finding the
+      computed value</a>
+
+     <li><a href="#finding-the-used-value"><span class=secno>4.3.
+      </span>Finding the used value</a>
+
+     <li><a href="#actual"><span class=secno>4.4. </span> Finding the actual
+      value</a>
+
+     <li><a href="#stages-examples"><span class=secno>4.5. </span>
+      Examples</a>
+    </ul>
+
+   <li><a href="#conformance"><span class=secno>5. </span>Conformance</a>
 
    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
 
@@ -707,7 +722,320 @@
   <p class=note>Note that non-CSS presentational hints had a higher weight in
    CSS2.
 
-  <h2 id=conformance><span class=secno>4. </span>Conformance</h2>
+  <h2 id=value-stages><span class=secno>4. </span> Stages of Value
+   Computation</h2>
+
+  <p class=issue>Shouldn't this section move to <a href="#CSS3CASCADE"
+   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>?
+
+  <p>Once a user agent has parsed a document and constructed a document tree,
+   it must assign, for every element in the tree, a value to every property
+   that applies to the target media type.
+
+  <p>The final value of a CSS3 property for a given element is the result of
+   a four-step calculation:
+
+  <ul>
+   <li>First, cascading and inheritance yields the <a
+    href="#specified-value0"><i>specified value</i></a>.
+
+   <li>Second, relative values are computed into absolute values as far as
+    possible without formatting the document, thereby yielding the <a
+    href="#computed-value"><i>computed value</i></a>.
+
+   <li>The computed value is transformed into the <a
+    href="#used-value0"><i>used value</i></a> in the formatting process.
+
+   <li>Finally, the computed value is transformed to the <a
+    href="#actual-value"><i>actual value</i></a> based on constraints of
+    local environment.
+  </ul>
+
+  <h3 id=specified><span class=secno>4.1. </span> Finding the <dfn
+   id=specified-value>specified value</dfn></h3>
+
+  <p>The <dfn id=specified-value0>specified value</dfn> is the output of the
+   <a href="http://www.w3.org/TR/CSS21/cascade.html">cascading and
+   inheritance process</a>. <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a href="#CSS3CASCADE"
+   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>
+
+  <p class=note>If the output of the cascade is &lsquo;<code
+   class=css>inherit</code>&rsquo; or &lsquo;<code
+   class=css>initial</code>&rsquo;, the specified value contains the
+   inherited or initial value, respectively. See examples (d) and (e) in the
+   <a href="#stages-examples">table below</a>.
+
+  <p>The cascading and inheritance process guarantees that a <a
+   href="#specified-value0"><i>specified value</i></a> exists for every
+   property on every element.
+
+  <h3 id=computed><span class=secno>4.2. </span> Finding the computed value</h3>
+
+  <p>A <a href="#specified-value0"><i>specified value</i></a> can be either
+   absolute (i.e., not relative to another value, as in &lsquo;<code
+   class=property>red</code>&rsquo; or &lsquo;<code
+   class=css>2mm</code>&rsquo;) or relative (i.e., relative to another value,
+   as in &lsquo;<code class=property>auto</code>&rsquo;, &lsquo;<code
+   class=css>2em</code>&rsquo;).
+
+  <p>For absolute values, no extra processing is needed to find the computed
+   value. For relative values, on the other hand, computation is necessary to
+   find the computed value: percentages must be multiplied by a reference
+   value (each property defines which value that is), values with relative
+   units (em, ex, vh, vw) must be made absolute by multiplying with the
+   appropriate reference size, certain keywords (e.g., &lsquo;<code
+   class=property>smaller</code>&rsquo;, &lsquo;<code
+   class=property>bolder</code>&rsquo;) must be replaced according to their
+   definitions, and valid relative URLs must be resolved to become absolute.
+   See examples (f), (g) and (h) in the <a href="#stages-examples">table
+   below</a>.
+
+  <p>The <dfn id=computed-value>computed value</dfn> is the result of
+   resolving the <a href="#specified-value0"><i>specified value</i></a>
+   insofar as possible without formatting the document, as defined in the
+   "Computed value" line of the property definition tables.
+
+  <p class=note>The <a href="#computed-value"><i>computed value</i></a> is
+   the value that is transferred from parent to child during inheritance.
+
+  <p>The computed value exists even when the property does not apply (as
+   defined by the &lsquo;<code class=css>Applies To</code>&rsquo; line).
+   However, some properties may define the computed value of a property for
+   an element to depend on whether the property applies to that element.
+
+  <h3 id=finding-the-used-value><span class=secno>4.3. </span>Finding the
+   <dfn id=used-value>used value</dfn></h3>
+
+  <p><i>Computed values</i> are processed as far as possible without
+   formatting the document. Some values, however, can only be determined when
+   the document is being laid out. For example, if the width of an element is
+   set to be a certain percentage of its containing block, the width cannot
+   be determined until the width of the containing block has been determined.
+   The <dfn id=used-value0>used value</dfn> is the result of taking the <a
+   href="#computed-value"><i>computed value</i></a> and resolving any
+   remaining dependencies into an absolute value.
+
+  <h3 id=actual><span class=secno>4.4. </span> Finding the actual value</h3>
+
+  <p>A <a href="#used-value0"><i>used value</i></a> is in principle ready to
+   be used, but a user agent may not be able to make use of the value in a
+   given environment. For example, a user agent may only be able to render
+   borders with integer pixel widths and may therefore have to approximate
+   the computed width. Also, the font size of an element may need adjustment
+   based on the availability of fonts or the value of the &lsquo;<code
+   class=property>font-size-adjust</code>&rsquo; property. The <dfn
+   id=actual-value>actual value</dfn> is the used value after any such
+   approximations have been made.
+
+  <p class=note> By probing the actual values of elements, much can be
+   learned about how the document is laid out. However, not all information
+   is recorded in the actual values. For example, the actual value of the
+   &lsquo;<code class=property>page-break-after</code>&rsquo; property does
+   not reflect whether there is a page break or not after the element.
+   Similarly, the actual value of &lsquo;<code
+   class=property>orphans</code>&rsquo; does not reflect how many orphan
+   lines there is in a certain element. See examples (j) and (k) in the <a
+   href="#stages-examples">table below</a>.
+
+  <h3 id=stages-examples><span class=secno>4.5. </span> Examples</h3>
+
+  <table class=data>
+   <thead>
+    <tr>
+     <th>
+
+     <th>Property
+
+     <th>Winning declaration <!--  <th>Cascaded value  -->
+
+     <th>Specified value
+
+     <th>Computed value
+
+     <th>Used value
+
+     <th>Actual value
+
+   <tbody>
+    <tr>
+     <td>(a)
+
+     <th>&lsquo;<code class=property>text-align</code>&rsquo;
+
+     <td><code class=declaration>text-align: left</code>
+      <!--  <td>''left''-->
+
+     <td>&lsquo;<code class=css>left</code>&rsquo;
+
+     <td>&lsquo;<code class=css>left</code>&rsquo;
+
+     <td>&lsquo;<code class=css>left</code>&rsquo;
+
+     <td>&lsquo;<code class=css>left</code>&rsquo;
+
+    <tr>
+     <td>(b)
+
+     <th>&lsquo;<code class=property>border-top-width</code>&rsquo;,
+      &lsquo;<code class=property>border-right-width</code>&rsquo;,
+      &lsquo;<code class=property>border-bottom-width</code>&rsquo;,
+      &lsquo;<code class=property>border-left-width</code>&rsquo;
+
+     <td><code class=declaration>border-width: inherit</code>
+      <!--  <td>''inherit'' -->
+
+     <td class=say>&lsquo;<code class=css>4.2px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>4.2px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>4.2px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>4px</code>&rsquo;
+
+    <tr>
+     <td>(c)
+
+     <th>&lsquo;<code class=property>width</code>&rsquo;
+
+     <td><small>(none)</small> <!--  <td><small>(none)</small>-->
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+      <small>(initial&nbsp;value)</small>
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+
+     <td>&lsquo;<code class=css>120px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>120px</code>&rsquo;
+
+    <tr>
+     <td>(d)
+
+     <th>&lsquo;<code class=property>list-style-position</code>&rsquo;
+
+     <td><code class=declaration>list-style-position: inherit</code>
+      <!--  <td>''inherit'' -->
+
+     <td class=say>&lsquo;<code class=css>inside</code>&rsquo;
+
+     <td>&lsquo;<code class=css>inside</code>&rsquo;
+
+     <td>&lsquo;<code class=css>inside</code>&rsquo;
+
+     <td>&lsquo;<code class=css>inside</code>&rsquo;
+
+    <tr>
+     <td>(e)
+
+     <th>&lsquo;<code class=property>list-style-position</code>&rsquo;
+
+     <td><code class=declaration>list-style-position: initial</code>
+      <!--  <td>''initial''-->
+
+     <td>&lsquo;<code class=css>outside</code>&rsquo;
+      <small>(initial&nbsp;value)</small>
+
+     <td>&lsquo;<code class=css>outside</code>&rsquo;
+
+     <td>&lsquo;<code class=css>outside</code>&rsquo;
+
+     <td>&lsquo;<code class=css>outside</code>&rsquo;
+
+    <tr>
+     <td>(f)
+
+     <th>&lsquo;<code class=property>font-size</code>&rsquo;
+
+     <td><code class=declaration>font-size: 1.2em</code>
+      <!--  <td>''1.2em''-->
+
+     <td>&lsquo;<code class=css>1.2em</code>&rsquo;
+
+     <td class=say>&lsquo;<code class=css>14.1px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>14.1px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>14px</code>&rsquo;
+
+    <tr>
+     <td>(g)
+
+     <th>&lsquo;<code class=property>width</code>&rsquo;
+
+     <td><code class=declaration>width: 80%</code> <!--  <td>''80%''-->
+
+     <td>&lsquo;<code class=css>80%</code>&rsquo;
+
+     <td>&lsquo;<code class=css>80%</code>&rsquo;
+
+     <td class=say>&lsquo;<code class=css>354.2px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>354px</code>&rsquo;
+
+    <tr>
+     <td>(h)
+
+     <th>&lsquo;<code class=property>width</code>&rsquo;
+
+     <td><code class=declaration>width: auto</code> <!--  <td>''auto''-->
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+
+     <td class=say>&lsquo;<code class=css>134px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>134px</code>&rsquo;
+
+    <tr>
+     <td>(i)
+
+     <th>&lsquo;<code class=property>height</code>&rsquo;
+
+     <td><code class=declaration>height: auto</code> <!--  <td>''auto''-->
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+
+     <td class=say>&lsquo;<code class=css>176px</code>&rsquo;
+
+     <td>&lsquo;<code class=css>176px</code>&rsquo;
+
+    <tr>
+     <td>(j)
+
+     <th>&lsquo;<code class=property>page-break-after</code>&rsquo;
+
+     <td><small>(none)</small> <!--  <td><small>(none)</small>-->
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+      <small>(initial&nbsp;value)</small>
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+
+     <td>&lsquo;<code class=css>auto</code>&rsquo;
+
+    <tr>
+     <td>(k)
+
+     <th>&lsquo;<code class=property>orphans</code>&rsquo;
+
+     <td><code class=declaration>orphans: 3</code> <!--  <td>''3''-->
+
+     <td>&lsquo;<code class=css>3</code>&rsquo;
+
+     <td>&lsquo;<code class=css>3</code>&rsquo;
+
+     <td>&lsquo;<code class=css>3</code>&rsquo;
+
+     <td>&lsquo;<code class=css>3</code>&rsquo;
+  </table>
+
+  <h2 id=conformance><span class=secno>5. </span>Conformance</h2>
 
   <p>[TBD]
 
@@ -725,6 +1053,16 @@
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
+   <dt id=CSS21>[CSS21]
+
+   <dd>Bert Bos; et al. <a
+    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
+    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
+    2011. W3C Recommendation. URL: <a
+    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
+    </dd>
+   <!---->
+
    <dt id=CSS3SYN>[CSS3SYN]
 
    <dd>L. David Baron. <a
@@ -774,13 +1112,13 @@
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
 
-   <dt id=CSS21>[CSS21]
+   <dt id=CSS3CASCADE>[CSS3CASCADE]
 
-   <dd>Bert Bos; et al. <a
-    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
-    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
-    2011. W3C Recommendation. URL: <a
-    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
+   <dd>H&#229;kon Wium Lie. <a
+    href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3
+    module: Cascading and inheritance.</cite></a> 15 December 2005. W3C
+    Working Draft. (Work in progress.) URL: <a
+    href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>
     </dd>
    <!---->
 
@@ -809,12 +1147,18 @@
   <!--begin-index-->
 
   <ul class=indexlist>
+   <li>actual value, <a href="#actual-value"
+    title="actual value"><strong>4.4.</strong></a>
+
    <li>Alternate style sheets, <a href="#alternate-style-sheets"
     title="Alternate style sheets"><strong>2.2.</strong></a>
 
    <li>alternative style sheets, <a href="#alternative-style-sheets"
     title="alternative style sheets"><strong>2.2.</strong></a>
 
+   <li>computed value, <a href="#computed-value"
+    title="computed value"><strong>4.2.</strong></a>
+
    <li>conditional import, <a href="#conditional-imports"
     title="conditional import"><strong>2.1.</strong></a>
 
@@ -838,6 +1182,15 @@
    <li>preferred style sheet, <a href="#preferred-style-sheet"
     title="preferred style sheet"><strong>2.2.</strong></a>
 
+   <li>specified value, <a href="#specified-value"
+    title="specified value"><strong>4.1.</strong></a>, <a
+    href="#specified-value0"
+    title="specified value"><strong>4.1.</strong></a>
+
+   <li>used value, <a href="#used-value"
+    title="used value"><strong>4.3.</strong></a>, <a href="#used-value0"
+    title="used value"><strong>4.3.</strong></a>
+
    <li>winning declaration, <a href="#winning-declaration"
     title="winning declaration"><strong>3.1.</strong></a>
   </ul>

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-cascade/Overview.src.html,v
retrieving revision 1.18
retrieving revision 1.19
diff -u -d -r1.18 -r1.19
--- Overview.src.html	31 Oct 2011 19:09:48 -0000	1.18
+++ Overview.src.html	12 Dec 2011 22:13:50 -0000	1.19
@@ -32,6 +32,8 @@
   <dt>Latest version:
     <dd><a 
       href="http://www.w3.org/TR/css3-cascade">http://www.w3.org/TR/css3-cascade</a>
+  <dt>Editor's draft:
+    <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</var></a>
   <dt>Previous version:
     <dd><a href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>
   <dt>Editor:
@@ -47,19 +49,11 @@
 
 <h2 class="no-num no-toc">Abstract</h2>
 
-<p>This CSS3 module describes how to find the specified value for all
-properties on all elements. Values
-either come from style sheets or the property's initial value. By way
-of cascading and inheritance, values are propagated to all properties
-on all elements.
-
-<p>This module interfaces with several other modules. It relies on
-[[!CSS3SYN]] to parse the style sheets, on [[!SELECT]] to calculate
-specificity, and on [[!MEDIAQ]] to determine if a declaration applies
-to the media. The output from this module is a <em>specified
-value</em> for all element/property combinations. The processing of
-specified values is described in [[!CSS3VAL]].
-
+<p>This CSS3 module describes how to collate style rules and assign
+values to all properties on all elements. Values either come from
+style sheets or the property's initial value. By way of cascading
+and inheritance, values are propagated to all properties on all
+elements.
 
 <h2 class="no-num no-toc">Status of this document</h2>
 
@@ -608,6 +602,234 @@
 <p class="note">Note that non-CSS presentational hints had a higher
 weight in CSS2.
 
+<h2 id="value-stages">
+Stages of Value Computation</h2>
+
+	<p class="issue">Shouldn't this section move to [[CSS3CASCADE]]?</p>
+
+	<p>Once a user agent has parsed a document and constructed a document tree,
+	it must assign, for every element in the tree, a value to every property
+	that applies to the target media type. 
+
+	<p>The final value of a CSS3 property for a given element is the
+	result of a four-step calculation:
+	<ul>
+		<li>First, cascading and inheritance yields the <i>specified value</i>.
+		<li>Second, relative values are computed into absolute values as far
+		as possible without formatting the document, thereby yielding the
+		<i>computed value</i>.
+		<li>The computed value is transformed into the <i>used value</i> in the
+		formatting process.
+		<li>Finally, the computed value is transformed to the <i>actual value</i>
+		based on constraints of local environment.
+	</ul>
+
+<h3 id="specified">
+Finding the <dfn>specified value</dfn></h3>
+
+	<p>The <dfn>specified value</dfn> is the output of the
+	<a href="http://www.w3.org/TR/CSS21/cascade.html">cascading and inheritance
+	process</a>. [[!CSS21]] [[CSS3CASCADE]]
+
+	<p class="note">If the output of the cascade is ''inherit'' or ''initial'',
+	the specified value contains the inherited or initial value, respectively.
+	See examples (d) and (e) in the <a href="#stages-examples">table below</a>.
+
+	<p>The cascading and inheritance process guarantees that a <i>specified value</i>
+	exists for every property on every element.
+
+<h3 id="computed">
+Finding the computed value</h3>
+
+	<p>A <i>specified value</i> can be either absolute
+	(i.e., not relative to another value, as in 'red' or '2mm')
+	or relative (i.e., relative to another value, as in 'auto', '2em').
+
+	<p>For absolute values, no extra processing is needed to find the computed
+	value. For relative values, on the other hand, computation is necessary to
+	find the computed value: percentages must be multiplied by a
+	reference value (each property defines which value that is), values
+	with relative units (em, ex, vh, vw) must be made absolute by multiplying
+	with the appropriate reference size, certain keywords
+	(e.g., 'smaller', 'bolder') must be replaced according to their
+	definitions, and valid relative URLs must be resolved to become absolute.
+	See examples (f), (g) and (h) in the <a href="#stages-examples">table below</a>.
+
+	<p>The <dfn>computed value</dfn> is the result of resolving the
+	<i>specified value</i> insofar as possible without formatting the
+	document, as defined in the "Computed value" line of the property
+	definition tables.
+
+	<p class="note">The <i>computed value</i> is the value that is
+	transferred from parent to child during inheritance.
+
+	<p>The computed value exists even when the property does not apply
+	(as defined by the 'Applies To' line). However, some properties may
+	define the computed value of a property for an element to depend on
+	whether the property applies to that element.
+
+<h3>Finding the <dfn>used value</dfn></h3>
+
+	<p><i>Computed values</i> are processed as far as possible without formatting
+	the document. Some values, however, can only be determined when the
+	document is being laid out. For example, if the width of an element is
+	set to be a certain percentage of its containing block, the width
+	cannot be determined until the width of the containing block has been
+	determined. The <dfn>used value</dfn> is the result of taking the
+	<i>computed value</i> and resolving any remaining dependencies into an
+	absolute value.
+
+<h3 id="actual">
+Finding the actual value</h3>
+
+<p>A <i>used value</i> is in principle ready to be used, but a user agent may
+	not be able to make use of the value in a given environment. For
+	example, a user agent may only be able to render borders with integer
+	pixel widths and may therefore have to approximate the computed width.
+	Also, the font size of an element may need adjustment based on the
+	availability of fonts or the value of the 'font-size-adjust' property.
+	The <dfn>actual value</dfn> is the used value after any such approximations
+	have been made.
+
+	<p class="note">
+	By probing the actual values of elements, much can be learned about
+	how the document is laid out. However, not all information is recorded
+	in the actual values. For example, the actual value of the
+	'page-break-after' property does not reflect whether there is a page
+	break or not after the element. Similarly, the actual value of
+	'orphans' does not reflect how many orphan lines there is in a certain
+	element.
+	See examples (j) and (k) in the <a href="#stages-examples">table below</a>.
+
+<h3 id="stages-examples">
+Examples</h3>
+
+	<table class="data">
+	<thead>
+		<tr>
+			<th>
+			<th>Property
+			<th>Winning declaration
+			<!--  <th>Cascaded value  -->
+			<th>Specified value
+			<th>Computed value
+			<th>Used value
+			<th>Actual value
+		</tr>
+	<tbody>
+		<tr>
+			<td>(a)
+			<th>'text-align'
+			<td><code class="declaration">text-align: left</code>
+			<!--  <td>''left''-->
+			<td>''left''
+			<td>''left''
+			<td>''left''
+			<td>''left''
+		</tr>
+		<tr>
+			<td>(b)
+			<th>'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
+			<td><code class="declaration">border-width: inherit</code>
+			<!--  <td>''inherit'' -->
+			<td class="say">''4.2px''
+			<td>''4.2px''
+			<td>''4.2px''
+			<td>''4px''
+		</tr>
+		<tr>
+			<td>(c)
+			<th>'width'
+			<td><small>(none)</small>
+			<!--  <td><small>(none)</small>-->
+			<td>''auto'' <small>(initial&nbsp;value)</small>
+			<td>''auto''
+			<td>''120px''
+			<td>''120px''
+		</tr>
+		<tr>
+			<td>(d)
+			<th>'list-style-position'
+			<td><code class="declaration">list-style-position: inherit</code>
+			<!--  <td>''inherit'' -->
+			<td class="say">''inside''
+			<td>''inside''
+			<td>''inside''
+			<td>''inside''
+		</tr>
+		<tr>
+			<td>(e)
+			<th>'list-style-position'
+			<td><code class="declaration">list-style-position: initial</code>
+			<!--  <td>''initial''-->
+			<td>''outside'' <small>(initial&nbsp;value)</small>
+			<td>''outside''
+			<td>''outside''
+			<td>''outside''
+		</tr>
+		<tr>
+			<td>(f)
+			<th>'font-size'
+			<td><code class="declaration">font-size: 1.2em</code>
+			<!--  <td>''1.2em''-->
+			<td>''1.2em''
+			<td class="say">''14.1px''
+			<td>''14.1px''
+			<td>''14px''
+		</tr>
+		<tr>
+			<td>(g)
+			<th>'width'
+			<td><code class="declaration">width: 80%</code>
+			<!--  <td>''80%''-->
+			<td>''80%''
+			<td>''80%''
+			<td class="say">''354.2px''
+			<td>''354px''
+		</tr>
+		<tr>
+			<td>(h)
+			<th>'width'
+			<td><code class="declaration">width: auto</code>
+			<!--  <td>''auto''-->
+			<td>''auto''
+			<td>''auto''
+			<td class="say">''134px''
+			<td>''134px''
+		</tr>
+		<tr>
+			<td>(i)
+			<th>'height'
+			<td><code class="declaration">height: auto</code>
+			<!--  <td>''auto''-->
+			<td>''auto''
+			<td>''auto''
+			<td class="say">''176px''
+			<td>''176px''
+		</tr>
+		<tr>
+			<td>(j)
+			<th>'page-break-after'
+			<td><small>(none)</small>
+			<!--  <td><small>(none)</small>-->
+			<td>''auto'' <small>(initial&nbsp;value)</small>
+			<td>''auto''
+			<td>''auto''
+			<td>''auto''
+		</tr>
+		<tr>
+			<td>(k)
+			<th>'orphans'
+			<td><code class="declaration">orphans: 3</code>
+			<!--  <td>''3''-->
+			<td>''3''
+			<td>''3''
+			<td>''3''
+			<td>''3''
+		</tr>
+	</tbody>
+	</table>
+
 <h2>Conformance</h2>
 
 <p>[TBD]

Received on Monday, 12 December 2011 22:16:00 UTC