W3C home > Mailing lists > Public > public-css-commits@w3.org > October 2011

csswg/css-variables Overview.html,1.17,1.18 Overview.src.html,1.17,1.18

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Sun, 30 Oct 2011 16:46:50 +0000
To: public-css-commits@w3.org
Message-Id: <E1RKYX5-00058r-Sa@lionel-hutz.w3.org>
Update of /sources/public/csswg/css-variables
In directory hutz:/tmp/cvs-serv19692

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Turn the issue about inheritance *looking* cyclic into an example instead.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-variables/Overview.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- Overview.html	27 Oct 2011 17:32:45 -0000	1.17
+++ Overview.html	30 Oct 2011 16:46:40 -0000	1.18
@@ -22,14 +22,14 @@
 
    <h1>CSS Variables Module Level 1</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 October
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 October
     2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css-variables-20111027/">http://dev.w3.org/csswg/css-variables/</a>
+     href="http://www.w3.org/TR/2011/ED-css-variables-20111030/">http://dev.w3.org/csswg/css-variables/</a>
      <!--<dt>Latest version:
 		<dd><a href="http://www.w3.org/TR/css-variables/">http://www.w3.org/TR/css-variables/</a>-->
      
@@ -274,7 +274,7 @@
     <tr>
      <th>Computed Value:
 
-     <td>specified value
+     <td>specified value with variables substituted
 
     <tr>
      <th>Media:
@@ -388,8 +388,17 @@
     lengths.</p>
   </div>
 
-  <div class=issue>
-   <p>Is it possible to do a "cyclic" dependency safely?</p>
+  <p>It is important to note that <a href="#data-property"><i>data
+   properties</i></a> resolve any <i>variables</i> in their values at
+   computed-value time, which occurs <em>before</em> the value is inherited.
+   In general, cyclic dependencies occur only when multiple data properties
+   on the same element refer to each other; data properties defined on
+   elements higher in the element tree can never cause a cyclic reference
+   with properties defined on elements lower in the element tree.
+
+  <div class=example>
+   <p>For example, given the following structure, these data properties are
+    <strong>not</strong> cyclic, and all define valid variables:</p>
 
    <pre>
 &lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
@@ -397,17 +406,22 @@
 two   { data-bar: calc(data(foo) + 10px); }
 three { data-foo: calc(data(bar) + 10px); }</pre>
 
-   <p>If I'm thinking correctly, one and two would get the value &lsquo;<code
-    class=css>10px</code>&rsquo; for &lsquo;<code
-    class=css>data(foo)</code>&rsquo;, but three overrides &lsquo;<code
-    class=property>data-foo</code>&rsquo; with a new definition. It gets the
-    *inherited* value of &lsquo;<code class=property>data-bar</code>&rsquo;,
-    which is &lsquo;<code class=css>calc(10px + 10px)</code>&rsquo; (or maybe
-    just &lsquo;<code class=css>20px</code>&rsquo; - &lsquo;<code
-    class=css>calc()</code>&rsquo; computed values aren't well defined yet),
-    so it seems like it validly sets &lsquo;<code
-    class=property>data-foo</code>&rsquo; to &lsquo;<code
-    class=css>30px</code>&rsquo;. Right?</p>
+   <p>The &lt;one> element defines a value for &lsquo;<code
+    class=property>data-foo</code>&rsquo;. The &lt;two> element inherits this
+    value, and additionally assigns a value to &lsquo;<code
+    class=property>data-bar</code>&rsquo;. Finally, the &lt;three> element
+    inherits the &lsquo;<code class=property>data-bar</code>&rsquo; value
+    <em>after</em> variable substitution (in other words, it sees the value
+    &lsquo;<code class=css>calc(10px + 10px)</code>&rsquo;), and then
+    redefines &lsquo;<code class=property>data-foo</code>&rsquo; in terms of
+    that value. Since the value it inherited for &lsquo;<code
+    class=property>data-bar</code>&rsquo; no longer contains a reference to
+    the &lsquo;<code class=property>data-foo</code>&rsquo; property defined
+    on &lt;one>, defining &lsquo;<code class=property>data-foo</code>&rsquo;
+    using the &lsquo;<code class=css>data(bar)</code>&rsquo; variable is not
+    cyclic, and actually defines a value that will eventually (when
+    referenced as a variable in a normal property) resolve to &lsquo;<code
+    class=css>30px</code>&rsquo;.</p>
   </div>
 
   <p>The initial value of a <a href="#data-property"><i>data property</i></a>
@@ -1041,7 +1055,7 @@
 
      <td>yes
 
-     <td>specified value
+     <td>specified value with variables substituted
 
      <td>all
   </table>

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-variables/Overview.src.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- Overview.src.html	27 Oct 2011 17:32:45 -0000	1.17
+++ Overview.src.html	30 Oct 2011 16:46:48 -0000	1.18
@@ -102,7 +102,7 @@
 			<td>yes
 		<tr>
 			<th>Computed Value:
-			<td>specified value
+			<td>specified value with variables substituted
 		<tr>
 			<th>Media:
 			<td>all
@@ -172,8 +172,10 @@
 		<p>Both 'data-one' and 'data-two' now define <i>invalid variables</i> rather than lengths.</p>
 	</div>
 
-	<div class='issue'>
-		<p>Is it possible to do a "cyclic" dependency safely?</p>
+	<p>It is important to note that <i>data properties</i> resolve any <i>variables</i> in their values at computed-value time, which occurs <em>before</em> the value is inherited.  In general, cyclic dependencies occur only when multiple data properties on the same element refer to each other; data properties defined on elements higher in the element tree can never cause a cyclic reference with properties defined on elements lower in the element tree.</p>
+
+	<div class='example'>
+		<p>For example, given the following structure, these data properties are <strong>not</strong> cyclic, and all define valid variables:</p>
 
 		<pre>
 &lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
@@ -181,7 +183,7 @@
 two   { data-bar: calc(data(foo) + 10px); }
 three { data-foo: calc(data(bar) + 10px); }</pre>
 
-		<p>If I'm thinking correctly, one and two would get the value ''10px'' for ''data(foo)'', but three overrides 'data-foo' with a new definition.  It gets the *inherited* value of 'data-bar', which is ''calc(10px + 10px)'' (or maybe just ''20px'' - ''calc()'' computed values aren't well defined yet), so it seems like it validly sets 'data-foo' to ''30px''.  Right?</p>
+		<p>The &lt;one> element defines a value for 'data-foo'.  The &lt;two> element inherits this value, and additionally assigns a value to 'data-bar'.  Finally, the &lt;three> element inherits the 'data-bar' value <em>after</em> variable substitution (in other words, it sees the value ''calc(10px + 10px)''), and then redefines 'data-foo' in terms of that value.  Since the value it inherited for 'data-bar' no longer contains a reference to the 'data-foo' property defined on &lt;one>, defining 'data-foo' using the ''data(bar)'' variable is not cyclic, and actually defines a value that will eventually (when referenced as a variable in a normal property) resolve to ''30px''.</p>
 	</div>
 
 	<p>The initial value of a <i>data property</i> is a special invalid value which makes the associated variable an <i>invalid variable</i>.  This is represented by the keyword ''invalid'', but that keyword has no special meaning in itself, and is valid if set explicitly in a data property.</p>
Received on Sunday, 30 October 2011 16:46:53 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Sunday, 30 October 2011 16:46:55 GMT