- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 30 Aug 2011 23:18:25 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-values
In directory hutz:/tmp/cvs-serv31917
Modified Files:
Overview.html Overview.src.html
Log Message:
Reformat table, fix indentation
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-values/Overview.html,v
retrieving revision 1.88
retrieving revision 1.89
diff -u -d -r1.88 -r1.89
--- Overview.html 30 Aug 2011 22:58:28 -0000 1.88
+++ Overview.html 30 Aug 2011 23:18:23 -0000 1.89
@@ -7,16 +7,11 @@
<title>CSS3 Values and Units</title>
<style type="text/css">
- .issue { color: red }
- table { border-collapse: collapse; border: 1px solid black; margin: 1em 0 }
- th, td { border: 1px solid black; padding: 0.2em; text-align: left }
- tt.declaration { white-space: nowrap }
- .del { text-decoration: line-through}
- .say { font-style: italic }
- .value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
+ code, small { white-space: nowrap }
+ .say { clor: gray; }
+ pre.value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
#propvalues td { text-align: right; }
#propvalues td + td { text-align: left; }
- p { text-indent: 0 !important; margin: 1em 0 !important; }
</style>
<link href="../default.css" rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
@@ -1853,15 +1848,14 @@
<h3 id=stages-examples><span class=secno>10.5. </span> Examples</h3>
- <table>
- <tbody>
+ <table class=data>
+ <thead>
<tr>
- <th>Example
+ <th>
- <th>Winning declaration
+ <th>Property
- <th>Property</th>
- <!-- <th>Cascaded value</th> -->
+ <th>Winning declaration <!-- <th>Cascaded value -->
<th>Specified value
@@ -1871,182 +1865,184 @@
<th>Actual value
+ <thead>
+
+ <tbody>
<tr>
- <td>a
+ <td>(a)
- <td><tt class=declaration>text-align: left</tt>
+ <th>‘<code class=property>text-align</code>’
- <td>text-align</td>
- <!-- <td>left</td>-->
+ <td><code class=declaration>text-align: left</code>
+ <!-- <td>''left''-->
- <td>left
+ <td>‘<code class=css>left</code>’
- <td>left
+ <td>‘<code class=css>left</code>’
- <td>left
+ <td>‘<code class=css>left</code>’
- <td>left
+ <td>‘<code class=css>left</code>’
<tr>
- <td>b
+ <td>(b)
- <td><tt class=declaration>border-width: inherit</tt>
+ <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>border-top-width, border-right-width, border-bottom-width,
- border-left-width</td>
- <!-- <td>inherit</td> -->
+ <td><code class=declaration>border-width: inherit</code>
+ <!-- <td>''inherit'' -->
- <td class=say>4.2px
+ <td class=say>‘<code class=css>4.2px</code>’
- <td>4.2px
+ <td>‘<code class=css>4.2px</code>’
- <td>4.2px
+ <td>‘<code class=css>4.2px</code>’
- <td>4px
+ <td>‘<code class=css>4px</code>’
<tr>
- <td>c
+ <td>(c)
- <td>(no winning declaration)
+ <th>‘<code class=property>width</code>’
- <td>width</td>
- <!-- <td>(no specified value)</td>-->
+ <td><small>(none)</small> <!-- <td><small>(none)</small>-->
- <td>auto (initial value)
+ <td>‘<code class=css>auto</code>’
+ <small>(initial value)</small>
- <td>auto
+ <td>‘<code class=css>auto</code>’
- <td>120px
+ <td>‘<code class=css>120px</code>’
- <td>120px
+ <td>‘<code class=css>120px</code>’
<tr>
- <td>d
+ <td>(d)
- <td><tt class=declaration>list-style-position: inherit</tt>
+ <th>‘<code class=property>list-style-position</code>’
- <td>list-style-position</td>
- <!-- <td>inherit</td> -->
+ <td><code class=declaration>list-style-position: inherit</code>
+ <!-- <td>''inherit'' -->
- <td class=say>inside
+ <td class=say>‘<code class=css>inside</code>’
- <td>inside
+ <td>‘<code class=css>inside</code>’
- <td>inside
+ <td>‘<code class=css>inside</code>’
- <td>inside
+ <td>‘<code class=css>inside</code>’
<tr>
- <td>e
+ <td>(e)
- <td><tt class=declaration>list-style-position: initial</tt>
+ <th>‘<code class=property>list-style-position</code>’
- <td>list-style-position</td>
- <!-- <td>initial</td>-->
+ <td><code class=declaration>list-style-position: initial</code>
+ <!-- <td>''initial''-->
- <td>outside (initial value)
+ <td>‘<code class=css>outside</code>’
+ <small>(initial value)</small>
- <td>outside
+ <td>‘<code class=css>outside</code>’
- <td>outside
+ <td>‘<code class=css>outside</code>’
- <td>outside
+ <td>‘<code class=css>outside</code>’
<tr>
- <td>f
+ <td>(f)
- <td><tt class=declaration>font-size: 1.2em</tt>
+ <th>‘<code class=property>font-size</code>’
- <td>font-size</td>
- <!-- <td>1.2em</td>-->
+ <td><code class=declaration>font-size: 1.2em</code>
+ <!-- <td>''1.2em''-->
- <td>1.2em
+ <td>‘<code class=css>1.2em</code>’
- <td class=say>14.1px
+ <td class=say>‘<code class=css>14.1px</code>’
- <td>14.1px
+ <td>‘<code class=css>14.1px</code>’
- <td>14px
+ <td>‘<code class=css>14px</code>’
<tr>
- <td>g
+ <td>(g)
- <td><tt class=declaration>width: 80%</tt>
+ <th>‘<code class=property>width</code>’
- <td>width</td>
- <!-- <td>80%</td>-->
+ <td><code class=declaration>width: 80%</code> <!-- <td>''80%''-->
- <td>80%
+ <td>‘<code class=css>80%</code>’
- <td>80%
+ <td>‘<code class=css>80%</code>’
- <td class=say>354.2px
+ <td class=say>‘<code class=css>354.2px</code>’
- <td>354px
+ <td>‘<code class=css>354px</code>’
<tr>
- <td>h
+ <td>(h)
- <td><tt class=declaration>width: auto</tt>
+ <th>‘<code class=property>width</code>’
- <td>width</td>
- <!-- <td>auto</td>-->
+ <td><code class=declaration>width: auto</code> <!-- <td>''auto''-->
- <td>auto
+ <td>‘<code class=css>auto</code>’
- <td>auto
+ <td>‘<code class=css>auto</code>’
- <td class=say>134px
+ <td class=say>‘<code class=css>134px</code>’
- <td>134px
+ <td>‘<code class=css>134px</code>’
<tr>
- <td>i
+ <td>(i)
- <td><tt class=declaration>height: auto</tt>
+ <th>‘<code class=property>height</code>’
- <td>height</td>
- <!-- <td>auto</td>-->
+ <td><code class=declaration>height: auto</code> <!-- <td>''auto''-->
- <td>auto
+ <td>‘<code class=css>auto</code>’
- <td>auto
+ <td>‘<code class=css>auto</code>’
- <td class=say>176px
+ <td class=say>‘<code class=css>176px</code>’
- <td>176px
+ <td>‘<code class=css>176px</code>’
<tr>
- <td>j
+ <td>(j)
- <td>(no winning declaration)
+ <th>‘<code class=property>page-break-after</code>’
- <td>page-break-after</td>
- <!-- <td>(no specified value)</td>-->
+ <td><small>(none)</small> <!-- <td><small>(none)</small>-->
- <td>auto (initial value)
+ <td>‘<code class=css>auto</code>’
+ <small>(initial value)</small>
- <td>auto
+ <td>‘<code class=css>auto</code>’
- <td>auto
+ <td>‘<code class=css>auto</code>’
- <td>auto
+ <td>‘<code class=css>auto</code>’
<tr>
- <td>k
+ <td>(k)
- <td><tt class=declaration>orphans: 3</tt>
+ <th>‘<code class=property>orphans</code>’
- <td>orphans</td>
- <!-- <td>3</td>-->
+ <td><code class=declaration>orphans: 3</code> <!-- <td>''3''-->
- <td>3
+ <td>‘<code class=css>3</code>’
- <td>3
+ <td>‘<code class=css>3</code>’
- <td>3
+ <td>‘<code class=css>3</code>’
- <td>3
+ <td>‘<code class=css>3</code>’
</table>
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-values/Overview.src.html,v
retrieving revision 1.91
retrieving revision 1.92
diff -u -d -r1.91 -r1.92
--- Overview.src.html 30 Aug 2011 22:58:28 -0000 1.91
+++ Overview.src.html 30 Aug 2011 23:18:23 -0000 1.92
@@ -6,16 +6,11 @@
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS3 Values and Units</title>
<style type="text/css">
- .issue { color: red }
- table { border-collapse: collapse; border: 1px solid black; margin: 1em 0 }
- th, td { border: 1px solid black; padding: 0.2em; text-align: left }
- tt.declaration { white-space: nowrap }
- .del { text-decoration: line-through}
- .say { font-style: italic }
- .value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
+ code, small { white-space: nowrap }
+ .say { clor: gray; }
+ pre.value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
#propvalues td { text-align: right; }
#propvalues td + td { text-align: left; }
- p { text-indent: 0 !important; margin: 1em 0 !important; }
</style>
<link rel="stylesheet" type="text/css" href="../default.css">
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
@@ -1344,10 +1339,10 @@
<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
+ 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>.
@@ -1367,10 +1362,10 @@
<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
+ 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.
@@ -1379,152 +1374,153 @@
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.
+ 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.
+ 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>
- <tbody>
- <tr>
- <th>Example</th>
- <th>Winning declaration</th>
- <th>Property</th>
-<!-- <th>Cascaded value</th> -->
- <th>Specified value</th>
- <th>Computed value</th>
- <th>Used value</th>
- <th>Actual value</th>
- </tr>
- <tr>
- <td>a</td>
- <td><tt class="declaration">text-align: left</tt></td>
- <td>text-align</td>
-<!-- <td>left</td>-->
- <td>left</td>
- <td>left</td>
- <td>left</td>
- <td>left</td>
- </tr>
- <tr>
- <td>b</td>
- <td><tt class="declaration">border-width: inherit</tt></td>
- <td>border-top-width, border-right-width, border-bottom-width,
- border-left-width</td>
-<!-- <td>inherit</td> -->
- <td class="say">4.2px</td>
- <td>4.2px</td>
- <td>4.2px</td>
- <td>4px</td>
- </tr>
- <tr>
- <td>c</td>
- <td>(no winning declaration)</td>
- <td>width</td>
-<!-- <td>(no specified value)</td>-->
- <td>auto (initial value)</td>
- <td>auto</td>
- <td>120px</td>
- <td>120px</td>
- </tr>
- <tr>
- <td>d</td>
- <td><tt class="declaration">list-style-position: inherit</tt></td>
- <td>list-style-position</td>
-<!-- <td>inherit</td> -->
- <td class="say">inside</td>
- <td>inside</td>
- <td>inside</td>
- <td>inside</td>
- </tr>
- <tr>
- <td>e</td>
- <td><tt class="declaration">list-style-position: initial</tt></td>
- <td>list-style-position</td>
-<!-- <td>initial</td>-->
- <td>outside (initial value)</td>
- <td>outside</td>
- <td>outside</td>
- <td>outside</td>
- </tr>
- <tr>
- <td>f</td>
- <td><tt class="declaration">font-size: 1.2em</tt></td>
- <td>font-size</td>
-<!-- <td>1.2em</td>-->
- <td>1.2em</td>
- <td class="say">14.1px</td>
- <td>14.1px</td>
- <td>14px</td>
- </tr>
- <tr>
- <td>g</td>
- <td><tt class="declaration">width: 80%</tt></td>
- <td>width</td>
-<!-- <td>80%</td>-->
- <td>80%</td>
- <td>80%</td>
- <td class="say">354.2px</td>
- <td>354px</td>
- </tr>
- <tr>
- <td>h</td>
- <td><tt class="declaration">width: auto</tt></td>
- <td>width</td>
-<!-- <td>auto</td>-->
- <td>auto</td>
- <td>auto</td>
- <td class="say">134px</td>
- <td>134px</td>
- </tr>
- <tr>
- <td>i</td>
- <td><tt class="declaration">height: auto</tt></td>
- <td>height</td>
-<!-- <td>auto</td>-->
- <td>auto</td>
- <td>auto</td>
- <td class="say">176px</td>
- <td>176px</td>
- </tr>
- <tr>
- <td>j</td>
- <td>(no winning declaration)</td>
- <td>page-break-after</td>
-<!-- <td>(no specified value)</td>-->
- <td>auto (initial value)</td>
- <td>auto</td>
- <td>auto</td>
- <td>auto</td>
- </tr>
- <tr>
- <td>k</td>
- <td><tt class="declaration">orphans: 3</tt></td>
- <td>orphans</td>
-<!-- <td>3</td>-->
- <td>3</td>
- <td>3</td>
- <td>3</td>
- <td>3</td>
- </tr>
- </tbody>
-</table>
+ <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>
+ <thead>
+ <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>
Received on Tuesday, 30 August 2011 23:18:28 UTC