Skip to content

Commit 41585ae

Browse files
tabatkinstabatkins
committed
[css-variables] Processor fixes.
--HG-- extra : rebase_source : 5ae04a1d3c221decf0fa6c90ca0fdc0e0792d6d2
1 parent 921efce commit 41585ae

2 files changed

Lines changed: 26 additions & 24 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1+
<!DOCTYPE html>
22
<html lang="en"><head>
33
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
44
<title>CSS Custom Properties for Cascading Variables Module Level 1</title>
@@ -147,11 +147,11 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
147147
</p><h3 id="values" data-level="1.2"><span class="secno">1.2 </span>
148148
Values</h3>
149149

150-
<p> This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from <a data-autolink="biblio" U00022="" data-biblio-type="normative" title="CSS21" href="#css21">[CSS21]</a>.
151-
Value types not defined in this specification are defined in CSS Level&#160;2 Revision&#160;1 <a data-autolink="biblio" U00022="" data-biblio-type="normative" title="CSS21" href="#css21">[CSS21]</a>.
150+
<p> This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from <a data-autolink="biblio" data-biblio-type="normative" title="CSS21" href="#css21">[CSS21]</a>.
151+
Value types not defined in this specification are defined in CSS Level&#160;2 Revision&#160;1 <a data-autolink="biblio" data-biblio-type="normative" title="CSS21" href="#css21">[CSS21]</a>.
152152
Other CSS modules may expand the definitions of these value types:
153153
for example if the <a data-autolink="link" class="production"><var>&lt;color&gt;</var></a> type was used in this specification,
154-
then <a data-autolink="biblio" U00022="" data-biblio-type="informative" title="CSS3COLOR" href="#css3color">[CSS3COLOR]</a> would expand its definition.
154+
then <a data-autolink="biblio" data-biblio-type="informative" title="CSS3COLOR" href="#css3color">[CSS3COLOR]</a> would expand its definition.
155155

156156

157157
</p><h2 id="defining-variables" data-level="2"><span class="secno">2 </span>
@@ -217,7 +217,7 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
217217
accepting any value that the core syntax of CSS allows,
218218
plus the CDO and CDC tokens (written "&lt;!--" and "--&gt;").
219219
The <dfn id="value-production">&lt;value&gt;</dfn> in its grammar corresponds to the "value" production
220-
in <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS 2.1 Chapter 4.1</a> <a data-autolink="biblio" U00022="" data-biblio-type="normative" title="CSS21" href="#css21">[CSS21]</a>,
220+
in <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS 2.1 Chapter 4.1</a> <a data-autolink="biblio" data-biblio-type="normative" title="CSS21" href="#css21">[CSS21]</a>,
221221
while <dfn id="cdo-production">&lt;CDO&gt;</dfn> and <dfn id="cdc-production">&lt;CDC&gt;</dfn> correspond to the tokens of the same name
222222
from the same chapter.
223223

@@ -361,20 +361,20 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
361361
two { var-bar: calc(var(foo) + 10px); }
362362
three { var-foo: calc(var(bar) + 10px); }
363363
</pre>
364-
<p> The <one> element defines a value for <a data-autolink="property" class="property" title="var-foo">var-foo</a>.
365-
The <two> element inherits this value,
364+
<p> The &lt;one&gt; element defines a value for <a data-autolink="property" class="property" title="var-foo">var-foo</a>.
365+
The &lt;two&gt; element inherits this value,
366366
and additionally assigns a value to <a data-autolink="property" class="property" title="var-bar">var-bar</a> using the <a data-autolink="maybe" class="css">foo</a> variable.
367367
Finally,
368-
the <three> element inherits the <a data-autolink="property" class="property" title="var-bar">var-bar</a> value
369-
</three></two></one><em>after</em> variable substitution
368+
the &lt;three&gt; element inherits the <a data-autolink="property" class="property" title="var-bar">var-bar</a> value
369+
<em>after</em> variable substitution
370370
(in other words, it sees the value <a data-autolink="maybe" class="css">calc(10px + 10px)</a>),
371371
and then redefines <a data-autolink="property" class="property" title="var-foo">var-foo</a> in terms of that value.
372-
Since the value it inherited for <a data-autolink="property" class="property" title="var-bar">var-bar</a> no longer contains a reference to the <a data-autolink="property" class="property" title="var-foo">var-foo</a> property defined on <one>,
372+
Since the value it inherited for <a data-autolink="property" class="property" title="var-bar">var-bar</a> no longer contains a reference to the <a data-autolink="property" class="property" title="var-foo">var-foo</a> property defined on &lt;one&gt;,
373373
defining <a data-autolink="property" class="property" title="var-foo">var-foo</a> using the <a data-autolink="maybe" class="css">var(bar)</a> variable is not cyclic,
374374
and actually defines a value that will eventually
375375
(when referenced as a variable in a normal property)
376376
resolve to <a data-autolink="maybe" class="css">30px</a>.
377-
</one></p></div>
377+
</p></div>
378378

