Skip to content

Commit d7bc04d

Browse files
skynavgaskynavga
committed
Merge from remote head.
2 parents ac01077 + 252ce42 commit d7bc04d

2 files changed

Lines changed: 77 additions & 61 deletions

File tree

‎css3-values/Overview.html‎

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@
2828

2929
<h1>CSS Values and Units Module Level 3</h1>
3030

31-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 July 2012</h2>
31+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 July 2012</h2>
3232

3333
<dl>
3434
<dt>This version:
3535

3636
<dd><a
37-
href="http://www.w3.org/TR/2012/ED-css3-values-20120712/">http://www.w3.org/TR/2012/ED-css3-values-20120712/</a>
37+
href="http://www.w3.org/TR/2012/ED-css3-values-20120716/">http://www.w3.org/TR/2012/ED-css3-values-20120716/</a>
3838

3939
<dt>Latest version:
4040

@@ -1564,14 +1564,23 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
15641564
Values: ‘<a href="#toggle"><code class=css>toggle()</code></a>’</h3>
15651565

15661566
<p>The <dfn id=toggle>toggle()</dfn> expression allows descendant elements
1567-
to cycle over a list of values instead of inheriting the same value. The
1568-
syntax of the ‘<a href="#toggle"><code class=css>toggle()</code></a>’
1569-
expression is:
1567+
to cycle over a list of values instead of inheriting the same value.
15701568

