added cycle(), added text about URLs inside functions

Author: howcom

css3-values/Overview.src.html

@@ -51,6 +51,77 @@ <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
 </div>
 
 
+<!--
+
+[css3-values] cycle() values?
+
+From: L. David Baron <dbaron@dbaron.org> 
+Date: Thu, 30 Mar 2006 01:20:00 -0800
+
+I'd like to resurrect an old proposal for addition to css3-values [1]:
+  http://lists.w3.org/Archives/Public/www-style/1999May/0067
+  http://lists.w3.org/Archives/Public/www-style/1999Jun/0026
+This is particularly useful for styling HTML's UL and EM elements.
+
+Proposed text that could be used in the specification is the following:
+
+=====
+
+The cycle() expression allows descendant elements to cycle over a list
+of values instead of inheriting the same value.  The syntax of the
+cycle() expression is:
+
+  cycle( <value> [, <value> ]*)
+
+where <value> 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.
+
+The value returned by cycle() must be determined by comparing the
+inherited value I (the computed value on the parent, or, for the root,
+the initial value) to the computed values C[n] returned by the n-th
+argument to cycle().  For the earliest C[n] such that C[n] == I, the
+value returned by cycle is C[n+1].  However, if this C[n] is the last
+value, or if there are no C[n] that equal I, the computed value of the
+first value is returned instead.
+
+Example 1:
+
+  /* make em elements italic, but make them normal if they're inside
+     something that's italic */
+  em { font-style: cycle(italic, normal); }
+
+Example 2:
+
+  /* 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); }
+
+=====
+
+It could also be used in other interesting ways -- probably some bizarre
+ones that I haven't even thought of yet.  Although I admit I have
+already thought of:
+  list-style-type: cycle(cycle(disc,disc,circle,circle), cycle(disc,circle),
+                         cycle(square,square,box,box), cycle(square,box));
+Understanding this is left as an exercise to the reader.
+
+
+=======================================================
+http://lists.w3.org/Archives/Public/www-style/2009Mar/0065.html
+
+
+
+   - RESOLVED: URLs inside functional notation where URL is expected should be able
+               to take either url() or bare strings (like @import), preference for
+               examples is bare strings.
+
+
+-->
+
+
 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
 
 <p>This CSS3 module describes the various values and units that CSS
@@ -227,8 +298,10 @@ <h3>Functional notation</h3>
 (',') with optional whitespace before and after the comma.
 
 <div class="example">
+<pre>
 background: url(http://www.example.org/image);
 color: rgb(100, 200, 50 );
+</pre>
 </div>
 
 <p>Some properties accept space- or comma-separated lists of values. A value
@@ -237,6 +310,47 @@ <h3>Functional notation</h3>
 value is a <dfn>simple value</dfn>.
 
 
+<h3>Cycle function</h3>
+
+<p>The cycle() 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> [, &lt;value> ]*)
+</pre>
+
+where &lt;value> 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 I (the computed value on the parent, or, for the root,
+the initial value) to the computed values C[n] returned by the n-th
+argument to cycle().  For the earliest C[n] such that C[n] == I, the
+value returned by cycle is C[n+1].  However, if this C[n] is the last
+value, or if there are no C[n] that equal I, the computed value of the
+first value is returned instead.
+
+<div class="example">
+<p>Make em elements italic, but make them normal if they're inside something that's italic:
+<pre>
+  em { font-style: cycle(italic, normal); }
+</pre>
+</div>
+
+<div class="example">
+<p>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:
+
+<pre>
+  ul { list-style-type: disk; }
+  li > ul { list-style-type: cycle(disk, circle, square, box); }
+</pre>
+</div>
+
+<p>Nested cycle() values are not allowed. 
+
+
 <h2>Keywords</h2>
 
 <p>In the value definition fields, keywords appear literally. Keywords are identifiers.</p>
@@ -953,6 +1067,14 @@ <h3 id="uris">&lt;url&gt;</h3>
 <p>User agents may vary in how they handle URIs that designate unavailable or
 inapplicable resources.</p>
 
+
+<p>URLs inside functional notation where URL is expected should be
+able to take either url() or bare strings.
+
+
+
+<!-- (like @import), preference for examples is bare strings. -->
+
 <h3>&lt;image&gt;</h3>
 
 <p>TBD.