8000 [css-values] Added and shuffled examples. · w3c/csswg-drafts@7069cc6 · GitHub
Skip to content

Commit 7069cc6

Browse files
tabatkinstabatkins
committed
[css-values] Added and shuffled examples.
1 parent 6f23217 commit 7069cc6

2 files changed

Lines changed: 46 additions & 35 deletions

File tree

‎css-values/Overview.html‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1720,6 +1720,17 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
17201720
<pre>em { font-style: toggle(italic, normal); }</pre>
17211721
</div>
17221722

1723+
<div class=example>
1724+
<p>The following example cycles markers for nested lists, so that a top
1725+
level list has ‘<code class=css>disc</code>’-shaped markers, but
1726+
nested lists use ‘<code class=css>circle</code>’, then ‘<code
1727+
class=css>square</code>’, then ‘<code class=css>box</code>’, and
1728+
then repeat through the list of marker shapes, starting again (for the
1729+
5th list deep) with ‘<code class=css>disc</code>’.
1730+
1731+
<pre>ul { list-style-type: toggle(disc, circle, square, box); }</pre>
1732+
</div>
1733+
17231734
<p>The syntax of the ‘<a href="#toggle"><code
17241735
class=css>toggle()</code></a>’ expression is:
17251736

@@ -1730,18 +1741,25 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
17301741
any of the values inside are not valid, then the entire ‘<a
17311742
href="#toggle"><code class=css>toggle()</code></a>’ expression is
17321743
invalid. The ‘<a href="#toggle"><code class=css>toggle()</code></a>’
1733-
expression may be used as the value of any property (but must be the only
1734-
component in that property's value).
1735-
1736-
<p class=note> Note that because toggled values are separated by commas,
1737-
they cannot themselves include top-level commas.
1744+
expression may be used as the value of any property, but must be the only
1745+
component in that property's value.
17381746

17391747
<p> The ‘<a href="#toggle"><code class=css>toggle()</code></a>’
17401748
notation is not allowed to be nested; nor may it contain ‘<a
17411749
href="#attr"><code class=css>attr()</code></a>’ or ‘<a
17421750
href="#calc"><code class=css>calc()</code></a>’ notations. Declarations
17431751
containing such constructs are invalid.
17441752

1753+
<div class=example> The following ‘<a href="#toggle"><code
1754+
class=css>toggle()</code></a>’ examples are all invalid:
1755+
<pre>
1756+
background-position: 10px toggle(50px, 100px);
1757+
/* toggle() must be the sole value of the property */
1758+
1759+
list-style-type: toggle(disc, 50px);
1760+
/* ''50px'' isn't a valid value of 'list-style-type' */</pre>
1761+
</div>
1762+
17451763
<p> To determine the computed value of ‘<a href="#toggle"><code
17461764
class=css>toggle()</code></a>’, first evaluate each argument as if it
17471765
were the sole value of the property in which ‘<a href="#toggle"><code
@@ -1758,18 +1776,6 @@ <h3 id=toggle-notation><span class=secno>8.2. </span> Toggling Between
17581776
class=css>toggle()</code></a>’ is the computed value that the first
17591777
argument represents.
17601778

1761-
<div class=example>
1762-
<p>The following example cycles markers for nested lists, so that a top
1763-
level list has <code>disc</code>-shaped markers, but nested lists use
1764-
<code>circle</code>, then <code>square</code>, then <code>box</code>, and
1765-
then repeat through the list of marker shapes, starting again (for the
1766-
5th list deep) with <code>disc</code>.
1767-
1768-
<pre>
1769-
ul { list-style-type: disc; }
1770-
ul ul { list-style-type: toggle(disc, circle, square, box); }</pre>
1771-
</div>
1772-
17731779
<p class=note> Note that ‘<a href="#toggle"><code
17741780
class=css>toggle()</code></a>’ explicitly looks at the computed value of
17751781
the parent, so it works even on non-inherited properties. This is similar

‎css-values/Overview.src.html‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1251,6 +1251,15 @@ <h3 id="toggle-notation">
12511251
<pre>em { font-style: toggle(italic, normal); }</pre>
12521252
</div>
12531253

1254+
<div class='example'>
1255+
<p>The following example cycles markers for nested lists,
1256+
so that a top level list has ''disc''-shaped markers,
1257+
but nested lists use ''circle'', then ''square'', then ''box'',
1258+
and then repeat through the list of marker shapes,
1259+
starting again (for the 5th list deep) with ''disc''.
1260+
1261+
<pre>ul { list-style-type: toggle(disc, circle, square, box); }</pre>
1262+
</div>
12541263

12551264
<p>The syntax of the ''toggle()'' expression is:
12561265

@@ -1262,17 +1271,24 @@ <h3 id="toggle-notation">
12621271
and that doesn't contain any top-level commas.
12631272
If any of the values inside are not valid,
12641273
then the entire ''toggle()'' expression is invalid.
1265-
The ''toggle()'' expression may be used as the value of any property
1266-
(but must be the only component in that property's value).
1267-
1268-
<p class='note'>
1269-
Note that because toggled values are separated by commas,
1270-
they cannot themselves include top-level commas.
1274+
The ''toggle()'' expression may be used as the value of any property,
1275+
but must be the only component in that property's value.
12711276

12721277
<p>
12731278
The ''toggle()'' notation is not allowed to be nested; nor may it
12741279
contain ''attr()'' or ''calc()'' notations.
1275-
Declarations containing such constructs are invalid.</p>
1280+
Declarations containing such constructs are invalid.
1281+
1282+
<div class="example">
1283+
The following ''toggle()'' examples are all invalid:
1284+
1285+
<pre>
1286+
background-position: 10px toggle(50px, 100px);
1287+
/* toggle() must be the sole value of the property */
1288+
1289+
list-style-type: toggle(disc, 50px);
1290+
/* ''50px'' isn't a valid value of 'list-style-type' */</pre>
1291+
</div>
12761292

12771293
<p>
12781294
To determine the computed value of ''toggle()'',
@@ -1287,17 +1303,6 @@ <h3 id="toggle-notation">
12871303
or there was no match,
12881304
the computed value of ''toggle()'' is the computed value that the first argument represents.
12891305

1290-
<div class='example'>
1291-
<p>The following example cycles markers for nested lists,
1292-
so that a top level list has <code>disc</code>-shaped markers,
1293-
but nested lists use <code>circle</code>, then <code>square</code>, then <code>box</code>,
1294-
and then repeat through the list of marker shapes,
1295-
starting again (for the 5th list deep) with <code>disc</code>.
1296-
<pre>
1297-
ul { list-style-type: disc; }
1298-
ul ul { list-style-type: toggle(disc, circle, square, box); }</pre>
1299-
</div>
1300-
13011306
<p class='note'>
13021307
Note that ''toggle()'' explicitly looks at the computed value of the parent,
13031308
so it works even on non-inherited properties.

0 commit comments

Comments
 (0)