1571-
<pre>toggle( &lt;value># )</pre>
1569+
<div class=example>
1570+
<p>The following example makes <code>&lt;em></code> elements italic in
1571+
general, but makes them normal if they're inside something that's italic:
1572+
1573+
1574+
<pre>em { font-style: toggle(italic, normal); }</pre>
1575+
</div>
1576+
1577+
<p>The syntax of the ‘<a href="#toggle"><code
1578+
class=css>toggle()</code></a>’ expression is:
1579+
1580+
<pre>toggle( &lt;value><a href="#component-multipliers">#</a> )</pre>
15721581

15731582
<p> where <var>&lt;value></var> is any CSS value that is valid where the
1574-
expression is placed, and which doesn't contain any top-level commas. If
1583+
expression is placed, and that doesn't contain any top-level commas. If
15751584
any of the values inside are not valid, then the entire ‘<a
15761585
href="#toggle"><code class=css>toggle()</code></a>’ expression is
15771586
invalid. The ‘<a href="#toggle"><code class=css>toggle()</code></a>’
@@ -1589,49 +1598,52 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
15891598

15901599
<p> The value represented by ‘<a href="#toggle"><code
15911600
class=css>toggle()</code></a>’ is determined by comparing the inherited
1592-
value <var>I</var> (i.e. the computed value on the parent, or, for the
1593-
root, the initial value) to the computed values <var>C<sub>n</sub></var>
1594-
returned by the <var>n</var>-th argument to ‘<a href="#toggle"><code
1595-
class=css>toggle()</code></a>’. For the earliest
1596-
<var>C<sub>n</sub></var> such that <var>C<sub>n</sub></var> =
1597-
<var>I</var>, the value returned by toggle is <var>C<sub>n+1</sub></var>.
1598-
However, if this <var>C<sub>n</sub></var> is the last value, or if there
1599-
are no <var>C<sub>n</sub></var> that equal <var>I</var>, the computed
1600-
value of the first value is returned instead.
1601+
value <var>I</var> (i.e. the <a
1602+
href="http://www.w3.org/TR/CSS21/cascade.html#computed-value">computed
1603+
value</a> on the parent, or, for the root, the initial value) to the
1604+
computed values <var>C<sub>n</sub></var> returned by the <var>n</var>-th
1605+
argument to ‘<a href="#toggle"><code class=css>toggle()</code></a>’.
1606+
For the earliest <var>C<sub>n</sub></var> such that
1607+
<var>C<sub>n</sub></var> = <var>I</var>, the value returned by toggle is
1608+
<var>C<sub>n+1</sub></var>. However, if this <var>C<sub>n</sub></var> is
1609+
the last value, or if there are no <var>C<sub>n</sub></var> that equal
1610+
<var>I</var>, the computed value of the first value is returned instead.
16011611

16021612
<div class=example>
1603-
<pre>
1604-
/* make em elements italic, but make them normal if they're inside
1605-
something that's italic */
1606-
em { font-style: toggle(italic, normal); }</pre>
1607-
</div>
1613+
<p>The following example cycles markers for nested lists, so that a top
1614+
level list has <code>disc</code>-shaped markers, but nested lists use
1615+
<code>circle</code>, then <code>square</code>, then <code>box</code>, and
1616+
then repeat through the list of marker shapes, starting again (for the
1617+
5th list deep) with <code>disc</code>.
16081618

1609-
<div class=example>
16101619
<pre>
1611-
/* cycle between markers for nested lists, so that the top level has
1612-
disk markers, but nested lists use circle, square, box, and then
1613-
(for the 5th list deep) repeat */
16141620
ul { list-style-type: disc; }
16151621
ul ul { list-style-type: toggle(disc, circle, square, box); }</pre>
16161622
</div>
16171623

1618-
<p class=note> Note that "computed values" are abstract sets of values, not
1619-
particular serializations, so comparison between computed values should
1620-
always be unambiguous and have the expected result. For example, ‘<code
1621-
class=property>box-shadow</code>’ computed values are just two offsets,
1622-
a blur, a spread, and a color, so the declarations ‘<code
1623-
class=css>box-shadow: 1px 1px blue;</code>’ and ‘<code
1624-
class=css>box-shadow: 1px 1px 0px blue;</code>’ produce identical
1625-
computed values. If the "Computed Value" line of a property definition
1626-
seems to define something ambiguous or overly strict, please <a
1627-
href="#status">provide feedback</a> so we can fix it.
1628-
16291624
<p class=note> Note that ‘<a href="#toggle"><code
16301625
class=css>toggle()</code></a>’ explicitly looks at the computed value of
16311626
the parent, so it works even on non-inherited properties. This is similar
16321627
to the ‘<a href="#inherit"><code class=css>inherit</code></a>’
16331628
keyword, which is works even on non-inherited properties.
16341629

1630+
<p class=note> Note that the <a
1631+
href="http://www.w3.org/TR/CSS21/cascade.html#computed-value">computed
1632+
value</a> of a property is an abstract set of values, not a particular
1633+
serialization <a href="#CSS21"
1634+
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, so comparison between
1635+
computed values should always be unambiguous and have the expected result.
1636+
For example, a Level 2 <a
1637+
href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">‘<code
1638+
class=property>background-position</code>’</a> computed value is just
1639+
two offsets, each represented as an absolute length or a percentage, so
1640+
the declarations ‘<code class=css>background-position: top
1641+
center</code>’ and ‘<code class=css>background-position: 50%
1642+
0%</code>’ produce identical computed values. If the "Computed Value"
1643+
line of a property definition seems to define something ambiguous or
1644+
overly strict, please <a href="#status">provide feedback</a> so we can fix
1645+
it.
1646+
16351647
<h3 id=attr-notation><span class=secno>8.3. </span> Attribute References:
16361648
‘<a href="#attr"><code class=css>attr()</code></a>’</h3>
16371649
<!--

‎css3-values/Overview.src.html‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1107,14 +1107,22 @@ <h3 id="toggle-notation">
11071107

11081108
<p>The <dfn>toggle()</dfn> expression allows descendant elements
11091109
to cycle over a list of values instead of inheriting the same value.
1110-
The syntax of the ''toggle()'' expression is:
11111110

1112-
<pre>toggle( &lt;value># )</pre>
1111+
<div class='example'>
1112+
<p>The following example makes <code>&lt;em></code> elements italic in general,
1113+
but makes them normal if they're inside something that's italic:
1114+
<pre>em { font-style: toggle(italic, normal); }</pre>
1115+
</div>
1116+
1117+
1118+
<p>The syntax of the ''toggle()'' expression is:
1119+
1120+
<pre>toggle( &lt;value><a href="#component-multipliers">#</a> )</pre>
11131121

11141122
<p>
11151123
where <var>&lt;value></var> is any CSS value
11161124
that is valid where the expression is placed,
1117-
and which doesn't contain any top-level commas.
1125+
and that doesn't contain any top-level commas.
11181126
If any of the values inside are not valid,
11191127
then the entire ''toggle()'' expression is invalid.
11201128
The ''toggle()'' expression may be used as the value of any property
@@ -1132,7 +1140,7 @@ <h3 id="toggle-notation">
11321140
<p>
11331141
The value represented by ''toggle()'' is determined
11341142
by comparing the inherited value <var>I</var>
1135-
(i.e. the computed value on the parent,
1143+
(i.e. the <a href="http://www.w3.org/TR/CSS21/cascade.html#computed-value">computed value</a> on the parent,
11361144
or, for the root, the initial value)
11371145
to the computed values <var>C<sub>n</sub></var> returned by the <var>n</var>-th argument to ''toggle()''.
11381146
For the earliest <var>C<sub>n</sub></var>
@@ -1143,38 +1151,34 @@ <h3 id="toggle-notation">
11431151
the computed value of the first value is returned instead.
11441152

11451153
<div class='example'>
1154+
<p>The following example cycles markers for nested lists,
1155+
so that a top level list has <code>disc</code>-shaped markers,
1156+
but nested lists use <code>circle</code>, then <code>square</code>, then <code>box</code>,
1157+
and then repeat through the list of marker shapes,
1158+
starting again (for the 5th list deep) with <code>disc</code>.
11461159
<pre>
1147-
/* make em elements italic, but make them normal if they're inside
1148-
something that's italic */
1149-
em { font-style: toggle(italic, normal); }</pre>
1150-
</div>
1151-
1152-
<div class='example'>
1153-
<pre>
1154-
/* cycle between markers for nested lists, so that the top level has
1155-
disk markers, but nested lists use circle, square, box, and then
1156-
(for the 5th list deep) repeat */
11571160
ul { list-style-type: disc; }
11581161
ul ul { list-style-type: toggle(disc, circle, square, box); }</pre>
1159-
</div>
1162+
</div>
1163+
1164+
<p class='note'>
1165+
Note that ''toggle()'' explicitly looks at the computed value of the parent,
1166+
so it works even on non-inherited properties.
1167+
This is similar to the ''inherit'' keyword,
1168+
which is works even on non-inherited properties.
11601169

11611170
<p class='note'>
1162-
Note that "computed values" are abstract sets of values,
1163-
not particular serializations,
1171+
Note that the <a href="http://www.w3.org/TR/CSS21/cascade.html#computed-value">computed value</a> of a property is an abstract set of values,
1172+
not a particular serialization [[!CSS21]],
11641173
so comparison between computed values should always be unambiguous and have the expected result.
11651174
For example,
1166-
'box-shadow' computed values are just two offsets, a blur, a spread, and a color,
1167-
so the declarations ''box-shadow: 1px 1px blue;'' and ''box-shadow: 1px 1px 0px blue;''
1175+
a Level 2 <a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">'background-position'</a> computed value
1176+
is just two offsets, each represented as an absolute length or a percentage,
1177+
so the declarations ''background-position: top center'' and ''background-position: 50% 0%''
11681178
produce identical computed values.
11691179
If the "Computed Value" line of a property definition seems to define something ambiguous or overly strict,
11701180
please <a href="#status">provide feedback</a> so we can fix it.
11711181

1172-
<p class='note'>
1173-
Note that ''toggle()'' explicitly looks at the computed value of the parent,
1174-
so it works even on non-inherited properties.
1175-
This is similar to the ''inherit'' keyword,
1176-
which is works even on non-inherited properties.
1177-
11781182
<h3 id="attr-notation">
11791183
Attribute References: ''attr()''</h3>
11801184

0 commit comments

Comments
 (0)