FFFF Turn the issue about inheritance *looking* cyclic into an example ins… · w3c/csswg-drafts@50f3c98 · GitHub
Skip to content

Commit 50f3c98

Browse files
tabatkinstabatkins
committed
Turn the issue about inheritance *looking* cyclic into an example instead.
1 parent 50bd6d9 commit 50f3c98

2 files changed

Lines changed: 37 additions & 21 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@
2222

2323
<h1>CSS Variables Module Level 1</h1>
2424

25-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 October
25+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 October
2626
2011</h2>
2727

2828
<dl>
2929
<dt>This version:
3030

3131
<dd><a
32-
href="http://www.w3.org/TR/2011/ED-css-variables-20111027/">http://dev.w3.org/csswg/css-variables/</a>
32+
href="http://www.w3.org/TR/2011/ED-css-variables-20111030/">http://dev.w3.org/csswg/css-variables/</a>
3333
<!--<dt>Latest version:
3434
<dd><a href="http://www.w3.org/TR/css-variables/">http://www.w3.org/TR/css-variables/</a>-->
3535

@@ -274,7 +274,7 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
274274
<tr>
275275
<th>Computed Value:
276276

277-
<td>specified value
277+
<td>specified value with variables substituted
278278

279279
<tr>
280280
<th>Media:
@@ -388,26 +388,40 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
388388
lengths.</p>
389389
</div>
390390

391-
<div class=issue>
392-
<p>Is it possible to do a "cyclic" dependency safely?</p>
391+
<p>It is important to note that <a href="#data-property"><i>data
392+
properties</i></a> resolve any <i>variables</i> in their values at
393+
computed-value time, which occurs <em>before</em> the value is inherited.
394+
In general, cyclic dependencies occur only when multiple data properties
395+
on the same element refer to each other; data properties defined on
396+
elements higher in the element tree can never cause a cyclic reference
397+
with properties defined on elements lower in the element tree.
398+
399+
<div class=example>
400+
<p>For example, given the following structure, these data properties are
401+
<strong>not</strong> cyclic, and all define valid variables:</p>
393402

394403
<pre>
395404
&lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
396405
one { data-foo: 10px; }
397406
two { data-bar: calc(data(foo) + 10px); }
398407
three { data-foo: calc(data(bar) + 10px); }</pre>
399408

400-
<p>If I'm thinking correctly, one and two would get the value &lsquo;<code
401-
class=css>10px</code>&rsquo; for &lsquo;<code
402-
class=css>data(foo)</code>&rsquo;, but three overrides &lsquo;<code
403-
class=property>data-foo</code>&rsquo; with a new definition. It gets the
404-
*inherited* value of &lsquo;<code class=property>data-bar</code>&rsquo;,
405-
which is &lsquo;<code class=css>calc(10px + 10px)</code>&rsquo; (or maybe
406-
just &lsquo;<code class=css>20px</code>&rsquo; - &lsquo;<code
407-
class=css>calc()</code>&rsquo; computed values aren't well defined yet),
408-
so it seems like it validly sets &lsquo;<code
409-
class=property>data-foo</code>&rsquo; to &lsquo;<code
410-
class=css>30px</code>&rsquo;. Right?</p>
409+
<p>The &lt;one> element defines a value for &lsquo;<code
410+
class=property>data-foo</code>&rsquo;. The &lt;two> element inherits this
411+
value, and additionally assigns a value to &lsquo;<code
412+
class=property>data-bar</code>&rsquo;. Finally, the &lt;three> element
413+
inherits the &lsquo;<code class=property>data-bar</code>&rsquo; value
414+
<em>after</em> variable substitution (in other words, it sees the value
415+
&lsquo;<code class=css>calc(10px + 10px)</code>&rsquo;), and then
416+
redefines &lsquo;<code class=property>data-foo</code>&rsquo; in terms of
417+
that value. Since the value it inherited for &lsquo;<code
418+
class=property>data-bar</code>&rsquo; no longer contains a reference to
419+
the &lsquo;<code class=property>data-foo</code>&rsquo; property defined
420+
on &lt;one>, defining &lsquo;<code class=property>data-foo</code>&rsquo;
421+
using the &lsquo;<code class=css>data(bar)</code>&rsquo; variable is not
422+
cyclic, and actually defines a value that will eventually (when
423+
referenced as a variable in a normal property) resolve to &lsquo;<code
424+
class=css>30px</code>&rsquo;.</p>
411425
</div>
412426

413427
<p>The initial value of a <a href="#data-property"><i>data property</i></a>
@@ -1041,7 +1055,7 @@ <h2 class=no-num id=property-index>Property index</h2>
10411055

10421056
<td>yes
10431057

1044-
<td>specified value
1058+
<td>specified value with variables substituted
10451059

10461060
<td>all
10471061
</table>

‎css-variables/Overview.src.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ <h2 id="defining-variables">
102102
<td>yes
103103
<tr>
104104
<th>Computed Value:
105-
<td>specified value
105+
<td>specified value with variables substituted
106106
<tr>
107107
<th>Media:
108108
<td>all
@@ -172,16 +172,18 @@ <h2 id="defining-variables">
172172
<p>Both 'data-one' and 'data-two' now define <i>invalid variables</i> rather than lengths.</p>
173173
</div>
174174

175-
<div class='issue'>
176-
<p>Is it possible to do a "cyclic" dependency safely?</p>
175+
<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>
176+
177+
<div class='example'>
178+
<p>For example, given the following structure, these data properties are <strong>not</strong> cyclic, and all define valid variables:</p>
177179

178180
<pre>
179181
&lt;one>&lt;two>&lt;three />&lt;/two>&lt;/one>
180182
one { data-foo: 10px; }
181183
two { data-bar: calc(data(foo) + 10px); }
182184
three { data-foo: calc(data(bar) + 10px); }</pre>
183185

184-
<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>
186+
<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>
185187
</div>
186188

187189
<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>

0 commit comments

Comments
 (0)