- 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
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>
<one><two><three /></two></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 ‘<code
- class=css>10px</code>’ for ‘<code
- class=css>data(foo)</code>’, but three overrides ‘<code
- class=property>data-foo</code>’ with a new definition. It gets the
- *inherited* value of ‘<code class=property>data-bar</code>’,
- which is ‘<code class=css>calc(10px + 10px)</code>’ (or maybe
- just ‘<code class=css>20px</code>’ - ‘<code
- class=css>calc()</code>’ computed values aren't well defined yet),
- so it seems like it validly sets ‘<code
- class=property>data-foo</code>’ to ‘<code
- class=css>30px</code>’. Right?</p>
+ <p>The <one> element defines a value for ‘<code
+ class=property>data-foo</code>’. The <two> element inherits this
+ value, and additionally assigns a value to ‘<code
+ class=property>data-bar</code>’. Finally, the <three> element
+ inherits the ‘<code class=property>data-bar</code>’ value
+ <em>after</em> variable substitution (in other words, it sees the value
+ ‘<code class=css>calc(10px + 10px)</code>’), and then
+ redefines ‘<code class=property>data-foo</code>’ in terms of
+ that value. Since the value it inherited for ‘<code
+ class=property>data-bar</code>’ no longer contains a reference to
+ the ‘<code class=property>data-foo</code>’ property defined
+ on <one>, defining ‘<code class=property>data-foo</code>’
+ using the ‘<code class=css>data(bar)</code>’ variable is not
+ cyclic, and actually defines a value that will eventually (when
+ referenced as a variable in a normal property) resolve to ‘<code
+ class=css>30px</code>’.</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>
<one><two><three /></two></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 <one> element defines a value for 'data-foo'. The <two> element inherits this value, and additionally assigns a value to 'data-bar'. Finally, the <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 <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 UTC