- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 12 Dec 2011 22:16:19 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-values In directory hutz:/tmp/cvs-serv27357 Modified Files: Overview.html Overview.src.html Log Message: Remove the Cascading section, as that was moved to css3-cascade. Index: Overview.html =================================================================== RCS file: /sources/public/csswg/css3-values/Overview.html,v retrieving revision 1.136 retrieving revision 1.137 diff -u -d -r1.136 -r1.137 --- Overview.html 12 Dec 2011 22:01:44 -0000 1.136 +++ Overview.html 12 Dec 2011 22:16:17 -0000 1.137 @@ -272,25 +272,6 @@ ‘<code class=css>attr()</code>’</a> </ul> - <li><a href="#value-stages"><span class=secno>9. </span> Stages of Value - Computation</a> - <ul class=toc> - <li><a href="#specified"><span class=secno>9.1. </span> Finding the - specified value</a> - - <li><a href="#computed"><span class=secno>9.2. </span> Finding the - computed value</a> - - <li><a href="#finding-the-used-value"><span class=secno>9.3. - </span>Finding the used value</a> - - <li><a href="#actual"><span class=secno>9.4. </span> Finding the actual - value</a> - - <li><a href="#stages-examples"><span class=secno>9.5. </span> - Examples</a> - </ul> - <li class=no-num><a href="#acknowledgments">Acknowledgments</a> <li class=no-num><a href="#references">References</a> @@ -1754,319 +1735,6 @@ </div> --> - <h2 id=value-stages><span class=secno>9. </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>9.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 ‘<code - class=css>inherit</code>’ or ‘<code - class=css>initial</code>’, 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>9.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 ‘<code - class=property>red</code>’ or ‘<code - class=css>2mm</code>’) or relative (i.e., relative to another value, - as in ‘<code class=property>auto</code>’, ‘<code - class=css>2em</code>’). - - <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., ‘<code - class=property>smaller</code>’, ‘<code - class=property>bolder</code>’) 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 ‘<code class=css>Applies To</code>’ 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>9.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>9.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 ‘<code - class=property>font-size-adjust</code>’ 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 - ‘<code class=property>page-break-after</code>’ property does - not reflect whether there is a page break or not after the element. - Similarly, the actual value of ‘<code - class=property>orphans</code>’ 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>9.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>‘<code class=property>text-align</code>’ - - <td><code class=declaration>text-align: left</code> - <!-- <td>''left''--> - - <td>‘<code class=css>left</code>’ - - <td>‘<code class=css>left</code>’ - - <td>‘<code class=css>left</code>’ - - <td>‘<code class=css>left</code>’ - - <tr> - <td>(b) - - <th>‘<code class=property>border-top-width</code>’, - ‘<code class=property>border-right-width</code>’, - ‘<code class=property>border-bottom-width</code>’, - ‘<code class=property>border-left-width</code>’ - - <td><code class=declaration>border-width: inherit</code> - <!-- <td>''inherit'' --> - - <td class=say>‘<code class=css>4.2px</code>’ - - <td>‘<code class=css>4.2px</code>’ - - <td>‘<code class=css>4.2px</code>’ - - <td>‘<code class=css>4px</code>’ - - <tr> - <td>(c) - - <th>‘<code class=property>width</code>’ - - <td><small>(none)</small> <!-- <td><small>(none)</small>--> - - <td>‘<code class=css>auto</code>’ - <small>(initial value)</small> - - <td>‘<code class=css>auto</code>’ - - <td>‘<code class=css>120px</code>’ - - <td>‘<code class=css>120px</code>’ - - <tr> - <td>(d) - - <th>‘<code class=property>list-style-position</code>’ - - <td><code class=declaration>list-style-position: inherit</code> - <!-- <td>''inherit'' --> - - <td class=say>‘<code class=css>inside</code>’ - - <td>‘<code class=css>inside</code>’ - - <td>‘<code class=css>inside</code>’ - - <td>‘<code class=css>inside</code>’ - - <tr> - <td>(e) - - <th>‘<code class=property>list-style-position</code>’ - - <td><code class=declaration>list-style-position: initial</code> - <!-- <td>''initial''--> - - <td>‘<code class=css>outside</code>’ - <small>(initial value)</small> - - <td>‘<code class=css>outside</code>’ - - <td>‘<code class=css>outside</code>’ - - <td>‘<code class=css>outside</code>’ - - <tr> - <td>(f) - - <th>‘<code class=property>font-size</code>’ - - <td><code class=declaration>font-size: 1.2em</code> - <!-- <td>''1.2em''--> - - <td>‘<code class=css>1.2em</code>’ - - <td class=say>‘<code class=css>14.1px</code>’ - - <td>‘<code class=css>14.1px</code>’ - - <td>‘<code class=css>14px</code>’ - - <tr> - <td>(g) - - <th>‘<code class=property>width</code>’ - - <td><code class=declaration>width: 80%</code> <!-- <td>''80%''--> - - <td>‘<code class=css>80%</code>’ - - <td>‘<code class=css>80%</code>’ - - <td class=say>‘<code class=css>354.2px</code>’ - - <td>‘<code class=css>354px</code>’ - - <tr> - <td>(h) - - <th>‘<code class=property>width</code>’ - - <td><code class=declaration>width: auto</code> <!-- <td>''auto''--> - - <td>‘<code class=css>auto</code>’ - - <td>‘<code class=css>auto</code>’ - - <td class=say>‘<code class=css>134px</code>’ - - <td>‘<code class=css>134px</code>’ - - <tr> - <td>(i) - - <th>‘<code class=property>height</code>’ - - <td><code class=declaration>height: auto</code> <!-- <td>''auto''--> - - <td>‘<code class=css>auto</code>’ - - <td>‘<code class=css>auto</code>’ - - <td class=say>‘<code class=css>176px</code>’ - - <td>‘<code class=css>176px</code>’ - - <tr> - <td>(j) - - <th>‘<code class=property>page-break-after</code>’ - - <td><small>(none)</small> <!-- <td><small>(none)</small>--> - - <td>‘<code class=css>auto</code>’ - <small>(initial value)</small> - - <td>‘<code class=css>auto</code>’ - - <td>‘<code class=css>auto</code>’ - - <td>‘<code class=css>auto</code>’ - - <tr> - <td>(k) - - <th>‘<code class=property>orphans</code>’ - - <td><code class=declaration>orphans: 3</code> <!-- <td>''3''--> - - <td>‘<code class=css>3</code>’ - - <td>‘<code class=css>3</code>’ - - <td>‘<code class=css>3</code>’ - - <td>‘<code class=css>3</code>’ - </table> - <h2 class=no-num id=acknowledgments>Acknowledgments</h2> <p>Comments and suggestions from Giovanni Campagna, Christoph Päper, @@ -2152,9 +1820,6 @@ <li>absolute length units, <a href="#absolute-length-units" title="absolute length units"><strong>5.2.</strong></a> - <li>actual value, <a href="#actual-value" - title="actual value"><strong>9.4.</strong></a> - <li><angle>, <a href="#angle-value" title="<angle>"><strong>6.1.</strong></a> @@ -2168,9 +1833,6 @@ <li><a href="#color-value"><code><color></code></a>, <a href="#color-value" title="<color>"><strong>7.1.</strong></a> - <li>computed value, <a href="#computed-value" - title="computed value"><strong>9.2.</strong></a> - <li>cycle(), <a href="#cycle-value" title="cycle()"><strong>8.2.</strong></a> @@ -2248,11 +1910,6 @@ <li>s, <a href="#s" title=s><strong>6.2.</strong></a> - <li>specified value, <a href="#specified-value" - title="specified value"><strong>9.1.</strong></a>, <a - href="#specified-value0" - title="specified value"><strong>9.1.</strong></a> - <li><a href="#string-value"><code><string></code></a>, <a href="#string-value" title="<string>"><strong>3.3.</strong></a> @@ -2266,10 +1923,6 @@ <li><a href="#url-value"><code><url></code></a>, <a href="#url-value" title="<url>"><strong>3.4.</strong></a> - <li>used value, <a href="#used-value" - title="used value"><strong>9.3.</strong></a>, <a href="#used-value0" - title="used value"><strong>9.3.</strong></a> - <li>vh, <a href="#vh-unit" title=vh><strong>5.1.2.</strong></a> <li>vmin, <a href="#vmin-unit" title=vmin><strong>5.1.2.</strong></a> Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/css3-values/Overview.src.html,v retrieving revision 1.139 retrieving revision 1.140 diff -u -d -r1.139 -r1.140 --- Overview.src.html 12 Dec 2011 22:01:46 -0000 1.139 +++ Overview.src.html 12 Dec 2011 22:16:17 -0000 1.140 @@ -1263,235 +1263,6 @@ --> -<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 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 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 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 class="no-num" id="acknowledgments">Acknowledgments</h2> <p>Comments and suggestions from Giovanni Campagna, Christoph Päper, Keith Rarick, Alex Mogilevsky, Ian Hickson, David Baron, Edward Welbourne, Boris Zbarsky, Björn Höhrmann and Michael Day improved this module.
Received on Monday, 12 December 2011 22:16:22 UTC