379379

380380
<!--
@@ -582,12 +582,12 @@ <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
582582
p { background-color: red; }
583583
p { background-color: var(not-a-color); }
584584
</pre>
585-
<p> the <p> elements will have transparent backgrounds
585+
<p> the &lt;p&gt; elements will have transparent backgrounds
586586
(the initial value for <a data-autolink="property" class="property" title="background-color">background-color</a>),
587587
rather than red backgrounds.
588588
The same would happen if the variable itself was invalid.
589589

590-
</p></p><p> Note the difference between this
590+
</p><p> Note the difference between this
591591
and what happens if the author had just written <a data-autolink="maybe" class="css">background-color: 20px</a> directly in their stylesheet -
592592
that would be a normal syntax error,
593593
which would cause the rule to be discarded,
@@ -696,10 +696,15 @@ <h3 id="the-cssstyledeclaration-interface" data-level="4.1"><span class="secno">
696696
Otherwise, do nothing and return the empty string.
697697

698698
</p><div class="example">
699-
For example,
699+
<style scoped="">
700+
#var-code-examples td { padding: 2px; }
701+
#var-code-examples code { background: rgba(0,0,0,.05); display: inline-block; padding: 1px 2px; white-space: pre; }
702+
</style>
703+
704+
<p> For example,
700705
given the following style sheet:
701706

702-
<pre>div {
707+
</p><pre>div {
703708
var-foo: 16px;
704709
var-Bar: red;
705710
var-foo-bar: 50%;
@@ -744,10 +749,6 @@ <h3 id="the-cssstyledeclaration-interface" data-level="4.1"><span class="secno">
744749
and subtracts some unrelated JavaScript variable named "bar" from it,
745750
rather than just retrieving the value of <a data-autolink="property" class="property" title="var-foo-bar">var-foo-bar</a>.
746751
</td></tr></tbody></table>
747-
<style scoped="">
748-
#var-code-examples td { padding: 2px; }
749-
#var-code-examples code { background: rgba(0,0,0,.05); display: inline-block; padding: 1px 2px; white-space: pre; }
750-
</style>
751752
</div>
752753

753754
<div class="example">
@@ -806,7 +807,7 @@ <h3 class="no-ref" id="conventions">
806807
letters in this specification.
807808

808809
</p><p>All of the text of this specification is normative except sections
809-
explicitly marked as non-normative, examples, and notes. <a data-autolink="biblio" U00022="" data-biblio-type="normative" title="RFC2119" href="#rfc2119">[RFC2119]</a></p>
810+
explicitly marked as non-normative, examples, and notes. <a data-autolink="biblio" data-biblio-type="normative" title="RFC2119" href="#rfc2119">[RFC2119]</a></p>
810811

811812
<p>Examples in this specification are introduced with the words "for example"
812813
or are set apart from the normative text with <code>class="example"</code>,

‎css-variables/Overview.src.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -645,6 +645,11 @@ <h3 id='the-cssvariablesdeclaration-interface'>
645645
Otherwise, do nothing and return the empty string.
646646

647647
<div class='example'>
648+
<style scoped>
649+
#var-code-examples td { padding: 2px; }
650+
#var-code-examples code { background: rgba(0,0,0,.05); display: inline-block; padding: 1px 2px; white-space: pre; }
651+
</style>
652+
648653
For example,
649654
given the following style sheet:
650655

@@ -695,10 +700,6 @@ <h3 id='the-cssvariablesdeclaration-interface'>
695700
and subtracts some unrelated JavaScript variable named "bar" from it,
696701
rather than just retrieving the value of 'var-foo-bar'.
697702
</table>
698-
<style scoped>
699-
#var-code-examples td { padding: 2px; }
700-
#var-code-examples code { background: rgba(0,0,0,.05); display: inline-block; padding: 1px 2px; white-space: pre; }
701-
</style>
702703
</div>
703704

704705
<div class='example'>

0 commit comments

Comments
 (0)