Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
fantasai committed Aug 11, 2011
1 parent 85cee27 commit 6f25d04
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 2 deletions.
58 changes: 56 additions & 2 deletions css3-values/Overview.html
Expand Up @@ -273,7 +273,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
class=css>min()</code>&rsquo; and &lsquo;<code
class=css>max()</code>&rsquo; </a>

<li><a href="#attr"><span class=secno>9.2. </span> Attribute References:
<li><a href="#cycle"><span class=secno>9.2. </span> Cycling Values:
&lsquo;<code class=css>cycle()</code>&rsquo;</a>

<li><a href="#attr"><span class=secno>9.3. </span> Attribute References:
&lsquo;<code class=css>attr()</code>&rsquo;</a>
</ul>

Expand Down Expand Up @@ -1409,7 +1412,55 @@ <h3 id=calc><span class=secno>9.1. </span> Calculations: &lsquo;<a
both auto and fixed layout tables may be treated as if &lsquo;<code
class=property>auto</code>&rsquo; had been specified.

<h3 id=attr><span class=secno>9.2. </span> Attribute References:
<h3 id=cycle><span class=secno>9.2. </span> Cycling Values: &lsquo;<code
class=css>cycle()</code>&rsquo;</h3>

<p>The <dfn id=cycle0>&lsquo;<code class=css>cycle()</code>&rsquo;</dfn>
expression allows descendant elements to cycle over a list of values
instead of inheriting the same value. The syntax of the &lsquo;<code
class=css>cycle()</code>&rsquo; expression is:

<pre>cycle( &lt;value&gt;# )</pre>

<p>where <code>&lt;value&lt;</code> is a CSS value that is valid where
the expression is placed. If any of the values inside are not valid,
then the entire &lsquo;<code class=css>cycle()</code>&rsquo; expression
is invalid.

<p>The value returned by &lsquo;<code class=css>cycle()</code>&rsquo;
must be determined by comparing the inherited value <var>I</var> (the
computed value on the parent, or, for the root, the initial value) to
the computed values <var>C<sub>n</sub></var> returned by the
<var>n</var>-th argument to &lsquo;<code
class=css>cycle()</code>&rsquo;. For the earliest
<var>C<sub>n</sub></var> such that <var>C<sub>n</sub></var> ==
<var>I</var>, the value returned by cycle is <var>C<sub>n+1</sub></var>.
However, if this <var>C<sub>n</sub></var> is the last value, or if there
are no <var>C<sub>n</sub></var> that equal <var>I</var>, the computed
value of the first value is returned instead.

<pre class=example>
/* make em elements italic, but make them normal if they're inside
something that's italic */
em { font-style: cycle(italic, normal); }</pre>

<pre class=example>
/* cycle between markers for nested lists, so that the top level has
disk markers, but nested lists use circle, square, box, and then
(for the 5th list deep) repeat */
ul { list-style-type: disk; }
li > ul { list-style-type: cycle(disk, circle, square, box); }</pre>

<p>The &lsquo;<code class=css>cycle()</code>&rsquo; notation is not
allowed to be nested; nor may it contain &lsquo;<code
class=css>attr()</code>&rsquo;, &lsquo;<a href="#calc0"><code
class=css>calc()</code></a>&rsquo;, &lsquo;<a href="#min"><code
class=css>min()</code></a>&rsquo;, or &lsquo;<a href="#max"><code
class=css>max()</code></a>&rsquo; notations. Declarations containing
such constructs are invalid and must be <a
href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

<h3 id=attr><span class=secno>9.3. </span> Attribute References:
&lsquo;<code class=css>attr()</code>&rsquo;</h3>

<p class=issue>Describe the feature fully here, not just a delta from CSS
Expand Down Expand Up @@ -2085,6 +2136,9 @@ <h2 class=no-num id=index>Index</h2>
<li>computed value, <a href="#computed-value" title="computed
value"><strong>10.2.</strong></a>

<li>&lsquo;<code class=css>cycle()</code>&rsquo;, <a href="#cycle0"
title="''cycle()''"><strong>9.2.</strong></a>

<li>deg, <a href="#deg" title=deg><strong>6.1.</strong></a>

<li>dimension, <a href="#dimension"
Expand Down
40 changes: 40 additions & 0 deletions css3-values/Overview.src.html
Expand Up @@ -982,7 +982,47 @@ <h3 id="calc">
table cells in both auto and fixed layout tables may be treated as if
'auto' had been specified.

<h3 id="cycle">
Cycling Values: ''cycle()''</h3>

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

<pre>cycle( &lt;value&gt;# )</pre>

<p>where <code>&lt;value&lt;</code> is a CSS value that is valid where
the expression is placed. If any of the values inside are not valid,
then the entire ''cycle()'' expression is invalid.

<p>The value returned by ''cycle()'' must be determined by comparing
the inherited value <var>I</var> (the computed value on the parent,
or, for the root, the initial value) to the computed values
<var>C<sub>n</sub></var> returned by the <var>n</var>-th argument to
''cycle()''.
For the earliest <var>C<sub>n</sub></var> such that
<var>C<sub>n</sub></var> == <var>I</var>, the value returned by cycle
is <var>C<sub>n+1</sub></var>. However, if this <var>C<sub>n</sub></var>
is the last value, or if there are no <var>C<sub>n</sub></var> that
equal <var>I</var>, the computed value of the first value is returned
instead.

<pre class="example">
/* make em elements italic, but make them normal if they're inside
something that's italic */
em { font-style: cycle(italic, normal); }</pre>

<pre class="example">
/* cycle between markers for nested lists, so that the top level has
disk markers, but nested lists use circle, square, box, and then
(for the 5th list deep) repeat */
ul { list-style-type: disk; }
li > ul { list-style-type: cycle(disk, circle, square, box); }</pre>

<p>The ''cycle()'' notation is not allowed to be nested; nor may it
contain ''attr()'', ''calc()'', ''min()'', or ''max()'' notations.
Declarations containing such constructs are invalid and must be
<a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

<h3 id="attr">
Attribute References: ''attr()''</h3>
Expand Down

0 comments on commit 6f25d04

Please sign in to comment.